diff --git a/src/components/molecules/Heading.svelte b/src/components/molecules/Heading.svelte new file mode 100644 index 0000000..7955929 --- /dev/null +++ b/src/components/molecules/Heading.svelte @@ -0,0 +1,12 @@ + + +
+ +

{text}

+
\ No newline at end of file diff --git a/src/components/organisms/Shop.svelte b/src/components/organisms/Shop.svelte index 98a26e8..83186a1 100644 --- a/src/components/organisms/Shop.svelte +++ b/src/components/organisms/Shop.svelte @@ -14,7 +14,6 @@
- {shop.module_image.title}
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