website: fix dark mode, table contrast, prose opacity, add AGENTS.md

Dark mode fix: import liveline.css and liveline-prism.css via CSS @import in globals.css instead of JS import in the route file. This brings them into the Tailwind compilation chain so @variant dark works. @variant dark silently fails in CSS files imported only via JS — documented this constraint in website/AGENTS.md. - Prism dark colors use CSS variables on :root with @variant dark - liveline.css dark overrides use @variant dark nested inside selectors - Table cells use --ll-text-primary for full contrast in both modes - Prose paragraphs at 0.82 opacity, bold and inline code punch through to full opacity for visual hierarchy - Prose line-height increased to 22px - Add website/AGENTS.md documenting dark mode rules
2026-02-20 17:20:09 +01:00
parent b2ab69c236
commit 44b367a927
6 changed files with 263 additions and 144 deletions
@@ -0,0 +1,54 @@
+# Website
+
+## Tailwind dark mode
+
+Dark mode uses `prefers-color-scheme` media query, configured in `globals.css`:
+
+```css
+@custom-variant dark (@media (prefers-color-scheme: dark));
+```
+
+### `@variant dark` rules
+
+1. **Must be nested inside a selector**, never at the top level:
+
+```css
+/* WRONG - silently produces no output */
+@variant dark {
+  .my-class { color: white; }
+}
+
+/* CORRECT - nest inside the selector */
+.my-class {
+  @variant dark {
+    color: white;
+  }
+}
+
+/* CORRECT - define variables inside :root */
+:root {
+  @variant dark {
+    --my-var: white;
+  }
+}
+```
+
+2. **Only works in CSS files that are part of the Tailwind compilation chain.** Files must be imported via CSS `@import` from `globals.css` (which has `@import "tailwindcss"`). JS/TS `import "file.css"` in route files does NOT go through Tailwind — `@variant dark` will silently fail.
+
+```css
+/* globals.css — this is the Tailwind entry point */
+@import "tailwindcss";
+@import "./liveline.css";       /* these get Tailwind processing */
+@import "./liveline-prism.css";
+@custom-variant dark (@media (prefers-color-scheme: dark));
+```
+
+If you create a new CSS file that needs `@variant dark`, add it as a CSS `@import` in `globals.css`. Do NOT import it from a `.tsx` file.
+
+### For many dark overrides, use CSS variables on `:root`
+
+For files with many dark mode selectors (like prism syntax colors), define CSS variables in `:root { @variant dark { ... } }` and reference them in selectors. This avoids repeating `@variant dark` in every rule.
+
+## No localStorage dark mode toggle
+
+There is no JS-based `.dark` class toggle. Do not add inline scripts to toggle `.dark` on `<html>`. The site follows the OS preference only via `prefers-color-scheme`.