From 3a41ba7f3bfe0053d1f8dbd86e48dbbee3d478f6 Mon Sep 17 00:00:00 2001 From: alifeee Date: Mon, 26 Aug 2024 14:05:01 +0100 Subject: [PATCH] change to light theme a lot of css variables --- .eleventy.js | 3 ++- public/stylesheet-index.css | 6 ++--- public/stylesheet-lipu.css | 8 +++--- public/stylesheet-sona.css | 6 ++--- public/stylesheet-toki.css | 1 - public/stylesheet.css | 49 ++++++++++++++++++++++++++----------- sona.hbs | 3 +-- 7 files changed, 48 insertions(+), 28 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index fffe1b3..0f96849 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -180,7 +180,8 @@ module.exports = function (eleventyConfig) { b += str.charCodeAt(i) * (i + 1); } function cap(x) { - return 100 + (x % 156); + // make sure all RGB values are below 156 to keep colours dark + return x % 156; } return `rgb(${cap(r)}, ${cap(g)}, ${cap(b)})`; }); diff --git a/public/stylesheet-index.css b/public/stylesheet-index.css index fff00b8..402d23f 100644 --- a/public/stylesheet-index.css +++ b/public/stylesheet-index.css @@ -159,7 +159,7 @@ font-weight: bold; } .lipuwan .date { - color: gray; + color: var(--text-subtle); } .lipuwan a:hover { text-decoration: underline; @@ -186,9 +186,9 @@ font-size: 1.7rem; } #lipu-nanpa-lon .lipuwan img { - margin-top: .7rem; + margin-top: 0.7rem; max-width: 12rem; } #lipu-nanpa-lon .jan-pali { - padding: 0 .5rem; + padding: 0 0.5rem; } diff --git a/public/stylesheet-lipu.css b/public/stylesheet-lipu.css index 041cb6f..ae59e94 100644 --- a/public/stylesheet-lipu.css +++ b/public/stylesheet-lipu.css @@ -39,7 +39,7 @@ h2 { } .pdfs li a { flex: 1 0; - border: 3px solid var(--logo-secondary-dark); + border: 3px solid var(--colour-kiwen-pimeja); background-color: var(--logo-primary-dark); padding: 1rem; border-radius: 1.5rem; @@ -127,7 +127,6 @@ h2 { justify-content: center; align-items: center; text-decoration: none; - color: var(--text-colour); } .article .nimi-suli { font-size: 1rem; @@ -167,7 +166,10 @@ h2 { background-color: var(--logo-primary-dark); border-radius: 1rem; text-decoration: none; - color: var(--logo-secondary); + color: var(--text-contrast); +} +.prevnext a:hover { + color: var(--text-contrast-subtle); } .prevnext .disabled { color: var(--text-subtle); diff --git a/public/stylesheet-sona.css b/public/stylesheet-sona.css index 05b3d9d..2787bfd 100644 --- a/public/stylesheet-sona.css +++ b/public/stylesheet-sona.css @@ -22,8 +22,6 @@ .esun-tawa-ni img.icon { height: 2rem; width: auto; - filter: invert(100%) sepia(7%) saturate(0%) hue-rotate(112deg) - brightness(106%) contrast(109%); } .ni-li-seme { @@ -105,10 +103,10 @@ border-radius: var(--blob-border-radius-01); } .jan-pali .jan { - color: var(--colour-pimeja-lili); + color: var(--text-subtle); } .jan-pali .active { - color: var(--logo-secondary); + color: var(--colour-loje-pimeja); } .jan-pali .lists { display: flex; diff --git a/public/stylesheet-toki.css b/public/stylesheet-toki.css index 1cb9fbb..930928f 100644 --- a/public/stylesheet-toki.css +++ b/public/stylesheet-toki.css @@ -130,7 +130,6 @@ search > input { justify-content: center; align-items: center; text-decoration: none; - color: var(--text-colour); } .article.hidden { diff --git a/public/stylesheet.css b/public/stylesheet.css index ea62f56..1e12140 100644 --- a/public/stylesheet.css +++ b/public/stylesheet.css @@ -8,7 +8,7 @@ --logo-secondary: #fffd96; --logo-secondary-dark: #e0c880; - --background: #1e2122; + --background: #eeeef6; --primary-100: #e3e3ff; --primary-200: #aaacff; @@ -20,8 +20,10 @@ --primary-800: #000255; --primary-900: #00011c; - --text: white; - --text-subtle: #ddd; + --text: #000; + --text-subtle: #666; + --text-contrast: #fff; + --text-contrast-subtle: #ddd; /* generated with ../scripts/gpl-to-css.sh */ --colour-walo-taso: #ffffff; @@ -79,6 +81,30 @@ body { background-color: var(--background); } +/* "paper" look */ +body { + --col: rgba(0, 0, 0, 0.01); + /* thickness of thin and thick lines */ + --small-thickness: 1px; + --big-thickness: 2px; + /* gap between thin and thick lines */ + --small-gap: 10px; + --big-gap: 50px; + + --st: var(--small-thickness); + --bt: var(--big-thickness); + --nst: calc(-1 * var(--st)); + --nbt: calc(-1 * var(--bt)); + background-image: linear-gradient(var(--col) var(--bt), transparent var(--bt)), + linear-gradient(90deg, var(--col) var(--bt), transparent var(--bt)), + linear-gradient(var(--col) var(--st), transparent var(--st)), + linear-gradient(90deg, var(--col) var(--st), var(--background) var(--st)); + background-size: var(--big-gap) var(--big-gap), var(--big-gap) var(--big-gap), + var(--small-gap) var(--small-gap), var(--small-gap) var(--small-gap); + background-position: var(--nbt) var(--nbt), var(--nbt) var(--nbt), + var(--nst) var(--nst), var(--nst) var(--nst); +} + h2, h3, h4, @@ -121,7 +147,7 @@ header h1 { text-align: left; } header h1 a { - color: white; + color: var(--text); text-decoration: none; } header .subtitle { @@ -157,20 +183,14 @@ header nav li a { header nav li.active a { background-color: var(--colour-unu-walo); } -header nav li.active a { - color: var(--primary-700); -} -header nav li.active .sitelen-tu::before { - color: var(--primary-700); -} header nav a { - color: white; + color: var(--text); font-size: 1.4rem; text-align: left; text-decoration: none; } .sitelen-tu::before { - color: var(--primary-200); + color: var(--text); content: attr(data-text); display: inline-block; font-family: "sitelen seli kiwen", sans-serif; @@ -194,12 +214,13 @@ main a { color: var(--primary-300); } main a:hover { - color: var(--primary-200); + color: var(--primary-400); } footer { font-family: "Andika", sans-serif; background-color: var(--logo-primary); + color: var(--text-contrast); padding: 1rem; margin-top: auto; position: relative; @@ -236,7 +257,7 @@ footer a img.icon { } footer a { font-family: "BogFace", sans-serif; - color: white; + color: var(--text-contrast); text-decoration: none; font-size: 1.2rem; text-align: center; diff --git a/sona.hbs b/sona.hbs index fb7bc64..f5927c1 100644 --- a/sona.hbs +++ b/sona.hbs @@ -12,8 +12,7 @@ css:

- patreon icon - esun tawa mi! (Patreon) + esun tawa mi! (patreon icon Patreon)