diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte index 933307c..0a1ed63 100644 --- a/src/routes/[country]/[location]/index.svelte +++ b/src/routes/[country]/[location]/index.svelte @@ -8,6 +8,7 @@ import Button from '$components/atoms/Button.svelte' import IconEarth from '$components/atoms/IconEarth.svelte' import Image from '$components/atoms/Image.svelte' + import Newsletter from '$components/organisms/Newsletter.svelte' export let data: any export let photos: any[] @@ -169,7 +170,7 @@
-
diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss index 7cc0087..ed75ca3 100644 --- a/src/style/pages/_location.scss +++ b/src/style/pages/_location.scss @@ -146,10 +146,26 @@ // Next photos section &__next { - margin-top: -120px; - padding: 240px 0 104px; + margin-top: 80px; + padding: 64px 0 48px; background-color: $color-tertiary; text-align: center; + + @include bp (sm) { + margin-top: -120px; + padding-top: 240px; + padding-bottom: 104px; + } + + // Newsletter block + .newsletter { + max-width: 600px; + margin: 56px auto 0; + + @include bp (sm) { + margin-top: 72px; + } + } } // Pagination @@ -162,7 +178,7 @@ &__progress { position: relative; display: inline-block; - font-size: rem(160px); + font-size: clamp(80px, 16vw, #{rem(160px)}); color: rgba($color-text, 0.2); font-family: $font-serif; font-weight: 200; @@ -174,7 +190,7 @@ margin: 0 -10px; } } - p { + & > p { display: block; margin: 16px auto 0; text-align: center; @@ -186,7 +202,7 @@ font-size: rem(14px); } &__more { - color: $color-secondary; + color: $color-secondary !important; } // Disabled state