agw/Weircon-wind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
examples/demo.html
+5 -5
View File
@@ -4,7 +4,7 @@
<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>
<script>(()=>{try{var t=localStorage.getItem('theme')||(matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');document.documentElement.dataset.theme=t}catch(e){document.documentElement.dataset.theme='dark'}})()</script>
<link rel="stylesheet" href="../weirsoe-theme.css">
<script defer src="../weirsoe-theme.js"></script>
<style>
@@ -20,11 +20,11 @@
<div class="wrap">
<header>
<h1>weirsoe-theme</h1>
<button class="theme-toggle" data-theme-toggle aria-label="Skift tema">
<button type="button" class="theme-toggle" data-theme-toggle aria-label="Skift tema" title="Skift mellem lyst og mørkt 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>
<mask class="moon" id="moon-mask"><rect x="0" y="0" width="100%" height="100%" fill="white"/><circle cx="24" cy="10" r="6" fill="black"/></mask>
<circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" 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.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></g>
</svg>
</button>
</header>