From d016b856090cf6f2938f8a0439d3b57b52d1f047 Mon Sep 17 00:00:00 2001 From: Tixie Date: Thu, 2 Mar 2023 09:48:45 +0100 Subject: [PATCH] Add responsive --- src/css/2-components/_buttons.scss | 12 ++++++++++ src/css/2-components/_notifications.scss | 1 + src/css/3-base/_04-main.scss | 5 +++- src/css/3-base/_06-header.scss | 3 ++- src/css/5-pages/_counter.scss | 5 +++- src/css/8-rwd/_rwd-small.scss | 30 ++++++++++++++++++++++-- src/index.njk | 12 +++++----- 7 files changed, 57 insertions(+), 11 deletions(-) diff --git a/src/css/2-components/_buttons.scss b/src/css/2-components/_buttons.scss index d8a3ebe..2285325 100755 --- a/src/css/2-components/_buttons.scss +++ b/src/css/2-components/_buttons.scss @@ -27,6 +27,7 @@ $btn-border-width: 0.1rem; color: #fff; font: inherit; font-size: 1.9rem; + font-size: clamp(1.5rem, 2vw, 1.89rem); font-weight: 900; gap: 0.5em; line-height: ($line-height + em); @@ -97,11 +98,14 @@ $btn-border-width: 0.1rem; .btn--light:link, .btn--light:visited { padding: 2rem 4rem; + padding: clamp(1.5rem, 2vw, 2rem) clamp(2rem, 3.1vw, 4rem); background-color: $btn-light; box-shadow: none; color: $color-purple-1; font-size: 2.4rem; + font-size: clamp(1.6rem, 1.8vw, 2.4rem); font-weight: 500; + line-height: 1.3em; } .btn--light:hover, @@ -118,16 +122,24 @@ $btn-border-width: 0.1rem; .btn--invisible:visited { display: inline-flex; padding: 1.5rem; + padding: clamp(0.8rem, 2vw, 1.5rem); border: none; margin: 0; background: none; cursor: pointer; } +.btn--invisible svg { + width: 4.2rem; + width: clamp(3.5rem, 5vw, 4.2rem); + height: auto; +} + /* size -------------------------------------------------------------- */ .btn--big { font-size: 3.8rem; + font-size: clamp(2.5rem, 3.8vw, 3.8rem); line-height: 1.15em; } diff --git a/src/css/2-components/_notifications.scss b/src/css/2-components/_notifications.scss index 406daf3..a24bf9a 100755 --- a/src/css/2-components/_notifications.scss +++ b/src/css/2-components/_notifications.scss @@ -20,6 +20,7 @@ $notif-error: $color-red; padding: 2rem 3rem; border: 0.2rem solid currentcolor; font-size: 1.6rem; + font-size: clamp(1.3rem, 1.3vw, 1.6rem); line-height: 1.3em; } diff --git a/src/css/3-base/_04-main.scss b/src/css/3-base/_04-main.scss index 1516dcd..6925ab4 100755 --- a/src/css/3-base/_04-main.scss +++ b/src/css/3-base/_04-main.scss @@ -33,15 +33,18 @@ body { .title-1 { color: $color-purple-1; font-size: 4.8rem; + font-size: clamp(3.7rem, 3.5vw, 4.8rem); font-weight: 900; line-height: 1.2em; } .title-2 { padding-top: 7rem; + padding-top: clamp(4rem, 5vw, 7rem); margin-top: 0; - margin-bottom: 3rem; + margin-bottom: clamp(2rem, 2.3vw, 3rem); font-size: 3.8rem; + font-size: clamp(2.5rem, 4.3vw, 3.8rem); font-weight: 900; line-height: 1.2em; } diff --git a/src/css/3-base/_06-header.scss b/src/css/3-base/_06-header.scss index 43b7de8..db10659 100755 --- a/src/css/3-base/_06-header.scss +++ b/src/css/3-base/_06-header.scss @@ -7,7 +7,7 @@ display: flex; justify-content: center; padding-top: 3.3rem; - margin-bottom: -3rem; + margin-bottom: clamp(-2rem, -2.5vw, -3rem); } .header-title, @@ -19,6 +19,7 @@ box-shadow: 0 0.4rem 0.4rem rgb(150 152 156 / 61%); color: $color-purple-1; font-size: 2.6rem; + font-size: clamp(1.8rem, 2vw, 2.6rem); font-weight: 900; line-height: 1.19em; transform: rotate(-0.5deg); diff --git a/src/css/5-pages/_counter.scss b/src/css/5-pages/_counter.scss index 4507784..cec95a6 100644 --- a/src/css/5-pages/_counter.scss +++ b/src/css/5-pages/_counter.scss @@ -5,6 +5,8 @@ .counter { width: min-content; color: $color-purple-2; + font-size: 1.8rem; + font-size: clamp(1.4rem, 1.4vw, 1.8rem); font-weight: 900; line-height: 1.3em; text-align: center; @@ -13,7 +15,7 @@ .counter-number { display: block; color: $color-purple-1; - font-size: 9.8rem; + font-size: clamp(5rem, 7vw, 9.8rem); font-variant-numeric: tabular-nums; font-weight: 900; line-height: 1.2em; @@ -26,6 +28,7 @@ margin-bottom: 20%; color: $color-purple-1; font-size: 4.8rem; + font-size: clamp(2rem, 2.3vw, 4.8rem); font-style: normal; line-height: 1.2em; text-transform: uppercase; diff --git a/src/css/8-rwd/_rwd-small.scss b/src/css/8-rwd/_rwd-small.scss index 5b0c74e..57b01af 100755 --- a/src/css/8-rwd/_rwd-small.scss +++ b/src/css/8-rwd/_rwd-small.scss @@ -2,5 +2,31 @@ // rwd small // ------------------------------------------------------------- -// @media (max-width: $small) { -// } +@media (max-width: $small) { + .banner-layout { + display: block; + } + + .banner-layout > * { + width: 100%; + } + + .counter { + width: 90%; + margin: 0 auto; + margin-top: 1.5rem; + } + + .counter-number { + line-height: 1.5em; + } + + .counter-strikeeeee-lol { + margin-bottom: 2rem; + } + + .counter-number + .separator { + margin-top: 0; + margin-bottom: 0; + } +} diff --git a/src/index.njk b/src/index.njk index 34d9f16..b367c50 100644 --- a/src/index.njk +++ b/src/index.njk @@ -51,12 +51,12 @@ permalink:

Partagez le site !

- {% include 'icons/social/twitter.svg' %} - {% include 'icons/social/facebook.svg' %} - {# {% include 'icons/social/instagram.svg' %} #} - {% include 'icons/social/whatsapp.svg' %} - {% include 'icons/social/telegram.svg' %} - {% include 'icons/social/linkedin.svg' %} + + + {# #} + + +