Kristian WindandClaude Opus 5
90bdf4b725
Fire udseender ved siden af de fem temaer: Verdande, Rolig (serif, mere luft), Tæt (flere rækker, mindre luft) og Terminal (én bredde til det hele). De ganges ud til tyve udseender fra otte små blokke CSS frem for at kræve en blok hver. To akser, fordi det er to spørgsmål. Den, der vil have en serif om natten, skal ikke opgive den mørke palet for at få den — og prøven holder netop det fast: at vælge en skrift må ikke trække temaet med sig. Udseendet sættes før første optegning, ligesom temaet. Ellers bliver siden sat op i én skrift og derefter i en anden, og det er et synligt spring. Det er også det ærlige svar på at ligne noget andet. Standarden er bevidst genkendelig — det var det, der blev bedt om — men et program med ét muligt udseende har lånt en form, det ikke kan give tilbage. Med udseender er ligheden en indstilling blandt flere frem for det eneste, det kan være. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
41 lines
1.8 KiB
HTML
41 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html lang="da" data-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#111312" />
|
|
<meta name="description" content="verdande — opgaver og projekter, delt." />
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
|
|
<!-- Safari ignores the manifest's icons entirely and looks for this by name.
|
|
Without it an installed PWA on iOS gets a screenshot of the page as its
|
|
home-screen icon. Generated from the same SVG by scripts/generate-icons.js. -->
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<title>verdande</title>
|
|
<script>
|
|
// Applied before first paint, so a dark-theme user never sees a white
|
|
// flash on load. Reading localStorage here is the only way to do that —
|
|
// anything inside the app runs after the document has already painted.
|
|
try {
|
|
const stored = localStorage.getItem('verdande:theme');
|
|
const theme =
|
|
stored ??
|
|
(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
|
|
document.documentElement.dataset.theme = theme;
|
|
|
|
// The look changes the typeface and the spacing, so it has to be on
|
|
// before first paint too — otherwise the page is laid out once in one
|
|
// face and again in another, which is a visible jump.
|
|
const look = localStorage.getItem('verdande:look');
|
|
if (look && look !== 'verdande') document.documentElement.dataset.look = look;
|
|
} catch (e) {
|
|
// Private browsing can refuse localStorage; the dark default stands.
|
|
}
|
|
</script>
|
|
%sveltekit.head%
|
|
</head>
|
|
<body data-sveltekit-preload-data="hover">
|
|
<div style="display: contents">%sveltekit.body%</div>
|
|
</body>
|
|
</html>
|