Asger Geel Weirsøe
495acc9155
Everything asger.weirsøe.dk still wrote by hand: call-to-action buttons, filter buttons with aria-pressed, the big input next to them, compact and table-wrapping cards, the chat's second voice, the file drop area and the shortcut key. Additive only. Claude-Session: https://claude.ai/code/session_012LCTmU2ewo8tnM1dByYAoG
108 lines
4.8 KiB
Markdown
108 lines
4.8 KiB
Markdown
# weirsoe-theme
|
|
|
|
A tiny, framework-agnostic dark/light **design system** — the look from
|
|
[asger.weirsøe.dk](https://asger.weirsøe.dk), extracted so it can be reused
|
|
across sites.
|
|
|
|
- **Card-based**, deep-navy surfaces with a subtle blue/indigo glow.
|
|
- **Three palettes**: `dark` (default), `light`, `terminal` (green CRT).
|
|
- **Pure CSS**, **system fonts** by default → great TTFB, **no external
|
|
requests, no trackers, no build step**.
|
|
- Use the **CSS variables** directly, the **`.wt-*` components**, or the
|
|
**Bulma adapter** to theme an existing Bulma site without touching markup.
|
|
|
|
## Files
|
|
|
|
| File | What |
|
|
|---|---|
|
|
| `weirsoe-theme.css` | Tokens (`--color-*`) + base (glow, selection, transitions) + `.wt-card/.wt-btn/.wt-input/.wt-tag` + `.prose` + theme-toggle styles |
|
|
| `weirsoe-theme.js` | Persisted dark⇄light toggle + a no-flash snippet |
|
|
| `weirsoe-ui.js` | Drag-and-drop sortable lists (`[data-wt-sortable]` + `data-order-url`, clean drag image) + copy-to-clipboard (`[data-copy-link]`) |
|
|
| `adapters/bulma.css` | Maps Bulma classes → tokens (for Bulma sites) |
|
|
| `examples/demo.html` | Standalone preview |
|
|
|
|
## Quick start (vanilla)
|
|
|
|
```html
|
|
<head>
|
|
<!-- no-flash: set the theme before the stylesheet paints -->
|
|
<script>try{document.documentElement.dataset.theme=localStorage.getItem('wt-theme')||'dark'}catch(e){document.documentElement.dataset.theme='dark'}</script>
|
|
<link rel="stylesheet" href="/weirsoe-theme.css">
|
|
<script defer src="/weirsoe-theme.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="wt-card wt-card--hover">
|
|
<h2>Et kort</h2>
|
|
<p class="wt-muted">Med weirsoe-theme.</p>
|
|
<button class="wt-btn wt-btn--primary">Knap</button>
|
|
</div>
|
|
</body>
|
|
```
|
|
|
|
## Theming an existing Bulma site
|
|
|
|
Load the adapter **after** Bulma and **after** `weirsoe-theme.css`:
|
|
|
|
```html
|
|
<link rel="stylesheet" href="/bulma.min.css">
|
|
<link rel="stylesheet" href="/weirsoe-theme.css"> <!-- tokens + base -->
|
|
<link rel="stylesheet" href="/adapters/bulma.css"> <!-- maps Bulma → tokens -->
|
|
```
|
|
|
|
Your existing `.box`, `.button`, `.input`, `.tag`, `.navbar`… are now dark and
|
|
card-styled. `wish.weircon.dk` (Christmas-Community fork) consumes it this way.
|
|
|
|
## Tokens
|
|
|
|
`--color-bg --color-surface --color-surface-2 --color-surface-3 --color-border
|
|
--color-text --color-muted --color-accent --color-accent-2 --color-accent-ink
|
|
--color-good --color-bad --color-warn`, plus `--wt-radius --wt-radius-sm --wt-shadow
|
|
--wt-shadow-hover --wt-font-sans --wt-font-mono`.
|
|
|
|
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` `--compact` `--flush` `--alt`) + `.wt-card-date/-title/-desc` | post/list card; compact = small item, flush = table inside, alt = second voice (chat) |
|
|
| `.wt-dropzone` (`.is-over`) | dashed file drop area |
|
|
| `.wt-chip` | pill tag-link |
|
|
| `.wt-btn` (`--primary` `--ghost` `--sm` `--lg`) / `.wt-input` (`--lg`) / `.wt-tag` / `.wt-muted` | controls |
|
|
| `.wt-btn[aria-pressed=true]` / `.wt-btn.is-active` | toggle state for filter and segment buttons |
|
|
| `.wt-kbd` | keyboard key |
|
|
| `.wt-tag--good` / `--warn` / `--bad` / `--accent` | status tags (tinted, readable in every palette) |
|
|
| `.wt-pre` | monospace output box for logs / terminal captures |
|
|
| `.wt-row` (`--between`) / `.wt-stack` | wrapping flex row / vertical grid stack with the theme gap |
|
|
| `.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`.
|
|
`weirsoe-theme.js` wires any `[data-theme-toggle]` button to cycle dark⇄light and
|
|
persists the choice in `localStorage` (`wt-theme`). For a 3-way picker call
|
|
`weirsoeTheme.set('terminal')`.
|
|
|
|
## Notes
|
|
|
|
- Want pixel-exact Inter (like asger.weirsøe.dk)? Self-host
|
|
`@fontsource-variable/inter` and set `--wt-font-sans: "Inter Variable", …`.
|
|
The default system stack is used to keep TTFB optimal and avoid font requests.
|
|
- Source: the design originated in `agw/asger-web` (`src/styles/global.css`).
|