From 18831ad55649f7034ad2babcd0505805c6dcf920 Mon Sep 17 00:00:00 2001 From: Matthieu Urvoy Date: Fri, 20 Sep 2024 23:42:59 +0200 Subject: [PATCH 1/7] Ignoring .vscode editor files. --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index a2e78499..5bb500fc 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ dist *.vim* *.custom www/public +.vscode From 81de7221f98e6308a037c2185454225aa51b292e Mon Sep 17 00:00:00 2001 From: Matthieu Urvoy Date: Fri, 27 Sep 2024 02:59:34 +0200 Subject: [PATCH 2/7] New color palette for ergol website: CSS stylesheets. --- www/assets/css/keebs.css | 30 ++++++++- www/assets/css/theme.css | 134 +++++++++++++++++++++++++++++++-------- 2 files changed, 136 insertions(+), 28 deletions(-) diff --git a/www/assets/css/keebs.css b/www/assets/css/keebs.css index dffba461..c2d76113 100644 --- a/www/assets/css/keebs.css +++ b/www/assets/css/keebs.css @@ -4,6 +4,30 @@ * ╰───────────────────────────────────────────────────────────────╯ **/ +/* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */ +:root { + --color-palette-a: #9CF6F6; + --color-palette-b: #F3C98B; + --color-palette-c: #DAA588; + --color-palette-d: #C46D5E; + --color-palette-e: #F56960; +} + +/* Derived color palette -- when lighter or darker shades are required */ +:root { + --color-palette-a-light: #DAFCFC; + --color-palette-b-light: #FBEEDA; + --color-palette-c-light: #F5E7E0; + --color-palette-d-light: #EED7D2; + --color-palette-e-light: #FBC9C5; + + --color-palette-a-dark: #0E9595; + --color-palette-b-dark: #CB8215; + --color-palette-c-dark: #9C5630; + --color-palette-d-dark: #77372C; + --color-palette-e-dark: #99130A; +} + :root { --fg-normal-shadow: #8bb8; --fg-normal-border: #666; @@ -13,9 +37,9 @@ --fg-special: #555; --bg-special: #e4e4e4; /* 'reach' theme */ - --bg-number: hsl(295, 100%, 95%); - --bg-letter: hsl(222, 100%, 95%); - --bg-home: hsl(222, 100%, 90%); + --bg-number: var(--color-palette-a-light); + --bg-letter: var(--color-palette-b-light); + --bg-home: var(--color-palette-d-light); } @media (prefers-color-scheme: dark) { :root { diff --git a/www/assets/css/theme.css b/www/assets/css/theme.css index b1f81d07..41e01618 100644 --- a/www/assets/css/theme.css +++ b/www/assets/css/theme.css @@ -4,29 +4,72 @@ * ╰───────────────────────────────────────────────────────────────╯ **/ +/* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */ +:root { + --color-palette-a: #9CF6F6; + --color-palette-b: #F3C98B; + --color-palette-c: #DAA588; + --color-palette-d: #C46D5E; + --color-palette-e: #F56960; +} + +/* Derived color palette -- when lighter or darker shades are required */ +:root { + --color-palette-a-light: #DAFCFC; + --color-palette-b-light: #FBEEDA; + --color-palette-c-light: #F5E7E0; + --color-palette-d-light: #EED7D2; + --color-palette-e-light: #FBC9C5; + + --color-palette-a-dark: #0E9595; + --color-palette-b-dark: #CB8215; + --color-palette-c-dark: #9C5630; + --color-palette-d-dark: #77372C; + --color-palette-e-dark: #99130A; +} + +/* Keycap color palette -- for generating realistic keycaps */ +:root { + --keycap-color-a: #282828; + --keycap-color-b: #202020; + --keycap-color-c: #232323; + --keycap-color-d: #4a4a4a; + --keycap-color-e: #0009; + --keycap-color-f: #0004; + --keycap-color-i: rgba(255, 255, 255, 1.0); + --keycap-bs-1: rgba(0, 0, 0, 0.15); + --keycap-bs-2: rgba(0, 0, 0, 0.25); + --keycap-bs-3: rgba(0, 0, 0, 0.75); + --keycap-bs-4: rgba(0, 0, 0, 0.25); +} + + :root { color-scheme: light dark; /* background and text colors */ - --bg-root: #ccc; - --bg-main: #f8f8f8; - --bg-main-shadow: #888; - --fg-main-border: #aaa; + --bg-root: white; + --bg-main: white; + --bg-main-shadow: #ccc; + --fg-main-border: #eee; --fg-main: #222; /* banner -- the foreground matches the favicon #rocket color */ - --bg-banner: #e9e9e9; + --bg-banner: white; --fg-banner-border: #5446; --fg-banner: #544; /* and specific emphasis */ - --bg-accent: #b884; - --fg-accent-border: brown; - --fg-accent: brown; + --bg-accent: var(--color-palette-d-light); + --fg-accent-border: var(--color-palette-d); + --fg-accent: var(--color-palette-d); /* and special inline content */ - --bg-key: #8884; - --fg-key-border: #888; + --key-bg: #6a6a6a; + --key-bg-gradient: #282828; + --key-border: #202020; + --key-border-gradient: #232323; + --key-fg: rgba(255, 255, 255, 0.85); } @media (prefers-color-scheme: dark) { @@ -49,6 +92,16 @@ } } +/** + * ╭───────────────────────────────────────────────────────────────╮ + * │ Fonts │ + * ╰───────────────────────────────────────────────────────────────╯ +**/ +:root { + --main-font-family: sans-serif; + --code-font-family: sans-serif; +} + /** * ╭───────────────────────────────────────────────────────────────╮ @@ -64,7 +117,7 @@ html { height: 100%; width: 100%; - font-family: sans-serif; + font-family: var(--main-font-family); background-color: var(--bg-root); /* scroll-behavior: smooth; */ } @@ -355,20 +408,57 @@ header + nav ul ul { * ╰───────────────────────────────────────────────────────────────╯ **/ -kbd, span.odk { /* key */ - margin: 0 2px; - font-size: 1em; - border: 1px outset var(--bg-key-border); - background-color: var(--bg-key); - padding: 2px 3px; +kbd, +span.odk { + /* Match the page defaults in light mode but switch to a light-ish grey in dark mode */ + background: linear-gradient(90deg, var(--key-bg), var(--key-bg-gradient)); + /* background-color: white; */ + color: var(--key-fg); + + /* Round off the corners like physical keys have */ + border-radius: 0.25rem; + + /* Add a simple border */ + border: 1px solid var(--key-border); + + /* A sharp shadow (with no blur) really gives the old school keyboard look */ + box-shadow: 0 2px 0 1px var(--key-border); + /* Remove the text cursor — totally optional but I wanted it for my hover effect */ + cursor: default; + font-family: var(--code-font-family); + font-size: 0.8em; + /* Remove any extra space so I can accurately tweak the padding */ + line-height: 1; + + /* Make narrow numbers and letters look less odd */ + min-width: 0.8rem; + /* `min-width` doesn’t work on inline elements */ + display: inline-block; + /* Keep the characters centred when narrower than the `max-width` */ + text-align: center; + + /* Seemed to look more key-like with more horizontal padding 🤷 */ + padding: 3px 5px 2px 5px; + margin: 0 0.2em 0 0.2em; + + /* These two lines pull the whole element up now that they’re bottom-heavy due to the `box-shadow`. This looks better against the cap height of regular paragraph text. */ + position: relative; + top: -1.5px; + + /* This is my favourite part of the whole thing. The key gets “pushed” down and the shadow gets reduced so it looks like it might when typing on a physical keyboard. */ + &:hover { + box-shadow: 0 1.5px 0 0.5px linear-gradient(0deg, var(--key-border), var(--key-border-gradient)); + top: 1px; + } } + code { /* character, digrams, trigrams */ font-weight: bold; - font-family: serif; + font-family: var(--code-font-family); background-color: var(--bg-accent); padding: 2px 4px; - border-radius: 2px; + border-radius: 0.25em; } @@ -392,12 +482,6 @@ code { /* character, digrams, trigrams */ justify-content: flex-start; background-color: var(--bg-banner); } - header + nav li { - border-left: 1px solid var(--fg-banner-border); - } - header + nav li:last-child { - border-right: 1px solid var(--fg-banner-border); - } /* display navigation submenus, not sure it s a good idea though */ header + nav li:has(.active) ul { From bc488fdb0ab07a57f69452a2b5d12e8391ce139d Mon Sep 17 00:00:00 2001 From: Matthieu Urvoy Date: Fri, 27 Sep 2024 03:00:16 +0200 Subject: [PATCH 3/7] Applying color palette to the SVG keyboard images. --- www/content/claviers/arsenik/arsenik_iso.svg | 32 +++++++- .../claviers/arsenik/arsenik_ortho.svg | 32 +++++++- .../claviers/arsenik/arsenik_planck.svg | 32 +++++++- www/content/claviers/arsenik/ergol_iso.svg | 52 +++++++++---- www/content/claviers/arsenik/ergol_isoa.svg | 38 ++++++++-- .../claviers/arsenik/ergol_isoa_lt.svg | 32 +++++++- www/content/claviers/compacts/3x5.svg | 16 +++- www/content/claviers/compacts/3x5_ergol.svg | 36 +++++++-- www/content/claviers/compacts/3x6.svg | 16 +++- www/content/claviers/compacts/3x6_ergol.svg | 32 +++++++- www/content/claviers/compacts/4x6.svg | 16 +++- www/content/claviers/compacts/4x6_ergol.svg | 32 +++++++- www/content/claviers/compacts/func.svg | 28 ++++++- www/content/claviers/compacts/navnum.svg | 13 +++- www/content/dactylo/index.html | 4 +- www/content/installation/angle_mod.svg | 25 +++++-- www/content/presentation/ergol_1dfh.svg | 36 +++++++-- www/content/presentation/ergol_1dk.svg | 13 +++- www/content/presentation/ergol_1dk_de.svg | 12 ++- www/content/presentation/ergol_altgr.svg | 18 +++-- www/content/presentation/ergol_en.svg | 72 +++++++++--------- www/content/presentation/ergol_fr.svg | 75 ++++++++++--------- www/static/img/bepo.svg | 36 +++++++-- www/static/img/bepolar.svg | 36 +++++++-- www/static/img/colemak-french-touch.svg | 48 +++++++++--- www/static/img/erglace.svg | 36 +++++++-- www/static/img/ergol.svg | 37 +++++++-- www/static/img/lafayette.svg | 36 +++++++-- 28 files changed, 683 insertions(+), 208 deletions(-) diff --git a/www/content/claviers/arsenik/arsenik_iso.svg b/www/content/claviers/arsenik/arsenik_iso.svg index 05080cbe..e926afdf 100644 --- a/www/content/claviers/arsenik/arsenik_iso.svg +++ b/www/content/claviers/arsenik/arsenik_iso.svg @@ -1,6 +1,30 @@ diff --git a/www/content/claviers/arsenik/arsenik_ortho.svg b/www/content/claviers/arsenik/arsenik_ortho.svg index a1372b85..d46c69cb 100644 --- a/www/content/claviers/arsenik/arsenik_ortho.svg +++ b/www/content/claviers/arsenik/arsenik_ortho.svg @@ -1,6 +1,30 @@ diff --git a/www/content/claviers/arsenik/arsenik_planck.svg b/www/content/claviers/arsenik/arsenik_planck.svg index 6d9bc3fc..cf3db1f1 100644 --- a/www/content/claviers/arsenik/arsenik_planck.svg +++ b/www/content/claviers/arsenik/arsenik_planck.svg @@ -1,6 +1,30 @@ diff --git a/www/content/claviers/arsenik/ergol_iso.svg b/www/content/claviers/arsenik/ergol_iso.svg index 1cdbd8bd..19b1af12 100644 --- a/www/content/claviers/arsenik/ergol_iso.svg +++ b/www/content/claviers/arsenik/ergol_iso.svg @@ -1,6 +1,30 @@ diff --git a/www/content/claviers/arsenik/ergol_isoa.svg b/www/content/claviers/arsenik/ergol_isoa.svg index ed54b58f..1de8eaac 100644 --- a/www/content/claviers/arsenik/ergol_isoa.svg +++ b/www/content/claviers/arsenik/ergol_isoa.svg @@ -1,6 +1,30 @@
+ {{ if $name }} + + {{ end }} +