Asger Geel Weirsøe
5784f1f955
Extracted from asger.weirsoe.dk (src/styles/global.css). Tokens (--color-*) + base layer (glow, selection, smooth theme transition) + .wt-* components + .prose, plus a persisted dark/light toggle (weirsoe-theme.js) and a Bulma adapter (adapters/bulma.css) so existing Bulma sites get the card look without markup changes. Pure CSS, system fonts, no external requests.
48 lines
2.5 KiB
HTML
48 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html data-theme="dark" lang="da">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>weirsoe-theme demo</title>
|
|
<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>
|
|
<style>
|
|
body { margin: 0; }
|
|
.wrap { max-width: 48rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
|
|
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
|
|
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
|
|
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
|
h1 { letter-spacing: -0.02em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header>
|
|
<h1>weirsoe-theme</h1>
|
|
<button class="theme-toggle" data-theme-toggle aria-label="Skift tema">
|
|
<svg class="sun-and-moon" aria-hidden="true" width="22" height="22" viewBox="0 0 24 24">
|
|
<circle class="sun" cx="12" cy="12" r="6" mask="url(#wt-moon)" fill="currentColor"/>
|
|
<g class="sun-beams" stroke="currentColor"><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.2" y1="4.2" x2="5.6" y2="5.6"/><line x1="18.4" y1="18.4" x2="19.8" y2="19.8"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.2" y1="19.8" x2="5.6" y2="18.4"/><line x1="18.4" y1="5.6" x2="19.8" y2="4.2"/></g>
|
|
<mask class="moon" id="wt-moon"><rect x="0" y="0" width="100%" height="100%" fill="white"/><circle cx="24" cy="10" r="6" fill="black"/></mask>
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
|
|
<div class="row" style="margin-bottom:1.5rem">
|
|
<button class="wt-btn wt-btn--primary">Primær</button>
|
|
<button class="wt-btn">Sekundær</button>
|
|
<input class="wt-input" placeholder="Skriv noget…">
|
|
<span class="wt-tag">tag</span>
|
|
<button class="wt-btn" onclick="weirsoeTheme.set('terminal')">terminal-tema</button>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="wt-card wt-card--hover"><h2>Ønske</h2><p class="wt-muted">Et kort med hover-løft.</p></div>
|
|
<div class="wt-card wt-card--hover"><h2>Liste</h2><p class="wt-muted">Kort-baseret layout.</p></div>
|
|
<div class="wt-card wt-card--hover"><h2>Event</h2><p class="wt-muted">Genbrugeligt tema.</p></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|