/* === SITE TREE === The markup of templates/site-tree.html, styled once for the two places it appears: the menu behind the bars button in the header (a white dropdown, chrome from page/core/layout.css) and the left panel on wiki pages (chrome from wiki/wiki.css). Not a lookalike: the sizes, weights, colours and indents below were measured off the entry page's own Page navigation and copied, level for level. level size weight colour indent .nav-subsection-title 18px 600 #343a40 +12 .nav-section-title (L1) 14px 600 #495057 +20 .nav-item-content a (L2) 14px 400 #212529 +20 .nav-subitems a (L3) 14px 400 #212529 +44 Mapped onto this tree: .tree-section-title <- .nav-subsection-title (About, Resources) .tree-page <- .nav-section-title (LAD, AHw, CAD) .tree-leaves a <- .nav-subitems a (the pages themselves) The step down to the leaves is the entry panel's own: margin-left 16 + padding-left 8 = the 24px that separates L2 from L3 there. See page/components/navigation.css - if that panel moves, move these with it, because they are a copy and not a coincidence. */ /* === THE INDENT LADDER === Measured off the entry panel and reproduced step for step. Text lands at: 16 .nav-header h6 <- .wiki-panel-head (set in wiki/wiki.css) 28 .nav-subsection-title <- .tree-section-title 36 .nav-section-title <- .tree-page 60 .nav-subitems a <- .tree-leaves a Each step is carried by the CONTAINER, not by padding on the text, so a row's hover background starts where its level starts - which is what the entry panel does and why its levels read as levels. Every one of these is scoped with .site-tree because the reset below is `.site-tree ul` - a class AND an element, 0-1-1 - and silently beats a bare class. */ .site-tree ul { list-style: none; margin: 0; padding: 0; } .site-tree { padding-left: 16px; } .site-tree .tree-branch { padding-left: 8px; } /* === ONE BRANCH AT A TIME === A wiki page's panel shows only the branch that page belongs to; the whole tree stays in the menu behind the bars button, which is where you go to cross from one section to another. The page says which branch it wants with `data-tree-scope` and the rest is hidden here - so the information architecture is still the single file templates/site-tree.html, and a new page cannot fall out of step with a second copy of it. A panel with no scope, like the bars menu, shows everything. Strict from .tree-root down, so a nested list can never match; loose above it, because lib:include replaces the placeholder element today but a wrapper added later must not quietly switch the scoping off. */ [data-tree-scope="about"] .tree-root > .tree-section:not(.tree-section--about), [data-tree-scope="resources"] .tree-root > .tree-section:not(.tree-section--resources) { display: none; } /* In a scoped panel the panel's own head already says "About" or "Resources", so the branch heading under it would only repeat it. It goes, and the branch's groups (LAD, The Project, Get the data ...) move up one level: their indent step is the one the heading used to take. The bars menu has no scope and keeps both headings. */ [data-tree-scope] .tree-root > .tree-section > .tree-section-title { display: none; } [data-tree-scope] .site-tree .tree-branch { padding-left: 0; } /* ...and the groups take the heading's own look, the level About had: 18px, italic, the 8px 12px row. Their pages then sit where the groups used to (text at 36px), so the whole branch reads one level higher than in the bars menu. */ [data-tree-scope] .tree-branch > .tree-node { margin-bottom: 6px; } [data-tree-scope] .tree-branch > .tree-node > .tree-page { padding: 8px 12px; font-size: 18px; font-weight: 600; font-style: var(--italic-font-style); color: #343a40; } /* === TOP LEVEL: About, Resources, Contact, Impressum === .nav-subsection-title: the heading over a group, and the largest thing in the panel. */ .tree-section { margin-bottom: 6px; } .tree-section-title { display: block; padding: 8px 12px; border-radius: 3px; font-size: 18px; font-weight: 600; /* Italic, as .nav-subsection-title is - it is the same kind of label. */ font-style: var(--italic-font-style); color: #343a40; transition: background-color 0.2s; } /* A section heading that is also a destination. About and Resources lost their landing pages on 2026-10-06 and are plain spans now; Impressum and Datenschutz still use this. It keeps the heading's size and weight and gains the row behaviour of everything else here. */ a.tree-section-title { text-decoration: none; } a.tree-section-title:hover { background: rgba(0, 123, 255, 0.1); } a.tree-section-title.is-current-page { background: #eef1f3; font-weight: 700; } /* Contact and Impressum have no children, so their label is the whole item: it should read as a destination, not as a heading over nothing. Sized as a leaf, not a heading. */ .tree-section--flat .tree-section-title { padding: 6px 8px; font-size: 14px; font-weight: 400; color: #212529; border-radius: 3px; } /* === SECOND LEVEL: a group of pages === .nav-section-title: the label over a run of entries in the page navigation. */ .tree-page { display: block; padding: 6px 8px 6px 12px; border-radius: 3px; font-size: 14px; font-weight: 600; color: #495057; text-decoration: none; transition: background-color 0.2s; } a.tree-page:hover { background: rgba(0, 123, 255, 0.1); } /* === THIRD LEVEL: the pages themselves === */ /* Scoped with .site-tree on purpose. The reset at the top of this file is `.site-tree ul` - a class AND an element, specificity 0-1-1 - which silently beat a bare `.tree-leaves` at 0-1-0 and zeroed this indent, leaving the tree completely flat. Any rule here that sets margin or padding on a