GuerillaStudio/compteur-de-greve
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/compteur-de-greve.git synced 2024-12-18 05:41:56 +00:00
Code Issues Activity

Fix counter content width

Browse source
This commit is contained in:
Tixie Salander 2023-03-02 11:19:27 +01:00
parent f2e15a4037
commit a6747466cd
3 changed files with 26 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,8 +2,14 @@
// == Counter "page" // == Counter "page"
// ----------------------------------------------------------- // -----------------------------------------------------------
.counter-container {
min-width: 80%;
}
.counter { .counter {
width: min-content; width: 80%;
margin-right: auto;
margin-left: auto;
color: $color-purple-2; color: $color-purple-2;
font-size: 1.8rem; font-size: 1.8rem;
font-size: clamp(1.4rem, 1.4vw, 1.8rem); font-size: clamp(1.4rem, 1.4vw, 1.8rem);
@ -12,6 +18,10 @@
text-align: center; text-align: center;
} }
.counter-content {
max-width: 39rem;
}
.counter-number { .counter-number {
display: block; display: block;
color: $color-purple-1; color: $color-purple-1;

23
src/css/_helpers.scss
View file

@ -70,20 +70,21 @@ $helpers: (
// (align-top, vertical-align, top), // (align-top, vertical-align, top),
// (align-bottom, vertical-align, bottom), // (align-bottom, vertical-align, bottom),
// (align-middle, vertical-align, middle), // (align-middle, vertical-align, middle),
(w25, width, 25%), // (w25, width, 25%),
(w75, width, 75%), // (w75, width, 75%),
(w80, width, 80%), // (w80, width, 80%),
(w90, width, 90%), (w90, width, 90%),
(w100, width, 100%), (w100, width, 100%),
(w50p, width, 5rem), // (w50p, width, 5rem),
(w75p, width, 7.5rem), // (w75p, width, 7.5rem),
(w100p, width, 10rem), // (w100p, width, 10rem),
(w120p, width, 12rem), // (w120p, width, 12rem),
(w135p, width, 13.5rem), // (w135p, width, 13.5rem),
(w200p, width, 20rem), // (w200p, width, 20rem),
(w250p, width, 25rem), // (w250p, width, 25rem),
(w-max, width, max-content), // (w-max, width, max-content),
(mw0, min-width, 0), (mw0, min-width, 0),
(mw80, min-width, 80%),
(maxw380px, max-width, 38rem), (maxw380px, max-width, 38rem),
// (list-type-disc, list-style-type, disc), // (list-type-disc, list-style-type, disc),
// (ml-auto, margin-left, auto), // (ml-auto, margin-left, auto),

6
src/index.njk
View file

@ -6,15 +6,15 @@ permalink:
--- ---
<section class="banner" x-data="counter" data-initial-count="{{count}}"> <section class="banner" x-data="counter" data-initial-count="{{count}}">
<div class="banner-layout"> <div class="banner-layout">
<div> <div class="counter-container">
<article class="counter"> <article class="counter">
<h1 class="visually-hidden">Compteur de Grève</h1> <h1 class="visually-hidden">Compteur de Grève</h1>
<p> <p>
<span class="color-pink-2 pb05 inline-block">Contre la réforme des retraites,</span><br> <span class="color-pink-2 pb05 inline-block counter-content">Contre la réforme des retraites,</span><br>
À l’appel de l’ensemble des organisations syndicales, <span class="color-purple-1">le 7 mars</span> À l’appel de l’ensemble des organisations syndicales, <span class="color-purple-1">le 7 mars</span>
<span aria-live="polite"> <span aria-live="polite">
<strong class="counter-number" x-bind="counter">{{count | formatNumber}}</strong> <strong class="counter-number" x-bind="counter">{{count | formatNumber}}</strong>
<span class="separator">personnes seront</span> <span class="separator counter-content">personnes seront</span>
<em class="counter-strikeeeee-lol highlighter-zigzag">en grève<span class="visually-hidden"> !</span></em> <em class="counter-strikeeeee-lol highlighter-zigzag">en grève<span class="visually-hidden"> !</span></em>
</span> </span>
</p> </p>