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

2
assets/css/asw-built.css
View file

File diff suppressed because one or more lines are too long

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 ────────────────────────────────────────────── */

20
assets/css/layers/08-layout.css
View file

@ -7,9 +7,9 @@
/* ── Container ─────────────────────────────────────────────────────── */
.container {
max-width: var(--container-width, var(--width-xl));
max-width: var(--width-content);
margin-inline: auto;
padding-inline: var(--space-5);
padding-inline: var(--container-padding);
}
/* ── Body landmark container ────────────────────────────────────────── */
@ -23,8 +23,8 @@ body > footer {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--space-4);
padding-left: var(--space-4);
padding-right: var(--container-padding);
padding-left: var(--container-padding);
}
@media (--sm-n-above) {
@ -406,25 +406,25 @@ nav[data-nav="toc"] ul li + li::before {
[data-layout="grid-2"] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
gap: var(--grid-gap);
}
[data-layout="grid-3"] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
gap: var(--grid-gap);
}
[data-layout="card-grid"] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
gap: var(--space-5);
gap: var(--grid-gap);
}
[data-layout="stats"] {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
gap: var(--grid-gap);
}
[data-layout="stats"] > * {
@ -463,7 +463,7 @@ nav[data-nav="toc"] ul li + li::before {
article[data-layout="prose"],
[data-layout="prose"] {
max-width: 65ch;
max-width: var(--width-prose);
margin-inline: auto;
}
@ -565,7 +565,7 @@ article[data-layout="prose"],
[data-layout="report"] > header,
[data-layout="report"] > article,
[data-layout="report"] > footer {
max-width: 72ch;
max-width: var(--width-report);
margin-inline: auto;
padding-inline: var(--space-5);
}