mirror of
https://github.com/GuerillaStudio/compteur-de-greve.git
synced 2024-12-18 05:41:56 +00:00
Style main sign
This commit is contained in:
parent
6acb07a74f
commit
6b763db882
21 changed files with 347 additions and 144 deletions
3
src/_includes/icons/megaphone.svg
Normal file
3
src/_includes/icons/megaphone.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
src/_includes/icons/plus-one.svg
Normal file
1
src/_includes/icons/plus-one.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 451 B |
1
src/_includes/icons/question.svg
Normal file
1
src/_includes/icons/question.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 840 B |
|
|
@ -4,18 +4,15 @@
|
|||
// Buttons
|
||||
// -------------------------------------------------------------
|
||||
|
||||
$btn-primary: $color-1;
|
||||
$btn-secondary: $color-3;
|
||||
$btn-tertiary: $color-1;
|
||||
$btn-primary: $color-purple-1;
|
||||
$btn-secondary: $color-pink-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:where(:active, :focus) {
|
||||
box-shadow: $focus-ring;
|
||||
outline: none;
|
||||
.btn:active {
|
||||
box-shadow: none;
|
||||
transform: translate(.5rem, .5rem);
|
||||
}
|
||||
|
||||
// Colors
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.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);
|
||||
.btn svg {
|
||||
flex-shrink: 0;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
// Ico sizes
|
||||
/* colors
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.btn--icoSmall svg {
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
|
||||
.btn--secondary,
|
||||
.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 {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
.btn--secondary:hover,
|
||||
.btn--secondary:active {
|
||||
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;
|
||||
}
|
||||
|
||||
.btn--small {
|
||||
padding: 0.3em 0.75em;
|
||||
font-size: 3.8rem;
|
||||
line-height: 1.15em;
|
||||
}
|
||||
|
|
|
|||
42
src/css/2-components/_highlighter.scss
Normal file
42
src/css/2-components/_highlighter.scss
Normal file
|
|
@ -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: "";
|
||||
}
|
||||
|
|
@ -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;
|
||||
border-radius: 0.3rem;
|
||||
padding: 2rem 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: "";
|
||||
}
|
||||
|
|
|
|||
21
src/css/2-components/_separator.scss
Normal file
21
src/css/2-components/_separator.scss
Normal file
|
|
@ -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: "";
|
||||
}
|
||||
|
|
@ -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-family: "Open Sans";
|
||||
// font-weight: normal; // You can specify if this file is for a specific weight
|
||||
// src:
|
||||
// local("Open Sans"), // Define a local first so viewers who already have the font on their computer don't have to download it again
|
||||
// url("/fonts/subset-OpenSans.woff2") format("woff2"); // WOFF2 is enough these days
|
||||
// }
|
||||
|
||||
|
||||
@font-face {
|
||||
font-display: optional;
|
||||
font-family: Inter;
|
||||
font-weight: normal;
|
||||
src: local("Inter Medium"),
|
||||
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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
@include flow(50);
|
||||
.title-1 {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
0
src/css/5-pages/_actions.scss
Normal file
0
src/css/5-pages/_actions.scss
Normal file
32
src/css/5-pages/_counter.scss
Normal file
32
src/css/5-pages/_counter.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -2,9 +2,11 @@
|
|||
// colors
|
||||
// -------------------------------------------------------------
|
||||
|
||||
.color-1 { color: $color-1; }
|
||||
.color-2 { color: $color-2; }
|
||||
.color-3 { color: $color-3; }
|
||||
.color-purple-1 { color: $color-purple-1; }
|
||||
.color-purple-2 { color: $color-purple-2; }
|
||||
.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; }
|
||||
|
|
|
|||
|
|
@ -5,17 +5,20 @@
|
|||
$hue-purple: 258deg;
|
||||
$hue-pink: 328deg;
|
||||
$hue-yellow: 56deg;
|
||||
$color-1: hsl($hue-purple 55% 25%);
|
||||
$color-2: hsl($hue-purple 39% 40%);
|
||||
$color-3: hsl($hue-pink 93% 44%);
|
||||
$color-4: hsl($hue-yellow 100% 53%);
|
||||
$hue-green: 137deg;
|
||||
$color-purple-1: hsl($hue-purple 55% 25%);
|
||||
$color-purple-2: hsl($hue-purple 39% 40%);
|
||||
$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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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": (
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<article class="text-center">
|
||||
<h1 class="visually-hidden">Compteur de Grève</h1>
|
||||
<p>
|
||||
<span class="color-3">Contre la réforme des retraites,</span><br>
|
||||
à l’appel de l’ensemble des organisations syndicales, le 7 mars
|
||||
<strong class="block counter text-big text-bold" x-bind="counter">148 563</strong>
|
||||
<span class="separator">personnes seront</span>
|
||||
<em class="block text-big text-bold">en grève<span class="visually-hidden"> !</span></em>
|
||||
</p>
|
||||
|
||||
</article>
|
||||
<article>
|
||||
<h2>Et vous ?</h2>
|
||||
<div class="banner-layout">
|
||||
<div>
|
||||
<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>
|
||||
À 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">148 563</strong>
|
||||
<span class="separator">personnes seront</span>
|
||||
<em class="counter-strikeeeee-lol highlighter-zigzag">en grève<span class="visually-hidden"> !</span></em>
|
||||
</span>
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<article class="w100 maxw380px text-center">
|
||||
<h2 class="title-1 mt0">Et <span class="highlighter-underline">vous</span> ?</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>
|
||||
<strong class="block text-bold">Merci pour votre participation ! ✨</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
|
||||
<div class="notif notif--success" x-bind="thanks" x-cloak>
|
||||
<strong class="block text-bold text-big mb1">Merci pour votre participation ! ✨</strong>
|
||||
<span aria-hidden="true">↓</span> 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 !
|
||||
</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--ghost w100 mb15">En savoir plus</a>
|
||||
<a href="#" class="btn btn--secondary w100 mb15">
|
||||
{% 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue