You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.7 KiB
108 lines
3.7 KiB
/** |
|
* @file |
|
* Page-level structural rules for the druid theme. |
|
* |
|
* This layer holds rules that arrange regions, not rules that style their |
|
* contents — grids, flex containers, max-widths, page padding, sidebar |
|
* positioning. If a rule could move from `<header>` to `<aside>` without |
|
* changing meaning, it belongs here; if it's tied to a specific UI element |
|
* (a card, a button, a menu item), put it in css/components/. |
|
* |
|
* Classes referenced by templates/layout/page.html.twig: |
|
* .layout-container — outermost wrapper around the whole page |
|
* .layout-content — main content column inside <main> |
|
* .layout-sidebar-first — optional aside before content |
|
* .layout-sidebar-second — optional aside after content |
|
* |
|
* Container queries (@container) are a natural fit for region-internal |
|
* responsiveness — see todo.md for the rationale. |
|
*/ |
|
@layer layout { |
|
|
|
.content-rail { |
|
max-width: var(--content-max-width); |
|
margin-inline: auto; |
|
padding-inline: var(--size-3); |
|
} |
|
|
|
main, |
|
footer { |
|
padding-block: var(--size-4); |
|
padding-inline: var(--size-3); |
|
} |
|
|
|
.region-primary-menu, |
|
.region-secondary-menu { |
|
padding-block: var(--size-3); |
|
} |
|
|
|
.top-nav__inner { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
gap: 1rem; |
|
} |
|
|
|
.top-nav__left, |
|
.top-nav__right { |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
} |
|
|
|
/* ───────────────────────────────────────────────────────────────────── |
|
Sidebar layout |
|
───────────────────────────────────────────────────────────────────── |
|
Body classes are set in druid_preprocess_html() (druid.theme): |
|
layout-no-sidebars, layout-one-sidebar, layout-sidebar-first, |
|
layout-sidebar-second, layout-two-sidebars. |
|
|
|
Source order inside <main> is content → sidebar_first → sidebar_second. |
|
On mobile, that's also the visual order (content first — best UX). |
|
At wider viewports, grid-template-areas re-orders sidebars around |
|
content without touching the DOM. |
|
|
|
No-sidebar pages skip the grid entirely; .layout-content just fills |
|
its parent rail. */ |
|
|
|
body:is(.layout-sidebar-first, .layout-sidebar-second, .layout-two-sidebars) main > .content-rail { |
|
display: grid; |
|
gap: var(--size-4); |
|
grid-template-columns: minmax(0, 1fr); |
|
} |
|
|
|
body.layout-sidebar-first main > .content-rail { |
|
grid-template-areas: "content" "first"; |
|
} |
|
body.layout-sidebar-second main > .content-rail { |
|
grid-template-areas: "content" "second"; |
|
} |
|
body.layout-two-sidebars main > .content-rail { |
|
grid-template-areas: "content" "first" "second"; |
|
} |
|
|
|
.layout-content { grid-area: content; } |
|
.layout-sidebar-first { grid-area: first; } |
|
.layout-sidebar-second { grid-area: second; } |
|
|
|
/* Tablet+: single-sidebar layouts side-by-side. */ |
|
@media (min-width: 768px) { |
|
body.layout-sidebar-first main > .content-rail { |
|
grid-template-columns: var(--sidebar-width) minmax(0, 1fr); |
|
grid-template-areas: "first content"; |
|
} |
|
body.layout-sidebar-second main > .content-rail { |
|
grid-template-columns: minmax(0, 1fr) var(--sidebar-width); |
|
grid-template-areas: "content second"; |
|
} |
|
} |
|
|
|
/* Small-desktop+: two-sidebar layout becomes three columns. */ |
|
@media (min-width: 1024px) { |
|
body.layout-two-sidebars main > .content-rail { |
|
grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width); |
|
grid-template-areas: "first content second"; |
|
} |
|
} |
|
|
|
}
|
|
|