diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index 5cfd045..82e42fa 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -3,18 +3,18 @@ // Intro Section &__intro { overflow: hidden; - margin-bottom: 72px; + margin-bottom: clamp(32px, 7.5vw, 96px); color: $color-text; text-align: center; // Title h1 { - margin-top: -20px; + margin: -20px 0 48px; color: $color-secondary; line-height: 1; @include bp (sm) { - margin-top: -100px; + margin: -100px 0 0; } } // Text @@ -59,7 +59,7 @@ justify-content: center; align-items: center; min-height: 64px; - margin: 20px 0; + margin-top: 20px; padding: 0 12px; background: $color-primary-darker; border-radius: 50vh; @@ -69,6 +69,7 @@ } @include bp (sm) { height: 72px; + margin-top: 0; padding: 28px 32px; } @@ -145,12 +146,14 @@ display: flex; align-items: center; justify-content: center; + margin-top: 20px; @include bp (sm) { position: absolute; top: 50%; right: 56px; transform: translateY(-50%); + margin-top: 0; } a { @@ -202,7 +205,7 @@ @include bp (sm) { margin: 0 30px; - padding: 64px 0; + padding: clamp(40px, 5vw, 64px) 0; } &:before, &:after { @@ -241,11 +244,11 @@ } @include bp (sm) { // Swich to template: 2-1-1 / 1-1-2 / 4 - grid-column: 2 / span 22; grid-template-columns: repeat(4, 1fr); grid-gap: 24px; } @include bp (sd) { + grid-column: 2 / span 22; grid-gap: 40px; } @@ -366,10 +369,12 @@ justify-content: center; @include bp (sm) { + justify-content: space-between; + margin: clamp(56px, 4.5vw, 80px) 0; + } + @include bp (sd) { --columns: 22; grid-column: 2 / span var(--columns); - justify-content: space-between; - margin: 80px 0; } // Updated Date @@ -381,6 +386,7 @@ font-weight: 300; text-align: center; margin: 24px 0 48px; + line-height: 1.35; @include bp (sm) { grid-column: span 5; @@ -388,6 +394,14 @@ text-align: left; margin: 0; } + + time { + display: block; + + @include bp (sd) { + display: inline; + } + } } // See More Photos @@ -397,7 +411,10 @@ margin: 0 auto; @include bp (sm) { - grid-column: 6 / span 12; + grid-column: 7 / span 12; + } + @include bp (sd) { + grid-column-start: 6; } } @@ -406,18 +423,31 @@ grid-column: span var(--columns); grid-row: 3; text-align: center; - color: rgba($color-gray, 0.3); + color: rgba($color-text, 0.3); font-family: $font-serif; font-size: rem(64px); + font-weight: 200; line-height: 1; letter-spacing: -0.05em; @include bp (sm) { - grid-column: 16 / span 7; + grid-column: 18 / span 7; grid-row: 1; margin-left: auto; text-align: right; } + @include bp (sd) { + grid-column-start: 16; + } + + span { + display: inline-block; + margin: 0 -6px; + + &:last-child { + margin-right: 0; + } + } } } @@ -426,7 +456,7 @@ grid-column: span var(--columns); margin-bottom: 0; - @include bp (sm) { + @include bp (sd) { grid-column: 2 / span 22; } }