From ac03348349853256c70185bfc39499c8ee3fb4f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 14 Dec 2021 23:19:46 +0100 Subject: [PATCH] Fix style and responsive issues --- src/components/atoms/Icon.svelte | 2 +- src/components/organisms/Footer.svelte | 6 --- src/style/_effects.scss | 2 +- src/style/atoms/_box-cta.scss | 2 +- src/style/atoms/_button-cart.scss | 21 ++++---- src/style/atoms/_button.scss | 5 -- src/style/molecules/_location.scss | 7 +-- .../molecules/_shop-locationswitcher.scss | 2 + src/style/organisms/_footer.scss | 48 +++++-------------- src/style/pages/_homepage.scss | 19 ++++---- 10 files changed, 45 insertions(+), 69 deletions(-) diff --git a/src/components/atoms/Icon.svelte b/src/components/atoms/Icon.svelte index f921d37..2b9fcc1 100644 --- a/src/components/atoms/Icon.svelte +++ b/src/components/atoms/Icon.svelte @@ -5,6 +5,6 @@ const classes = [$$props.class].join(' ').trim() - + \ No newline at end of file diff --git a/src/components/organisms/Footer.svelte b/src/components/organisms/Footer.svelte index acf8e8d..074740a 100644 --- a/src/components/organisms/Footer.svelte +++ b/src/components/organisms/Footer.svelte @@ -37,11 +37,5 @@ - -
- - Cetrucflotte logo - -
\ No newline at end of file diff --git a/src/style/_effects.scss b/src/style/_effects.scss index c8f213f..d162df4 100644 --- a/src/style/_effects.scss +++ b/src/style/_effects.scss @@ -51,7 +51,7 @@ perspective: 300px; } .text-split__line { - --offset-y: 100%; + --offset-y: 66%; transform-origin: bottom center; &:last-child { diff --git a/src/style/atoms/_box-cta.scss b/src/style/atoms/_box-cta.scss index 37b0e78..0066c56 100644 --- a/src/style/atoms/_box-cta.scss +++ b/src/style/atoms/_box-cta.scss @@ -39,7 +39,7 @@ } span { display: block; - margin-left: 24px; + margin-left: 20px; color: $color-secondary-light; text-align: left; font-weight: 300; diff --git a/src/style/atoms/_button-cart.scss b/src/style/atoms/_button-cart.scss index 294c025..73342c2 100644 --- a/src/style/atoms/_button-cart.scss +++ b/src/style/atoms/_button-cart.scss @@ -1,7 +1,6 @@ -// Cart .button-cart { - display: none; position: relative; + pointer-events: auto; @include bp (sm) { display: flex; @@ -14,11 +13,11 @@ // Icon svg { - color: #fff; display: block; - width: 27px; - height: 27px; + width: min(65%, 27px); + height: min(65%, 27px); margin-top: -3px; + color: #fff; } // Quantity label @@ -31,13 +30,19 @@ display: flex; align-items: center; justify-content: center; - width: 22px; - height: 22px; - font-size: rem(12px); + width: 18px; + height: 18px; + font-size: rem(11px); font-weight: 600; color: #fff; background-color: $color-secondary; border-radius: 100%; opacity: 1; + + @include bp (md) { + width: 22px; + height: 22px; + font-size: rem(12px); + } } } \ No newline at end of file diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss index 5546bbe..6f8364d 100644 --- a/src/style/atoms/_button.scss +++ b/src/style/atoms/_button.scss @@ -106,11 +106,6 @@ color: $color-text; background-color: darken($color-secondary, 7); } - .text-split__line { - &:last-child { - color: $color-primary-dark; - } - } } // Beige diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss index 1b53b2a..1c9fbda 100644 --- a/src/style/molecules/_location.scss +++ b/src/style/molecules/_location.scss @@ -69,12 +69,13 @@ // Location name &__name { display: block; - color: $color-secondary; - margin: 0 0 4px; + max-width: 304px; + margin: 0 0 0.3em; font-size: rem(32px); font-family: $font-serif; font-weight: 300; - line-height: 1.2; + line-height: 1.1; + color: $color-secondary; transition: color 0.75s var(--ease-quart); @include bp (sm) { diff --git a/src/style/molecules/_shop-locationswitcher.scss b/src/style/molecules/_shop-locationswitcher.scss index 58c2567..6407bf1 100644 --- a/src/style/molecules/_shop-locationswitcher.scss +++ b/src/style/molecules/_shop-locationswitcher.scss @@ -1,4 +1,6 @@ .shop-locationswitcher { + pointer-events: auto; + dt { color: $color-primary; font-weight: 400; diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss index 929841f..a889434 100644 --- a/src/style/organisms/_footer.scss +++ b/src/style/organisms/_footer.scss @@ -10,15 +10,17 @@ } .container { - align-items: center; justify-content: center; height: 100%; + + @include bp (sm) { + align-items: center; + } } // Site title &__title { - grid-column: span var(--columns); - grid-row: 1; + grid-column: 1 / span 4; display: block; margin-bottom: 40px; text-decoration: none; @@ -43,12 +45,14 @@ // Links &__links { - grid-column: span var(--columns); - grid-row: 2; + grid-column: 5 / span 3; + margin-left: auto; @include bp (sm) { - grid-column: 5 / span 16; + grid-column: 5 / span 19; grid-row: 1; + margin-left: auto; + margin-top: 0.15em; } ul { @@ -100,6 +104,8 @@ position: relative; } svg { + width: 1.2em; + height: auto; transition: color 0.35s; } @@ -111,34 +117,4 @@ } } } - - // Cetrucflotte logo - &__ctf { - grid-column: span var(--columns); - grid-row: 2; - margin-left: auto; - margin-top: auto; - max-width: 120px; - - @include bp (sm) { - grid-column: 19 / span 5; - grid-row: 1; - max-width: 112px; - margin-top: 0; - } - @include bp (md) { - max-width: 140px; - } - - img { - display: block; - width: 100%; - height: auto; - } - span { - font-size: rem(12px); - color: $color-lilas-bright; - margin-right: 24px; - } - } } \ No newline at end of file diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss index c837e1f..7597c6e 100644 --- a/src/style/pages/_homepage.scss +++ b/src/style/pages/_homepage.scss @@ -4,15 +4,18 @@ &__title { // Houses &--houses { - margin: -20px 0 0; + display: flex; + margin: -28px 0 0; color: $color-secondary; text-align: center; @include bp (sm) { - margin-top: -100px; - margin-left: calc(-1 * clamp(24px, 6vw, 64px)); + margin-top: calc(-1 * clamp(24px, 5vw, 104px)); } + .text-split { + margin-left: calc(-1 * clamp(24px, 5vw, 64px)); + } span { transition: none; letter-spacing: -0.06em; @@ -35,11 +38,11 @@ // Intro Section &__intro { + overflow: hidden; + padding-bottom: calc(96px + 20vw); background: linear-gradient(180deg, $color-tertiary 85%, $color-primary 100%), $color-tertiary; color: $color-text; text-align: center; - overflow: hidden; - padding-bottom: calc(96px + 5vw); @include bp (sm) { padding-bottom: calc(280px + 10vw); @@ -77,11 +80,11 @@ // Headline &__headline { max-width: 350px; - margin: 100px auto 0; + margin: clamp(24px, 10vw, 96px) auto 0; @include bp (sm) { max-width: 524px; - margin-top: 20px; + margin-top: 24px; } p { @@ -97,7 +100,7 @@ &__photos { position: relative; max-width: 2000px; - margin: calc(-1 * 96px + 5vw) 0 80px; + margin: calc(-1 * 96px - 4vw) 0 80px; @include bp (sm) { margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px);