GuerillaStudio/compteur-de-greve
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/compteur-de-greve.git synced 2024-10-09 05:19:02 +00:00
Code Issues Activity

init

Browse source
This commit is contained in:
Tixie 2023-03-01 19:47:59 +01:00
commit 07eb7f5783
50 changed files with 4191 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.browserslistrc Normal file
View file

@ -0,0 +1,3 @@
> 1%
not dead
not op_mini all

13
.editorconfig Normal file
View file

@ -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

12
.eleventy.js Normal file
View file

@ -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",
},
};
};

13
.gitignore vendored Normal file
View file

@ -0,0 +1,13 @@
# dependencies installed by npm
node_modules
# build artifacts
public
# secrets and errors
.env
.log
# macOS related files
.DS_Store

16
README.md Normal file
View file

@ -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

2437
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

16
package.json Normal file
View file

@ -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"
}
}

17
src/_includes/base.njk Normal file
View file

@ -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>

39
src/css/1-core/_00-mixins.scss Executable file
View file

@ -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);
}

48
src/css/1-core/_01-reset.scss Executable file
View file

@ -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;
}

29
src/css/1-core/_02-typography.scss Executable file
View file

@ -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;
}

29
src/css/1-core/_03-helpers.scss Executable file
View file

@ -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;
}

26
src/css/1-core/_04-layout.scss Executable file
View file

@ -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;
}

19
src/css/1-core/_05-grids.scss Executable file
View file

@ -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));
}
}
}

65
src/css/1-core/_06-rwd.scss Executable file
View file

@ -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;
}
}

36
src/css/1-core/_debug.scss Executable file
View file

@ -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;
}

122
src/css/2-components/_buttons.scss Executable file
View file

@ -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;
}

251
src/css/2-components/_forms.scss Executable file
View file

@ -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;
}

43
src/css/2-components/_notifications.scss Executable file
View file

@ -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;
}

50
src/css/2-components/_pagination.scss Executable file
View file

@ -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;
}

62
src/css/2-components/_radiobox.scss Executable file
View file

@ -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;
}

55
src/css/2-components/_switch.scss Executable file
View file

@ -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;
}

64
src/css/2-components/_tables.scss Executable file
View file

@ -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;
}

39
src/css/2-components/_tag.scss Normal file
View file

@ -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;
}

40
src/css/2-components/_tooltip.scss Normal file
View file

@ -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: "";
}

13
src/css/3-base/_01-fonts.scss Executable file
View file

@ -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
// }

20
src/css/3-base/_02-icons.scss Executable file
View file

@ -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;
}

56
src/css/3-base/_03-grids.scss Executable file
View file

@ -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; }
}

84
src/css/3-base/_04-main.scss Executable file
View file

@ -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;
}

14
src/css/3-base/_05-layout.scss Executable file
View file

@ -0,0 +1,14 @@
// -------------------------------------------------------------
// layout
// -------------------------------------------------------------
.container {
width: 100%;
max-width: $container-base;
margin-inline: auto;
padding-inline: 1rem;
}
.container--small {
max-width: $container-small;
}

3
src/css/3-base/_06-header.scss Executable file
View file

@ -0,0 +1,3 @@
// -------------------------------------------------------------
// header
// -------------------------------------------------------------

3
src/css/3-base/_07-navigation.scss Executable file
View file

@ -0,0 +1,3 @@
// -------------------------------------------------------------
// navigation
// -------------------------------------------------------------

7
src/css/3-base/_08-content.scss Executable file
View file

@ -0,0 +1,7 @@
// -------------------------------------------------------------
// content
// -------------------------------------------------------------
.content :where(h2, h3, h4) {
font-weight: 600;
}

9
src/css/3-base/_09-footer.scss Executable file
View file

@ -0,0 +1,9 @@
// -------------------------------------------------------------
// footer
// -------------------------------------------------------------
.footer {
border-top: 0.2rem dotted $color-4;
margin-top: 5rem;
padding-block: 3rem;
}

0
src/css/4-modules/.gitkeep Executable file
View file

0
src/css/5-pages/.gitkeep Executable file
View file

10
src/css/6-helpers/_colors.scss Executable file
View file

@ -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; }

17
src/css/6-helpers/_globals.scss Normal file
View file

@ -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};
}
}
}
}
}

71
src/css/6-helpers/_spacing.scss Executable file
View file

@ -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;
}

7
src/css/6-helpers/_state.scss Executable file
View file

@ -0,0 +1,7 @@
// -------------------------------------------------------------
// state
// -------------------------------------------------------------
.is-disabled {
cursor: not-allowed;
}

0
src/css/7-vendors/.gitkeep Executable file
View file

6
src/css/8-rwd/_rwd-large.scss Executable file
View file

@ -0,0 +1,6 @@
// -------------------------------------------------------------
// rwd large
// -------------------------------------------------------------
// @media (max-width: $large) {
// }

6
src/css/8-rwd/_rwd-medium.scss Executable file
View file

@ -0,0 +1,6 @@
// -------------------------------------------------------------
// rwd medium
// -------------------------------------------------------------
// @media (max-width: $medium) {
// }

6
src/css/8-rwd/_rwd-small.scss Executable file
View file

@ -0,0 +1,6 @@
// -------------------------------------------------------------
// rwd small
// -------------------------------------------------------------
// @media (max-width: $small) {
// }

3
src/css/8-rwd/_rwd.scss Executable file
View file

@ -0,0 +1,3 @@
// -------------------------------------------------------------
// Custom media-queries
// -------------------------------------------------------------

38
src/css/_colors.scss Executable file
View file

@ -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;

52
src/css/_config.scss Executable file
View file

@ -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);

131
src/css/_helpers.scss Normal file
View file

@ -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)),
)
);

86
src/css/style.scss Executable file
View file

@ -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";

5
src/index.njk Normal file
View file

@ -0,0 +1,5 @@
---
layout: base.njk
title: Compteur de grève
---
contenu