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

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);
}