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-container {
min-width: 80%;
}
.counter {
width: min-content;
width: 80%;
margin-right: auto;
margin-left: auto;
color: $color-purple-2;
font-size: 1.8rem;
font-size: clamp(1.4rem, 1.4vw, 1.8rem);
@ -12,6 +18,10 @@
text-align: center;
}
.counter-content {
max-width: 39rem;
}
.counter-number {
display: block;
color: $color-purple-1;

23
src/css/_helpers.scss
View file

@ -70,20 +70,21 @@ $helpers: (
// (align-top, vertical-align, top),
// (align-bottom, vertical-align, bottom),
// (align-middle, vertical-align, middle),
(w25, width, 25%),
(w75, width, 75%),
(w80, width, 80%),
// (w25, width, 25%),
// (w75, width, 75%),
// (w80, width, 80%),
(w90, width, 90%),
(w100, width, 100%),
(w50p, width, 5rem),
(w75p, width, 7.5rem),
(w100p, width, 10rem),
(w120p, width, 12rem),
(w135p, width, 13.5rem),
(w200p, width, 20rem),
(w250p, width, 25rem),
(w-max, width, max-content),
// (w50p, width, 5rem),
// (w75p, width, 7.5rem),
// (w100p, width, 10rem),
// (w120p, width, 12rem),
// (w135p, width, 13.5rem),
// (w200p, width, 20rem),
// (w250p, width, 25rem),
// (w-max, width, max-content),
(mw0, min-width, 0),
(mw80, min-width, 80%),
(maxw380px, max-width, 38rem),
// (list-type-disc, list-style-type, disc),
// (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}}">
<div class="banner-layout">
<div>
<div class="counter-container">
<article class="counter">
<h1 class="visually-hidden">Compteur de Grève</h1>
<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>
<span aria-live="polite">
<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>
</span>
</p>