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:
@@ -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`.
|
||||
|
||||
Reference in New Issue
Block a user