From 7209549722a4773ee7267dca88de8358a7c7e89f Mon Sep 17 00:00:00 2001 From: Tixie Date: Wed, 1 Mar 2023 21:51:42 +0100 Subject: [PATCH] Bootstrap layout --- src/_includes/base.njk | 15 +++++-- src/css/2-components/_buttons.scss | 2 +- src/css/2-components/_forms.scss | 2 +- src/css/2-components/_pagination.scss | 50 --------------------- src/css/2-components/_radiobox.scss | 62 -------------------------- src/css/2-components/_switch.scss | 55 ----------------------- src/css/2-components/_tables.scss | 64 --------------------------- src/css/2-components/_tag.scss | 39 ---------------- src/css/2-components/_tooltip.scss | 40 ----------------- src/css/3-base/_04-main.scss | 15 ++++++- src/css/3-base/_06-header.scss | 22 +++++++++ src/css/3-base/_08-content.scss | 5 +++ src/css/3-base/_09-footer.scss | 18 ++++++-- src/css/_colors.scss | 43 +++++++++--------- src/css/_config.scss | 3 +- src/css/style.scss | 6 --- src/index.html | 5 ++- 17 files changed, 97 insertions(+), 349 deletions(-) delete mode 100755 src/css/2-components/_pagination.scss delete mode 100755 src/css/2-components/_radiobox.scss delete mode 100755 src/css/2-components/_switch.scss delete mode 100755 src/css/2-components/_tables.scss delete mode 100644 src/css/2-components/_tag.scss delete mode 100644 src/css/2-components/_tooltip.scss diff --git a/src/_includes/base.njk b/src/_includes/base.njk index 83015ec..4e9ac0f 100644 --- a/src/_includes/base.njk +++ b/src/_includes/base.njk @@ -10,11 +10,20 @@ -
-

{{ title }}

+
+ {% if page.fileSlug === '' %} +

#CompteurDeGrève

+ {% else %} + #CompteurDeGrève + {% endif %}
-
+
{{ content | safe }}
+ diff --git a/src/css/2-components/_buttons.scss b/src/css/2-components/_buttons.scss index 54bc7d8..c0c1199 100755 --- a/src/css/2-components/_buttons.scss +++ b/src/css/2-components/_buttons.scss @@ -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; diff --git a/src/css/2-components/_forms.scss b/src/css/2-components/_forms.scss index 396becc..97f3362 100755 --- a/src/css/2-components/_forms.scss +++ b/src/css/2-components/_forms.scss @@ -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; diff --git a/src/css/2-components/_pagination.scss b/src/css/2-components/_pagination.scss deleted file mode 100755 index 67f6e4a..0000000 --- a/src/css/2-components/_pagination.scss +++ /dev/null @@ -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; -} diff --git a/src/css/2-components/_radiobox.scss b/src/css/2-components/_radiobox.scss deleted file mode 100755 index 1055555..0000000 --- a/src/css/2-components/_radiobox.scss +++ /dev/null @@ -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; -} diff --git a/src/css/2-components/_switch.scss b/src/css/2-components/_switch.scss deleted file mode 100755 index 11230ca..0000000 --- a/src/css/2-components/_switch.scss +++ /dev/null @@ -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; -} diff --git a/src/css/2-components/_tables.scss b/src/css/2-components/_tables.scss deleted file mode 100755 index 7a9f824..0000000 --- a/src/css/2-components/_tables.scss +++ /dev/null @@ -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; -} diff --git a/src/css/2-components/_tag.scss b/src/css/2-components/_tag.scss deleted file mode 100644 index 4a8052f..0000000 --- a/src/css/2-components/_tag.scss +++ /dev/null @@ -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; -} diff --git a/src/css/2-components/_tooltip.scss b/src/css/2-components/_tooltip.scss deleted file mode 100644 index c96d975..0000000 --- a/src/css/2-components/_tooltip.scss +++ /dev/null @@ -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: ""; -} diff --git a/src/css/3-base/_04-main.scss b/src/css/3-base/_04-main.scss index e0f3fae..ee636b3 100755 --- a/src/css/3-base/_04-main.scss +++ b/src/css/3-base/_04-main.scss @@ -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 { diff --git a/src/css/3-base/_06-header.scss b/src/css/3-base/_06-header.scss index bd9429c..d7fcdf0 100755 --- a/src/css/3-base/_06-header.scss +++ b/src/css/3-base/_06-header.scss @@ -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); +} diff --git a/src/css/3-base/_08-content.scss b/src/css/3-base/_08-content.scss index 33b90c4..ff1de2c 100755 --- a/src/css/3-base/_08-content.scss +++ b/src/css/3-base/_08-content.scss @@ -2,6 +2,11 @@ // content // ------------------------------------------------------------- +.content { + padding: 5rem; + background-color: $color-bg-1; +} + .content :where(h2, h3, h4) { font-weight: 600; } diff --git a/src/css/3-base/_09-footer.scss b/src/css/3-base/_09-footer.scss index 722090b..042dee5 100755 --- a/src/css/3-base/_09-footer.scss +++ b/src/css/3-base/_09-footer.scss @@ -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; } diff --git a/src/css/_colors.scss b/src/css/_colors.scss index 41eb39c..1578822 100755 --- a/src/css/_colors.scss +++ b/src/css/_colors.scss @@ -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; diff --git a/src/css/_config.scss b/src/css/_config.scss index 82801b1..d391777 100755 --- a/src/css/_config.scss +++ b/src/css/_config.scss @@ -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 diff --git a/src/css/style.scss b/src/css/style.scss index 5d56cb9..b512a63 100755 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -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 diff --git a/src/index.html b/src/index.html index e57d227..23ce1ae 100644 --- a/src/index.html +++ b/src/index.html @@ -2,4 +2,7 @@ layout: base.njk title: Compteur de grève --- -contenu + +
+ 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? +