GuerillaStudio/compteur-de-greve
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/compteur-de-greve.git synced 2024-10-09 05:19:02 +00:00
Code Issues Activity

Add responsive

Browse source
This commit is contained in:
Tixie 2023-03-02 09:48:45 +01:00
parent ea849aacc6
commit d016b85609
7 changed files with 57 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/css/2-components/_buttons.scss
View file

@ -27,6 +27,7 @@ $btn-border-width: 0.1rem;
color: #fff; color: #fff;
font: inherit; font: inherit;
font-size: 1.9rem; font-size: 1.9rem;
font-size: clamp(1.5rem, 2vw, 1.89rem);
font-weight: 900; font-weight: 900;
gap: 0.5em; gap: 0.5em;
line-height: ($line-height + em); line-height: ($line-height + em);
@ -97,11 +98,14 @@ $btn-border-width: 0.1rem;
.btn--light:link, .btn--light:link,
.btn--light:visited { .btn--light:visited {
padding: 2rem 4rem; padding: 2rem 4rem;
padding: clamp(1.5rem, 2vw, 2rem) clamp(2rem, 3.1vw, 4rem);
background-color: $btn-light; background-color: $btn-light;
box-shadow: none; box-shadow: none;
color: $color-purple-1; color: $color-purple-1;
font-size: 2.4rem; font-size: 2.4rem;
font-size: clamp(1.6rem, 1.8vw, 2.4rem);
font-weight: 500; font-weight: 500;
line-height: 1.3em;
} }
.btn--light:hover, .btn--light:hover,
@ -118,16 +122,24 @@ $btn-border-width: 0.1rem;
.btn--invisible:visited { .btn--invisible:visited {
display: inline-flex; display: inline-flex;
padding: 1.5rem; padding: 1.5rem;
padding: clamp(0.8rem, 2vw, 1.5rem);
border: none; border: none;
margin: 0; margin: 0;
background: none; background: none;
cursor: pointer; cursor: pointer;
} }
.btn--invisible svg {
width: 4.2rem;
width: clamp(3.5rem, 5vw, 4.2rem);
height: auto;
}
/* size /* size
-------------------------------------------------------------- */ -------------------------------------------------------------- */
.btn--big { .btn--big {
font-size: 3.8rem; font-size: 3.8rem;
font-size: clamp(2.5rem, 3.8vw, 3.8rem);
line-height: 1.15em; line-height: 1.15em;
} }

1
src/css/2-components/_notifications.scss
View file

@ -20,6 +20,7 @@ $notif-error: $color-red;
padding: 2rem 3rem; padding: 2rem 3rem;
border: 0.2rem solid currentcolor; border: 0.2rem solid currentcolor;
font-size: 1.6rem; font-size: 1.6rem;
font-size: clamp(1.3rem, 1.3vw, 1.6rem);
line-height: 1.3em; line-height: 1.3em;
} }

5
src/css/3-base/_04-main.scss
View file

@ -33,15 +33,18 @@ body {
.title-1 { .title-1 {
color: $color-purple-1; color: $color-purple-1;
font-size: 4.8rem; font-size: 4.8rem;
font-size: clamp(3.7rem, 3.5vw, 4.8rem);
font-weight: 900; font-weight: 900;
line-height: 1.2em; line-height: 1.2em;
} }
.title-2 { .title-2 {
padding-top: 7rem; padding-top: 7rem;
padding-top: clamp(4rem, 5vw, 7rem);
margin-top: 0; margin-top: 0;
margin-bottom: 3rem; margin-bottom: clamp(2rem, 2.3vw, 3rem);
font-size: 3.8rem; font-size: 3.8rem;
font-size: clamp(2.5rem, 4.3vw, 3.8rem);
font-weight: 900; font-weight: 900;
line-height: 1.2em; line-height: 1.2em;
} }

3
src/css/3-base/_06-header.scss
View file

@ -7,7 +7,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 3.3rem; padding-top: 3.3rem;
margin-bottom: -3rem; margin-bottom: clamp(-2rem, -2.5vw, -3rem);
} }
.header-title, .header-title,
@ -19,6 +19,7 @@
box-shadow: 0 0.4rem 0.4rem rgb(150 152 156 / 61%); box-shadow: 0 0.4rem 0.4rem rgb(150 152 156 / 61%);
color: $color-purple-1; color: $color-purple-1;
font-size: 2.6rem; font-size: 2.6rem;
font-size: clamp(1.8rem, 2vw, 2.6rem);
font-weight: 900; font-weight: 900;
line-height: 1.19em; line-height: 1.19em;
transform: rotate(-0.5deg); transform: rotate(-0.5deg);

5
src/css/5-pages/_counter.scss
View file

