/* ========================================================================== 3Dmaatje: site.css, componenten van site v2 (docs/site-v2.md, hoofdstuk 4) -------------------------------------------------------------------------- Vereist tokens.css. Laadvolgorde in elke pagina (core/html.ts doet dit): Voorbeelden van elk onderdeel: docs/stijlgids.html. Alleen fundament schrijft CSS. Mist er iets, vraag het aan fundament. VASTE KLASSENNAMEN (gebruik deze, verzin geen nieuwe voor hetzelfde doel) Opbouw van een pagina (core/html.ts maakt kop, main en voet) body > .skip-link + header.site-header + main#inhoud + footer.site-footer main.site-main publiek: vlakken vol breed. Een losse .sec of .page-head direct in main krijgt zelf de wrap. main.app-main.wrap klant: inhoud op --wrap-max met lucht boven/onder .wrap inhoud op --wrap-max met zijmarge (16 tot 56 px) .wrap-smal tekst en formulieren op --wrap-smal (760 px) .vlak sectie vol breed met ritme boven en onder .vlak-licht | .vlak-zacht | .vlak-dof | .vlak-donker .vlak-kop sectiekop in twee kolommen:
.label + h2

.sec sectie binnen een pagina, lijn erboven .sec-panel | .sec-hout gekleurd vlak (klant en beheer) .sheet .sheet-wide oud: alias van .wrap (niet meer gebruiken) Tekst .display hero-kop (h1) .label mono, hoofdletters, messing-inkt (boven een kop) .sectielabel .label met lijn eronder (boven een tabel) .lead .muted .mono .hout .hint .kruimel Rijen en kolommen .cluster rij met tussenruimte die mag omlopen .knoppen rij knoppen; op de telefoon elk op volle breedte .two .three kolommen, op de telefoon onder elkaar .split twee kolommen 7/5 (tekst + paneel), onder 1024 px onder elkaar .punten raster van punten (

) in twee kolommen .page-head titel + knoppen bovenaan een klant- of beheerpagina Kop en voet .site-header > .wrap > .brand + .site-nav + .header-actions .brand .brand-3d .brand-tag .site-nav