/* MARK: LAYOUT
*/
:where(
html,
body,
app-container,
main,
article,
section
) {
overflow: hidden; /*
- Ancestoral path from scrollable element to root enables closest context scrolling
- Full Bleed layouts maximize possibilities
- Disables horizontal scrolling (enforces accessible wrapping)
- Eliminates most unknown variables
- Semanticly meaningful HTML elements only */
position: relative;
}
:where(
app-container,
header,
nav,
main,
article,
section,
li,
form,
legend,
footer
) {
display: grid; /*
- Grid level elements are listed in DOM order
- Implicit grid columns/rows are added/removed auto-magically when dynamic data elements are added/removed
- Custom HTML elements allow for semantic meaning and selector grouping without adding markup
- Custom HTML elements may be expanded into registered web-components */
}
:where(
app-banner,
aside
) {
display: none; /*
- Hidden until they have content */
&:not(:empty) {
display: grid;
}
}
:where(
app-banner,
header,
nav,
main,
aside,
footer
) {
border-radius: 0.3rem;
margin-inline: 1rem;
}
:where(
app-container,
main,
article,
section,
ul
) {
grid-auto-flow: row;
}
:where(
app-logo,
user-name,
h1,
h2,
p,
li,
powered-by,
app-version
) {
padding: 1rem; /*
- Data elements/containers only - such as ,
,