Feat: lots of improvements

website/public/script.js

@@ -1,21 +1,3 @@
-const toggle = document.getElementById('theme-toggle');
-const root = document.documentElement;
-const stored = localStorage.getItem('theme');
-const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-const isLight = stored ? stored === 'light' : !prefersDark;
-
-if (isLight) {
-    root.classList.add('light');
-}
-toggle.textContent = isLight ? 'DARK' : 'LIGHT';
-
-toggle.addEventListener('click', () => {
-    root.classList.toggle('light');
-    const light = root.classList.contains('light');
-    toggle.textContent = light ? 'DARK' : 'LIGHT';
-    localStorage.setItem('theme', light ? 'light' : 'dark');
-});
-
 document.querySelectorAll('.example-cell').forEach(cell => {
     cell.addEventListener('click', () => {
         const video = cell.querySelector('video');
@@ -45,6 +27,10 @@ document.querySelectorAll('.feature-tags button').forEach(btn => {
     });
 });
 
+document.getElementById('kofi-close').addEventListener('click', () => {
+    document.getElementById('kofi-popup').style.display = 'none';
+});
+
 document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') {
         document.querySelectorAll('.example-cell.expanded').forEach(c => {

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