From 8c81d9a5b901f0b7d9986ae42a530433e1b02ad5 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Sat, 23 May 2026 19:24:11 -0700 Subject: init theming adjustments --- static/main.css | 117 +++++++++++++++++++++++++++++++++++++++++--------- static/theme-dark.css | 48 +++++++++++++++++---- 2 files changed, 137 insertions(+), 28 deletions(-) (limited to 'static') diff --git a/static/main.css b/static/main.css index d07ecfa..18b0f14 100644 --- a/static/main.css +++ b/static/main.css @@ -1,29 +1,62 @@ :root { - --bg-main: #ffffff; - --bg-card: #f8f9fa; - --border: #e0e0e0; - --text-primary: #1a1a1a; - --text-secondary: #5f6368; - --text-muted: #757575; - --accent: #202124; - --accent-glow: rgba(0,0,0,0.05); + --cl-black: hsl(140, 1%, 6%); + --cl-gray-0: hsl(140, 2%, 8%); + --cl-gray-1: hsl(140, 2%, 12%); + --cl-gray-2: hsl(140, 4%, 16%); + --cl-gray-3: hsl(140, 4%, 24%); + --cl-gray-4: hsl(140, 4%, 36%); + --cl-gray-5: hsl(140, 4%, 44%); + --cl-gray-6: hsl(80, 8%, 52%); + --cl-gray-7: hsl(70, 8%, 58%); + --cl-gray-8: hsl(60, 16%, 66%); + --cl-gray-9: hsl(40, 32%, 78%); + --cl-gray-10: hsl(30, 32%, 84%); + --cl-white: hsl(26, 64%, 88%); + --cl-red-6: hsl(4, 83%, 67%); + --cl-red-7: hsl(4, 75%, 75%); + --cl-orange-6: hsl(26, 84%, 62%); + --cl-orange-7: hsl(26, 84%, 74%); + --cl-yellow: hsl(37, 80%, 69%); + --cl-green-6: hsl(120, 41%, 64%); + --cl-green-7: hsl(120, 42%, 75%); + --cl-cyan-6: hsl(160, 41%, 64%); + --cl-cyan-7: hsl(160, 32%, 75%); + --cl-blue-6: hsl(200, 55%, 64%); + --cl-blue-8: hsl(201, 55%, 80%); + --cl-magenta-7: hsl(320, 59%, 72%); + --cl-magenta-8: hsl(320, 61%, 80%); + + --bg-main: var(--cl-gray-0); + --bg-card: var(--cl-gray-1); + --border: var(--cl-gray-3); + --text-primary: var(--cl-white); + --text-secondary: var(--cl-gray-7); + --text-muted: var(--cl-gray-6); + --accent: var(--cl-blue-6); + --accent-glow: rgba(107, 180, 211, 0.15); + + --link-color: var(--cl-orange-6); + --link-visited: var(--cl-green-6); + --link-hover: var(--cl-magenta-7); + --link-active: var(--cl-green-6); } @media (prefers-color-scheme: dark) { :root { - --bg-main: #121212; - --bg-card: #1e1e1e; - --border: #333333; - --text-primary: #ffffff; - --text-secondary: #a0a0a0; - --text-muted: #d1d1d1; - --accent: #e2e2e2; - --accent-glow: rgba(255,255,255,0.1); + --bg-main: var(--cl-gray-0); + --bg-card: var(--cl-gray-1); + --border: var(--cl-gray-3); + --text-primary: var(--cl-white); + --text-secondary: var(--cl-gray-7); + --text-muted: var(--cl-gray-6); + --accent: var(--cl-blue-6); + --accent-glow: rgba(107, 180, 211, 0.15); } } *, *::before, *::after { box-sizing: border-box; - font-family: sans-serif; + font-family: "Roboto Mono", monospace, sans-serif; + border-radius: 0px !important; } html { @@ -32,7 +65,7 @@ html { body { background-color:var(--bg-main); - background-image:radial-gradient(circle at top end, var(--bg-card) 0%, var(--bg-main) 100%); + background-image:none; background-attachment:fixed; color:var(--text-primary); margin:0; @@ -41,6 +74,23 @@ body { -webkit-tap-highlight-color: transparent; } +/* Link styling */ +a:link { + color: var(--link-color); +} + +a:visited { + color: var(--link-visited); +} + +a:active { + color: var(--link-active); +} + +a:hover { + color: var(--link-hover); +} + img[src=""] { display: none; } @@ -196,6 +246,35 @@ h1 { h1 span { color:var(--accent); } + +/* Colored header utility classes */ +.h1Blue, h1.h1Blue, h1 .h1Blue { + color: var(--cl-blue-6); +} + +.h1Green, h1.h1Green, h1 .h1Green { + color: var(--cl-green-6); +} + +.h1Red, h1.h1Red, h1 .h1Red { + color: var(--cl-red-6); +} + +.h1Cyan, h1.h1Cyan, h1 .h1Cyan { + color: var(--cl-cyan-6); +} + +.h1Magenta, h1.h1Magenta, h1 .h1Magenta { + color: var(--cl-magenta-7); +} + +.h1Yellow, h1.h1Yellow, h1 .h1Yellow { + color: var(--cl-yellow); +} + +.h1Orange, h1.h1Orange, h1 .h1Orange { + color: var(--cl-orange-6); +} .logo-link { text-decoration:none; color:inherit; @@ -959,5 +1038,3 @@ header .logo-link:hover { flex-direction: column; } } - - diff --git a/static/theme-dark.css b/static/theme-dark.css index 246aabe..aad59fa 100644 --- a/static/theme-dark.css +++ b/static/theme-dark.css @@ -1,10 +1,42 @@ :root { - --bg-main: #121212; - --bg-card: #1e1e1e; - --border: #333333; - --text-primary: #ffffff; - --text-secondary: #a0a0a0; - --text-muted: #d1d1d1; - --accent: #e2e2e2; - --accent-glow: rgba(255,255,255,0.1); + --cl-black: hsl(140, 1%, 6%); + --cl-gray-0: hsl(140, 2%, 8%); + --cl-gray-1: hsl(140, 2%, 12%); + --cl-gray-2: hsl(140, 4%, 16%); + --cl-gray-3: hsl(140, 4%, 24%); + --cl-gray-4: hsl(140, 4%, 36%); + --cl-gray-5: hsl(140, 4%, 44%); + --cl-gray-6: hsl(80, 8%, 52%); + --cl-gray-7: hsl(70, 8%, 58%); + --cl-gray-8: hsl(60, 16%, 66%); + --cl-gray-9: hsl(40, 32%, 78%); + --cl-gray-10: hsl(30, 32%, 84%); + --cl-white: hsl(26, 64%, 88%); + --cl-red-6: hsl(4, 83%, 67%); + --cl-red-7: hsl(4, 75%, 75%); + --cl-orange-6: hsl(26, 84%, 62%); + --cl-orange-7: hsl(26, 84%, 74%); + --cl-yellow: hsl(37, 80%, 69%); + --cl-green-6: hsl(120, 41%, 64%); + --cl-green-7: hsl(120, 42%, 75%); + --cl-cyan-6: hsl(160, 41%, 64%); + --cl-cyan-7: hsl(160, 32%, 75%); + --cl-blue-6: hsl(200, 55%, 64%); + --cl-blue-8: hsl(201, 55%, 80%); + --cl-magenta-7: hsl(320, 59%, 72%); + --cl-magenta-8: hsl(320, 61%, 80%); + + --bg-main: var(--cl-gray-0); + --bg-card: var(--cl-gray-1); + --border: var(--cl-gray-3); + --text-primary: var(--cl-white); + --text-secondary: var(--cl-gray-7); + --text-muted: var(--cl-gray-6); + --accent: var(--cl-blue-6); + --accent-glow: rgba(107, 180, 211, 0.15); + + --link-color: var(--cl-orange-6); + --link-visited: var(--cl-green-6); + --link-hover: var(--cl-magenta-7); + --link-active: var(--cl-green-6); } -- cgit v1.2.3