templates: improve accessibility, dark mode, and typography

Bump base font size from 0.8rem to 1rem (16px) to meet mobile
accessibility guidelines and avoid iOS auto-zoom on inputs.

Add CSS custom properties for all theme colors with a
prefers-color-scheme: dark media query so pages adapt to OS dark
mode. Component inline styles reference var(--hs-*) tokens so they
follow the scheme automatically.

Accessibility improvements:
- role="status" + aria-live="polite" on success boxes
- role="alert" + aria-live="assertive" on error boxes
- role="note" on warning boxes
- Visible focus rings via :focus-visible
- Link underlines (don't rely on color alone)
- SVG icons use currentColor for theme adaptation
- prefers-reduced-motion media query
- <main> landmark element wrapping page content
- Button styling with 44px min-height touch target
- List item spacing

Updates juanfont/headscale#3182
This commit is contained in:
Kristoffer Dalby 2026-04-13 12:38:16 +00:00
parent 78990491da
commit 814226f327
3 changed files with 151 additions and 50 deletions

View file

@ -17,12 +17,12 @@ func mdTypesetBody(children ...elem.Node) *elem.Element {
styles.Display: "flex",
styles.FlexDirection: "column",
styles.AlignItems: "center",
styles.BackgroundColor: "#ffffff",
styles.BackgroundColor: "var(--hs-bg)",
styles.Padding: "3rem 1.5rem",
}.ToInline(),
"translate": "no",
},
elem.Div(attrs.Props{
elem.Main(attrs.Props{
attrs.Class: "md-typeset",
attrs.Style: styles.Props{
styles.MaxWidth: "min(800px, 90vw)",