Style main sign

src/_includes/icons/megaphone.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+<path d="M4.57355 16.9889C2.80555 17.6359 0.85455 16.7139 0.20855 14.9289C-0.43845 13.1439 0.47055 11.1719 2.23555 10.5249L5.47755 9.33793L7.81555 15.8019L4.57355 16.9889ZM10.8555 20.1609C10.4185 20.0099 10.0415 19.7309 9.76655 19.3609L8.13155 17.1589L4.83055 18.3679L7.43255 21.7209C7.72455 22.0969 8.22255 22.2409 8.66955 22.0769L10.8855 21.2669C11.1145 21.1829 11.2676 20.9599 11.2666 20.7139C11.2646 20.4679 11.1105 20.2499 10.8776 20.1689L10.8555 20.1609ZM6.76555 8.86693L9.10355 15.3309C11.2585 14.9139 14.1805 14.9299 17.9995 15.7319L13.3245 2.80493C10.8485 5.96993 8.66155 7.80893 6.76555 8.86693ZM17.5606 5.76493C18.4166 6.17593 19.1166 6.91393 19.4536 7.88193C19.7926 8.84893 19.7076 9.86193 19.2966 10.7179L20.7036 11.3959C21.2885 10.1799 21.4116 8.73993 20.9305 7.36593C20.4495 5.99093 19.4566 4.94193 18.2416 4.35693L17.5606 5.76493ZM18.7486 3.29993C20.2346 4.01493 21.4466 5.29793 22.0345 6.97793C22.6225 8.65793 22.4725 10.4189 21.7575 11.9049L23.2006 12.6009C24.0935 10.7439 24.2796 8.54593 23.5466 6.44793C22.8116 4.35093 21.2995 2.74993 19.4445 1.85693L18.7486 3.29993Z" fill="currentColor"/>
+</svg>

src/_includes/icons/plus-one.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="38" fill="none" aria-hidden="true"><g clip-path="url(#a)"><path fill="#FFEE0F" d="M7.5 22.6V9h4v13.5h-4Zm-4.7-4.7v-4h13.5v4H2.8Zm26-11.4v18.6h-5v-14h-.2l-4 2.5V9.3L24 6.5h4.7Z"/><path stroke="#FFEE0F" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" d="M4 34.6c6-3 18.5-2 25.5-.5"/></g><defs><clipPath id="a"><path fill="#fff" d="M.5.1h31v37.7H.5z"/></clipPath></defs></svg>

src/_includes/icons/question.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M23.04 12A10.27 10.27 0 1 1 2.5 12a10.27 10.27 0 0 1 20.54 0Zm-11.48 1.85V14h1.81v-.16c0-.32.05-.58.12-.8.08-.2.2-.4.36-.56.17-.16.37-.32.63-.47.3-.18.56-.38.78-.6a2.43 2.43 0 0 0 .7-1.76 2.43 2.43 0 0 0-1.57-2.34A4.23 4.23 0 0 0 12.7 7c-.58 0-1.1.1-1.58.31-.48.2-.87.52-1.16.94-.3.41-.44.94-.46 1.58h1.96c0-.26.07-.48.19-.66.12-.18.27-.31.45-.4a1.3 1.3 0 0 1 1.18 0 1.05 1.05 0 0 1 .58.96c0 .2-.04.4-.14.56-.09.17-.21.32-.37.46s-.33.27-.53.4c-.27.16-.5.35-.68.55-.2.2-.34.48-.43.8-.1.34-.15.79-.15 1.35Zm.13 2.9c.22.22.5.33.82.33.2 0 .39-.05.56-.16.17-.1.31-.24.42-.41.1-.18.16-.37.17-.58 0-.32-.12-.59-.35-.8-.23-.23-.5-.34-.8-.34-.32 0-.6.1-.82.33-.23.22-.34.5-.33.8 0 .32.1.6.33.82Z" clip-rule="evenodd"/></svg>

src/css/2-components/_buttons.scss

@@ -4,18 +4,15 @@
 // Buttons
 // -------------------------------------------------------------
 
