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:
parent
78990491da
commit
814226f327
3 changed files with 151 additions and 50 deletions
|
|
@ -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)",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue