init theming adjustmentsHEADmaster

1 files changed, 97 insertions, 20 deletions

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;
     }
 }
-
-