-$btn-primary: $color-1;
+$btn-primary: $color-purple-1;
-$btn-secondary: $color-3;
+$btn-secondary: $color-pink-1;
-$btn-tertiary: $color-1;
+$btn-tertiary: $color-purple-1;
 $btn-danger: #c53a3a;
 $btn-hover: 5%;
 $btn-radius: 0;
 $btn-border-width: 0.1rem;
 
 .btn {
-  --color-accent: #{$btn-primary};
-  --color-text: #fff;
-
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -23,98 +20,83 @@ $btn-border-width: 0.1rem;
   border: $btn-border-width solid transparent;
   border-radius: $btn-radius;
   margin: 0;
-  background-color: var(--color-accent);
+  background-color: $btn-primary;
   box-shadow: none;
-  color: var(--color-text);
+  box-shadow: .5rem .5rem 0 0 color.adjust($btn-primary, $saturation: -30%, $lightness: -10%);
+  color: #fff;
   font: inherit;
-  font-weight: 900;
+  font-size: 1.9rem;
+  font-weight: 900; gap: .5em;
   line-height: ($line-height + em);
   text-align: center;
-  transition: all 0.2s;
+  transition-duration: 0.15s;
+  transition-property: background, background-color, transform, box-shadow;
   vertical-align: middle;
 }
 
