trentuna/asw
8
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

layout tokens: all dimensions in 01-asw.css, 08-layout.css only uses var()

Browse source 
New tokens: --width-prose (65ch), --width-report (72ch), --container-padding,
--grid-gap, --grid-gap-tight. Layout layer no longer picks values —
edit 01-asw.css to change any layout dimension.
This commit is contained in:
Vigilio Desto 2026-04-10 20:57:57 +02:00
parent 593b40fc15
commit 8ea2358412
Signed by: vigilio
GPG key ID: 159D6AD58C8E55E9
3 changed files with 30 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

31
assets/css/layers/01-asw.css
View file

@ -150,30 +150,37 @@
--space-6: var(--size-7); /* 2.00rem */
--space-8: var(--size-9); /* 4.00rem */
/* ── Width tokens ───────────────────────────────────────────────── */
--width-prose: var(--size-content-3); /* 60ch — Open Props reading width */
--width-content: var(--size-lg); /* 1024px — Open Props content width */
--width-full: var(--width-xl); /* alias → --width-xl */
/* ── Layout breakpoints ──────────────────────────────────────────── */
/* These don't map exactly to Open Props --size-* — defined explicitly */
/* ── Layout tokens ────────────────────────────────────────────────── */
/* All layout decisions live here. 08-layout.css only uses var(--*). */
/* Container breakpoints (responsive max-widths for body > landmarks) */
--width-sm: 510px;
--width-md: 700px;
--width-lg: 950px;
--width-xl: 1200px;
--width-2xl: 1450px;
/* ── Structural component dimensions ─────────────────────────────── */
/* Content widths */
--width-prose: 65ch; /* reading-optimised line length */
--width-report: 72ch; /* report/formal layout */
--width-content: var(--size-lg); /* 1024px — general content cap */
--width-full: var(--width-xl); /* full-width alias */
/* Container padding */
--container-padding: var(--space-4); /* inline padding at small viewports */
/* Structural dimensions */
--sidebar-width: 220px; /* docs sidebar column */
--toc-width: 200px; /* docs TOC column */
--nav-height: 60px; /* sticky nav offset for calc() */
--nav-height: 60px; /* sticky nav offset */
--docs-max-width: 1400px; /* docs layout outer cap */
--card-min-width: 280px; /* card-grid minmax floor */
--tooltip-max-width: var(--size-px-14); /* 320px — tooltip overflow cap */
--scrollbar-size: var(--border-size-3); /* 5px — thin webkit scrollbar thumb */
--tooltip-max-width: var(--size-px-14); /* 320px */
--scrollbar-size: var(--border-size-3); /* 5px */
/* Grid gaps */
--grid-gap: var(--space-5); /* default grid gap */
--grid-gap-tight: var(--space-4); /* compact grid gap */
/* ── Chart dimensions ────────────────────────────────────────────── */