From dc4eaca3122b9e5dd463481e47a8b4aa6a1388ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Thu, 23 Jun 2022 20:08:10 +0200 Subject: [PATCH] Revert and fix location page styling (woops) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Forgot that one! 🫢 --- src/routes/[country]/[location]/index.svelte | 2 +- src/style/molecules/_pagination.scss | 17 +- src/style/pages/_location.scss | 400 ++++++++++--------- 3 files changed, 204 insertions(+), 215 deletions(-) diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte index 40ec85e..c657b54 100644 --- a/src/routes/[country]/[location]/index.svelte +++ b/src/routes/[country]/[location]/index.svelte @@ -294,7 +294,7 @@ {#if !ended}

See more photos

{:else} -

You've seen it all!

+

You've seen it all!

{/if} diff --git a/src/style/molecules/_pagination.scss b/src/style/molecules/_pagination.scss index 0188f16..6866a72 100644 --- a/src/style/molecules/_pagination.scss +++ b/src/style/molecules/_pagination.scss @@ -53,20 +53,7 @@ // More button :global(.more) { - color: $color-secondary !important; - } - - // Message - :global(.message) { - padding: clamp(96px, 24vw, 360px) 0 clamp(96px, 16vw, 280px); - text-align: center; - color: $color-text; - font-size: rem(24px); - font-weight: 200; - line-height: 1.4; - - @include bp (sm) { - font-size: rem(28px); - } + color: $color-secondary; + font-weight: 500; } } \ No newline at end of file diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss index 765bd55..2a6659e 100644 --- a/src/style/pages/_location.scss +++ b/src/style/pages/_location.scss @@ -1,234 +1,236 @@ -// Location Page :global(.location-page) { background: #fff; +} - // // Intro - // &__intro { - // position: relative; - // background: $color-primary; +// Location Page +.location-page { + // Intro + &__intro { + position: relative; + background: $color-primary; - // @include bp (sm) { - // padding-top: clamp(40px, 14vw, 320px); - // } - // @include bp (lg) { - // padding-top: clamp(40px, 18vw, 320px); - // } + @include bp (sm) { + padding-top: clamp(40px, 14vw, 320px); + } + @include bp (lg) { + padding-top: clamp(40px, 18vw, 320px); + } - // // Houses Of Title - // .title { - // position: relative; - // z-index: 2; - // 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: clamp(48px, 12vw, 160px); - // text-align: center; - // margin: min(360px, 60vw) auto; + // Houses Of Title + .title { + position: relative; + z-index: 2; + 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: clamp(48px, 12vw, 160px); + text-align: center; + margin: min(360px, 60vw) auto; - // @include bp (sm) { - // display: flex; - // flex-flow: row wrap; - // align-items: baseline; - // justify-content: center; - // max-width: clamp(300px, 80vw, 1120px); - // margin: 0 auto; - // padding: 0; - // } + @include bp (sm) { + display: flex; + flex-flow: row wrap; + align-items: baseline; + justify-content: center; + max-width: clamp(300px, 80vw, 1120px); + margin: 0 auto; + padding: 0; + } - // strong { - // display: block; - // color: $color-secondary; - // font-weight: 300; - // text-transform: none; - // } + strong { + display: block; + color: $color-secondary; + font-weight: 300; + text-transform: none; + } - // .housesof { - // grid-column: span var(--columns); + .housesof { + grid-column: span var(--columns); - // @include bp (sm) { - // display: flex; - // align-items: baseline; - // // margin-right: auto; - // // margin-left: -15vw; - // } + @include bp (sm) { + display: flex; + align-items: baseline; + // margin-right: auto; + // margin-left: -15vw; + } - // span { - // display: block; - // font-size: 0.35em; - // margin-top: 8px; + span { + display: block; + font-size: 0.35em; + margin-top: 8px; - // @include bp (sm) { - // display: inline; - // margin: 0 24px; - // } - // } - // } - // .city { - // text-align: center; + @include bp (sm) { + display: inline; + margin: 0 24px; + } + } + } + .city { + text-align: center; - // @include bp (sm) { - // // margin-left: 15vw; - // // width: 80%; - // // padding-left: min(400px, 16vw); - // } - // } - // } - // } + @include bp (sm) { + // margin-left: 15vw; + // width: 80%; + // padding-left: min(400px, 16vw); + } + } + } + } - // // Description - // &__description { - // grid-column: span var(--columns); - // position: relative; - // z-index: 2; - // margin-bottom: -8px; - // background-color: $color-tertiary; - // color: $color-text; - // border-radius: 8px; + // Description + &__description { + grid-column: span var(--columns); + position: relative; + z-index: 2; + margin-bottom: -8px; + background-color: $color-tertiary; + color: $color-text; + 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)); - // border-radius: 8px 0 0 8px; - // } - // @include bp (md) { - // grid-column: 6 / span 19; - // } + @include bp (sm) { + --columns: 19; + grid-column: 4 / span 21; + margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px)); + border-radius: 8px 0 0 8px; + } + @include bp (md) { + grid-column: 6 / span 19; + } - // .wrap { - // grid-column: 2 / span 6; - // max-width: 800px; - // padding: 50px 0; + .wrap { + grid-column: 2 / span 6; + max-width: 800px; + padding: 50px 0; - // @include bp (sm) { - // grid-column: 3 / span 13; - // padding: 72px 0; - // } - // @include bp (md) { - // padding: 128px 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: 32px 0 40px; - // color: $text-color; - // line-height: 0.8; + .info { + $text-color: rgba($color-text, 0.5); + margin: 32px 0 40px; + color: $text-color; + line-height: 0.8; - // @include bp (sm) { - // margin: 40px 0 64px; - // line-height: 1.3; - // } + @include bp (sm) { + margin: 40px 0 64px; + line-height: 1.3; + } - // a { - // color: $text-color; + a { + color: $text-color; - // &:hover { - // color: $color-secondary; - // } - // } + &:hover { + color: $color-secondary; + } + } - // & > * { - // display: inline-block; - // vertical-align: middle; - // } - // } - // .ctas { - // display: flex; - // flex-wrap: wrap; + & > * { + display: inline-block; + vertical-align: middle; + } + } + :global(.ctas) { + display: flex; + flex-wrap: wrap; - // .button { - // margin-right: 16px; - // margin-bottom: 16px; + :global(.button) { + margin-right: 16px; + margin-bottom: 16px; - // @include bp (sm) { - // margin-bottom: 0; - // } - // } - // } - // } + @include bp (sm) { + margin-bottom: 0; + } + } + } + } - // // Illustration - // &__illustration { - // pointer-events: none; - // position: absolute; - // z-index: 1; - // top: 0; - // left: 0; - // right: 0; - // width: clamp(320px, 100vw, 2560px); - // height: 100%; - // margin: 0 auto; - // overflow: hidden; - // transform-origin: top center; + // Illustration + &__illustration { + pointer-events: none; + position: absolute; + z-index: 1; + top: 0; + left: 0; + right: 0; + width: clamp(320px, 100vw, 2560px); + height: 100%; + margin: 0 auto; + overflow: hidden; + transform-origin: top center; - // /* Bottom fading gradient for illustration */ - // @include bp (sm) { - // $mask: linear-gradient(180deg,rgba(0,0,0) 0%,rgb(0,0,0) 70%,rgba(0,0,0,0) 100%); - // -webkit-mask-image: $mask; - // mask-image: $mask; - // } + /* Bottom fading gradient for illustration */ + @include bp (sm) { + $mask: linear-gradient(180deg,rgba(0,0,0) 0%,rgb(0,0,0) 70%,rgba(0,0,0,0) 100%); + -webkit-mask-image: $mask; + mask-image: $mask; + } - // img { - // display: block; - // width: 100%; - // height: auto; - // object-fit: contain; - // pointer-events: none; - // user-select: none; - // transform: translate3d(0, var(--parallax-y), 0); - // transition: transform 0.7s var(--ease-quart); - // will-change: transform, opacity; - // } - // } + img { + display: block; + width: 100%; + height: auto; + object-fit: contain; + pointer-events: none; + user-select: none; + transform: translate3d(0, var(--parallax-y), 0); + transition: transform 0.7s var(--ease-quart); + will-change: transform, opacity; + } + } - // // Houses - // &__houses { - // background-color: #fff; - // padding-top: 80px; + // Houses + &__houses { + background-color: #fff; + padding-top: 80px; - // @include bp (sm) { - // padding-top: 240px; - // } + @include bp (sm) { + padding-top: 240px; + } - // // House - // :global(.house:not(:last-child)) { - // margin-bottom: 72px; + // House + :global(.house:not(:last-child)) { + margin-bottom: 72px; - // @include bp (sm) { - // margin-bottom: 88px; - // } - // @include bp (md) { - // margin-bottom: 120px; - // } - // } - // } + @include bp (sm) { + margin-bottom: 88px; + } + @include bp (md) { + margin-bottom: 120px; + } + } + } - // // Next photos section - // &__next { - // margin-top: 135px; - // padding: 72px 0 56px; - // background-color: $color-tertiary; - // text-align: center; + // Next photos section + &__next { + margin-top: 135px; + padding: 72px 0 56px; + background-color: $color-tertiary; + text-align: center; - // @include bp (sm) { - // margin-top: calc(-1 * clamp(64px, 8vw, 120px)); - // padding-top: 240px; - // padding-bottom: 104px; - // } + @include bp (sm) { + margin-top: calc(-1 * clamp(64px, 8vw, 120px)); + padding-top: 240px; + padding-bottom: 104px; + } - // // Newsletter block - // :global(.newsletter) { - // max-width: 600px; - // margin: 56px auto 0; + // Newsletter block + :global(.newsletter) { + max-width: 600px; + margin: 56px auto 0; - // @include bp (sm) { - // margin-top: 72px; - // } - // } - // } + @include bp (sm) { + margin-top: 72px; + } + } + } } \ No newline at end of file