-.btn:where(:hover, :active) {
+
-  --color-accent: #{color.adjust($btn-primary, $lightness: -10%)};
+.btn:hover,
+.btn:active {
+  background-color: color.adjust($btn-primary, $lightness: - $btn-hover);
 }
 
-// Custom focus ring
+.btn:active {
-.btn:where(:active, :focus) {
+  box-shadow: none;
-  box-shadow: $focus-ring;
+  transform: translate(.5rem, .5rem);
-  outline: none;
 }
 
-// Colors
+.btn svg {
-// --------------------------------------------------------------
-
-.btn--secondary { --color-accent: #{$btn-secondary}; }
-.btn--secondary:where(:hover, :active) { --color-accent: #{color.adjust($btn-secondary, $lightness: -10%)}; }
-
-.btn--danger { --color-accent: #{$btn-danger}; }
-.btn--danger:where(:hover, :active) { --color-accent: #{color.adjust($btn-danger, $lightness: - 10%)}; }
-
-// Styles
-// --------------------------------------------------------------
-
-// Ghost
-
-.btn--ghost {
-  border-color: var(--color-accent);
-  background-color: transparent;
-  color: var(--color-accent);
-}
-
-.btn--ghost:where(:hover, :active) {
-  background-color: var(--color-accent);
-  color: var(--color-text);
-}
-
-// Inline-link styled
-
-.btn--link {
-  display: inline-flex;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--color-accent);
-  text-decoration: underline;
-}
-
-// Btn with icon
-// --------------------------------------------------------------
-
-[class*="btn--ico"] {
-  display: inline-flex;
-  align-items: center;
-  gap: 1ch; // 1 letter large of gap
-}
-
-[class*="btn--ico"] svg {
-  width: ($line-height + em);
-  height: ($line-height + em);
   flex-shrink: 0;
-  fill: currentcolor;
 }
 
-// Ico sizes
+/* colors
+-------------------------------------------------------------- */
 
-.btn--icoSmall svg {
+
-  width: 0.75em;
+.btn--secondary,
-  height: 0.75em;
+.btn--secondary:link,
+.btn--secondary:visited {
+  background-color: $btn-secondary;
+  box-shadow: .5rem .5rem 0 0 color.adjust($btn-secondary, $saturation: -30%, $lightness: -10%);
+  color: #fff;
 }
 
-.btn--icoMedium svg {
+.btn--secondary:hover,
-  width: 1em;
+.btn--secondary:active {
-  height: 1em;
+  background-color: color.adjust($btn-secondary, $lightness: - $btn-hover);
 }
 
-// Button Sizes
+.btn--secondary:active {
-// --------------------------------------------------------------
+  box-shadow: none;
+}
+
+.btn--tertiary,
+.btn--tertiary:link,
+.btn--tertiary:visited {
+  border-color: $btn-tertiary;
+  background-color: $color-bg-1;
+  box-shadow: .5rem .5rem 0 0 color.adjust($color-purple-3, $lightness: + 15%);
+  color: $btn-tertiary;
+}
+
+.btn--tertiary:hover,
+.btn--tertiary:active {
+  background-color: $btn-tertiary;
+  color: $color-light-text;
+}
+
+.btn--tertiary:active {
+ box-shadow: none;
+}
+
+.btn--icoYellow svg {
+  color: $color-yellow-1;
+}
+
+/* size
+-------------------------------------------------------------- */
 
 .btn--big {
-  font-size: 1.2em;
+  font-size: 3.8rem;
-}
+  line-height: 1.15em;
-
-.btn--small {
-  padding: 0.3em 0.75em;
 }

src/css/2-components/_highlighter.scss

@@ -0,0 +1,42 @@
+// -----------------------------------------------------------
+// == Highlighter decoration style components
+// -----------------------------------------------------------
+
+// Zigzag
+// --------------------------------------------------------------
+
+.highlighter-zigzag {
+  position: relative;
+}
+
+.highlighter-zigzag::before {
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  padding-top: calc(100% * (81 / 247));
+  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='247' height='81' fill='none'%3E%3Cpath stroke='#{$color-yellow-1}' stroke-linecap='round' stroke-linejoin='round' stroke-width='14' d='M240 7c-76.2.8-159 5.5-233 16.5 61.3 3.2 188.9 10.6 208.5 15-41.3 3.2-127.1 14.6-139.5 35'/%3E%3C/svg%3E");
+  background-position: top center;
+  background-size: contain;
+  content: "";
+}
+
+// Underline
+// --------------------------------------------------------------
+
+.highlighter-underline {
+  position: relative;
+  z-index: 1;
+}
+
+
+.highlighter-underline::before {
+  position: absolute;
+  z-index: -1;
+  top: 60%;
+  width: 100%;
+  padding-top: calc(100% * (27 / 118));
+  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='27' fill='none'%3E%3Cpath stroke='#{$color-yellow-1}' stroke-linecap='round' stroke-linejoin='round' stroke-width='14' d='M110.8 7.2C68.9 12.8 49.3 12.4 7.5 18.7c40.8-5.3 60.6-5.5 103.4.3'/%3E%3C/svg%3E");
+  background-position: top center;
+  background-size: contain;
+  content: "";
+}

src/css/2-components/_notifications.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Notification module
 // Namespace : .notif
 
@@ -15,24 +17,31 @@ $notif-error: $color-red;
 
 .notif {
   padding: 2rem;
-  border: 0.1rem solid currentcolor;
+  padding: 2rem 3rem;
-  border-radius: 0.3rem;
+  border: 0.2rem solid currentcolor;
+  font-size: 1.6rem;
+  line-height: 1.3em;
 }
 
 // Colors
 // --------------------------------------------------------------
 
 .notif--success {
-  color: $notif-success;
+  border-color: $notif-success;
+  background-color: color.adjust($notif-success, $saturation: + 21%, $lightness: + 40%);
+  color: color.adjust($notif-success, $saturation: + 8%, $lightness: - 34%);
 }
 
 .notif--warning {
   border-color: $notif-warning;
-  color: #444;
+  background-color: color.adjust($notif-warning, $saturation: + 21%, $lightness: + 40%);
+  color: color.adjust($notif-warning, $saturation: + 8%, $lightness: - 34%);
 }
 
 .notif--error {
-  color: $notif-error;
+  border-color: $notif-error;
+  background-color: color.adjust($notif-error, $saturation: + 21%, $lightness: + 40%);
+  color: color.adjust($notif-error, $saturation: + 8%, $lightness: - 34%);
 }
 
 // Sizes
@@ -41,3 +50,15 @@ $notif-error: $color-red;
 .notif--small {
   padding: 1rem 1.5rem;
 }
+
+// Special
+// --------------------------------------------------------------
+
+.notif--successPlusOne {
+  position: relative;
+}
+
+.notif--successPlusOne::before {
+position: absolute;
+content: "";
+}

src/css/2-components/_separator.scss

@@ -0,0 +1,21 @@
+// -----------------------------------------------------------
+// == Separator component
+// -----------------------------------------------------------
+
+.separator {
+  display: grid;
+  max-width: 95%;
+  align-items: center;
+  margin: 1rem auto;
+  gap: 2rem;
+  grid-template-columns: 1fr fit-content(90%) 1fr;
+}
+
+.separator::before,
+.separator::after {
+  display: block;
+  width: auto;
+  height: .2rem;
+  background-color: $color-purple-3;
+  content: "";
+}

src/css/3-base/_01-fonts.scss

@@ -2,12 +2,62 @@
 // == Webfonts
 // -----------------------------------------------------------
 
-// An example the good practices to use webfonts on your project
+
-// @font-face {
+
-//   font-display: swap; // Prevent hidden text when the font isn't loaded yet
+@font-face {
-//   font-family: "Open Sans";
+  font-display: optional;
-//   font-weight: normal; // You can specify if this file is for a specific weight
+  font-family: Inter;
-//   src:
+  font-weight: normal;
-//     local("Open Sans"), // Define a local first so viewers who already have the font on their computer don't have to download it again
+  src: local("Inter Medium"),
-//     url("/fonts/subset-OpenSans.woff2") format("woff2"); // WOFF2 is enough these days
+       local("Inter"),
-// }
+       url("/fonts/Inter-Medium.woff2") format("woff2"),
+       url("/fonts/Inter-Medium.woff") format("woff");
+}
+
+
+@font-face {
+  font-display: optional;
+  font-family: Inter;
+  font-weight: 900;
+  src: local("Inter Black"),
+       local("Inter"),
+       url("/fonts/Inter-Black.woff2") format("woff2"),
+       url("/fonts/Inter-Black.woff") format("woff");
+}
+
+
+@font-face {
+  font-display: optional;
+  font-family: Inter;
+  font-weight: bold;
+  src: local("Inter Black"),
+       local("Inter"),
+       url("/fonts/Inter-Black.woff2") format("woff2"),
+       url("/fonts/Inter-Black.woff") format("woff");
+}
+
+
+// Fallback trick to reduce visual shift
+// --------------------------------------------------------------
+
+@font-face {
+  font-family:Inter-fallback;
+  size-adjust:107%;
+  src: local("Arial Medium"), local("Arial");
+ }
+
+@font-face {
+  ascent-override: 105%;
+  font-family:Inter-fallback;
+  font-weight: bold;
+  size-adjust:101%;
+  src:local("Arial Black"), local("Arial");
+ }
+
+@font-face {
+  ascent-override: 105%;
+  font-family:Inter-fallback;
+  font-weight: 900;
+  size-adjust:101%;
+  src:local("Arial Black"), local("Arial");
+ }

src/css/3-base/_04-main.scss

@@ -7,7 +7,7 @@ body {
   min-height: 100vh;
   min-height: 100dvh;
   flex-direction: column;
-  accent-color: $color-1;
+  accent-color: $color-purple-1;
   background: $color-bg-1 no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='532' fill='none'%3E%3Cpath fill='url(%23a)' d='M0 0h1280v262L0 532V0Z'/%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='0' r='1' gradientTransform='matrix(1280 532 -352.4 847.9 0 0)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23321D64'/%3E%3Cstop offset='.8' stop-color='%23C82E79'/%3E%3Cstop offset='.9' stop-color='%23D33238'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
   background-position: 0 0;
   background-size: 100% auto;
@@ -26,19 +26,22 @@ body {
 // titles
 // --------------------------------------------------------------
 
-h1 {
+.title-1 {
-  @include flow(50);
+  color: $color-purple-1;
+  font-size: 4.8rem;
+  font-weight: 900;
+  line-height: 1.2em;
 }
 
-h2 {
+.title-2 {
   @include flow(38);
 }
 
-h3 {
+.title-3 {
   @include flow(18);
 }
 
-h4 {
+.title-4 {
   @include flow(16);
 }
 
@@ -50,12 +53,6 @@ a:where(:any-link) {
   text-decoration: none;
 }
 
-a:where(:focus) {
-  border-radius: 0.3rem;
-  box-shadow: $focus-ring;
-  outline: none;
-}
-
 a:where(:not([class]):hover) {
   text-decoration: underline;
 }

src/css/3-base/_05-layout.scss

@@ -12,3 +12,26 @@
 .container--small {
   max-width: $container-small;
 }
+
+// gridstack
+// --------------------------------------------------------------
+
+.gridstack {
+  display: grid;
+}
+
+.gridstack > * {
+  position: relative;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  opacity: 1;
+}
+
+:where(.gridstack > * > *) {
+  opacity: 1;
+}
+
+.gridstack > :where([hidden], [hidden] > *) {
+  opacity: 0;
+  visibility: hidden;
+}

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

@@ -17,7 +17,7 @@ margin-bottom: -3rem;
   margin: 0;
   background-color: $color-bg-1;
   box-shadow: 0 .4rem .4rem rgb(150 152 156 / 61%);
-  color: $color-1;
+  color: $color-purple-1;
   font-size: 2.6rem;
   font-weight: 900;
   line-height: 1.19em;

src/css/3-base/_09-footer.scss

@@ -4,7 +4,7 @@
 
 .footer {
   padding: 2.5rem 0;
-  background-color: $color-1;
+  background-color: $color-purple-1;
   color: $color-light-text;
   font-size: 1.6rem;
   text-align: center;

src/css/4-modules/_banner.scss

@@ -7,8 +7,11 @@ $banner-padding: clamp(2.5rem, 5vw, 7rem);
 
 .banner {
   position: relative;
+  display: flex;
   min-height: calc(70vh - 7rem);
   min-height: calc(70dvh - 7rem);
+  flex-direction: column;
+  justify-content: center;
   padding: $banner-padding;
   margin: 0 $banner-margin-inline;
   background-color: $color-bg-1;
@@ -40,3 +43,13 @@ $banner-padding: clamp(2.5rem, 5vw, 7rem);
   background-position-x: right;
   transform: translateY(-60%);
 }
+
+// Layout
+// --------------------------------------------------------------
+
+.banner-layout {
+  display: grid;
+  grid-template-columns: minmax(min-content, 55%) minmax(min-content, 45%);
+  justify-items: center;
+  row-gap: $banner-padding;
+}

src/css/5-pages/_counter.scss

@@ -0,0 +1,32 @@
+// -----------------------------------------------------------
+// == Counter "page"
+// -----------------------------------------------------------
+
+.counter {
+  width: min-content;
+  color: $color-purple-2;
+  font-weight: 900;
+  line-height: 1.3em;
+  text-align: center;
+}
+
+.counter-number {
+  display: block;
+  color: $color-purple-1;
+  font-size: 9.8rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 900;
+  line-height: 1.2em;
+  white-space: nowrap;
+}
+
+.counter-strikeeeee-lol {
+  display: inline-block;
+  margin-top: .25em;
+  margin-bottom: 20%;
+  color: $color-purple-1;
+  font-size: 4.8rem;
+  font-style: normal;
+  line-height: 1.2em;
+  text-transform: uppercase;
+}

src/css/6-helpers/_colors.scss

@@ -2,9 +2,11 @@
 // colors
 // -------------------------------------------------------------
 
-.color-1 { color: $color-1; }
+.color-purple-1 { color: $color-purple-1; }
-.color-2 { color: $color-2; }
+.color-purple-2 { color: $color-purple-2; }
-.color-3 { color: $color-3; }
+.color-pink-1 { color: $color-pink-1; }
+.color-pink-2 { color: $color-pink-2; }
+.color-yellow-1 { color: $color-yellow-1; }
 
 .color-red { color: $color-red; }
 .color-green { color: $color-green; }

src/css/_colors.scss

@@ -5,17 +5,20 @@
 $hue-purple: 258deg;
 $hue-pink: 328deg;
 $hue-yellow: 56deg;
-$color-1: hsl($hue-purple 55% 25%);
+$hue-green: 137deg;
-$color-2: hsl($hue-purple 39% 40%);
+$color-purple-1: hsl($hue-purple 55% 25%);
-$color-3: hsl($hue-pink 93% 44%);
+$color-purple-2: hsl($hue-purple 39% 40%);
-$color-4: hsl($hue-yellow 100% 53%);
+$color-purple-3: hsl($hue-purple 25% 65%);
+$color-pink-1: hsl($hue-pink 93% 44%);
+$color-pink-2: hsl($hue-pink 62% 46%);
+$color-yellow-1: hsl($hue-yellow 100% 53%);
 
 // -------------------------------------------------------------
 // layout
 // -------------------------------------------------------------
 
 $color-bg-1: hsl(0deg 100% 99%);
-$color-gradient-1: radial-gradient(100% 100% at 0% 0%, $color-1 10.36%, #C82E79 77.03%, #D33238 94.73%);
+$color-gradient-1: radial-gradient(100% 100% at 0% 0%, $color-purple-1 10.36%, #C82E79 77.03%, #D33238 94.73%);
 
 // -------------------------------------------------------------
 // utility
@@ -24,7 +27,7 @@ $color-gradient-1: radial-gradient(100% 100% at 0% 0%, $color-1 10.36%, #C82E79
 
 $color-info: #2185d0;
 $color-red: #de350b;
-$color-green: $color-2;
+$color-green: hsl($hue-green, 68%, 56%);
 $color-yellow: #ffdd57;
 
 // -------------------------------------------------------------
@@ -32,10 +35,10 @@ $color-yellow: #ffdd57;
 // -------------------------------------------------------------
 
 $color-light-text: hsl($hue-purple 40% 99%);
-$color-dark-text: $color-1;
+$color-dark-text: $color-purple-1;
 
 // -------------------------------------------------------------
 // links
 // -------------------------------------------------------------
 
-$color-link: $color-1;
+$color-link: $color-purple-1;

src/css/_config.scss

@@ -11,7 +11,7 @@
 
 $base-font: 18; // px value (without unit), will be converted in em
 $line-height: 1.5;
-$fontstack1: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$fontstack1: "Inter", "Inter-fallback", arial, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
 // ℹ️ Emoji fonts are explicitely declared at the fontstacks end to be sure to be displayed correctely on every platforms. https://answers.microsoft.com/en-us/windows/forum/all/flag-emoji/85b163bc-786a-4918-9042-763ccf4b6c05
 

src/css/_helpers.scss

@@ -22,7 +22,7 @@ $helpers: (
     (float-left, float, left),
     (float-right, float, right),
     (float-none, float, none),
-    (text-bold, font-weight, bold),
+    (text-bold, font-weight, 900),
     (text-semibold, font-weight, 600),
     (text-regular, font-weight, normal),
     (text-italic, font-style, italic),
@@ -84,6 +84,7 @@ $helpers: (
     (w250p, width, 25rem),
     (w-max, width, max-content),
     (mw0, min-width, 0),
+    (maxw380px, max-width, 38rem),
     (list-type-disc, list-style-type, disc),
     (ml-auto, margin-left, auto),
     (mr-auto, margin-right, auto),
@@ -117,7 +118,7 @@ $spacers: (
     (pa, padding, (0, 1, 2, 3)),
     (pt, padding-top, (1, 2, 3, 4, 6, 7, 8)),
     (pr, padding-right, (1, 2, 3)),
-    (pb, padding-bottom, (1, 2, 3, 4, 7, 8)),
+    (pb, padding-bottom, (0.5, 1, 2, 3, 4, 7, 8)),
     (pl, padding-left, (1, 2, 3, 4)),
   ),
   "md": (

src/css/style.scss

@@ -26,6 +26,8 @@
 @import "2-components/_forms";
 @import "2-components/_buttons";
 @import "2-components/_notifications";
+@import "2-components/_separator";
+@import "2-components/_highlighter";
 
 // -------------------------------------------------------------
 // base
@@ -51,7 +53,7 @@
 // pages
 // -------------------------------------------------------------
 
-// @import "5-pages/...";
+@import "5-pages/counter";
 
 // -------------------------------------------------------------
 // helpers

src/index.html

@@ -3,33 +3,42 @@ layout: base.njk
 title: Compteur de grève
 ---
 <section class="banner" x-data="counter" data-initial-count="148563">
-	<div class="grid grid-2 gap">
+	<div class="banner-layout">
-		<article class="text-center">
+		<div>
-			<h1 class="visually-hidden">Compteur de Grève</h1>
+			<article class="counter">
-			<p>
+				<h1 class="visually-hidden">Compteur de Grève</h1>
-				<span class="color-3">Contre la réforme des retraites,</span><br>
+				<p>
-				à l’appel de l’ensemble des organisations syndicales, le 7 mars
+					<span class="color-pink-2 pb05 inline-block">Contre la réforme des retraites,</span><br>
-				<strong class="block counter text-big text-bold" x-bind="counter">148&nbsp;563</strong>
+					À l’appel de l’ensemble des organisations syndicales, <span class="color-purple-1">le 7 mars</span>
-				<span class="separator">personnes seront</span>
+					<span aria-live="polite">
-				<em class="block text-big text-bold">en grève<span class="visually-hidden"> !</span></em>
+						<strong class="counter-number" x-bind="counter">148&nbsp;563</strong>
-			</p>
+						<span class="separator">personnes seront</span>
-
+						<em class="counter-strikeeeee-lol highlighter-zigzag">en grève<span class="visually-hidden"> !</span></em>
-		</article>
+					</span>
-		<article>
+				</p>
-			<h2>Et vous&nbsp;?</h2>
+			</article>
+		</div>
+		<article class="w100 maxw380px text-center">
+			<h2 class="title-1 mt0">Et <span class="highlighter-underline">vous</span>&nbsp;?</h2>
 			<div class="flex flex-col">
-				<div>
+				<div class="notif notif--error" x-bind="eroor" x-cloak>Message d'erreur à faire</div>
+				<div class="gridstack">
 					<form action="/" method="post" x-bind="form">
-						<button class="btn w100 mb15" x-bind="button">Je fais grève</button>
+						<button class="btn btn--big btn--icoYellow w100 mb15" x-bind="button">
+							{% include 'icons/plus-one.svg' %} Je fais grève
+						</button>
 					</form>
-					<div class="success" x-bind="thanks" x-cloak>
+					<div class="notif notif--success" x-bind="thanks" x-cloak>
-						<strong class="block text-bold">Merci pour votre participation ! ✨</strong>
+						<strong class="block text-bold text-big mb1">Merci pour votre participation&nbsp;!&nbsp;✨</strong>
-						↓ Nous avons <strong>besoin de vous</strong> pour faire du <em class="text-bold">7 mars</em> une journée de mobilisation qui restera dans les mémoires
+						<span aria-hidden="true">↓</span>&nbsp;Nous avons <strong class="text-bold">besoin de vous</strong> pour faire du <em class="text-bold">7 mars</em> une journée de mobilisation qui restera dans les mémoires&nbsp;!
 					</div>
-					<div class="error" x-bind="error" x-cloak>Message d'erreur à faire</div>
 				</div>
-				<a href="#" class="btn btn--secondary w100 mb15">Je partage le compteur</a>
+				<a href="#" class="btn btn--secondary w100 mb15">
-				<a href="#" class="btn btn--ghost w100 mb15">En savoir plus</a>
+					{% include 'icons/megaphone.svg' %} Je partage le compteur
+				</a>
+				<a href="#" class="btn btn--tertiary w100 mb15">
+					{% include 'icons/question.svg' %} En savoir plus
+				</a>
 			</div>
 		</article>
 	</div>