From 9ba96efd6dd00783c0a4660eb079b5915e87ec04 Mon Sep 17 00:00:00 2001 From: Shelby Kay Date: Tue, 12 Oct 2021 18:26:02 +0200 Subject: [PATCH] Add responsive to location page --- src/style/_typography.scss | 26 ++++++-- src/style/organisms/_house.scss | 54 ++++++++++++---- src/style/pages/_location.scss | 111 +++++++++++++++++++++++++------- 3 files changed, 149 insertions(+), 42 deletions(-) diff --git a/src/style/_typography.scss b/src/style/_typography.scss index ae72df3..c8f7faf 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 @@ -73,9 +81,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 +105,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/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 +}