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

Basic home content

Browse source
This commit is contained in:
Tixie Salander 2023-03-01 22:35:45 +01:00
parent 7209549722
commit 1da9d80b3e
6 changed files with 44 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/_includes/base.njk
View file

@ -11,11 +11,7 @@
</head>
<body>
<header class="header">
{% if page.fileSlug === '' %}
<h1 class="header-title">#CompteurDeGrève</h1>
{% else %}
<a class="header-title" href="{{ '/' }}">#CompteurDeGrève</a>
{% endif %}
<a class="header-title" href="{{ '/' }}">#CompteurDeGrève</a>
</header>
<main class="main">
{{ content | safe }}

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

@ -5,11 +5,11 @@
// -------------------------------------------------------------
$btn-primary: $color-1;
$btn-secondary: $color-2;
$btn-dark: $color-dark-text;
$btn-secondary: $color-3;
$btn-tertiary: $color-1;
$btn-danger: #c53a3a;
$btn-hover: 5%;
$btn-radius: 0.2rem;
$btn-radius: 0;
$btn-border-width: 0.1rem;
.btn {
@ -27,6 +27,7 @@ $btn-border-width: 0.1rem;
box-shadow: none;
color: var(--color-text);
font: inherit;
font-weight: 900;
line-height: ($line-height + em);
text-align: center;
transition: all 0.2s;
@ -52,9 +53,6 @@ $btn-border-width: 0.1rem;
.btn--danger { --color-accent: #{$btn-danger}; }
.btn--danger:where(:hover, :active) { --color-accent: #{color.adjust($btn-danger, $lightness: - 10%)}; }
.btn--dark { --color-accent: #{$btn-dark}; }
.btn--dark:where(:hover, :active) { --color-accent: #{color.adjust($btn-dark, $lightness: + 10%)}; }
// Styles
// --------------------------------------------------------------

12
src/css/4-modules/_banner.scss Normal file
View file

@ -0,0 +1,12 @@
// -----------------------------------------------------------
// == Banner with hands on the side like a protest sign
// -----------------------------------------------------------
.banner {
min-height: calc(70vh - 7rem);
min-height: calc(70dvh - 7rem);
padding: 6rem;
margin: 0 3.5rem;
background-color: $color-bg-1;
box-shadow: 0 2.2rem 2.1rem rgb(175 157 158 / 30%);
}

2
src/css/_helpers.scss
View file

@ -112,7 +112,7 @@ $spacers: (
(ma, margin, (0, 1, 2, 3)),
(mt, margin-top, (0, 1, 2, 3, 4, 5, 6, 7, 8)),
(mr, margin-right, (0.5, 1, 2, 3)),
(mb, margin-bottom, (0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8)),
(mb, margin-bottom, (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7, 8)),
(ml, margin-left, (0.5, 1, 2, 3, 4)),
(pa, padding, (0, 1, 2, 3)),
(pt, padding-top, (1, 2, 3, 4, 6, 7, 8)),

2
src/css/style.scss
View file

@ -45,7 +45,7 @@
// modules
// -------------------------------------------------------------
// @import "4-modules/...";
@import "4-modules/_banner";
// -------------------------------------------------------------
// pages

28
src/index.html
View file

@ -3,6 +3,28 @@ layout: base.njk
title: Compteur de grève
---
<div class="content container">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate ullam quia error recusandae, excepturi ea harum molestiae aliquid maxime. Maxime impedit unde placeat autem ad doloremque, blanditiis ducimus excepturi explicabo?
</div>
<section class="banner">
<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">148&nbsp;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&nbsp;?</h2>
<div class="flex flex-col">
<form action="/" method="post">
<button class="btn w100 mb15">Je fais grève</button>
</form>
<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>
</div>
</article>
</div>
</section>