From ef9723fca1d5da84aa231ed756083c775e6c1647 Mon Sep 17 00:00:00 2001 From: Aidan Cornelius-Bell Date: Fri, 13 Dec 2024 15:57:56 +1030 Subject: [PATCH] Slightly better legibility/contrast for light mode; dusky theme dark mode (higher contrast) --- app/assets/stylesheets/application.css | 56 +++++++++++++++++--------- 1 file changed, 36 insertions(+), 20 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index c53781f..8ff7dfb 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -76,19 +76,6 @@ /* Root variables (Dark mode) */ :root { - /* Original browny-dark mode - --post-bg: #2c1e1a; - --body-bg: #3d2a24; - --quote-bg: #5a3d33; - --link-color: #e8c396; - --accent-a: #f2a76c; - --accent-b: #8ca5b0; - --accent-c: #b68e7d; - --body-text: #e8d1c0; - --dark-text: #faf0e6; - --light-text: #c9ae9c; - --code-text: #f2a76c; , below new and not really improved Palmy-dark mode: */ - --post-bg: #1a1f2c; /* Deep blue-grey for content areas */ --body-bg: #242936; /* Slightly lighter blue-grey for main background */ --quote-bg: #2d3340; /* Medium blue-grey for quoted content */ @@ -100,6 +87,23 @@ --dark-text: #ffffff; /* Pure white for headers */ --light-text: #8899bb; /* Muted blue for secondary text */ --code-text: #77ccff; /* Bright blue for code/special text */ + + --post-bg: #2b2b2b; /* Deep blue-grey for content areas */ + --body-bg: #262626; /* Slightly lighter blue-grey for main background */ + --quote-bg: #4a4a4a; /* Medium blue-grey for quoted content */ + --link-color: #a58cb5; /* Bright blue for links */ + --accent-a: #8f7d9b; /* Primary blue */ + --accent-b: #b3a6be; /* Secondary blue */ + --accent-c: #9b8aa6; /* Tertiary blue */ + --body-text: #c5d1e6; /* Soft blue-white for main text */ + --dark-text: #ffffff; /* Pure white for headers */ + --light-text: #eeeeee; /* Muted blue for secondary text */ + --code-text: #9b8aa6; /* Bright blue for code/special text */ + + --filter-button-text: #eeeeee; + --filter-button: #3d3d3d; + --filter-button-active: #847091; + --filter-button-hover: #63546d; } /* Light mode */ @@ -108,7 +112,7 @@ --post-bg: #fdf6f0; --body-bg: #f5e6db; --quote-bg: #e8d1c0; - --link-color: #b3461c; + --link-color: #c28656; --accent-a: #f2a76c; --accent-b: #6a8693; --accent-c: #9e6b57; @@ -116,6 +120,11 @@ --dark-text: #2c1e1a; --light-text: #7d5b4e; --code-text: #b3461c; + + --filter-button-text: #2c1e1a; + --filter-button: #e8d1c0; + --filter-button-active: #f2a76c; + --filter-button-hover: #f2a76c; } } @@ -348,6 +357,12 @@ footer p { padding: 3px 15px; } +.meta, +.dash { + color: var(--accent-b); + font-size: 0.8em; +} + .bookmark-buttons { margin-bottom: -5px; padding-bottom: 3px; @@ -400,6 +415,7 @@ footer p { .lowlight a { color: var(--quote-bg); text-decoration: none; + font-size: 0.8em; } ul li { @@ -456,20 +472,20 @@ ul .pinned::before { padding: 10px 20px; margin: 0 5px; margin-bottom: 15px; - background-color: var(--accent-a); - color: var(--dark-text); + background-color: var(--filter-button); + color: var(--filter-button-text); text-decoration: none; border-radius: 5px; } .filter-buttons .button.active { - background-color: var(--body-text); - color: var(--accent-a); + background-color: var(--filter-button-active); + color: var(--filter-button-text); } .filter-buttons .button:hover { - background-color: var(--body-text); - color: var(--accent-a); + background-color: var(--filter-button-hover); + color: var(--filter-button-text); } .excerpt { -- 2.39.5