rzen
e873460465
- New "Why this exists" post; masthead "founded" links to it
- Post template: serif headline + date in masthead, "Filed under {category}" in footer
- Drop counts from footer Collections list
- Masonry component for home + sources grid; source badges link to /sources/#slug
- Theme toggle (settings page + cog) with dark-mode-aware tokens
- Six new themed find lists; cluster-finds skill
118 lines
3.2 KiB
Plaintext
118 lines
3.2 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
---
|
|
|
|
<BaseLayout
|
|
title="Settings"
|
|
description="Presentation options for Unique — color theme and other display preferences."
|
|
subheader="Presentation options."
|
|
noindex
|
|
>
|
|
<article>
|
|
<section class="setting">
|
|
<h2>Color theme</h2>
|
|
<p class="hint">
|
|
Auto follows your system preference. Light or dark overrides it on this
|
|
device.
|
|
</p>
|
|
<div class="theme-toggle" role="group" aria-label="Color theme">
|
|
<button type="button" data-theme-set="auto">Auto</button>
|
|
<button type="button" data-theme-set="light">Light</button>
|
|
<button type="button" data-theme-set="dark">Dark</button>
|
|
</div>
|
|
</section>
|
|
|
|
<p class="more">More presentation options will land here over time.</p>
|
|
</article>
|
|
|
|
<script>
|
|
type Theme = 'auto' | 'light' | 'dark';
|
|
const buttons = document.querySelectorAll<HTMLButtonElement>('[data-theme-set]');
|
|
|
|
function currentTheme(): Theme {
|
|
const t = document.documentElement.getAttribute('data-theme');
|
|
return t === 'light' || t === 'dark' ? t : 'auto';
|
|
}
|
|
|
|
function setActive(value: Theme) {
|
|
for (const b of buttons) {
|
|
if (b.dataset.themeSet === value) b.setAttribute('aria-current', 'true');
|
|
else b.removeAttribute('aria-current');
|
|
}
|
|
}
|
|
|
|
function applyTheme(value: Theme) {
|
|
if (value === 'auto') {
|
|
document.documentElement.removeAttribute('data-theme');
|
|
try { localStorage.removeItem('theme'); } catch (e) {}
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', value);
|
|
try { localStorage.setItem('theme', value); } catch (e) {}
|
|
}
|
|
setActive(value);
|
|
}
|
|
|
|
for (const b of buttons) {
|
|
b.addEventListener('click', () => {
|
|
const v = b.dataset.themeSet;
|
|
if (v === 'auto' || v === 'light' || v === 'dark') applyTheme(v);
|
|
});
|
|
}
|
|
|
|
setActive(currentTheme());
|
|
</script>
|
|
|
|
<style>
|
|
.setting {
|
|
padding: 1.5rem 0;
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
.setting:first-child { padding-top: 0; }
|
|
.setting h2 {
|
|
margin: 0 0 0.35rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
.hint {
|
|
margin: 0 0 0.85rem;
|
|
color: var(--muted);
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.theme-toggle {
|
|
display: inline-flex;
|
|
gap: 0;
|
|
border: 1px solid var(--rule);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
.theme-toggle button {
|
|
font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
background: none;
|
|
border: 0;
|
|
padding: 0.45rem 1rem;
|
|
margin: 0;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
transition: background 0.18s ease, color 0.18s ease;
|
|
}
|
|
.theme-toggle button + button {
|
|
border-left: 1px solid var(--rule);
|
|
}
|
|
.theme-toggle button:hover { color: var(--accent); }
|
|
.theme-toggle button[aria-current="true"] {
|
|
background: var(--fg);
|
|
color: var(--bg);
|
|
}
|
|
|
|
.more {
|
|
margin-top: 2rem;
|
|
color: var(--muted);
|
|
font-style: italic;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|
|
</BaseLayout>
|