Feat: lots of improvements

website/public/style.css

@@ -6,14 +6,6 @@
 }
 
 :root {
-    --bg: #000;
-    --surface: #121212;
-    --text: #fff;
-    --text-dim: #b4b4b4;
-    --text-muted: #787878;
-}
-
-:root.light {
     --bg: #fff;
     --surface: #f0f0f0;
     --text: #000;
@@ -216,6 +208,51 @@ li {
     display: none;
 }
 
+.kofi-popup {
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    z-index: 50;
+    max-width: 14rem;
+    font-size: 0.75rem;
+    color: var(--text-dim);
+    background: var(--surface);
+    border: 1px solid var(--text-muted);
+    padding: 0.75rem 1rem;
+}
+
+.kofi-popup p {
+    margin: 0 0 0.5rem;
+    text-align: left;
+}
+
+.kofi-popup a {
+    color: var(--text);
+    text-decoration: underline;
+}
+
+.kofi-popup a:hover {
+    color: var(--text-dim);
+}
+
+.kofi-close {
+    position: absolute;
+    top: 0.25rem;
+    right: 0.5rem;
+    font-family: 'VCR OSD Mono', monospace;
+    font-size: 1rem;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+}
+
+.kofi-close:hover {
+    color: var(--text);
+}
+
 .colophon {
     margin-top: 3rem;
     padding-top: 1rem;
@@ -227,17 +264,3 @@ li {
     color: var(--text-dim);
 }
 
-#theme-toggle {
-    font-family: 'VCR OSD Mono', monospace;
-    background: none;
-    color: var(--text-muted);
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    font-size: inherit;
-    text-decoration: underline;
-}
-
-#theme-toggle:hover {
-    color: var(--text);
-}