@ -5,6 +5,8 @@
.counter { .counter {
width: min-content; width: min-content;
color: $color-purple-2; color: $color-purple-2;
font-size: 1.8rem;
font-size: clamp(1.4rem, 1.4vw, 1.8rem);
font-weight: 900; font-weight: 900;
line-height: 1.3em; line-height: 1.3em;
text-align: center; text-align: center;
@ -13,7 +15,7 @@
.counter-number { .counter-number {
display: block; display: block;
color: $color-purple-1; color: $color-purple-1;
font-size: 9.8rem; font-size: clamp(5rem, 7vw, 9.8rem);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-weight: 900; font-weight: 900;
line-height: 1.2em; line-height: 1.2em;
@ -26,6 +28,7 @@
margin-bottom: 20%; margin-bottom: 20%;
color: $color-purple-1; color: $color-purple-1;
font-size: 4.8rem; font-size: 4.8rem;
font-size: clamp(2rem, 2.3vw, 4.8rem);
font-style: normal; font-style: normal;
line-height: 1.2em; line-height: 1.2em;
text-transform: uppercase; text-transform: uppercase;

30
src/css/8-rwd/_rwd-small.scss
View file

@ -2,5 +2,31 @@
// rwd small // 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;
}
}

12
src/index.njk
View file

@ -51,12 +51,12 @@ permalink:
<h2 class="title-2">Partagez le site&nbsp;!</h2> <h2 class="title-2">Partagez le site&nbsp;!</h2>
<div class="flex flex-wrap justify-center"> <div class="flex flex-wrap justify-center">
<a class="btn--invisible" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.compteurdegreve.fr%2F&text=Le%207%20mars%2C%20je%20ferai%20gr%C3%A8ve%20contre%20la%20r%C3%A9forme%20des%20retraites.%20Et%20vous%20%3F%20%20Ajoutez%20%2B1%20au%20compteur%20de%20gr%C3%A8ve%20et%20faites%20tourner%20!%20%23CompteurDeGreve" target="_blank" aria-label="Partager sur Twitter">{% include 'icons/social/twitter.svg' %}</a> <a class="btn--social btn--invisible" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.compteurdegreve.fr%2F&text=Le%207%20mars%2C%20je%20ferai%20gr%C3%A8ve%20contre%20la%20r%C3%A9forme%20des%20retraites.%20Et%20vous%20%3F%20%20Ajoutez%20%2B1%20au%20compteur%20de%20gr%C3%A8ve%20et%20faites%20tourner%20!%20%23CompteurDeGreve" target="_blank" aria-label="Partager sur Twitter">{% include 'icons/social/twitter.svg' %}</a>
<a class="btn--invisible" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.compteurdegreve.fr%2F" target="_blank" aria-label="Partager sur Facebook">{% include 'icons/social/facebook.svg' %}</a> <a class="btn--social btn--invisible" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.compteurdegreve.fr%2F" target="_blank" aria-label="Partager sur Facebook">{% include 'icons/social/facebook.svg' %}</a>
{# <a class="btn--invisible" href="" target="_blank" aria-label="Partager sur Instagram">{% include 'icons/social/instagram.svg' %}</a> #} {# <a class="btn--social btn--invisible" href="" target="_blank" aria-label="Partager sur Instagram">{% include 'icons/social/instagram.svg' %}</a> #}
<a class="btn--invisible" href="https://api.whatsapp.com/send?text=*Le%207%20mars,%20je%20ferai%20gr%C3%A8ve%20contre%20la%20r%C3%A9forme%20des%20retraites.*%20Et%20vous%20%3F%20%20Ajoutez%20%2B1%20au%20compteur%20de%20gr%C3%A8ve%20et%20faites%20tourner%20%21%0Ahttps://compteurdegreve.fr/" target="_blank" aria-label="Partager sur Whatsapp">{% include 'icons/social/whatsapp.svg' %}</a> <a class="btn--social btn--invisible" href="https://api.whatsapp.com/send?text=*Le%207%20mars,%20je%20ferai%20gr%C3%A8ve%20contre%20la%20r%C3%A9forme%20des%20retraites.*%20Et%20vous%20%3F%20%20Ajoutez%20%2B1%20au%20compteur%20de%20gr%C3%A8ve%20et%20faites%20tourner%20%21%0Ahttps://compteurdegreve.fr/" target="_blank" aria-label="Partager sur Whatsapp">{% include 'icons/social/whatsapp.svg' %}</a>
<a class="btn--invisible" href="https://telegram.me/share/url?url=https://compteurdegreve.fr/&text=" target="_blank" aria-label="Partager sur Telegram">{% include 'icons/social/telegram.svg' %}</a> <a class="btn--social btn--invisible" href="https://telegram.me/share/url?url=https://compteurdegreve.fr/&text=" target="_blank" aria-label="Partager sur Telegram">{% include 'icons/social/telegram.svg' %}</a>
<a class="btn--invisible" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcompteurdegreve.fr%2F" target="_blank" aria-label="Partager sur LinkedIn">{% include 'icons/social/linkedin.svg' %}</a> <a class="btn--social btn--invisible" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcompteurdegreve.fr%2F" target="_blank" aria-label="Partager sur LinkedIn">{% include 'icons/social/linkedin.svg' %}</a>
</div> </div>
</section> </section>