Feat: update website to prevent ugliness

website/public/script.js

@@ -0,0 +1,54 @@
+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');
+    highlightForth();
+});
+
+function highlightForth() {
+    const words = ['note', 'sound', 'lpf', 'hpf', 'chorus', 'verb', 'distort', 'speed'];
+    const notes = ['c4'];
+    const chords = ['min7'];
+    const samples = ['kkick', 'sine', 'saw'];
+    const isLight = document.documentElement.classList.contains('light');
+    const numColor = isLight ? '#a855f7' : '#e8a0e8';
+    const dotColor = isLight ? '#0284c7' : '#7dd3fc';
+    const wordColor = isLight ? '#65a30d' : '#a3e635';
+    const noteColor = isLight ? '#d97706' : '#fbbf24';
+    const chordColor = isLight ? '#15803d' : '#4ade80';
+    const sampleColor = isLight ? '#dc2626' : '#f87171';
+    document.querySelectorAll('pre').forEach(pre => {
+        const text = pre.dataset.source || pre.textContent;
+        pre.dataset.source = text;
+        pre.innerHTML = text
+            .split(/(\s+)/)
+            .map(t => {
+                if (t === '.') return `<span style="color:${dotColor}">.</span>`;
+                if (/^-?\d+\.?\d*$/.test(t)) return `<span style="color:${numColor}">${t}</span>`;
+                if (words.includes(t)) return `<span style="color:${wordColor}">${t}</span>`;
+                if (notes.includes(t)) return `<span style="color:${noteColor}">${t}</span>`;
+                if (chords.includes(t)) return `<span style="color:${chordColor}">${t}</span>`;
+                if (samples.includes(t)) return `<span style="color:${sampleColor}">${t}</span>`;
+                return t;
+            })
+            .join('');
+    });
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', highlightForth);
+} else {
+    highlightForth();
+}

website/public/style.css

@@ -0,0 +1,127 @@
+@font-face {
+    font-family: 'CozetteVector';
+    src: url('/CozetteVector.ttf') format('truetype');
+}
+
+:root {
+    --bg: #000;
+    --surface: #121212;
+    --text: #fff;
+    --text-dim: #b4b4b4;
+    --text-muted: #787878;
+}
+
+:root.light {
+    --bg: #fff;
+    --surface: #f0f0f0;
+    --text: #000;
+    --text-dim: #505050;
+    --text-muted: #8c8c8c;
+}
+
+body {
+    font-family: 'CozetteVector', monospace;
+    background: var(--bg);
+    color: var(--text);
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 1rem;
+    line-height: 1.3;
+    font-size: 0.9rem;
+}
+
+h1 {
+    color: var(--text);
+    margin: 0;
+}
+
+h2 {
+    color: var(--text);
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
+    font-size: 1rem;
+}
+
+p { margin: 0.25rem 0; }
+
+video {
+    max-width: 100%;
+    margin: 0.5rem 0;
+    display: block;
+}
+
+a { color: var(--text-dim); }
+
+ul {
+    padding-left: 1.5rem;
+    margin: 0.25rem 0;
+}
+
+li { margin: 0.1rem 0; }
+
+pre {
+    background: var(--surface);
+    padding: 0.5rem;
+    overflow-x: auto;
+    margin: 0.25rem 0;
+}
+
+.downloads-table {
+    border-collapse: collapse;
+    margin: 0.5rem 0;
+    width: 100%;
+}
+
+.downloads-table th,
+.downloads-table td {
+    padding: 0.25rem 0.75rem;
+    text-align: left;
+}
+
+.downloads-table th {
+    color: var(--text);
+}
+
+.downloads-table td:first-child {
+    color: var(--text-muted);
+}
+
+.downloads-table tr:nth-child(even) {
+    background: var(--surface);
+}
+
+.note {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    font-style: italic;
+}
+
+.note a {
+    color: var(--text-muted);
+}
+
+.support {
+    background: var(--surface);
+    padding: 0.5rem;
+    margin: 0.5rem 0;
+    color: var(--text-dim);
+}
+
+.support a {
+    color: var(--text);
+}
+
+#theme-toggle {
+    font-family: 'CozetteVector', 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);
+}