kristianwindandClaude Opus 4.8
8dfab618f7
The sidebar read as muted 13px; the menu items now use their own size at medium weight so they carry at a glance (Todoist-ish). Both sizes are choices under Settings → Appearance: - Menu font size drives a dedicated --menu-size the sidebar uses. - Body text size re-scales the shared type tokens (the list and the notes), the same mechanism a look uses. The two are independent on purpose — one is a glance down a list of names, the other a paragraph you read. Kept in localStorage like theme and look, and applied in app.html before first paint so a chosen size does not flash in and resize. Four steps each (Small/Default/Large/Largest); Default carries no attribute so the base tokens stand. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
49 lines
2.3 KiB
HTML
49 lines
2.3 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;
|
|
|
|
// The font-size choices change layout too, so they belong before first
|
|
// paint for the same reason: otherwise the sidebar and the list are drawn
|
|
// once at one size and again at another.
|
|
const menuSize = localStorage.getItem('verdande:menu-size');
|
|
if (menuSize && menuSize !== 'default') document.documentElement.dataset.menuSize = menuSize;
|
|
const textSize = localStorage.getItem('verdande:text-size');
|
|
if (textSize && textSize !== 'default') document.documentElement.dataset.textSize = textSize;
|
|
} 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>
|