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

move container rules from 02-semantic to 08-layout — widths are layout, not semantics

Browse source
This commit is contained in:
Vigilio Desto 2026-04-10 20:40:31 +02:00
parent 82754338a9
commit e6175b69e0
Signed by: vigilio
GPG key ID: 159D6AD58C8E55E9
3 changed files with 63 additions and 67 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

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

@ -888,65 +888,4 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background-color: var(--accent-red); background-color: var(--accent-red);
} }
/* ── Content Container ─────────────────────────────────────────────── */ /* Container layout rules moved to 08-layout.css */
/* All body-level landmarks share container alignment:
<body> > <nav>, <header>, <article role="main">, <footer>
Scoped to body > child to avoid affecting nested elements. */
body > nav,
body > header,
body > article,
body > footer {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--space-4);
padding-left: var(--space-4);
}
@media (--sm-n-above) {
body > nav,
body > header,
body > article,
body > footer {
max-width: var(--width-sm);
padding-right: 0;
padding-left: 0;
}
}
@media (--md-n-above) {
body > nav,
body > header,
body > article,
body > footer {
max-width: var(--width-md);
}
}
@media (--lg-n-above) {
body > nav,
body > header,
body > article,
body > footer {
max-width: var(--width-lg);
}
}
@media (--xl-n-above) {
body > nav,
body > header,
body > article,
body > footer {
max-width: var(--width-xl);
}
}
@media (--xxl-n-above) {
body > nav,
body > header,
body > article,
body > footer {
max-width: var(--width-2xl);
}
}

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

@ -12,13 +12,70 @@
padding-inline: var(--space-5); padding-inline: var(--space-5);
} }
/* ── Body baseline ──────────────────────────────────────────────────── */ /* ── Body landmark container ────────────────────────────────────────── */
/* All body-level landmarks share container alignment:
<body> > <nav>, <header>, <article role="main">, <footer> */
body > article { body > nav,
max-width: var(--width-full); body > header,
margin-inline: auto; body > article,
body > footer {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--space-4);
padding-left: var(--space-4);
} }
@media (--sm-n-above) {
body > nav,
body > header,
body > article,
body > footer {
max-width: var(--width-sm);
padding-right: 0;
padding-left: 0;
}
}
@media (--md-n-above) {
body > nav,
body > header,
body > article,
body > footer {
max-width: var(--width-md);
}
}
@media (--lg-n-above) {
body > nav,
body > header,
body > article,
body > footer {
max-width: var(--width-lg);
}
}
@media (--xl-n-above) {
body > nav,
body > header,
body > article,
body > footer {
max-width: var(--width-xl);
}
}
@media (--xxl-n-above) {
body > nav,
body > header,
body > article,
body > footer {
max-width: var(--width-2xl);
}
}
/* ── Body baseline ──────────────────────────────────────────────────── */
body { body {
background-color: var(--surface); background-color: var(--surface);
color: var(--text); color: var(--text);