Weircon-wind/README.md

weirsoe-theme

A tiny, framework-agnostic dark/light design system — the look from 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)

<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:

<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, 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) + .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>:

<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).