-
diff --git a/src/routes/locations.svelte b/src/routes/locations.svelte
index 1cd389b..4b283c7 100644
--- a/src/routes/locations.svelte
+++ b/src/routes/locations.svelte
@@ -6,7 +6,7 @@
import Locations from '$components/organisms/Locations.svelte'
import Shop from '$components/organisms/Shop.svelte'
import Newsletter from '$components/organisms/Newsletter.svelte'
- import SiteTitle from '$components/atoms/SiteTitle.svelte'
+ import Heading from '$components/molecules/Heading.svelte'
export let photos: any
@@ -20,10 +20,9 @@
/>
-
-
- Explore the globe to discover unique locations across the world
-
+
diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte
index b787cf4..c6e86c5 100644
--- a/src/routes/subscribe.svelte
+++ b/src/routes/subscribe.svelte
@@ -1 +1,96 @@
-Subscribe
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/style/_typography.scss b/src/style/_typography.scss
index ae72df3..b4f5019 100644
--- a/src/style/_typography.scss
+++ b/src/style/_typography.scss
@@ -14,21 +14,29 @@
// House Name
.title-image {
- font-size: rem(88px);
+ font-size: rem(40px);
font-family: $font-serif;
line-height: 1;
color: $color-secondary;
+ @include bp (sm) {
+ font-size: clamp(#{rem(40px)}, 7vw, #{rem(88px)});
+ }
+
}
// House Number
.title-index {
- font-size: rem(280px);
+ font-size: rem(80px);
font-family: $font-serif;
letter-spacing: -0.05em;
font-weight: 200;
line-height: 1;
color: rgba($color-tertiary, 0.6);
+
+ @include bp (sm) {
+ font-size: clamp(#{rem(80px)}, 24vw, #{rem(280px)});
+ }
}
// Medium
@@ -46,10 +54,14 @@
// Small
.title-small {
color: $color-secondary;
- font-size: rem(28px);
+ font-size: rem(24px);
font-weight: 400;
line-height: 1.5;
font-family: $font-serif;
+
+ @include bp (sm) {
+ font-size: rem(28px);
+ }
}
@@ -73,9 +85,12 @@
line-height: 1.4;
@include bp (sm) {
- font-size: rem(28px);
+ font-size: rem(24px);
line-height: 1.5;
}
+ @include bp (md) {
+ font-size: rem(28px);
+ }
}
// Normal
@@ -94,8 +109,13 @@
// Photo date
.text-date {
- font-size: rem(16px);
- line-height: 1.4;
+ font-size: rem(14px);
+ line-height: 1.3;
+
+ @include bp (sm) {
+ font-size: rem(16px);
+ line-height: 1.4;
+ }
}
// Label
diff --git a/src/style/_variables.scss b/src/style/_variables.scss
index 98f7997..51f9648 100644
--- a/src/style/_variables.scss
+++ b/src/style/_variables.scss
@@ -46,7 +46,7 @@ $font-serif: "Magnolia", #{$replacement-serif};
$base-width: 1600 !default;
// Grid
-$cols-m: 12 !default;
+$cols-m: 8 !default;
$cols-d: 24 !default;
diff --git a/src/style/molecules/_heading.scss b/src/style/molecules/_heading.scss
new file mode 100644
index 0000000..bafdcb9
--- /dev/null
+++ b/src/style/molecules/_heading.scss
@@ -0,0 +1,27 @@
+.heading {
+ overflow: hidden;
+ color: $color-tertiary;
+ text-align: center;
+
+ // Title
+ h1 {
+ color: $color-secondary;
+ line-height: 1;
+ margin-top: 56px;
+
+ @include bp (sm) {
+ margin-top: 160px;
+ }
+ }
+ // Text
+ p {
+ max-width: 260px;
+ margin: 40px auto 0;
+ font-weight: 200;
+
+ @include bp (sm) {
+ margin: 72px auto 130px;
+ max-width: 600px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/style/molecules/_issue.scss b/src/style/molecules/_issue.scss
new file mode 100644
index 0000000..6d2f2f6
--- /dev/null
+++ b/src/style/molecules/_issue.scss
@@ -0,0 +1,36 @@
+.issue {
+ display: flex;
+ background-color: #fff;
+ border-radius: 6px;
+
+ a {
+ display: flex;
+ padding: 20px;
+ text-decoration: none;
+ }
+ // Image
+ img {
+ display: block;
+ width: 80px;
+ height: 56px;
+ margin-right: 16px;
+ }
+ // Title
+ dt {
+ color: $color-secondary;
+ font-size: rem(20px);
+ margin-bottom: 8px;
+ font-family: $font-serif;
+ font-weight: 400;
+ }
+ // Description
+ dd {
+ font-size: rem(16px);
+ color: $color-gray;
+ }
+ // Date
+ time {
+ opacity: 0.6;
+ font-size: rem(12px);
+ }
+}
\ No newline at end of file
diff --git a/src/style/organisms/_house.scss b/src/style/organisms/_house.scss
index 65147a5..065f9e8 100644
--- a/src/style/organisms/_house.scss
+++ b/src/style/organisms/_house.scss
@@ -1,22 +1,37 @@
.house {
- --columns: 20;
- grid-column-start: 3;
position: relative;
+ @include bp (sm) {
+ --columns: 20;
+ grid-column-start: 3;
+ }
+
a {
text-decoration: none;
}
// Information
&__info {
- grid-column: 4 / span 14;
- margin-bottom: 56px;
- max-width: 800px;
+ grid-column: 2 / span var(--columns);
+ margin-bottom: 32px;
+ padding: 0 20px;
+ max-width: min(540px, 85vw);
+
+ @include bp (sm) {
+ grid-column: 4 / span 14;
+ margin-bottom: 56px;
+ padding: 0;
+ max-width: 800px;
+ }
time {
display: block;
- margin-top: 24px;
+ margin-top: 16px;
color: $color-lightgray;
+
+ @include bp (sm) {
+ margin-top: 24px;
+ }
}
}
@@ -29,8 +44,11 @@
picture {
position: relative;
z-index: 3;
- border-radius: 8px;
overflow: hidden;
+
+ @include bp (sm) {
+ border-radius: 8px;
+ }
}
img {
display: block;
@@ -42,12 +60,17 @@
// Photo number
&__index {
+ position: absolute;
+ z-index: 1;
+ bottom: -64px;
+ right: 20px;
+ text-align: right;
+
@include bp (sm) {
- position: absolute;
- z-index: 1;
left: 112.5%;
width: 400px;
top: 50%;
+ bottom: auto;
text-align: left;
transform: translate3d(-50%, -50%, 0);
}
@@ -57,13 +80,20 @@
&:nth-child(even) {
.house {
&__photo {
- grid-column-start: 4;
+ @include bp (sm) {
+ grid-column-start: 4;
+ }
}
&__info {
- margin-left: auto;
- text-align: right;
+ @include bp (sm) {
+ margin-left: auto;
+ text-align: right;
+ }
}
&__index {
+ left: auto;
+ right: 20px;
+
@include bp (sm) {
right: auto;
left: -12%;
diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss
index 6dc3cc6..fa8b816 100644
--- a/src/style/pages/_location.scss
+++ b/src/style/pages/_location.scss
@@ -6,6 +6,7 @@
.location-page__intro {
position: relative;
background: $color-primary;
+ // padding-top: clamp(100px, 25vw, 400px);
@include bp (sm) {
padding-top: clamp(40px, 14vw, 320px);
@@ -16,21 +17,29 @@
// Houses Of Title
.title {
- grid-column: 1 / span var(--columns);
position: relative;
z-index: 2;
- display: flex;
- flex-flow: row wrap;
- align-items: baseline;
- justify-content: flex-start;
- max-width: clamp(300px, 80vw, 1120px);
+ grid-column: 1 / span var(--columns);
margin: 0 auto;
padding: 0 32px;
font-family: $font-serif;
line-height: 1;
text-transform: uppercase;
color: $color-lightpurple;
- font-size: rem(56px);
+ font-size: rem(52px);
+ text-align: center;
+ margin: min(360px, 60vw) auto;
+
+ @include bp (sm) {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: baseline;
+ justify-content: flex-start;
+ max-width: clamp(300px, 80vw, 1120px);
+ margin: 0 auto;
+ font-size: rem(56px);
+ text-align: left;
+ }
strong {
display: block;
@@ -42,11 +51,22 @@
.housesof {
grid-column: span var(--columns);
- display: flex;
- align-items: baseline;
+
+ @include bp (sm) {
+ display: flex;
+ align-items: baseline;
+ }
span {
- margin: 0 24px;
+ display: block;
+ font-size: rem(24px);
+ margin-top: 8px;
+
+ @include bp (sm) {
+ display: inline;
+ font-size: rem(56px);
+ margin: 0 24px;
+ }
}
}
.city {
@@ -58,25 +78,47 @@
// Description
&__description {
- --columns: 19;
- grid-column: 6 / span 19;
+ grid-column: span var(--columns);
position: relative;
z-index: 2;
- margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
+ margin-bottom: -8px;
background-color: $color-tertiary;
color: $color-text;
- border-radius: 8px 0 0 8px;
+ border-radius: 8px;
+
+ @include bp (sm) {
+ --columns: 19;
+ grid-column: 4 / span 21;
+ margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
+ }
+ @include bp (md) {
+ grid-column: 6 / span 19;
+ }
.wrap {
- grid-column: 3 / span 13;
+ grid-column: 2 / span 6;
max-width: 800px;
- padding: 128px 0;
+ padding: 50px 0;
+
+ @include bp (sm) {
+ grid-column: 3 / span 13;
+ padding: 72px 0;
+ }
+ @include bp (md) {
+ padding: 128px 0;
+ }
}
.info {
$text-color: rgba($color-text, 0.5);
- margin: 40px 0 64px;
+ margin: 32px 0 40px;
color: $text-color;
+ line-height: 0.8;
+
+ @include bp (sm) {
+ margin: 40px 0 64px;
+ line-height: 1.3;
+ }
a {
color: $text-color;
@@ -97,6 +139,13 @@
.button {
margin-right: 16px;
+ margin-bottom: 16px;
+ font-size: rem(16px);
+
+ @include bp (sm) {
+ margin-bottom: 0;
+ font-size: rem(18px);
+ }
}
}
}
@@ -108,7 +157,7 @@
z-index: 1;
top: 0;
left: 50%;
- width: clamp(320px, 100vw, 1920px);
+ width: clamp(320px, 100vw, 2560px);
height: 100%;
background: 0 0 var(--illus-mobile) no-repeat;
background-size: 100% auto;
@@ -126,25 +175,33 @@
// Houses
&__houses {
background-color: #fff;
- padding-top: 240px;
+ padding-top: 80px;
+
+ @include bp (sm) {
+ padding-top: 240px;
+ }
}
// House
.house {
&:not(:last-child) {
- margin-bottom: 120px;
+ margin-bottom: 86px;
+
+ @include bp (sm) {
+ margin-bottom: 120px;
+ }
}
}
// Next photos section
&__next {
- margin-top: 80px;
- padding: 64px 0 48px;
+ margin-top: 135px;
+ padding: 72px 0 56px;
background-color: $color-tertiary;
text-align: center;
@include bp (sm) {
- margin-top: -120px;
+ margin-top: calc(-1 * clamp(64px, 8vw, 120px));
padding-top: 240px;
padding-bottom: 104px;
}
@@ -170,13 +227,17 @@
&__progress {
position: relative;
display: inline-block;
- font-size: clamp(80px, 16vw, #{rem(160px)});
+ font-size: rem(88px);
color: rgba($color-text, 0.2);
font-family: $font-serif;
font-weight: 200;
line-height: 1;
letter-spacing: -0.05em;
+ @include bp (sm) {
+ font-size: clamp(80px, 16vw, #{rem(160px)});
+ }
+
span {
display: inline-block;
margin: 0 -10px;
@@ -216,4 +277,4 @@
font-size: rem(28px);
}
}
-}
\ No newline at end of file
+}
diff --git a/src/style/pages/_subscribe.scss b/src/style/pages/_subscribe.scss
new file mode 100644
index 0000000..e232a4c
--- /dev/null
+++ b/src/style/pages/_subscribe.scss
@@ -0,0 +1,49 @@
+// Subscribe Page
+.subscribe {
+ // Modules
+ .grid-modules {
+ grid-column: span var(--columns);
+ margin: 96px 20px 0;
+ padding-bottom: 40px;
+
+ @include bp (sm) {
+ grid-column: 2 / span 22;
+ margin: 200px 0 72px;
+ }
+ }
+
+ // Past Issues
+ &__issues {
+ margin: 64px auto 0;
+ padding: 0 20px;
+
+ @include bp (sm) {
+ max-width: 800px;
+ padding: 0;
+ margin-top: 0;
+ }
+
+ // Title
+ h2 {
+ text-align: center;
+ }
+
+ ul {
+ margin-top: 32px;
+
+ @include bp (sm) {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 16px;
+ }
+ }
+ li {
+ display: block;
+ margin-bottom: 16px;
+
+ @include bp (sm) {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/style/style.scss b/src/style/style.scss
index de16b33..6ae7ba0 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -24,6 +24,7 @@
@import "pages/photos";
@import "pages/explore";
@import "pages/credits";
+@import "pages/subscribe";
@import "pages/location";
// Modules
@@ -44,6 +45,8 @@
@import "molecules/photo-card";
@import "molecules/location";
@import "molecules/switcher";
+@import "molecules/heading";
+@import "molecules/issue";
// Organisms
@import "organisms/locations";
diff --git a/static/images/issue-1.jpg b/static/images/issue-1.jpg
new file mode 100644
index 0000000..92b1581
Binary files /dev/null and b/static/images/issue-1.jpg differ