mirror of
https://github.com/GuerillaStudio/compteur-de-greve.git
synced 2024-12-18 05:41:56 +00:00
Bootstrap layout
This commit is contained in:
parent
014e293eaf
commit
7209549722
17 changed files with 97 additions and 349 deletions
|
|
@ -10,11 +10,20 @@
|
||||||
<meta name="robots" content="none">
|
<meta name="robots" content="none">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header class="header">
|
||||||
<h1>{{ title }}</h1>
|
{% if page.fileSlug === '' %}
|
||||||
|
<h1 class="header-title">#CompteurDeGrève</h1>
|
||||||
|
{% else %}
|
||||||
|
<a class="header-title" href="{{ '/' }}">#CompteurDeGrève</a>
|
||||||
|
{% endif %}
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main class="main">
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</main>
|
</main>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-container container">
|
||||||
|
<a href="/mentions-legales">Mentions légales</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -21,9 +21,9 @@ $btn-border-width: 0.1rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0.8em 1.6em;
|
padding: 0.8em 1.6em;
|
||||||
border: $btn-border-width solid transparent;
|
border: $btn-border-width solid transparent;
|
||||||
|
border-radius: $btn-radius;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: var(--color-accent);
|
background-color: var(--color-accent);
|
||||||
border-radius: $btn-radius;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
font: inherit;
|
font: inherit;
|
||||||
|
|
|
||||||
|
|
@ -67,9 +67,9 @@ select {
|
||||||
max-width: 32rem;
|
max-width: 32rem;
|
||||||
padding: $input-padding;
|
padding: $input-padding;
|
||||||
border: $input-border;
|
border: $input-border;
|
||||||
|
border-radius: $input-border-radius;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: $input-background-color;
|
background-color: $input-background-color;
|
||||||
border-radius: $input-border-radius;
|
|
||||||
color: $input-color;
|
color: $input-color;
|
||||||
line-height: $input-lineheight;
|
line-height: $input-lineheight;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
// -------------------------------------------------------------
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
// -----------------------------------------------------------
|
|
||||||
// == 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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
// -------------------------------------------------------------
|
|
||||||
// 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: "";
|
|
||||||
}
|
|
||||||
|
|
@ -3,15 +3,26 @@
|
||||||
// -----------------------------------------------------------
|
// -----------------------------------------------------------
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
min-height: 100dvh;
|
||||||
|
flex-direction: column;
|
||||||
accent-color: $color-1;
|
accent-color: $color-1;
|
||||||
background-color: #fff;
|
background: $color-bg-1 no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='532' fill='none'%3E%3Cpath fill='url(%23a)' d='M0 0h1280v262L0 532V0Z'/%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='0' r='1' gradientTransform='matrix(1280 532 -352.4 847.9 0 0)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23321D64'/%3E%3Cstop offset='.8' stop-color='%23C82E79'/%3E%3Cstop offset='.9' stop-color='%23D33238'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||||
|
background-position: 0 0;
|
||||||
|
background-size: 100% auto;
|
||||||
color: $color-dark-text;
|
color: $color-dark-text;
|
||||||
font-family: $fontstack1;
|
font-family: $fontstack1;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
font-weight: 500;
|
||||||
text-rendering: optimizespeed; // Fix performances issues (especially on mobile): https://marco.org/2012/11/15/text-rendering-optimize-legibility
|
text-rendering: optimizespeed; // Fix performances issues (especially on mobile): https://marco.org/2012/11/15/text-rendering-optimize-legibility
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
// titles
|
// titles
|
||||||
// --------------------------------------------------------------
|
// --------------------------------------------------------------
|
||||||
|
|
||||||
|
|
@ -20,7 +31,7 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@include flow(25);
|
@include flow(38);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,25 @@
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
// header
|
// header
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
|
|
||||||
|
.header {
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 3.3rem;
|
||||||
|
margin-bottom: -3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title,
|
||||||
|
.header-title:visited {
|
||||||
|
position: relative;
|
||||||
|
padding: 1.5rem 3.5rem;
|
||||||
|
margin: 0;
|
||||||
|
background-color: $color-bg-1;
|
||||||
|
box-shadow: 0 .4rem .4rem rgb(150 152 156 / 61%);
|
||||||
|
color: $color-1;
|
||||||
|
font-size: 2.6rem;
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 1.19em;
|
||||||
|
transform: rotate(-0.5deg);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,11 @@
|
||||||
// content
|
// content
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 5rem;
|
||||||
|
background-color: $color-bg-1;
|
||||||
|
}
|
||||||
|
|
||||||
.content :where(h2, h3, h4) {
|
.content :where(h2, h3, h4) {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,19 @@
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
border-top: 0.2rem dotted $color-4;
|
padding: 2.5rem 0;
|
||||||
margin-top: 5rem;
|
background-color: $color-1;
|
||||||
padding-block: 3rem;
|
color: $color-light-text;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: $color-light-text;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,27 @@
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
// colors
|
// palette
|
||||||
// --------------------------------------------------------------
|
// --------------------------------------------------------------
|
||||||
|
|
||||||
$color-1: #3498db;
|
$hue-purple: 258deg;
|
||||||
$color-2: #1abc9c;
|
$hue-pink: 328deg;
|
||||||
$color-3: #34495e;
|
$hue-yellow: 56deg;
|
||||||
$color-4: #d0dada;
|
$color-1: hsl($hue-purple 55% 25%);
|
||||||
|
$color-2: hsl($hue-purple 39% 40%);
|
||||||
|
$color-3: hsl($hue-pink 93% 44%);
|
||||||
|
$color-4: hsl($hue-yellow 100% 53%);
|
||||||
|
|
||||||
|
// -------------------------------------------------------------
|
||||||
|
// layout
|
||||||
|
// -------------------------------------------------------------
|
||||||
|
|
||||||
|
$color-bg-1: hsl(0deg 100% 99%);
|
||||||
|
$color-gradient-1: radial-gradient(100% 100% at 0% 0%, $color-1 10.36%, #C82E79 77.03%, #D33238 94.73%);
|
||||||
|
|
||||||
|
// -------------------------------------------------------------
|
||||||
|
// utility
|
||||||
|
// -------------------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
$color-info: #2185d0;
|
$color-info: #2185d0;
|
||||||
$color-red: #de350b;
|
$color-red: #de350b;
|
||||||
$color-green: $color-2;
|
$color-green: $color-2;
|
||||||
|
|
@ -15,24 +31,11 @@ $color-yellow: #ffdd57;
|
||||||
// text
|
// text
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
|
|
||||||
$color-light-text: #fcfcfc;
|
$color-light-text: hsl($hue-purple 40% 99%);
|
||||||
$color-dark-text: #000;
|
$color-dark-text: $color-1;
|
||||||
|
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
// links
|
// links
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
|
|
||||||
$color-link: $color-1;
|
$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;
|
|
||||||
|
|
|
||||||
|
|
@ -9,10 +9,9 @@
|
||||||
// base
|
// base
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
|
|
||||||
$base-font: 16; // px value (without unit), will be converted in em
|
$base-font: 18; // px value (without unit), will be converted in em
|
||||||
$line-height: 1.5;
|
$line-height: 1.5;
|
||||||
$fontstack1: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
$fontstack1: "Inter", -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
|
// ℹ️ 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
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,14 +24,8 @@
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
|
|
||||||
@import "2-components/_forms";
|
@import "2-components/_forms";
|
||||||
@import "2-components/_switch";
|
|
||||||
@import "2-components/_radiobox";
|
|
||||||
@import "2-components/_buttons";
|
@import "2-components/_buttons";
|
||||||
@import "2-components/_pagination";
|
|
||||||
@import "2-components/_tables";
|
|
||||||
@import "2-components/_notifications";
|
@import "2-components/_notifications";
|
||||||
@import "2-components/_tag";
|
|
||||||
@import "2-components/_tooltip";
|
|
||||||
|
|
||||||
// -------------------------------------------------------------
|
// -------------------------------------------------------------
|
||||||
// base
|
// base
|
||||||
|
|
|
||||||
|
|
@ -2,4 +2,7 @@
|
||||||
layout: base.njk
|
layout: base.njk
|
||||||
title: Compteur de grève
|
title: Compteur de grève
|
||||||
---
|
---
|
||||||
contenu
|
|
||||||
|
<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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue