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">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>{{ title }}</h1>
|
||||
<header class="header">
|
||||
{% if page.fileSlug === '' %}
|
||||
<h1 class="header-title">#CompteurDeGrève</h1>
|
||||
{% else %}
|
||||
<a class="header-title" href="{{ '/' }}">#CompteurDeGrève</a>
|
||||
{% endif %}
|
||||
</header>
|
||||
<main>
|
||||
<main class="main">
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<div class="footer-container container">
|
||||
<a href="/mentions-legales">Mentions légales</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@ $btn-border-width: 0.1rem;
|
|||
justify-content: center;
|
||||
padding: 0.8em 1.6em;
|
||||
border: $btn-border-width solid transparent;
|
||||
border-radius: $btn-radius;
|
||||
margin: 0;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: $btn-radius;
|
||||
box-shadow: none;
|
||||
color: var(--color-text);
|
||||
font: inherit;
|
||||
|
|
|
|||
|
|
@ -67,9 +67,9 @@ select {
|
|||
max-width: 32rem;
|
||||
padding: $input-padding;
|
||||
border: $input-border;
|
||||
border-radius: $input-border-radius;
|
||||
margin: 0;
|
||||
background-color: $input-background-color;
|
||||
border-radius: $input-border-radius;
|
||||
color: $input-color;
|
||||
line-height: $input-lineheight;
|
||||
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 {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
flex-direction: column;
|
||||
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;
|
||||
font-family: $fontstack1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-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
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
// titles
|
||||
// --------------------------------------------------------------
|
||||
|
||||
|
|
@ -20,7 +31,7 @@ h1 {
|
|||
}
|
||||
|
||||
h2 {
|
||||
@include flow(25);
|
||||
@include flow(38);
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,25 @@
|
|||
// -------------------------------------------------------------
|
||||
// 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 {
|
||||
padding: 5rem;
|
||||
background-color: $color-bg-1;
|
||||
}
|
||||
|
||||
.content :where(h2, h3, h4) {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,19 @@
|
|||
// -------------------------------------------------------------
|
||||
|
||||
.footer {
|
||||
border-top: 0.2rem dotted $color-4;
|
||||
margin-top: 5rem;
|
||||
padding-block: 3rem;
|
||||
padding: 2.5rem 0;
|
||||
background-color: $color-1;
|
||||
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;
|
||||
$color-2: #1abc9c;
|
||||
$color-3: #34495e;
|
||||
$color-4: #d0dada;
|
||||
$hue-purple: 258deg;
|
||||
$hue-pink: 328deg;
|
||||
$hue-yellow: 56deg;
|
||||
$color-1: hsl($hue-purple 55% 25%);
|
||||
$color-2: hsl($hue-purple 39% 40%);
|
||||
$color-3: hsl($hue-pink 93% 44%);
|
||||
$color-4: hsl($hue-yellow 100% 53%);
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// 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-red: #de350b;
|
||||
$color-green: $color-2;
|
||||
|
|
@ -15,24 +31,11 @@ $color-yellow: #ffdd57;
|
|||
// text
|
||||
// -------------------------------------------------------------
|
||||
|
||||
$color-light-text: #fcfcfc;
|
||||
$color-dark-text: #000;
|
||||
$color-light-text: hsl($hue-purple 40% 99%);
|
||||
$color-dark-text: $color-1;
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// 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;
|
||||
|
|
|
|||
|
|
@ -9,10 +9,9 @@
|
|||
// 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;
|
||||
$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
|
||||
|
||||
|
|
|
|||
|
|
@ -24,14 +24,8 @@
|
|||
// -------------------------------------------------------------
|
||||
|
||||
@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
|
||||
|
|
|
|||
|
|
@ -2,4 +2,7 @@
|
|||
layout: base.njk
|
||||
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