init

2024-12-18 05:41:56 +00:00 · 2023-03-01 19:47:59 +01:00 · 2023-03-01 19:47:59 +01:00 · 07eb7f5783
commit 07eb7f5783
50 changed files with 4191 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,3 @@
+> 1%
+not dead
+not op_mini all
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,13 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+
+[*.yml]
+indent_style = space
+indent_size = 2
--- a/.eleventy.js
+++ b/.eleventy.js
@ -0,0 +1,12 @@
+const eleventySass = require("@11tyrocks/eleventy-plugin-sass-lightningcss")
+
+module.exports = function (eleventyConfig) {
+	eleventyConfig.addPlugin(eleventySass)
+
+	return {
+		dir: {
+			input: "src",
+			output: "public",
+		},
+	};
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,13 @@
+# dependencies installed by npm
+node_modules
+
+# build artifacts
+public
+
+# secrets and errors
+.env
+.log
+
+# macOS related files
+.DS_Store
+
--- a/README.md
+++ b/README.md
@ -0,0 +1,16 @@
+# Compteur de grève
+
+## Dev instructions
+
+**`npm ci`**
+
+> Install build dependencies without impacting the package-lock file
+
+**`npm run dev`**
+
+> Run 11ty with hot reload at localhost:1312 (port customizable in the package.json command)
+> If needed more infos on https://www.11ty.dev/docs
+
+**`npm run build`**
+
+> Production build
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,16 @@
+{
+  "name": "compteur-de-greve",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.html",
+  "scripts": {
+    "dev": "eleventy  --serve --port=1312",
+    "build": "eleventy"
+  },
+  "author": "Guérilla.Studio",
+  "license": "ISC",
+  "dependencies": {
+    "@11ty/eleventy": "^2.0.0-beta.3",
+    "@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.0.0"
+  }
+}
--- a/src/_includes/base.njk
+++ b/src/_includes/base.njk
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{{ title }}</title>
+	<link rel="stylesheet" href="{{ '/css/style.css' | url }}" />
+</head>
+<body>
+	<header>
+		<h1>{{ title }}</h1>
+	</header>
+	<main>
+	{{ content | safe }}
+	</main>
+</body>
+</html>
--- a/src/css/1-core/_00-mixins.scss
+++ b/src/css/1-core/_00-mixins.scss
@ -0,0 +1,39 @@
+@use "sass:math";
+@use "sass:map";
+@use "sass:string";
+
+$breakpoints: (
+  sm: 768px,
+  md: 960px,
+  lg: 1280px,
+) !default;
+$small: map.get($breakpoints, sm) !default;
+$medium: map.get($breakpoints, md) !default;
+$large: map.get($breakpoints, lg) !default;
+
+// -------------------------------------------------------------
+// mixins
+// -------------------------------------------------------------
+
+@mixin flow($font-size, $bf: $base-font, $lh: $line-height) {
+  $lh-value: $base-font * $lh;
+  $coeff: math.ceil(math.div($font-size, $lh-value));
+  $new-lh: math.div($lh-value, $font-size) * $coeff;
+  $margin-bottom: math.div($new-lh, $coeff);
+
+  margin-bottom: $margin-bottom + em;
+  font-size: math.div($font-size, 10) + rem;
+  line-height: $new-lh;
+}
+
+@function hex-to-hsl($hex) {
+  $hue: color.hue($hex);
+  $saturation: color.saturation($hex);
+  $lightness: color.lightness($hex);
+
+  @return $hue, $saturation, $lightness;
+}
+
+@function hex-rm-hash($hex) {
+  @return string.slice(#{$hex}, 2);
+}
--- a/src/css/1-core/_01-reset.scss
+++ b/src/css/1-core/_01-reset.scss
@ -0,0 +1,48 @@
+// -------------------------------------------------------------
+// reset
+// -------------------------------------------------------------
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+}
+
+img,
+table,
+td,
+blockquote,
+code,
+pre,
+textarea,
+input,
+video,
+svg {
+  max-width: 100%;
+}
+
+img {
+  height: auto;
+  border-style: none;
+  vertical-align: middle;
+}
+
+// Remove special styling on Safari iOS
+input[type="search"]::-webkit-search-decoration {
+  display: none;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
--- a/src/css/1-core/_02-typography.scss
+++ b/src/css/1-core/_02-typography.scss
@ -0,0 +1,29 @@
+@use "sass:math";
+
+// -------------------------------------------------------------
+// typography
+// -------------------------------------------------------------
+
+html {
+  font-size: 62.5%;
+  font-size: calc(1em * 0.625); // IE9-11 calculation fix
+}
+
+body {
+  font-size: math.div($base-font, 10) + em;
+  line-height: ($line-height + em);
+}
+
+p,
+ul,
+ol,
+dl,
+blockquote,
+pre,
+td,
+th,
+label,
+textarea,
+caption {
+  margin: 0 0 ($line-height + em) 0;
+}
--- a/src/css/1-core/_03-helpers.scss
+++ b/src/css/1-core/_03-helpers.scss
@ -0,0 +1,29 @@
+// -------------------------------------------------------------
+// helpers
+// -------------------------------------------------------------
+
+// screen readers
+// --------------------------------------------------------------
+
+// Hide only visually, but have it available for screen readers (from HTML5 Boilerplate)
+
+.visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0 0 0 0);
+}
+
+.visually-hidden.focusable:active,
+.visually-hidden.focusable:focus {
+  position: static;
+  overflow: visible;
+  width: auto;
+  height: auto;
+  margin: 0;
+  clip: auto;
+}
--- a/src/css/1-core/_04-layout.scss
+++ b/src/css/1-core/_04-layout.scss
@ -0,0 +1,26 @@
+// -------------------------------------------------------------
+// layout
+// -------------------------------------------------------------
+
+.mod {
+  overflow: hidden; // BFC to the rescue
+}
+
+.clear,
+.line,
+.row {
+  clear: both;
+}
+
+// blocks that must contain floats
+.clearfix::after,
+.line::after,
+.mod::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+
+.inbl {
+  display: inline-block;
+}
--- a/src/css/1-core/_05-grids.scss
+++ b/src/css/1-core/_05-grids.scss
@ -0,0 +1,19 @@
+// -------------------------------------------------------------
+// grids
+// -------------------------------------------------------------
+
+.grid {
+  display: grid;
+}
+
+@mixin grid($cols, $prefix: "") {
+  @if $prefix != "" {
+    .#{$prefix}\:grid-#{$cols} {
+      grid-template-columns: repeat(#{$cols}, minmax(0, 1fr));
+    }
+  } @else {
+    .grid-#{$cols} {
+      grid-template-columns: repeat(#{$cols}, minmax(0, 1fr));
+    }
+  }
+}
--- a/src/css/1-core/_06-rwd.scss
+++ b/src/css/1-core/_06-rwd.scss
@ -0,0 +1,65 @@
+// -------------------------------------------------------------
+// rwd
+// -------------------------------------------------------------
+
+// responsive iframe http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/ */
+.responsive-iframe {
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  padding-top: 3rem;
+  padding-bottom: 56.25%;
+}
+
+.responsive-iframe iframe,
+.responsive-iframe object,
+.responsive-iframe embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+// utilities
+// --------------------------------------------------------------
+
+.hidden {
+  display: none;
+}
+
+@media (min-width: ($medium + 1)) and (max-width: $large) {
+  [class*="-lg"][class*="hidden-"]:not([class*="up"]) {
+    display: none !important;
+  }
+}
+
+@media (min-width: ($small + 1)) and (max-width: $medium) {
+  [class*="-md"][class*="hidden-"]:not([class*="up"]) {
+    display: none !important;
+  }
+}
+
+@media (max-width: $small) {
+  [class*="-sm"][class*="hidden-"]:not([class*="up"]) {
+    display: none !important;
+  }
+}
+
+@media (min-width: $large) {
+  .hidden-lg-up {
+    display: none !important;
+  }
+}
+
+@media (min-width: $medium) {
+  .hidden-md-up {
+    display: none !important;
+  }
+}
+
+@media (min-width: $small) {
+  .hidden-sm-up {
+    display: none !important;
+  }
+}
--- a/src/css/1-core/_debug.scss
+++ b/src/css/1-core/_debug.scss
@ -0,0 +1,36 @@
+@use "sass:math";
+
+// -------------------------------------------------------------
+// debug
+// -------------------------------------------------------------
+
+// Generates a random color
+// --------------------------------------------------------------
+
+@mixin random-color {
+  $red: math.round(math.random() * 222);
+  $green: math.round(math.random() * 222);
+  $blue: math.round(math.random() * 222);
+}
+
+// Easily debug an element
+// --------------------------------------------------------------
+
+@mixin debug() {
+  @include random-color;
+
+  border: 0.3rem dotted rgb($red $green $blue);
+  background-color: rgb($red $green $blue / 30%);
+}
+
+// Display grid for vertical rhythm
+// --------------------------------------------------------------
+
+@mixin debug-rythm($bh: $line-height) {
+  background: linear-gradient(to bottom, #ba9b9a 0.1em, transparent 0.1em) !important;
+  background-size: 100% ($bh + em) !important;
+}
+
+.debug-rythm {
+  @include debug-rythm;
+}
--- a/src/css/2-components/_buttons.scss
+++ b/src/css/2-components/_buttons.scss
@ -0,0 +1,122 @@
+@use "sass:color";
+
+// -------------------------------------------------------------
+// Buttons
+// -------------------------------------------------------------
+
+$btn-primary: $color-1;
+$btn-secondary: $color-2;
+$btn-dark: $color-dark-text;
+$btn-danger: #c53a3a;
+$btn-hover: 5%;
+$btn-radius: 0.2rem;
+$btn-border-width: 0.1rem;
+
+.btn {
+  --color-accent: #{$btn-primary};
+  --color-text: #fff;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.8em 1.6em;
+  border: $btn-border-width solid transparent;
+  margin: 0;
+  background-color: var(--color-accent);
+  border-radius: $btn-radius;
+  box-shadow: none;
+  color: var(--color-text);
+  font: inherit;
+  line-height: ($line-height + em);
+  text-align: center;
+  transition: all 0.2s;
+  vertical-align: middle;
+}
+
+.btn:where(:hover, :active) {
+  --color-accent: #{color.adjust($btn-primary, $lightness: -10%)};
+}
+
+// Custom focus ring
+.btn:where(:active, :focus) {
+  box-shadow: $focus-ring;
+  outline: none;
+}
+
+// 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%)}; }
+
+.btn--dark { --color-accent: #{$btn-dark}; }
+.btn--dark:where(:hover, :active) { --color-accent: #{color.adjust($btn-dark, $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
+
+.btn--icoSmall svg {
+  width: 0.75em;
+  height: 0.75em;
+}
+
+.btn--icoMedium svg {
+  width: 1em;
+  height: 1em;
+}
+
+// Button Sizes
+// --------------------------------------------------------------
+
+.btn--big {
+  font-size: 1.2em;
+}
+
+.btn--small {
+  padding: 0.3em 0.75em;
+}
--- a/src/css/2-components/_forms.scss
+++ b/src/css/2-components/_forms.scss
@ -0,0 +1,251 @@
+@use "sass:color";
+
+// -------------------------------------------------------------
+// Forms
+// -------------------------------------------------------------
+
+$input-color: $color-dark-text;
+$input-lineheight: ($line-height + em);
+$input-padding-y: 0.8em;
+$input-padding-x: 1em;
+$input-padding: $input-padding-y $input-padding-x;
+$input-border-radius: 0.4rem;
+$input-border-color: #d8d8d8;
+$input-border-width: 0.1rem;
+$input-border: $input-border-width solid $input-border-color;
+$input-background-color: #fff;
+$input-placeholder-color: $color-dark-text;
+$input-error: #ff3860;
+$input-error-bg: color.adjust($input-error, $lightness: 30%);
+
+// Input customized with icons
+$input-ico-color: #515151;
+$input-ico-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 11 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7.515.08 1.897 1.44.484l4.06 4.217L9.557.484l1.362 1.413z' fill='%23#{hex-rm-hash($input-ico-color)}'/%3E%3C/svg%3E");
+$input-ico-arrow-width: 1.1rem;
+$input-ico-search: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m19.4 18-3.7-3.6a8.9 8.9 0 0 0-.6-11.8A8.7 8.7 0 0 0 8.9 0a8.8 8.8 0 0 0-6.3 2.6A8.8 8.8 0 0 0 0 8.9a8.9 8.9 0 0 0 14.4 7l3.6 3.5a1 1 0 0 0 .7.3c.3 0 .5 0 .7-.3a1 1 0 0 0 0-1.4Zm-3.7-9.1a6.7 6.7 0 0 1-2 4.8 7 7 0 0 1-4.8 2 6.7 6.7 0 0 1-4.9-2A7 7 0 0 1 2 9 6.9 6.9 0 0 1 8.9 2a6.9 6.9 0 0 1 6.9 6.9Z' fill='%23#{hex-rm-hash($input-ico-color)}'/%3E%3C/svg%3E");
+$input-ico-search-width: 2rem;
+
+// layoutblocks
+// --------------------------------------------------------------
+
+.f-container {
+  max-width: 47rem;
+}
+
+.f-group:where(:not(:first-child)) {
+  margin-top: 3rem;
+}
+
+.f-group > :where(label, .label) {
+  margin-top: 0;
+}
+
+// global style
+// --------------------------------------------------------------
+
+fieldset {
+  padding: 1em;
+  border: 0.1rem solid #d8d8d8;
+  margin: 2.5rem 0;
+}
+
+label,
+.label {
+  display: block;
+  margin-top: 1.3em;
+  margin-bottom: 0.3125em;
+  color: $color-dark-text;
+  cursor: pointer;
+  font-size: 1.6rem;
+  font-weight: 600;
+}
+
+input,
+textarea,
+select {
+  width: 100%;
+  max-width: 32rem;
+  padding: $input-padding;
+  border: $input-border;
+  margin: 0;
+  background-color: $input-background-color;
+  border-radius: $input-border-radius;
+  color: $input-color;
+  line-height: $input-lineheight;
+  vertical-align: middle;
+}
+
+select {
+  padding-right: calc($input-ico-arrow-width + $input-padding-x);
+  appearance: none;
+  background-image: $input-ico-arrow;
+  background-position: calc(100% - $input-ico-arrow-width) center;
+  background-repeat: no-repeat;
+  background-size: $input-ico-arrow-width auto;
+}
+
+textarea {
+  min-width: 32rem;
+  min-height: 8em;
+  resize: vertical;
+  vertical-align: top;
+}
+
+// inline form
+// --------------------------------------------------------------
+
+.f-inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+}
+
+.f-inline :where(label, .label) {
+  margin-block: 0;
+}
+
+// autogrid
+// --------------------------------------------------------------
+
+[class^="f-grid"] {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+}
+
+[class^="f-grid"] > * {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  margin-left: 2rem;
+}
+
+[class^="f-grid"] > *:first-child {
+  margin-left: 0;
+}
+
+[class^="f-grid"] :where(input, select, textarea) {
+  max-width: 100%;
+}
+
+[class^="f-grid"] :where(label, .label) {
+  margin-top: 0;
+}
+
+// Input type specific styles
+// --------------------------------------------------------------
+
+input:where(
+[type="radio"],
+[type="checkbox"]
+) {
+  width: inherit;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+input:where(
+[type="radio"],
+[type="checkbox"]
+) + label {
+  display: inline-block;
+  margin-right: 1rem;
+  margin-block: 0;
+  vertical-align: baseline;
+}
+
+.f-error input:where(
+[type="radio"],
+[type="checkbox"]) {
+  outline: $input-border-width solid $input-error;
+  outline-offset: 0.4rem;
+}
+
+// search input custom
+input[type="search"] {
+  padding-right: calc($input-ico-search-width + $input-padding-x);
+  appearance: none;
+  background-image: $input-ico-search;
+  background-position: calc(100% - $input-ico-search-width) center;
+  background-repeat: no-repeat;
+  background-size: $input-ico-search-width auto;
+}
+
+// placeholders
+// --------------------------------------------------------------
+
+input:placeholder {
+  color: $input-placeholder-color;
+}
+
+textarea:placeholder {
+  color: $input-placeholder-color;
+}
+
+// size
+// --------------------------------------------------------------
+
+.f-size-07 {
+  max-width: 7rem;
+}
+
+.f-size-1 {
+  max-width: 10rem;
+}
+
+.f-size-2 {
+  max-width: 20rem;
+}
+
+.f-size-3 {
+  max-width: 30rem;
+}
+
+.f-size-4 {
+  max-width: 40rem;
+}
+
+.f-size-5 {
+  max-width: 50rem;
+}
+
+.f-size-full {
+  max-width: 100%;
+}
+
+// Scale
+// --------------------------------------------------------------
+
+.f-small {
+  padding: 0.5rem 1.2rem;
+  line-height: 1.25em;
+}
+
+// States
+// --------------------------------------------------------------
+
+.f-disabled {
+  border-color: #d4d2d2;
+  color: #d4d2d2;
+}
+
+// errors
+.f-error :is(input, select, textarea) {
+  border-color: $input-error;
+  margin-bottom: 0.8rem;
+}
+
+.f-error-message {
+  color: $input-error;
+}
+
+// focus state
+:is(input, select, textarea):is(:active, :focus) {
+  box-shadow: $focus-ring;
+  outline: none;
+}
+
+:is(input, select, textarea):invalid {
+  border-color: $input-error;
+}
--- a/src/css/2-components/_notifications.scss
+++ b/src/css/2-components/_notifications.scss
@ -0,0 +1,43 @@
+// Notification module
+// Namespace : .notif
+
+// -------------------------------------------------------------
+// configuration
+// -------------------------------------------------------------
+
+$notif-success: $color-green;
+$notif-warning: $color-yellow;
+$notif-error: $color-red;
+
+// -------------------------------------------------------------
+// module
+// -------------------------------------------------------------
+
+.notif {
+  padding: 2rem;
+  border: 0.1rem solid currentcolor;
+  border-radius: 0.3rem;
+}
+
+// Colors
+// --------------------------------------------------------------
+
+.notif--success {
+  color: $notif-success;
+}
+
+.notif--warning {
+  border-color: $notif-warning;
+  color: #444;
+}
+
+.notif--error {
+  color: $notif-error;
+}
+
+// Sizes
+// --------------------------------------------------------------
+
+.notif--small {
+  padding: 1rem 1.5rem;
+}
--- a/src/css/2-components/_pagination.scss
+++ b/src/css/2-components/_pagination.scss
@ -0,0 +1,50 @@
+// Pagination Module
+// namespace : .pagination
+
+// -------------------------------------------------------------
+// configuration
+// -------------------------------------------------------------
+
+$pagination-border-radius: 0.2rem;
+$pagination-border: 0.1rem solid #808080;
+$pagination-hover-color: $color-2;
+$pagination-current-bg: $color-1;
+$pagination-current-color: #fff;
+
+// -------------------------------------------------------------
+// module
+// -------------------------------------------------------------
+
+.pagination {
+  display: inline-block;
+  margin: 2rem 0;
+  border-radius: 0.4rem;
+}
+
+.pagination,
+.pagination li {
+  padding: 0;
+  margin: 0;
+}
+
+.pagination li {
+  display: inline-block;
+  margin: 0 0.3rem 1em;
+  list-style-type: none;
+}
+
+.pagination li a,
+.pagination li > span {
+  padding: 0.3em 0.6em;
+  border: $pagination-border;
+  border-radius: $pagination-border-radius;
+}
+
+.pagination li a:hover {
+  color: $pagination-hover-color;
+}
+
+.pagination li.current a {
+  background-color: $pagination-current-bg;
+  color: $pagination-current-color;
+}
--- a/src/css/2-components/_radiobox.scss
+++ b/src/css/2-components/_radiobox.scss
@ -0,0 +1,62 @@
+// -------------------------------------------------------------
+// Radiobox Module
+// -------------------------------------------------------------
+
+.radiobox {
+  display: inline-flex;
+  width: 100%;
+  max-width: 32rem;
+  padding: 0.2rem;
+  border: $input-border;
+  border-radius: $input-border-radius;
+}
+
+.radiobox--full {
+  width: 100%;
+  max-width: 100%;
+}
+
+.radiobox input {
+  position: absolute;
+  left: -9999rem;
+}
+
+.radiobox input + label {
+  display: flex;
+  width: 50%;
+  min-height: 4rem;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 1.8rem;
+  margin: 0;
+  border-radius: calc($input-border-radius - 0.1rem);
+  font-weight: normal;
+  text-align: center;
+  transition: all 0.05s ease-in;
+}
+
+// Checked state
+.radiobox input:checked + label {
+  background-color: $color-1;
+  color: #fff;
+}
+
+// Focus state
+.radiobox input:focus + label {
+  box-shadow: $focus-ring;
+}
+
+.radiobox:active,
+.radiobox:focus-within {
+  box-shadow: $focus-ring;
+}
+
+.radiobox:focus-within input:focus + label {
+  box-shadow: none;
+}
+
+// Error state
+.f-error .radiobox {
+  border-color: $input-error;
+}
--- a/src/css/2-components/_switch.scss
+++ b/src/css/2-components/_switch.scss
@ -0,0 +1,55 @@
+@use "sass:color";
+
+// Switch Module
+// Namespace: .switch
+
+// -------------------------------------------------------------
+// module
+// -------------------------------------------------------------
+
+.switch {
+  position: relative;
+  width: 3em;
+  height: 1.5em;
+  border: $input-border;
+  margin: 0;
+  appearance: none;
+  background-color: #fff;
+  border-radius: 42rem;
+  box-shadow: inset -1.5em 0 0 0.1rem $input-border-color;
+  outline: none;
+  transform: translateY(0.4em);
+  transition: 0.2s;
+  vertical-align: baseline;
+}
+
+// Checked state
+// --------------------------------------------------------------
+
+.switch:checked {
+  border-color: $color-1;
+  box-shadow: inset 1.5em 0 0 0.1rem $color-1;
+}
+
+// Focus state
+// --------------------------------------------------------------
+
+.switch:is(:active,:focus) {
+  box-shadow: inset -2rem 0 0 0.1rem rgb(192 192 192 / 50%), $focus-ring;
+}
+
+.switch:checked:where(:active,:focus) {
+  box-shadow: inset 2rem 0 0 0.1rem $color-1, $focus-ring;
+}
+
+// Error state
+// --------------------------------------------------------------
+
+.f-error > .switch {
+  margin: 0;
+  outline: none;
+}
+
+.f-error > .switch:checked {
+  border-color: $input-error;
+}
--- a/src/css/2-components/_tables.scss
+++ b/src/css/2-components/_tables.scss
@ -0,0 +1,64 @@
+@use "sass:color";
+
+// Table Module
+// namespace : .table
+
+// -------------------------------------------------------------
+// module
+// -------------------------------------------------------------
+
+.table {
+  width: 100%;
+  max-width: 100%;
+  border: 0.1rem solid $color-4;
+  border-collapse: collapse /* remove spacing between table cells */;
+  border-spacing: 0;
+  color: $color-dark-text;
+  table-layout: fixed /* http://css-tricks.com/fixing-tables-long-strings */;
+}
+
+.table caption {
+  padding: 1em 0;
+  color: $color-dark-text;
+  font: italic 85%/1 $fontstack1;
+  text-align: center;
+}
+
+.table thead {
+  background: #e0e0e0;
+  color: $color-dark-text;
+  text-align: left;
+  vertical-align: bottom;
+}
+
+.table td,
+.table th {
+  overflow: hidden;
+  padding: 1rem;
+  border-width: 0;
+  border-bottom: 0.1rem solid $color-4;
+  margin: 0;
+  font-size: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+}
+
+.table th {
+  padding-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  font-weight: 600;
+}
+
+.table :is(td, th):first-child {
+  padding-left: 2rem;
+}
+
+.table :is(td, th):last-child {
+  padding-right: 2rem;
+}
+
+.table--invisible,
+.table--invisible :is(td, th):nth-child(n) { // nth-child(n) is used to keep a increasing specificity for this special table style
+  border-bottom: none;
+}
--- a/src/css/2-components/_tag.scss
+++ b/src/css/2-components/_tag.scss
@ -0,0 +1,39 @@
+// -----------------------------------------------------------
+// == Tag component
+// -----------------------------------------------------------
+
+.tag {
+  display: inline-block;
+  padding: 0.3rem 0.5rem;
+  background-color: #607386;
+  border-radius: 0.2rem;
+  color: $color-light-text;
+  font-size: 1.2rem;
+  font-weight: bold;
+  letter-spacing: 0.03em;
+}
+
+.tag--medium {
+  padding: 0.2rem 0.8rem;
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 1.25em;
+}
+
+.tag--dark {
+  background-color: $color-dark-text;
+}
+
+.tag--red {
+  background-color: $color-red;
+}
+
+.tag--green {
+  background-color: $color-green;
+  color: $color-light-text;
+}
+
+.tag--yellow {
+  background-color: $color-yellow;
+  color: $color-dark-text;
+}
--- a/src/css/2-components/_tooltip.scss
+++ b/src/css/2-components/_tooltip.scss
@ -0,0 +1,40 @@
+// -------------------------------------------------------------
+// Tooltip
+// -------------------------------------------------------------
+
+$tooltip-bg: rgb(0 0 0 / 80%);
+$tooltip-color: #fff;
+$tooltip-radius: 0.5em;
+
+// -------------------------------------------------------------
+// module
+// -------------------------------------------------------------
+
+.tooltip {
+  position: relative;
+  cursor: help;
+}
+
+.tooltip:hover::after {
+  position: absolute;
+  bottom: 1.35em;
+  left: 1em;
+  padding: 0.5em 1em;
+  background: $tooltip-bg;
+  border-radius: $tooltip-radius;
+  color: $tooltip-color;
+  content: attr(data-tooltip);
+  font-family: $fontstack2;
+  white-space: nowrap;
+}
+
+.tooltip:hover::before {
+  position: absolute;
+  bottom: 1em;
+  left: 2em;
+  display: block;
+  border: solid;
+  border-width: 0.4em 0.4em 0;
+  border-color: $tooltip-bg transparent;
+  content: "";
+}
--- a/src/css/3-base/_01-fonts.scss
+++ b/src/css/3-base/_01-fonts.scss
@ -0,0 +1,13 @@
+// -----------------------------------------------------------
+// == 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
+// }
--- a/src/css/3-base/_02-icons.scss
+++ b/src/css/3-base/_02-icons.scss
@ -0,0 +1,20 @@
+// stylelint-disable unit-no-unknown
+// -------------------------------------------------------------
+// icons
+// -------------------------------------------------------------
+
+.ico-inline svg {
+  width: 0.75em; // em value as fallback for cap unit
+  width: 1cap;
+  height: 0.75em;
+  height: 1cap;
+  margin-inline: 0.75ch;
+}
+
+.ico-inline:first-child svg {
+  margin-inline-start: initial;
+}
+
+.ico-inline:last-child svg {
+  margin-inline-end: initial;
+}
--- a/src/css/3-base/_03-grids.scss
+++ b/src/css/3-base/_03-grids.scss
@ -0,0 +1,56 @@
+// -------------------------------------------------------------
+// grids
+// -------------------------------------------------------------
+
+@include grid(1);
+@include grid(2);
+@include grid(3);
+@include grid(4);
+@include grid(5);
+@include grid(6);
+@include grid(9);
+
+.gap { gap: $gap; }
+.gap-demi { gap: calc($gap / 2); }
+.gap-inline { row-gap: $gap; }
+.gap-block { column-gap: $gap; }
+
+// Spread grid's child on ceveral columns
+// --------------------------------------------------------------
+
+.col-span-0 { grid-column: auto; }
+.col-span-2 { grid-column: span 2 / span 2; }
+.col-span-3 { grid-column: span 3 / span 3; }
+.col-span-4 { grid-column: span 4 / span 4; }
+.col-span-5 { grid-column: span 5 / span 5; }
+
+@media (max-width: $medium) {
+  @include grid(1, $medium-label);
+  @include grid(2, $medium-label);
+  @include grid(3, $medium-label);
+  @include grid(4, $medium-label);
+
+  .md\:gap { gap: $gap; }
+  .md\:gap-demi { gap: calc($gap / 2); }
+  .md\:gap-inline { row-gap: $gap; }
+  .md\:gap-block { column-gap: $gap; }
+
+  .md\:col-span-0 { grid-column: auto; }
+  .md\:col-span-1 { grid-column: span 1 / span 1; }
+  .md\:col-span-2 { grid-column: span 2 / span 2; }
+  .md\:col-span-3 { grid-column: span 3 / span 3; }
+}
+
+@media (max-width: $small) {
+  @include grid(1, $small-label);
+  @include grid(2, $small-label);
+
+  .sm\:gap { gap: $gap; }
+  .sm\:gap-demi { gap: calc($gap / 2); }
+  .sm\:gap-inline { row-gap: $gap; }
+  .sm\:gap-block { column-gap: $gap; }
+
+  .sm\:col-span-0 { grid-column: auto; }
+  .sm\:col-span-1 { grid-column: span 1 / span 1; }
+  .sm\:col-span-2 { grid-column: span 2 / span 2; }
+}
--- a/src/css/3-base/_04-main.scss
+++ b/src/css/3-base/_04-main.scss
@ -0,0 +1,84 @@
+// -----------------------------------------------------------
+// main
+// -----------------------------------------------------------
+
+body {
+  accent-color: $color-1;
+  background-color: #fff;
+  color: $color-dark-text;
+  font-family: $fontstack1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizespeed; // Fix performances issues (especially on mobile): https://marco.org/2012/11/15/text-rendering-optimize-legibility
+}
+
+// titles
+// --------------------------------------------------------------
+
+h1 {
+  @include flow(50);
+}
+
+h2 {
+  @include flow(25);
+}
+
+h3 {
+  @include flow(18);
+}
+
+h4 {
+  @include flow(16);
+}
+
+// links
+// --------------------------------------------------------------
+
+a:where(:any-link) {
+  color: currentcolor;
+  text-decoration: none;
+}
+
+a:where(:focus) {
+  border-radius: 0.3rem;
+  box-shadow: $focus-ring;
+  outline: none;
+}
+
+a:where(:not([class]):hover) {
+  text-decoration: underline;
+}
+
+// A elements that don't have a class get default styles
+a:not([class]) {
+  color: $color-link;
+  text-decoration: underline;
+}
+
+// buttons
+// --------------------------------------------------------------
+
+// Some browsers like Firefox doesn't display a pointer by default on buttons deliberately (as it shouldn't be the only indication of a clickable element). We choosed to make it default anyway to limit repetition in our stylesheets.
+button {
+  cursor: pointer;
+}
+
+// lists
+// --------------------------------------------------------------
+
+// Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed
+:where(ul, ol)[role="list"] {
+  list-style: none;
+}
+
+// divers
+// --------------------------------------------------------------
+
+hr {
+  display: block;
+  height: 0.1rem;
+  padding: 0;
+  border: 0;
+  border-top: 0.1rem solid #ccc;
+  margin: 1em 0;
+}
--- a/src/css/3-base/_05-layout.scss
+++ b/src/css/3-base/_05-layout.scss
@ -0,0 +1,14 @@
+// -------------------------------------------------------------
+// layout
+// -------------------------------------------------------------
+
+.container {
+  width: 100%;
+  max-width: $container-base;
+  margin-inline: auto;
+  padding-inline: 1rem;
+}
+
+.container--small {
+  max-width: $container-small;
+}
--- a/src/css/3-base/_06-header.scss
+++ b/src/css/3-base/_06-header.scss
@ -0,0 +1,3 @@
+// -------------------------------------------------------------
+// header
+// -------------------------------------------------------------
--- a/src/css/3-base/_07-navigation.scss
+++ b/src/css/3-base/_07-navigation.scss
@ -0,0 +1,3 @@
+// -------------------------------------------------------------
+// navigation
+// -------------------------------------------------------------
--- a/src/css/3-base/_08-content.scss
+++ b/src/css/3-base/_08-content.scss
@ -0,0 +1,7 @@
+// -------------------------------------------------------------
+// content
+// -------------------------------------------------------------
+
+.content :where(h2, h3, h4) {
+  font-weight: 600;
+}
--- a/src/css/3-base/_09-footer.scss
+++ b/src/css/3-base/_09-footer.scss
@ -0,0 +1,9 @@
+// -------------------------------------------------------------
+// footer
+// -------------------------------------------------------------
+
+.footer {
+  border-top: 0.2rem dotted $color-4;
+  margin-top: 5rem;
+  padding-block: 3rem;
+}
--- a/src/css/4-modules/.gitkeep
+++ b/src/css/4-modules/.gitkeep
--- a/src/css/5-pages/.gitkeep
+++ b/src/css/5-pages/.gitkeep
--- a/src/css/6-helpers/_colors.scss
+++ b/src/css/6-helpers/_colors.scss
@ -0,0 +1,10 @@
+// -------------------------------------------------------------
+// colors
+// -------------------------------------------------------------
+
+.color-1 { color: $color-1; }
+.color-2 { color: $color-2; }
+.color-3 { color: $color-3; }
+
+.color-red { color: $color-red; }
+.color-green { color: $color-green; }
--- a/src/css/6-helpers/_globals.scss
+++ b/src/css/6-helpers/_globals.scss
@ -0,0 +1,17 @@
+@each $utilKey, $utilValue in $helpers {
+  @if $utilKey == base {
+    @each $class, $prop, $value in map-get($helpers, $utilKey) {
+      .#{$class} {
+        #{$prop}: #{$value};
+      }
+    }
+  } @else {
+    @media (max-width: map-get($breakpoints, $utilKey)) {
+      @each $class, $prop, $value in map-get($helpers, $utilKey) {
+        .#{$utilKey}\:#{$class} {
+          #{$prop}: #{$value};
+        }
+      }
+    }
+  }
+}
--- a/src/css/6-helpers/_spacing.scss
+++ b/src/css/6-helpers/_spacing.scss
@ -0,0 +1,71 @@
+@use "sass:string";
+
+// -------------------------------------------------------------
+// spacing
+// -------------------------------------------------------------
+
+// thanks to Kitty Giraudel
+// used to "cast" float to string (0.5 => 05)
+@function str-replace($string, $search, $replace: "") {
+  $string: "#{$string}";
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@mixin spacing($prefix, $property, $sizes) {
+  @each $size in $sizes {
+    .#{$prefix}#{str-replace($size, '.')} {
+      @if $size == 0 {
+        #{$property}: #{$size};
+      } @else {
+        #{$property}: #{$size}rem;
+      }
+    }
+  }
+}
+
+@each $spacerKey, $spacerValue in $spacers {
+  @if $spacerKey == base {
+    @each $class, $prop, $values in map-get($spacers, $spacerKey) {
+      @each $value in $values {
+        .#{$class}#{str-replace($value, '.')} {
+          @if $value == 0 {
+            #{$prop}: #{$value};
+          } @else {
+            #{$prop}: #{$value}rem;
+          }
+        }
+      }
+    }
+  } @else {
+    @media (max-width: map-get($breakpoints, $spacerKey)) {
+      @each $class, $prop, $values in map-get($spacers, $spacerKey) {
+        @each $value in $values {
+          .#{$spacerKey}\:#{$class}#{str-replace($value, '.')} {
+            @if $value == 0 {
+              #{$prop}: #{$value};
+            } @else {
+              #{$prop}: #{$value}rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// specific spacers
+// --------------------------------------------------------------
+
+.mt-gap {
+  margin-top: $gap;
+}
+
+.mb-gap {
+  margin-bottom: $gap;
+}
--- a/src/css/6-helpers/_state.scss
+++ b/src/css/6-helpers/_state.scss
@ -0,0 +1,7 @@
+// -------------------------------------------------------------
+// state
+// -------------------------------------------------------------
+
+.is-disabled {
+  cursor: not-allowed;
+}
--- a/src/css/7-vendors/.gitkeep
+++ b/src/css/7-vendors/.gitkeep
--- a/src/css/8-rwd/_rwd-large.scss
+++ b/src/css/8-rwd/_rwd-large.scss
@ -0,0 +1,6 @@
+// -------------------------------------------------------------
+// rwd large
+// -------------------------------------------------------------
+
+// @media (max-width: $large) {
+// }
--- a/src/css/8-rwd/_rwd-medium.scss
+++ b/src/css/8-rwd/_rwd-medium.scss
@ -0,0 +1,6 @@
+// -------------------------------------------------------------
+// rwd medium
+// -------------------------------------------------------------
+
+// @media (max-width: $medium) {
+// }
--- a/src/css/8-rwd/_rwd-small.scss
+++ b/src/css/8-rwd/_rwd-small.scss
@ -0,0 +1,6 @@
+// -------------------------------------------------------------
+// rwd small
+// -------------------------------------------------------------
+
+// @media (max-width: $small) {
+// }
--- a/src/css/8-rwd/_rwd.scss
+++ b/src/css/8-rwd/_rwd.scss
@ -0,0 +1,3 @@
+// -------------------------------------------------------------
+// Custom media-queries
+// -------------------------------------------------------------
--- a/src/css/_colors.scss
+++ b/src/css/_colors.scss
@ -0,0 +1,38 @@
+// -------------------------------------------------------------
+// colors
+// --------------------------------------------------------------
+
+$color-1: #3498db;
+$color-2: #1abc9c;
+$color-3: #34495e;
+$color-4: #d0dada;
+$color-info: #2185d0;
+$color-red: #de350b;
+$color-green: $color-2;
+$color-yellow: #ffdd57;
+
+// -------------------------------------------------------------
+// text
+// -------------------------------------------------------------
+
+$color-light-text: #fcfcfc;
+$color-dark-text: #000;
+
+// -------------------------------------------------------------
+// links
+// -------------------------------------------------------------
+
+$color-link: $color-1;
+
+// -------------------------------------------------------------
+// brands
+// -------------------------------------------------------------
+
+$color-twitter: #55acee;
+$color-facebook: #3b5998;
+$color-google: #dd4b39;
+$color-youtube: #e52d27;
+$color-pinterest: #cc2127;
+$color-vimeo: #1ab7ea;
+$color-linkedin: #0976b4;
+$color-instagram: #3f729b;
--- a/src/css/_config.scss
+++ b/src/css/_config.scss
@ -0,0 +1,52 @@
+@use "sass:color";
+@use "sass:map";
+
+// --------------------------------------------------------------
+// config
+// --------------------------------------------------------------
+
+// -------------------------------------------------------------
+// base
+// -------------------------------------------------------------
+
+$base-font: 16; // 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";
+$fontstack2: "Georgia", "Times", "Times New Roman", 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
+
+// -------------------------------------------------------------
+// container
+// -------------------------------------------------------------
+
+$container-base: 120rem;
+$container-small: 55rem;
+
+// -------------------------------------------------------------
+// responsive
+// -------------------------------------------------------------
+
+$breakpoints: (
+  sm: 480px,
+  md: 769px,
+  lg: 1000px,
+);
+$small: map.get($breakpoints, sm);
+$medium: map.get($breakpoints, md);
+$large: map.get($breakpoints, lg);
+$small-label: "sm";
+$medium-label: "md";
+$large-label: "lg";
+
+// -------------------------------------------------------------
+// grids
+// -------------------------------------------------------------
+
+$gap: 3rem;
+
+// -------------------------------------------------------------
+// others
+// -------------------------------------------------------------
+
+$focus-ring: 0 0 0 0.3rem color.change(#3498db, $alpha: 0.7);
--- a/src/css/_helpers.scss
+++ b/src/css/_helpers.scss
@ -0,0 +1,131 @@
+// -------------------------------------------------------------
+// helpers
+// -------------------------------------------------------------
+
+$helpers: (
+  "base": (
+    (block, display, block),
+    (inline, display, inline),
+    (inline-block, display, inline-block),
+    (flex, display, flex),
+    (inline-flex, display, inline-flex),
+    (flex-row, flex-direction, row),
+    (flex-row-reverse, flex-direction, row-reverse),
+    (flex-col, flex-direction, column),
+    (flex-col-reverse, flex-direction, column-reverse),
+    (flex-wrap, flex-wrap, wrap),
+    (flex-no-wrap, flex-wrap, nowrap),
+    (flex-shrink, flex-shrink, 1),
+    (flex-no-shrink, flex-shrink, 0),
+    (flex-grow, flex-grow, 1),
+    (flex-no-grow, flex-grow, 0),
+    (float-left, float, left),
+    (float-right, float, right),
+    (float-none, float, none),
+    (text-bold, font-weight, bold),
+    (text-semibold, font-weight, 600),
+    (text-regular, font-weight, normal),
+    (text-italic, font-style, italic),
+    (text-uppercase, text-transform, uppercase),
+    (text-lowercase, text-transform, lowercase),
+    (text-underline, text-decoration, underline),
+    (text-left, text-align, left),
+    (text-center, text-align, center),
+    (text-right, text-align, right),
+    (text-justify, text-align, justify),
+    (text-wrap, overflow-wrap, break-word),
+    (text-small, font-size, 0.875em),
+    (text-big, font-size, 1.1429em),
+    (text-bigger, font-size, 1.285em),
+    (place-items-center, place-items, center),
+    (justify-start, justify-content, flex-start),
+    (justify-end, justify-content, flex-end),
+    (justify-center, justify-content, center),
+    (justify-between, justify-content, space-between),
+    (justify-around, justify-content, space-around),
+    (justify-evenly, justify-content, space-evenly),
+    (justify-items-start, justify-items, start),
+    (justify-items-end, justify-items, end),
+    (justify-items-center, justify-items, center),
+    (align-start, align-content, start),
+    (align-end, align-content, end),
+    (align-center, align-content, center),
+    (align-between, align-content, space-between),
+    (align-around, align-content, space-around),
+    (align-evenly, align-content, space-evenly),
+    (align-items-start, align-items, flex-start),
+    (align-items-end, align-items, flex-end),
+    (align-items-center, align-items, center),
+    (align-items-stretch, align-items, stretch),
+    (justify-self-auto, justify-self, auto),
+    (justify-self-start, justify-self, start),
+    (justify-self-end, justify-self, end),
+    (justify-self-center, justify-self, center),
+    (justify-self-stretch, justify-self, stretch),
+    (align-self-auto, align-self, auto),
+    (align-self-start, align-self, flex-start),
+    (align-self-end, align-self, flex-end),
+    (align-self-center, align-self, center),
+    (align-self-stretch, align-self, stretch),
+    (align-top, vertical-align, top),
+    (align-bottom, vertical-align, bottom),
+    (align-middle, vertical-align, middle),
+    (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),
+    (mw0, min-width, 0),
+    (list-type-disc, list-style-type, disc),
+    (ml-auto, margin-left, auto),
+    (mr-auto, margin-right, auto),
+  ),
+  "md": (
+    (flex-col, flex-direction, column),
+    (flex-grow, flex-grow, 1),
+    (flex-wrap, flex-wrap, wrap),
+    (align-items-stretch, align-items, stretch),
+    (align-items-start, align-items, flex-start),
+  ),
+  "sm": (
+    (flex, display, flex),
+    (flex-col, flex-direction, column),
+    (text-center, text-align, center),
+    (w100, width, 100%),
+  ),
+);
+
+// -------------------------------------------------------------
+// spacers
+// -------------------------------------------------------------
+
+$spacers: (
+  "base": (
+    (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)),
+    (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)),
+    (pr, padding-right, (1, 2, 3)),
+    (pb, padding-bottom, (1, 2, 3, 4, 7, 8)),
+    (pl, padding-left, (1, 2, 3, 4)),
+  ),
+  "md": (
+    (mr, margin-right, (0, 0.5, 1, 2, 3)),
+  ),
+  "sm": (
+    (ma, margin, (0, 1)),
+    (ml, margin-left, (0)),
+    (pa, padding, (0, 1)),
+  )
+);
--- a/src/css/style.scss
+++ b/src/css/style.scss
@ -0,0 +1,86 @@
+// -------------------------------------------------------------
+// config
+// -------------------------------------------------------------
+
+@import "_colors";
+@import "_config";
+@import "_helpers";
+
+// -------------------------------------------------------------
+// core
+// -------------------------------------------------------------
+
+@import "1-core/_00-mixins";
+@import "1-core/_01-reset";
+@import "1-core/_02-typography";
+@import "1-core/_03-helpers";
+@import "1-core/_04-layout";
+@import "1-core/_05-grids";
+@import "1-core/_06-rwd";
+@import "1-core/_debug";
+
+// -------------------------------------------------------------
+// components
+// -------------------------------------------------------------
+
+@import "2-components/_forms";
+@import "2-components/_switch";
+@import "2-components/_radiobox";
+@import "2-components/_buttons";
+@import "2-components/_pagination";
+@import "2-components/_tables";
+@import "2-components/_notifications";
+@import "2-components/_tag";
+@import "2-components/_tooltip";
+
+// -------------------------------------------------------------
+// base
+// -------------------------------------------------------------
+
+@import "3-base/_01-fonts";
+@import "3-base/_02-icons";
+@import "3-base/_03-grids";
+@import "3-base/_04-main";
+@import "3-base/_05-layout";
+@import "3-base/_06-header";
+@import "3-base/_07-navigation";
+@import "3-base/_08-content";
+@import "3-base/_09-footer";
+
+// -------------------------------------------------------------
+// modules
+// -------------------------------------------------------------
+
+// @import "4-modules/...";
+
+// -------------------------------------------------------------
+// pages
+// -------------------------------------------------------------
+
+// @import "5-pages/...";
+
+// -------------------------------------------------------------
+// helpers
+// -------------------------------------------------------------
+
+@import "6-helpers/_globals";
+@import "6-helpers/_colors";
+@import "6-helpers/_spacing";
+
+/// -------------------------------------------------------------
+// vendors
+// -------------------------------------------------------------
+
+// Tips: load vendor from your package manager and override CSS here (e.g. o-vendor-name.scss)
+// ↓ In this context, "o" means "override" and you can use it as a convention.
+
+// @import "7-vendors/o-vendor.scss";
+
+// -------------------------------------------------------------
+// rwd
+// -------------------------------------------------------------
+
+@import "8-rwd/_rwd-large";
+@import "8-rwd/_rwd-medium";
+@import "8-rwd/_rwd-small";
+@import "8-rwd/_rwd";
--- a/src/index.njk
+++ b/src/index.njk
@ -0,0 +1,5 @@
+---
+layout: base.njk
+title: Compteur de grève
+---
+contenu