move container rules from 02-semantic to 08-layout — widths are layout, not semantics
This commit is contained in:
parent
82754338a9
commit
e6175b69e0
3 changed files with 63 additions and 67 deletions
|
|
@ -888,65 +888,4 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
|
|||
background-color: var(--accent-red);
|
||||
}
|
||||
|
||||
/* ── Content Container ─────────────────────────────────────────────── */
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
/* Container layout rules moved to 08-layout.css */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue