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

fix: remap CSS container rules from <main> to <article>

Browse source 
body > nav/header/article/footer all get container alignment
(max-width, auto margins, responsive padding). Replaces all
body > main selectors to match the new landmark structure.
This commit is contained in:
Vigilio Desto 2026-04-10 20:39:13 +02:00
parent c2261bfc9f
commit 82754338a9
Signed by: vigilio
GPG key ID: 159D6AD58C8E55E9
4 changed files with 24 additions and 25 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

4
assets/css/layers/00-reset.css
View file

@ -47,8 +47,8 @@ body {
/* Prose font — same neo-grotesque stack, consistent across all contexts */ /* Prose font — same neo-grotesque stack, consistent across all contexts */
/* article and [data-layout="prose"] inherit body font — no override needed */ /* article and [data-layout="prose"] inherit body font — no override needed */
/* Main */ /* Article as main content landmark */
main { article[role="main"] {
display: block; display: block;
} }

31
assets/css/layers/02-semantic.css
View file

@ -889,13 +889,13 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
} }
/* ── Content Container ─────────────────────────────────────────────── */ /* ── Content Container ─────────────────────────────────────────────── */
/* body > nav, body > main, and body > footer share container alignment so agents /* All body-level landmarks share container alignment:
can write <body><nav>…<main>…<footer> and get consistent widths. <body> > <nav>, <header>, <article role="main">, <footer>
Scoped to body > nav/main/footer to avoid affecting nested elements Scoped to body > child to avoid affecting nested elements. */
(breadcrumbs, pagination, mains inside grid layouts). */
body > nav, body > nav,
body > main, body > header,
body > article,
body > footer { body > footer {
width: 100%; width: 100%;
margin-right: auto; margin-right: auto;
@ -904,10 +904,10 @@ body > footer {
padding-left: var(--space-4); padding-left: var(--space-4);
} }
/* Default: constrained container (replaces .container class) */
@media (--sm-n-above) { @media (--sm-n-above) {
body > nav, body > nav,
body > main:not([data-layout="fluid"]), body > header,
body > article,
body > footer { body > footer {
max-width: var(--width-sm); max-width: var(--width-sm);
padding-right: 0; padding-right: 0;
@ -917,7 +917,8 @@ body > footer {
@media (--md-n-above) { @media (--md-n-above) {
body > nav, body > nav,
body > main:not([data-layout="fluid"]), body > header,
body > article,
body > footer { body > footer {
max-width: var(--width-md); max-width: var(--width-md);
} }
@ -925,7 +926,8 @@ body > footer {
@media (--lg-n-above) { @media (--lg-n-above) {
body > nav, body > nav,
body > main:not([data-layout="fluid"]), body > header,
body > article,
body > footer { body > footer {
max-width: var(--width-lg); max-width: var(--width-lg);
} }
@ -933,7 +935,8 @@ body > footer {
@media (--xl-n-above) { @media (--xl-n-above) {
body > nav, body > nav,
body > main:not([data-layout="fluid"]), body > header,
body > article,
body > footer { body > footer {
max-width: var(--width-xl); max-width: var(--width-xl);
} }
@ -941,13 +944,9 @@ body > footer {
@media (--xxl-n-above) { @media (--xxl-n-above) {
body > nav, body > nav,
body > main:not([data-layout="fluid"]), body > header,
body > article,
body > footer { body > footer {
max-width: var(--width-2xl); max-width: var(--width-2xl);
} }
} }
/* Full-width opt-out */
body > main[data-layout="fluid"] {
max-width: none;
}

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

@ -14,7 +14,7 @@
/* ── Body baseline ──────────────────────────────────────────────────── */ /* ── Body baseline ──────────────────────────────────────────────────── */
main { body > article {
max-width: var(--width-full); max-width: var(--width-full);
margin-inline: auto; margin-inline: auto;
} }
@ -338,8 +338,8 @@ nav[data-nav="toc"] ul li + li::before {
} }
} }
/* Allow <main> as content column in docs layout — override body > main container sizing */ /* Allow article as content column in docs layout — override body > article container sizing */
[data-layout="docs"] > main { [data-layout="docs"] > article {
max-width: none; max-width: none;
min-width: 0; min-width: 0;
} }
@ -404,7 +404,7 @@ nav[data-nav="toc"] ul li + li::before {
/* Reading-optimised width. ~65 characters per line — Bringhurst/LaTeX */ /* Reading-optimised width. ~65 characters per line — Bringhurst/LaTeX */
/* standard for comfortable prose. Use on <main> or any block element. */ /* standard for comfortable prose. Use on <main> or any block element. */
main[data-layout="prose"], article[data-layout="prose"],
[data-layout="prose"] { [data-layout="prose"] {
max-width: 65ch; max-width: 65ch;
margin-inline: auto; margin-inline: auto;
@ -506,7 +506,7 @@ main[data-layout="prose"],
} }
[data-layout="report"] > header, [data-layout="report"] > header,
[data-layout="report"] > main, [data-layout="report"] > article,
[data-layout="report"] > footer { [data-layout="report"] > footer {
max-width: 72ch; max-width: 72ch;
margin-inline: auto; margin-inline: auto;
@ -526,7 +526,7 @@ main[data-layout="prose"],
color: var(--text); color: var(--text);
} }
[data-layout="report"] > main { [data-layout="report"] > article {
padding-bottom: var(--space-8); padding-bottom: var(--space-8);
} }