Exact asger toggle (theme key + prefers-color-scheme), responsive container + full site-chrome components

- weirsoe-theme.js: match asger.weirsoe.dk exactly — localStorage['theme'],
  prefers-color-scheme default, light<->dark click delegation.
- Container tokens + .wt-container(/--wide/--narrow/--bleed); Bulma adapter
  constrains content to a centred column past tablet (full-bleed on phones).
- Site chrome extracted from agw/pw so it can drop its hardcoded CSS: .wt-header
  /.wt-nav/.wt-brand/.wt-nav-link/.wt-main/.wt-footer, postcard .wt-card(+date/
  title/desc, --raised) and .wt-chip. README components table + theme-color note.
This commit is contained in:
Asger Geel Weirsøe
2026-06-14 16:20:00 +02:00
parent 5784f1f955
commit 41c22e4bb5
5 changed files with 145 additions and 49 deletions
+25
View File
@@ -60,6 +60,31 @@ card-styled. `wish.weircon.dk` (Christmas-Community fork) consumes it this way.
Override any of them in your own `:root` to re-skin without forking.
## Components
Semantic classes so a site can drop hand-written CSS entirely:
| Class | What |
|---|---|
| `.wt-header` / `.wt-nav` / `.wt-brand` `.wt-brand-dot` | sticky blurred header + centred nav bar + wordmark |
| `.wt-nav-links` / `.wt-nav-link` (`.is-active` / `[aria-current=page]`) | nav link row |
| `.wt-main` | centred content column (= `.wt-container` + vertical padding) |
| `.wt-footer` / `.wt-footer-inner` | footer with border + responsive row |
| `.wt-card` (`--hover` `--raised` `--link`) + `.wt-card-date/-title/-desc` | post/list card |
| `.wt-chip` | pill tag-link |
| `.wt-btn` (`--primary`) / `.wt-input` / `.wt-tag` / `.wt-muted` | controls |
| `.prose` | long-form markdown |
| `.theme-toggle` + `.sun-and-moon` | the sun⇄moon toggle (wire with `weirsoe-theme.js`) |
These mirror, 1:1, the chrome of `agw/pw` (asger.weirsøe.dk) — the goal is for
that site to delete `src/styles/global.css` + its inline utility soup and
`@import` this framework instead. Also set the browser UI colour in `<head>`:
```html
<meta name="theme-color" content="#0b0f17" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#f6f8fb" media="(prefers-color-scheme: light)">
```
## Theme switching
Set `data-theme` on `<html>`: `dark` (default), `light`, or `terminal`.