From 77cf5ed4345ed921f1b7104be8b8ff2e077c5596 Mon Sep 17 00:00:00 2001
From: chfour <chfourchfour@protonmail.com>
Date: Sat, 13 Sep 2025 19:51:32 +0200
Subject: [PATCH] turn colors into css vars, rearrange links

---
 src/index.html | 52 +++++++++++++++++++++++++++-----------------------
 src/style.css  | 33 +++++++++++++++++++-------------
 2 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/src/index.html b/src/index.html
index 13883fa..f911d4e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -45,16 +45,20 @@
             gap: 1em;
             max-width: 30rem;
         }
-        #links > * > div {
+        #links > li > a {
             display: inline-flex;
             flex-direction: column;
+            text-decoration: none;
+            color: inherit;
         }
-        #links > * > div > * { width: max-content; }
-        #links a {
+        #links > li > a > * { width: max-content; }
+        #links > li > a > :first-child {
             font-weight: bold;
-            text-decoration: none;
+            color: var(--color-link);
+        }
+        #links > li > a > :nth-child(2) {
+            font-size: 0.8em;
         }
-        #links > * > div > :nth-child(2) { font-size: 0.8em; }
     </style>
 
     <link rel="me" href="https://wetdry.world/@chfour"> <!-- old fedi acc -->
@@ -83,30 +87,30 @@
             <p>known as <b>chfour</b></p>
 
             <ul class="inline-list" id="links">
-                <li><div>
-                    <a rel="me" href="https://merping.synth.download/@chfour">fediverse</a>
+                <li><a rel="me" href="https://merping.synth.download/@chfour">
+                    <span>fediverse</span>
                     <span>@chfour@merping.synth.download</span>
-                </div></li>
-                <li><div>
-                    <a href="https://bsky.app/profile/eeep.ee">bluesky</a>
+                </a></li>
+                <li><a href="https://bsky.app/profile/eeep.ee">
+                    <span>bluesky</span>
                     <span>@eeep.ee (bridged)</span>
-                </div></li>
-                <li><div>
-                    <a href="https://signal.me/#eu/uwW5t81nJulRdHjWEkNUE2omPv9HzXhzUzar2yvP14ULx50MgdZBwpxrhWX3RfA3">signal</a>
+                </a></li>
+                <li><a href="https://signal.me/#eu/uwW5t81nJulRdHjWEkNUE2omPv9HzXhzUzar2yvP14ULx50MgdZBwpxrhWX3RfA3">
+                    <span>signal</span>
                     <span>chfour.32</span>
-                </div></li>
-                <li><div>
-                        <a href="discord.html">discord</a>
-                        <span>ch4</span>
-                    </div></li>
-                <li><div>
-                    <a href="https://github.com/chfour">github</a>
+                </a></li>
+                <li><a href="discord.html">
+                    <span>discord</span>
+                    <span>ch4</span>
+                </a></li>
+                <li><a href="https://github.com/chfour">
+                    <span>github</span>
                     <span>chfour</span>
-                </div></li>
-                <li><div>
-                    <a href="https://files.eeep.ee/">file dumpster</a>
+                </a></li>
+                <li><a href="https://files.eeep.ee/">
+                    <span>file dumpster</span>
                     <span>files.eeep.ee</span>
-                </div></li>
+                </a></li>
             </ul>
         </main>
         <footer>
diff --git a/src/style.css b/src/style.css
index 7b5633b..090560a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -18,11 +18,26 @@
 }
 /* todo: non-fast variants and generating this from the nix stuff too maybe lol */
 
-:root { color-scheme: light dark; }
+:root {
+    color-scheme: light dark;
+    --color-fg: #f2f2f2;
+    --color-bg: #000;
+    --color-link: #7d29e2;
+    --color-link-visited: #a800ad;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-bg: #1a1a1a;
+        --color-fg: #fff;
+        --color-link: #aaf;
+        --color-link-visited: #fbf;
+    }
+}
 
 body {
-    background-color: #f2f2f2;
-    color: black;
+    background-color: var(--color-bg);
+    color: var(--color-fg);
 
     font-family: 'Inter', sans-serif;
     font-optical-sizing: auto;
@@ -36,17 +51,9 @@ article {
     margin: 3rem;
 }
 
-a { color: #7d29e2; }
-a:visited { color: #a800ad; }
+a { color: var(--color-link); }
+a:visited { color: var(--color-link-visited); }
 
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: #1a1a1a;
-        color: white;
-    }
-    a { color: #aaf; }
-    a:visited { color: #fbf; }
-}
 
 img { display: block; }
 
-- 
2.51.2