From 6b763db8827a7cd9e5d04461fc74e2ed61008cb1 Mon Sep 17 00:00:00 2001 From: Tixie Date: Thu, 2 Mar 2023 06:36:29 +0100 Subject: [PATCH] Style main sign --- src/_includes/icons/megaphone.svg | 3 + src/_includes/icons/plus-one.svg | 1 + src/_includes/icons/question.svg | 1 + src/css/2-components/_buttons.scss | 140 ++++++++++------------- src/css/2-components/_highlighter.scss | 42 +++++++ src/css/2-components/_notifications.scss | 31 ++++- src/css/2-components/_separator.scss | 21 ++++ src/css/3-base/_01-fonts.scss | 68 +++++++++-- src/css/3-base/_04-main.scss | 21 ++-- src/css/3-base/_05-layout.scss | 23 ++++ src/css/3-base/_06-header.scss | 2 +- src/css/3-base/_09-footer.scss | 2 +- src/css/4-modules/_banner.scss | 13 +++ src/css/5-pages/_actions.scss | 0 src/css/5-pages/_counter.scss | 32 ++++++ src/css/6-helpers/_colors.scss | 8 +- src/css/_colors.scss | 19 +-- src/css/_config.scss | 2 +- src/css/_helpers.scss | 5 +- src/css/style.scss | 4 +- src/index.html | 53 +++++---- 21 files changed, 347 insertions(+), 144 deletions(-) create mode 100644 src/_includes/icons/megaphone.svg create mode 100644 src/_includes/icons/plus-one.svg create mode 100644 src/_includes/icons/question.svg create mode 100644 src/css/2-components/_highlighter.scss create mode 100644 src/css/2-components/_separator.scss create mode 100644 src/css/5-pages/_actions.scss create mode 100644 src/css/5-pages/_counter.scss diff --git a/src/_includes/icons/megaphone.svg b/src/_includes/icons/megaphone.svg new file mode 100644 index 0000000..ec1874e --- /dev/null +++ b/src/_includes/icons/megaphone.svg @@ -0,0 +1,3 @@ + diff --git a/src/_includes/icons/plus-one.svg b/src/_includes/icons/plus-one.svg new file mode 100644 index 0000000..016445d --- /dev/null +++ b/src/_includes/icons/plus-one.svg @@ -0,0 +1 @@ + diff --git a/src/_includes/icons/question.svg b/src/_includes/icons/question.svg new file mode 100644 index 0000000..4cffe0e --- /dev/null +++ b/src/_includes/icons/question.svg @@ -0,0 +1 @@ + diff --git a/src/css/2-components/_buttons.scss b/src/css/2-components/_buttons.scss index d44fff5..121a252 100755 --- a/src/css/2-components/_buttons.scss +++ b/src/css/2-components/_buttons.scss @@ -4,18 +4,15 @@ // Buttons // ------------------------------------------------------------- -$btn-primary: $color-1; -$btn-secondary: $color-3; -$btn-tertiary: $color-1; +$btn-primary: $color-purple-1; +$btn-secondary: $color-pink-1; +$btn-tertiary: $color-purple-1; $btn-danger: #c53a3a; $btn-hover: 5%; $btn-radius: 0; $btn-border-width: 0.1rem; .btn { - --color-accent: #{$btn-primary}; - --color-text: #fff; - display: inline-flex; align-items: center; justify-content: center; @@ -23,98 +20,83 @@ $btn-border-width: 0.1rem; border: $btn-border-width solid transparent; border-radius: $btn-radius; margin: 0; - background-color: var(--color-accent); + background-color: $btn-primary; box-shadow: none; - color: var(--color-text); + box-shadow: .5rem .5rem 0 0 color.adjust($btn-primary, $saturation: -30%, $lightness: -10%); + color: #fff; font: inherit; - font-weight: 900; + font-size: 1.9rem; + font-weight: 900; gap: .5em; line-height: ($line-height + em); text-align: center; - transition: all 0.2s; + transition-duration: 0.15s; + transition-property: background, background-color, transform, box-shadow; vertical-align: middle; } -.btn:where(:hover, :active) { - --color-accent: #{color.adjust($btn-primary, $lightness: -10%)}; + +.btn:hover, +.btn:active { + background-color: color.adjust($btn-primary, $lightness: - $btn-hover); } -// Custom focus ring -.btn:where(:active, :focus) { - box-shadow: $focus-ring; - outline: none; +.btn:active { + box-shadow: none; + transform: translate(.5rem, .5rem); } -// 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%)}; } - -// 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); +.btn svg { flex-shrink: 0; - fill: currentcolor; } -// Ico sizes +/* colors +-------------------------------------------------------------- */ -.btn--icoSmall svg { - width: 0.75em; - height: 0.75em; + +.btn--secondary, +.btn--secondary:link, +.btn--secondary:visited { + background-color: $btn-secondary; + box-shadow: .5rem .5rem 0 0 color.adjust($btn-secondary, $saturation: -30%, $lightness: -10%); + color: #fff; } -.btn--icoMedium svg { - width: 1em; - height: 1em; +.btn--secondary:hover, +.btn--secondary:active { + background-color: color.adjust($btn-secondary, $lightness: - $btn-hover); } -// Button Sizes -// -------------------------------------------------------------- +.btn--secondary:active { + box-shadow: none; +} + +.btn--tertiary, +.btn--tertiary:link, +.btn--tertiary:visited { + border-color: $btn-tertiary; + background-color: $color-bg-1; + box-shadow: .5rem .5rem 0 0 color.adjust($color-purple-3, $lightness: + 15%); + color: $btn-tertiary; +} + +.btn--tertiary:hover, +.btn--tertiary:active { + background-color: $btn-tertiary; + color: $color-light-text; +} + +.btn--tertiary:active { + box-shadow: none; +} + +.btn--icoYellow svg { + color: $color-yellow-1; +} + +/* size +-------------------------------------------------------------- */ .btn--big { - font-size: 1.2em; -} - -.btn--small { - padding: 0.3em 0.75em; + font-size: 3.8rem; + line-height: 1.15em; } diff --git a/src/css/2-components/_highlighter.scss b/src/css/2-components/_highlighter.scss new file mode 100644 index 0000000..7c4e44d --- /dev/null +++ b/src/css/2-components/_highlighter.scss @@ -0,0 +1,42 @@ +// ----------------------------------------------------------- +// == Highlighter decoration style components +// ----------------------------------------------------------- + +// Zigzag +// -------------------------------------------------------------- + +.highlighter-zigzag { + position: relative; +} + +.highlighter-zigzag::before { + position: absolute; + top: 100%; + width: 100%; + padding-top: calc(100% * (81 / 247)); + background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='247' height='81' fill='none'%3E%3Cpath stroke='#{$color-yellow-1}' stroke-linecap='round' stroke-linejoin='round' stroke-width='14' d='M240 7c-76.2.8-159 5.5-233 16.5 61.3 3.2 188.9 10.6 208.5 15-41.3 3.2-127.1 14.6-139.5 35'/%3E%3C/svg%3E"); + background-position: top center; + background-size: contain; + content: ""; +} + +// Underline +// -------------------------------------------------------------- + +.highlighter-underline { + position: relative; + z-index: 1; +} + + +.highlighter-underline::before { + position: absolute; + z-index: -1; + top: 60%; + width: 100%; + padding-top: calc(100% * (27 / 118)); + background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='27' fill='none'%3E%3Cpath stroke='#{$color-yellow-1}' stroke-linecap='round' stroke-linejoin='round' stroke-width='14' d='M110.8 7.2C68.9 12.8 49.3 12.4 7.5 18.7c40.8-5.3 60.6-5.5 103.4.3'/%3E%3C/svg%3E"); + background-position: top center; + background-size: contain; + content: ""; +} diff --git a/src/css/2-components/_notifications.scss b/src/css/2-components/_notifications.scss index 94dc975..561b7c1 100755 --- a/src/css/2-components/_notifications.scss +++ b/src/css/2-components/_notifications.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + // Notification module // Namespace : .notif @@ -15,24 +17,31 @@ $notif-error: $color-red; .notif { padding: 2rem; - border: 0.1rem solid currentcolor; - border-radius: 0.3rem; + padding: 2rem 3rem; + border: 0.2rem solid currentcolor; + font-size: 1.6rem; + line-height: 1.3em; } // Colors // -------------------------------------------------------------- .notif--success { - color: $notif-success; + border-color: $notif-success; + background-color: color.adjust($notif-success, $saturation: + 21%, $lightness: + 40%); + color: color.adjust($notif-success, $saturation: + 8%, $lightness: - 34%); } .notif--warning { border-color: $notif-warning; - color: #444; + background-color: color.adjust($notif-warning, $saturation: + 21%, $lightness: + 40%); + color: color.adjust($notif-warning, $saturation: + 8%, $lightness: - 34%); } .notif--error { - color: $notif-error; + border-color: $notif-error; + background-color: color.adjust($notif-error, $saturation: + 21%, $lightness: + 40%); + color: color.adjust($notif-error, $saturation: + 8%, $lightness: - 34%); } // Sizes @@ -41,3 +50,15 @@ $notif-error: $color-red; .notif--small { padding: 1rem 1.5rem; } + +// Special +// -------------------------------------------------------------- + +.notif--successPlusOne { + position: relative; +} + +.notif--successPlusOne::before { +position: absolute; +content: ""; +} diff --git a/src/css/2-components/_separator.scss b/src/css/2-components/_separator.scss new file mode 100644 index 0000000..2ebedd4 --- /dev/null +++ b/src/css/2-components/_separator.scss @@ -0,0 +1,21 @@ +// ----------------------------------------------------------- +// == Separator component +// ----------------------------------------------------------- + +.separator { + display: grid; + max-width: 95%; + align-items: center; + margin: 1rem auto; + gap: 2rem; + grid-template-columns: 1fr fit-content(90%) 1fr; +} + +.separator::before, +.separator::after { + display: block; + width: auto; + height: .2rem; + background-color: $color-purple-3; + content: ""; +} diff --git a/src/css/3-base/_01-fonts.scss b/src/css/3-base/_01-fonts.scss index 4f9b893..08e3fff 100755 --- a/src/css/3-base/_01-fonts.scss +++ b/src/css/3-base/_01-fonts.scss @@ -2,12 +2,62 @@ // == 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 -// } + + +@font-face { + font-display: optional; + font-family: Inter; + font-weight: normal; + src: local("Inter Medium"), + local("Inter"), + url("/fonts/Inter-Medium.woff2") format("woff2"), + url("/fonts/Inter-Medium.woff") format("woff"); +} + + +@font-face { + font-display: optional; + font-family: Inter; + font-weight: 900; + src: local("Inter Black"), + local("Inter"), + url("/fonts/Inter-Black.woff2") format("woff2"), + url("/fonts/Inter-Black.woff") format("woff"); +} + + +@font-face { + font-display: optional; + font-family: Inter; + font-weight: bold; + src: local("Inter Black"), + local("Inter"), + url("/fonts/Inter-Black.woff2") format("woff2"), + url("/fonts/Inter-Black.woff") format("woff"); +} + + +// Fallback trick to reduce visual shift +// -------------------------------------------------------------- + +@font-face { + font-family:Inter-fallback; + size-adjust:107%; + src: local("Arial Medium"), local("Arial"); + } + +@font-face { + ascent-override: 105%; + font-family:Inter-fallback; + font-weight: bold; + size-adjust:101%; + src:local("Arial Black"), local("Arial"); + } + +@font-face { + ascent-override: 105%; + font-family:Inter-fallback; + font-weight: 900; + size-adjust:101%; + src:local("Arial Black"), local("Arial"); + } diff --git a/src/css/3-base/_04-main.scss b/src/css/3-base/_04-main.scss index ee636b3..275ee0a 100755 --- a/src/css/3-base/_04-main.scss +++ b/src/css/3-base/_04-main.scss @@ -7,7 +7,7 @@ body { min-height: 100vh; min-height: 100dvh; flex-direction: column; - accent-color: $color-1; + accent-color: $color-purple-1; 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; @@ -26,19 +26,22 @@ body { // titles // -------------------------------------------------------------- -h1 { - @include flow(50); +.title-1 { + color: $color-purple-1; + font-size: 4.8rem; + font-weight: 900; + line-height: 1.2em; } -h2 { +.title-2 { @include flow(38); } -h3 { +.title-3 { @include flow(18); } -h4 { +.title-4 { @include flow(16); } @@ -50,12 +53,6 @@ a:where(:any-link) { text-decoration: none; } -a:where(:focus) { - border-radius: 0.3rem; - box-shadow: $focus-ring; - outline: none; -} - a:where(:not([class]):hover) { text-decoration: underline; } diff --git a/src/css/3-base/_05-layout.scss b/src/css/3-base/_05-layout.scss index 5cd7fa9..bcf837b 100755 --- a/src/css/3-base/_05-layout.scss +++ b/src/css/3-base/_05-layout.scss @@ -12,3 +12,26 @@ .container--small { max-width: $container-small; } + +// gridstack +// -------------------------------------------------------------- + +.gridstack { + display: grid; +} + +.gridstack > * { + position: relative; + grid-column: 1 / 2; + grid-row: 1 / 2; + opacity: 1; +} + +:where(.gridstack > * > *) { + opacity: 1; +} + +.gridstack > :where([hidden], [hidden] > *) { + opacity: 0; + visibility: hidden; +} diff --git a/src/css/3-base/_06-header.scss b/src/css/3-base/_06-header.scss index d7fcdf0..e3974ef 100755 --- a/src/css/3-base/_06-header.scss +++ b/src/css/3-base/_06-header.scss @@ -17,7 +17,7 @@ margin-bottom: -3rem; margin: 0; background-color: $color-bg-1; box-shadow: 0 .4rem .4rem rgb(150 152 156 / 61%); - color: $color-1; + color: $color-purple-1; font-size: 2.6rem; font-weight: 900; line-height: 1.19em; diff --git a/src/css/3-base/_09-footer.scss b/src/css/3-base/_09-footer.scss index 042dee5..5aa69e0 100755 --- a/src/css/3-base/_09-footer.scss +++ b/src/css/3-base/_09-footer.scss @@ -4,7 +4,7 @@ .footer { padding: 2.5rem 0; - background-color: $color-1; + background-color: $color-purple-1; color: $color-light-text; font-size: 1.6rem; text-align: center; diff --git a/src/css/4-modules/_banner.scss b/src/css/4-modules/_banner.scss index 840e910..a8e9e4e 100644 --- a/src/css/4-modules/_banner.scss +++ b/src/css/4-modules/_banner.scss @@ -7,8 +7,11 @@ $banner-padding: clamp(2.5rem, 5vw, 7rem); .banner { position: relative; + display: flex; min-height: calc(70vh - 7rem); min-height: calc(70dvh - 7rem); + flex-direction: column; + justify-content: center; padding: $banner-padding; margin: 0 $banner-margin-inline; background-color: $color-bg-1; @@ -40,3 +43,13 @@ $banner-padding: clamp(2.5rem, 5vw, 7rem); background-position-x: right; transform: translateY(-60%); } + +// Layout +// -------------------------------------------------------------- + +.banner-layout { + display: grid; + grid-template-columns: minmax(min-content, 55%) minmax(min-content, 45%); + justify-items: center; + row-gap: $banner-padding; +} diff --git a/src/css/5-pages/_actions.scss b/src/css/5-pages/_actions.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/css/5-pages/_counter.scss b/src/css/5-pages/_counter.scss new file mode 100644 index 0000000..1bd400c --- /dev/null +++ b/src/css/5-pages/_counter.scss @@ -0,0 +1,32 @@ +// ----------------------------------------------------------- +// == Counter "page" +// ----------------------------------------------------------- + +.counter { + width: min-content; + color: $color-purple-2; + font-weight: 900; + line-height: 1.3em; + text-align: center; +} + +.counter-number { + display: block; + color: $color-purple-1; + font-size: 9.8rem; + font-variant-numeric: tabular-nums; + font-weight: 900; + line-height: 1.2em; + white-space: nowrap; +} + +.counter-strikeeeee-lol { + display: inline-block; + margin-top: .25em; + margin-bottom: 20%; + color: $color-purple-1; + font-size: 4.8rem; + font-style: normal; + line-height: 1.2em; + text-transform: uppercase; +} diff --git a/src/css/6-helpers/_colors.scss b/src/css/6-helpers/_colors.scss index 0bb9208..45a269e 100755 --- a/src/css/6-helpers/_colors.scss +++ b/src/css/6-helpers/_colors.scss @@ -2,9 +2,11 @@ // colors // ------------------------------------------------------------- -.color-1 { color: $color-1; } -.color-2 { color: $color-2; } -.color-3 { color: $color-3; } +.color-purple-1 { color: $color-purple-1; } +.color-purple-2 { color: $color-purple-2; } +.color-pink-1 { color: $color-pink-1; } +.color-pink-2 { color: $color-pink-2; } +.color-yellow-1 { color: $color-yellow-1; } .color-red { color: $color-red; } .color-green { color: $color-green; } diff --git a/src/css/_colors.scss b/src/css/_colors.scss index 1578822..2b5698d 100755 --- a/src/css/_colors.scss +++ b/src/css/_colors.scss @@ -5,17 +5,20 @@ $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%); +$hue-green: 137deg; +$color-purple-1: hsl($hue-purple 55% 25%); +$color-purple-2: hsl($hue-purple 39% 40%); +$color-purple-3: hsl($hue-purple 25% 65%); +$color-pink-1: hsl($hue-pink 93% 44%); +$color-pink-2: hsl($hue-pink 62% 46%); +$color-yellow-1: 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%); +$color-gradient-1: radial-gradient(100% 100% at 0% 0%, $color-purple-1 10.36%, #C82E79 77.03%, #D33238 94.73%); // ------------------------------------------------------------- // utility @@ -24,7 +27,7 @@ $color-gradient-1: radial-gradient(100% 100% at 0% 0%, $color-1 10.36%, #C82E79 $color-info: #2185d0; $color-red: #de350b; -$color-green: $color-2; +$color-green: hsl($hue-green, 68%, 56%); $color-yellow: #ffdd57; // ------------------------------------------------------------- @@ -32,10 +35,10 @@ $color-yellow: #ffdd57; // ------------------------------------------------------------- $color-light-text: hsl($hue-purple 40% 99%); -$color-dark-text: $color-1; +$color-dark-text: $color-purple-1; // ------------------------------------------------------------- // links // ------------------------------------------------------------- -$color-link: $color-1; +$color-link: $color-purple-1; diff --git a/src/css/_config.scss b/src/css/_config.scss index d391777..88b7fb3 100755 --- a/src/css/_config.scss +++ b/src/css/_config.scss @@ -11,7 +11,7 @@ $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"; +$fontstack1: "Inter", "Inter-fallback", arial, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, sans-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/_helpers.scss b/src/css/_helpers.scss index aa6a332..6ead222 100644 --- a/src/css/_helpers.scss +++ b/src/css/_helpers.scss @@ -22,7 +22,7 @@ $helpers: ( (float-left, float, left), (float-right, float, right), (float-none, float, none), - (text-bold, font-weight, bold), + (text-bold, font-weight, 900), (text-semibold, font-weight, 600), (text-regular, font-weight, normal), (text-italic, font-style, italic), @@ -84,6 +84,7 @@ $helpers: ( (w250p, width, 25rem), (w-max, width, max-content), (mw0, min-width, 0), + (maxw380px, max-width, 38rem), (list-type-disc, list-style-type, disc), (ml-auto, margin-left, auto), (mr-auto, margin-right, auto), @@ -117,7 +118,7 @@ $spacers: ( (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)), + (pb, padding-bottom, (0.5, 1, 2, 3, 4, 7, 8)), (pl, padding-left, (1, 2, 3, 4)), ), "md": ( diff --git a/src/css/style.scss b/src/css/style.scss index 3343f67..43269b3 100755 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -26,6 +26,8 @@ @import "2-components/_forms"; @import "2-components/_buttons"; @import "2-components/_notifications"; +@import "2-components/_separator"; +@import "2-components/_highlighter"; // ------------------------------------------------------------- // base @@ -51,7 +53,7 @@ // pages // ------------------------------------------------------------- -// @import "5-pages/..."; +@import "5-pages/counter"; // ------------------------------------------------------------- // helpers diff --git a/src/index.html b/src/index.html index 996dee3..af44a0c 100644 --- a/src/index.html +++ b/src/index.html @@ -3,33 +3,42 @@ layout: base.njk title: Compteur de grève ---