. Zonder JavaScript klapt de browser ze zelf
* open; het paneel hangt onder de balk in plaats van de inhoud weg te duwen.
*/
.rb-lade > summary {
list-style: none;
}
.rb-lade > summary::-webkit-details-marker {
display: none;
}
.rb-lade > summary::marker {
content: "";
}
/* De focusring naar binnen, anders valt hij half buiten de kop weg. */
.rb-lade > summary:focus-visible {
outline: var(--focus-w) solid var(--focus);
outline-offset: calc(var(--focus-off) * -1);
}
.rb-lade[open] > summary {
color: var(--text);
}
.rb-lade .rb-icoon--dicht {
display: none;
}
.rb-lade[open] .rb-icoon--open {
display: none;
}
.rb-lade[open] .rb-icoon--dicht {
display: block;
}
.rb-lade__paneel {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1;
background: var(--surface);
border-bottom: var(--bw) solid var(--rule);
box-shadow: var(--shadow-overlay);
/* Twee keer: dvh waar het kan, vh als terugval op oudere browsers. */
max-height: calc(100vh - var(--header-h));
max-height: calc(100dvh - var(--header-h));
overflow-y: auto;
overscroll-behavior: contain;
}
.rb-zoeklade__paneel {
padding: var(--s5) var(--gutter);
}
.rb-menu__zoek {
padding: var(--s5) var(--gutter);
border-bottom: var(--bw) solid var(--rule);
}
.rb-themarij {
/*
* De themawissel is het enige dat JavaScript nodig heeft. Zonder het
* script staat er dus geen knop die niets doet (MEMORY.md V11).
*/
display: none;
border-top: var(--bw) solid var(--rule);
padding: var(--s4) var(--gutter);
align-items: center;
justify-content: space-between;
gap: var(--s4);
}
.js .rb-themarij {
display: flex;
}
/*
* De compacte wissel in de kopbalk hoort bij de brede weergave. Onder 960px staat
* de uitgebreide variant in de menulade; twee knoppen tegelijk tonen zou verwarrend
* zijn en kost ruimte in een balk die al krap is.
*/
.rb-themarij--compact {
display: none !important;
border-top: 0;
padding: 0;
}
@media (min-width: 960px) {
/*
* Omgekeerd vanaf 960px: de menulade is daar `display:none`, dus zonder deze
* knop was er helemaal geen manier om handmatig van de systeemvoorkeur af te
* wijken. De systeemvoorkeur werd wél gevolgd — alleen zelf kiezen kon niet.
*/
.js .rb-themarij--compact {
display: flex !important;
}
.rb-themarij--compact .rb-icoonknop {
min-width: var(--tap);
min-height: var(--tap);
}
}
/*
* Maan als het licht is (tik = naar donker), zon als het donker is (tik = naar licht).
* De knop toont dus wat er GEBEURT, niet wat er nu aan staat — dat is de conventie
* waar mensen op rekenen.
*/
.rb-icoon--thema-aan {
display: none;
}
html[data-theme="dark"] .rb-icoon--thema-uit {
display: none;
}
html[data-theme="dark"] .rb-icoon--thema-aan {
display: block;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .rb-icoon--thema-uit {
display: none;
}
html:not([data-theme="light"]) .rb-icoon--thema-aan {
display: block;
}
/* Expliciete keuze voor licht wint terug van de systeemvoorkeur. */
html[data-theme="light"] .rb-icoon--thema-uit {
display: block;
}
html[data-theme="light"] .rb-icoon--thema-aan {
display: none;
}
}
/* ============================================================ 4. navigatie */
.rb-nav__lijst {
list-style: none;
margin: 0;
padding: 0;
}
.rb-nav__lijst--lade {
padding: var(--s3) 0;
}
.rb-nav__lijst--lade a {
min-height: var(--row);
display: flex;
align-items: center;
padding: 0 var(--gutter);
font: var(--t-body);
color: var(--text);
text-decoration: none;
/* Doorzichtige rand, zodat het actieve item de rij niet 2px verschuift. */
border-left: var(--bw-thick) solid transparent;
}
.rb-nav__lijst--lade .current-menu-item > a,
.rb-nav__lijst--lade .current-menu-ancestor > a,
.rb-nav__lijst--lade .current_page_item > a {
border-left-color: var(--accent);
background: var(--surface-2);
}
/*
* Een menu-item met onderliggende items wordt een groepskop (ontwerp 1g).
* De kop blijft een echte link: een dode kop die eruitziet als een link is
* erger dan een kop die ergens heen gaat.
*/
.rb-nav__lijst--lade > .menu-item-has-children > a {
min-height: auto;
padding-top: var(--s4);
padding-bottom: var(--s2);
font: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--muted);
border-left-color: transparent;
}
.rb-nav__lijst--lade .sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
.rb-nav--breed {
display: none;
}
.rb-nav__lijst--voet {
display: flex;
flex-wrap: wrap;
gap: var(--s2) var(--s5);
}
/*
* min-width naast min-height: een tikvlak is 48 bij 48, niet 48 hoog en zo breed als
* het woord toevallig is. "Home" mat 43,6 x 48px zodra het voetmenu gevuld werd — een
* fout die pas bestond toen er een tweede item bij kwam, want tot dan was het menu leeg.
*
* justify-content zodat een kort woord in dat vlak gecentreerd staat en niet links plakt.
*/
.rb-nav__lijst--voet a {
min-height: var(--tap);
min-width: var(--tap);
display: inline-flex;
align-items: center;
justify-content: center;
font: var(--t-body);
text-decoration: none;
}
@media (hover: hover) {
.rb-nav__lijst--lade a:hover {
background: var(--surface-2);
color: var(--accent-hover);
}
.rb-nav__lijst--voet a:hover {
color: var(--accent-hover);
text-decoration: underline;
}
}
/* ======================================================= 5. zoekformulier */
.rb-zoekform__vak {
display: flex;
align-items: center;
gap: var(--s3);
/* --border, niet --rule: een veldrand moet zichtbaar zijn (CONTRACT §2). */
border: var(--bw) solid var(--border);
background: var(--surface-2);
padding-left: var(--s4);
}
.rb-zoekform__icoon {
color: var(--muted);
}
.rb-zoekform__veld {
flex: 1 1 auto;
min-width: 0;
min-height: var(--tap);
border: 0;
background: none;
color: var(--text);
font: var(--t-body);
}
.rb-zoekform__veld:focus {
outline: none;
}
/* De hele omlijsting licht op, niet alleen het invoerveld erbinnen. */
.rb-zoekform__vak:focus-within {
border-color: var(--text);
outline: var(--focus-w) solid var(--focus);
outline-offset: var(--focus-off);
}
.rb-zoekform__knop {
flex: none;
min-height: var(--tap);
padding: 0 var(--s4);
border: 0;
border-left: var(--bw) solid var(--rule);
background: none;
color: var(--accent);
font: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
cursor: pointer;
}
@media (hover: hover) {
.rb-zoekform__knop:hover {
background: var(--callout);
color: var(--accent-hover);
}
}
/* =========================================================== 6. container */
.rb-container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.rb-leeskolom {
max-width: var(--leeskolom);
}
.rb-hoofd {
display: block;
padding-block-end: var(--s10);
}
/* ================================================================ 7. lijst */
.rb-lijst {
background: var(--surface);
margin-block-end: var(--s8);
}
.rb-lijst__label {
margin: 0;
padding: var(--s6) var(--gutter) var(--s3);
color: var(--muted);
}
/*
* p.rb-lijst__label en niet .rb-lijst__label: het element draagt óók .rb-label,
* en die staat verderop in dit bestand. Bij gelijke specificiteit wint de laatste
* regel, dus een enkele klasse hier verloor het stilzwijgend van de 14px van
* .rb-label — gemeten met check-mobiel.py, niet uit de bron afgeleid (MEMORY.md V10:
* tel de klassen). Met de tagnaam erbij is het 0,1,1 tegen 0,1,0.
*
* Waarom het uberhaupt moet: dit is een en telt daarmee als lopende tekst, ook
* voor een schermlezer. CLAUDE.md §3 legt daar de ondergrens op 15px.
*/
p.rb-lijst__label {
font-size: var(--fs-meta);
}
.rb-lijst__item {
margin: 0;
}
/*
* De hele rij is één link. Raster in plaats van flexbox, zodat de datum op
* ≥960px naar een eigen kolom kan verhuizen zonder dat hij twee keer in de
* HTML hoeft te staan.
*/
/*
* Eén kolom als basis, twee kolommen pas vanaf 480px.
*
* Waarom niet meteen twee: de datumkolom stond op `auto` en groeide mee tot zijn
* max-content. Zet de lezer zijn tekst op 200% (WCAG 1.4.4), dan slokt "31 december
* 2025" 262 van de 280 beschikbare pixels op en houdt de metaregel 1,6px over —
* waarna die 104px buiten de pagina valt. Gemeten met check-mobiel.py op 320px.
* `minmax(0, auto)` lost dat niet op; de track krimpt dan wel, maar de inhoud niet.
* Stapelen wel: 0px overloop.
*/
.rb-lijst__rij {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"titel"
"datum"
"meta";
column-gap: var(--s4);
row-gap: var(--s1);
align-items: baseline;
min-height: var(--tap);
padding: var(--s4) var(--gutter);
border-bottom: var(--bw) solid var(--rule);
color: var(--text);
text-decoration: none;
}
.rb-lijst--zoek .rb-lijst__rij {
grid-template-areas:
"titel"
"frag"
"datum"
"meta";
row-gap: var(--s2);
}
/*
* Vanaf 480px is er ruimte om datum en meta naast elkaar te zetten, zoals het
* ontwerp bedoelt. Het breekpunt volgt uit de inhoud: bij 480px past de langste
* Nederlandse datum ("31 december 2025") naast de metaregel zonder te knellen.
*/
@media (min-width: 480px) {
.rb-lijst__rij {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"titel titel"
"datum meta";
}
.rb-lijst--zoek .rb-lijst__rij {
grid-template-areas:
"titel titel"
"frag frag"
"datum meta";
}
}
.rb-lijst__item:last-child .rb-lijst__rij {
border-bottom: 0;
}
.rb-lijst__rij:focus-visible {
outline: var(--focus-w) solid var(--focus);
/* Naar binnen: anders overlapt de ring de rij erboven en eronder. */
outline-offset: calc(var(--focus-off) * -1);
}
.rb-lijst__titel {
grid-area: titel;
margin: 0;
font: var(--t-h2);
font-weight: 700;
letter-spacing: -.01em;
color: var(--accent);
text-wrap: pretty;
}
/*
* Gelezen artikelen herkenbaar houden — op een blog scheelt dat echt iets.
*
* De kleur moet op het LINKELEMENT ZELF staan. Browsers passen :visited om
* privacyredenen nooit toe op afstammelingen; `.rb-lijst__rij:visited .rb-lijst__titel`
* deed daarom aantoonbaar niets, terwijl de code suggereerde van wel.
*
* De titel erft de kleur, dus die moet zijn eigen `color` niet overschrijven in de
* bezochte stand — vandaar `inherit`.
*/
.rb-lijst__rij:visited {
color: var(--visited);
}
.rb-lijst__rij:visited .rb-lijst__titel {
color: inherit;
}
/*
* Het zoekfragment is lopende tekst en hoort dus op de leesregel, niet op de volle
* rijbreedte. Gemeten op de zoekpagina: 688px kolom gaf 111 tekens per regel, ruim
* boven de 75 uit CLAUDE.md §3.
*/
.rb-lijst__fragment {
max-width: var(--measure);
grid-area: frag;
font: var(--t-caption);
color: var(--text);
}
.rb-lijst__datum {
grid-area: datum;
font: var(--t-caption);
color: var(--muted);
}
.rb-lijst__meta {
grid-area: meta;
display: flex;
flex-wrap: wrap;
gap: 0 var(--s4);
font: var(--t-caption);
color: var(--muted);
}
.rb-meta__datum,
.rb-meta__rest {
font: var(--t-meta);
color: var(--muted);
}
.rb-meta__rest {
display: inline-flex;
flex-wrap: wrap;
gap: 0 var(--s4);
}
@media (hover: hover) {
.rb-lijst__rij:hover {
background: var(--surface-2);
}
.rb-lijst__rij:hover .rb-lijst__titel {
color: var(--accent-hover);
text-decoration: underline;
text-underline-offset: 3px;
}
}
/* ========================================================== 8. archiefkop */
.rb-archiefkop {
padding-block: var(--s6) var(--s4);
display: flex;
flex-direction: column;
gap: var(--s2);
}
.rb-kruimels {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2);
font: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--muted);
}
.rb-kruimels a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tap);
/*
* Ook een minimumBREEDTE. De hoogte stond al op 48px, maar "HOME" is in 14px
* kapitalen maar 43,1px breed — gemeten op het rubriekarchief. Een tikvlak moet
* in beide richtingen 48px halen (CLAUDE.md §3).
*
* min-width en geen padding: padding zou een lange kruimel ("Categorie: …")
* onnodig breed maken, terwijl min-width alleen de korte opkrikt.
*/
min-width: var(--tap);
text-decoration: none;
}
.rb-archiefkop__titel {
margin: 0;
font: var(--t-h1);
letter-spacing: var(--tr-display);
text-transform: uppercase;
/* --heading mag pas vanaf 24px; --fs-h1 is 30px, dus dit is toegestaan. */
color: var(--heading);
text-wrap: pretty;
}
.rb-archiefkop__tekst {
font: var(--t-body);
color: var(--muted);
max-width: var(--measure);
}
.rb-archiefkop__aantal {
margin: 0;
font: var(--t-caption);
color: var(--muted);
}
/* ========================================================= 9. zoekpagina */
.rb-zoekpagina {
padding-block: var(--s5) var(--s4);
display: flex;
flex-direction: column;
gap: var(--s4);
}
.rb-zoekkop {
margin: 0;
/* Klein gehouden: dit is een antwoord, geen paginatitel om te lezen. */
font: var(--t-caption);
color: var(--muted);
}
.rb-zoekkop strong {
color: var(--text);
}
.rb-lijst--zoek {
background: none;
border-top: var(--bw) solid var(--rule);
}
/* ==================================================== 10. lege toestanden */
.rb-leeg {
padding-block: var(--s8) var(--s9);
display: flex;
flex-direction: column;
gap: var(--s4);
align-items: flex-start;
}
.rb-leeg__titel {
margin: 0;
font: var(--t-h2);
letter-spacing: var(--tr-display);
/* --fs-h2 is 22px op mobiel: onder de 24px-grens, dus --heading-safe. */
color: var(--heading-safe);
}
.rb-leeg__tekst {
margin: 0;
font: var(--t-body);
max-width: var(--measure);
}
.rb-leeg__zoek,
.rb-leeg__verder {
width: 100%;
max-width: var(--leeskolom);
}
.rb-leeg__verder {
display: flex;
flex-direction: column;
gap: var(--s2);
}
.rb-rubrieken {
list-style: none;
margin: 0;
padding: 0;
}
.rb-rubrieken a,
.rb-leeg__link {
min-height: var(--tap);
display: flex;
align-items: center;
font: var(--t-body);
text-decoration: none;
}
.rb-label {
font: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--muted);
}
/* ================================================================= 11. 404 */
.rb-404 {
padding-block: var(--s10) var(--s9);
display: flex;
flex-direction: column;
gap: var(--s4);
align-items: flex-start;
}
.rb-404__titel {
margin: 0;
font: var(--t-h1);
letter-spacing: var(--tr-display);
text-transform: uppercase;
color: var(--heading);
text-wrap: pretty;
}
.rb-404__tekst {
margin: 0;
font: var(--t-body);
max-width: var(--measure);
}
.rb-404__zoek {
width: 100%;
max-width: var(--leeskolom);
margin-block-start: var(--s2);
}
.rb-404__knop {
margin-block-start: var(--s2);
}
/* ============================================================= 12. pagina */
.rb-pagina {
padding-block: var(--s8) var(--s9);
}
.rb-pagina__kop {
margin-block-end: var(--block);
}
.rb-pagina__titel {
margin: 0;
font: var(--t-h1);
letter-spacing: var(--tr-display);
text-transform: uppercase;
color: var(--heading);
text-wrap: pretty;
}
.rb-paginadelen {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2);
margin-block-start: var(--section);
padding-block-start: var(--s5);
border-top: var(--bw) solid var(--rule);
}
.rb-paginadelen__deel,
.rb-paginadelen a {
min-width: var(--tap);
min-height: var(--tap);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--s3);
font: var(--t-body);
text-decoration: none;
}
/* ========================================================= 13. paginering */
.rb-paginering {
margin-block: var(--s6) var(--s8);
}
/*
* Afbreken, niet horizontaal schuiven. Op 320px passen zeven doelen van 48px
* met 8px ertussen niet naast elkaar, en de body mag nergens overlopen
* (CONTRACT §5.6).
*/
.rb-paginering .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--s2);
}
.rb-paginering .page-numbers {
min-width: var(--tap);
min-height: var(--tap);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--s3);
border: var(--bw) solid var(--border);
color: var(--text);
font: var(--t-body);
text-decoration: none;
}
.rb-paginering .current {
background: var(--text);
border-color: var(--text);
color: var(--bg);
}
.rb-paginering .dots {
border-color: transparent;
color: var(--muted);
}
@media (hover: hover) {
.rb-paginering a.page-numbers:hover {
border-color: var(--accent);
color: var(--accent-hover);
}
}
/* ============================================================= 14. knoppen */
.rb-knop {
min-height: var(--tap);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--s6);
background: var(--knop-vlak);
color: var(--knop-tekst);
border: 0;
font: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.rb-knop--secundair {
background: none;
color: var(--text);
border: var(--bw) solid var(--border);
}
@media (hover: hover) {
.rb-knop:hover {
/* Eigen hover-token: in donkere modus moet de knop LICHTER worden, in de
lichte modus juist donkerder. --accent-hover doet altijd hetzelfde en
werkte daardoor maar aan één kant. */
background: var(--knop-vlak-hover);
}
.rb-knop--secundair:hover {
background: var(--callout);
border-color: var(--text);
}
}
/* ================================================================ 15. voet */
.rb-voet {
background: var(--bg);
border-top: var(--bw) solid var(--rule);
}
.rb-voet__inhoud {
padding-block: var(--s8);
display: flex;
flex-direction: column;
gap: var(--s5);
}
.rb-voet__regel {
margin: 0;
font: var(--t-caption);
color: var(--muted);
}
/* ========================================================== 16. uppercase */
/*
* CONTRACT §5.14. text-transform en letter-spacing breken de letterverbindingen
* van het Arabisch: كتاب wordt dan een rij losse tekens. Neutraliseren dus.
*/
.rb-merk__naam:lang(ar),
.rb-label:lang(ar),
.rb-knop:lang(ar),
.rb-skiplink:lang(ar),
.rb-kruimels:lang(ar),
.rb-archiefkop__titel:lang(ar),
.rb-404__titel:lang(ar),
.rb-pagina__titel:lang(ar),
.rb-leeg__titel:lang(ar),
.rb-zoekform__knop:lang(ar),
.rb-lijst__datum:lang(ar),
.rb-nav__lijst--lade > .menu-item-has-children > a:lang(ar) {
text-transform: none;
letter-spacing: normal;
}
/* ========================================================== breekpunt 480 */
@media (min-width: 480px) {
/* Vanaf hier is er ruimte voor wat lucht om het lijstvel heen. */
.rb-lijst__rij {
padding-block: var(--s5);
}
.rb-leeg,
.rb-404 {
padding-block-start: var(--s9);
}
}
/* ========================================================== breekpunt 640 */
@media (min-width: 640px) {
/*
* De leeskolom raakt zijn maximum. Het lijstvel krijgt vanaf hier een
* eigen marge; op mobiel liep het bewust van rand tot rand, want daar is
* een ingesprongen vel verspilde breedte.
*/
.rb-lijst {
width: calc(100% - var(--gutter) * 2);
max-width: var(--leeskolom);
margin-inline: auto;
}
.rb-lade__paneel {
/* Het paneel hoeft de hele balk niet meer te vullen. */
left: auto;
width: min(420px, 100vw - var(--gutter) * 2);
}
.rb-voet__inhoud {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
/* ========================================================== breekpunt 960 */
@media (min-width: 960px) {
/*
* De navigatie past horizontaal in de kop. De hamburgerlade verdwijnt —
* hij staat twee keer in de HTML, maar altijd precies één ervan in beeld.
*/
.rb-nav--breed {
display: block;
margin-inline-start: auto;
}
.rb-menu {
display: none;
}
.rb-nav__lijst--breed {
display: flex;
align-items: center;
gap: var(--s2);
}
/*
* De
zelf ook flex maken.
*
* Zonder dit is de een gewoon blok met daarin een inline-flex , en dan
* bepaalt de REGELBOX de hoogte en de plek van die link — inclusief de ruimte
* onder de basislijn. Het gevolg was zichtbaar: "Home" stond op top=8 en
* "Artikelen" op top=12, terwijl beide 48px hoog waren en de lijst
* align-items:center had. Gemeten, niet uit de code afgeleid.
*
* Als de zelf een flexcontainer is, valt de regelbox weg en staat de link
* exact in het midden.
*/
.rb-nav__lijst--breed > li {
display: flex;
align-items: center;
}
.rb-nav__lijst--breed a {
min-height: var(--tap);
display: inline-flex;
align-items: center;
padding: 0 var(--s3);
font: var(--t-body);
color: var(--muted);
text-decoration: none;
}
.rb-nav__lijst--breed .current-menu-item > a,
.rb-nav__lijst--breed .current-menu-ancestor > a,
.rb-nav__lijst--breed .current_page_item > a {
color: var(--text);
box-shadow: inset 0 -2px 0 var(--accent);
}
/* Ondermenu's op deze breedte niet uitklappen: dat vraagt om JavaScript. */
.rb-nav__lijst--breed .sub-menu {
display: none;
}
.rb-header__balk {
padding-inline: var(--s7);
}
/*
* De datum krijgt een eigen kolom van 150px (ontwerp 2a). De HTML
* verandert niet mee — alleen de cel waar hij in staat.
*/
.rb-lijst__rij {
grid-template-columns: 150px minmax(0, 1fr);
grid-template-areas:
"datum titel"
". meta";
column-gap: var(--s6);
padding: var(--s6) var(--gutter);
}
.rb-lijst--zoek .rb-lijst__rij {
grid-template-areas:
"datum titel"
". frag"
". meta";
}
.rb-lijst__datum {
font: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
}
.rb-archiefkop {
padding-block-start: var(--s9);
}
}
/* Los blok: geneste @media werkt wel, maar leest slechter en breekt sneller. */
@media (min-width: 960px) and (hover: hover) {
.rb-nav__lijst--breed a:hover {
color: var(--accent-hover);
}
}
/* ========================================================= breekpunt 1200 */
@media (min-width: 1200px) {
/*
* De container is uitgegroeid tot --container. Verder niets: breder maken
* kost regellengte en dus leesbaarheid.
*/
.rb-lijst {
width: 100%;
}
}
/* ================================================== liggende telefoon */
/*
* Op een liggend toestel is het scherm nog geen 400px hoog. Een vaste kop van
* 56px kost daar ~15% van alles wat je kunt lezen; die laten we dan los.
* position:relative blijft nodig, want de laden hangen eraan.
*/
@media (max-height: 480px) {
.rb-header {
position: relative;
top: auto;
}
}
/* ====================================================== 17. homepage: intro + kaarten */
/*
* De voordeur. Volgt de bronsite die de opdrachtgever als voorbeeld gaf: naam groot
* en gecentreerd, daaronder per artikel een eigen vel.
*
* Bewust NIET overgenomen van die bron: het ronde logo met kalligrafie (dat bestaat
* hier niet en wordt niet verzonnen) en de tweekolomsvoet met een "over"-tekst
* (CLAUDE.md §0.7 — er is geen tekst over de auteur bevestigd).
*/
.rb-intro {
padding: var(--s8) var(--gutter) var(--s6);
text-align: center;
}
.rb-intro__naam {
margin: 0;
font: var(--t-h1);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--accent);
text-wrap: balance;
}
.rb-intro__onder {
margin: var(--s3) 0 0;
font: var(--t-lead);
color: var(--muted);
max-width: var(--measure);
margin-inline: auto;
text-wrap: pretty;
}
/*
* De dunne lijn onder de naam. Een leeg element en geen border op .rb-intro: hij is
* korter dan de kolom en staat gecentreerd, precies zoals in de bron.
*/
.rb-intro__lijn {
height: var(--bw);
background: var(--rule);
max-width: 22rem;
margin: var(--s6) auto 0;
}
.rb-kaarten {
display: flex;
flex-direction: column;
gap: var(--s6);
padding-inline: var(--gutter);
max-width: calc(var(--leeskolom) + var(--gutter) * 2);
margin-inline: auto;
}
.rb-kaart {
background: var(--surface);
padding: var(--s7) var(--gutter) var(--s8);
text-align: center;
}
.rb-kaart__meta {
margin: 0 0 var(--s3);
font: var(--t-meta);
color: var(--muted);
}
.rb-kaart__scheiding {
padding-inline: var(--s2);
}
.rb-kaart__titel {
margin: 0;
font: var(--t-h2);
letter-spacing: var(--tr-display);
text-transform: uppercase;
color: var(--heading);
text-wrap: balance;
}
.rb-kaart__titel a {
color: inherit;
text-decoration: none;
/* Tikvlak: de link is de enige bediening op de kaart, dus die moet raak te tikken zijn. */
display: inline-block;
min-height: var(--tap);
padding-block: var(--s2);
/*
* anywhere en niet break-word, en dat verschil is hier de hele reden.
*
* Een inline-block is zo breed als zijn eigen inhoud. `break-word` breekt wél een
* te lang woord af, maar telt daarbij NIET mee in de intrinsieke breedte — het
* element blijft dus zo breed als het langste woord. `anywhere` doet dat wel.
*
* Gemeten op 320px bij 200% tekstvergroting: de link werd 282px in een kolom van
* 280px en duwde de pagina 2px uit beeld. Met `anywhere` is dat 0px.
* max-width als tweede vangnet.
*/
max-width: 100%;
overflow-wrap: anywhere;
}
.rb-kaart__lijn {
height: var(--bw);
background: var(--rule);
max-width: 16rem;
margin: var(--s5) auto;
}
/*
* De samenvatting leest als lopende tekst en staat daarom links uitgelijnd, ook al is
* de rest van de kaart gecentreerd: gecentreerde lopende tekst boven twee regels leest
* meetbaar trager, omdat het oog elke regel opnieuw het begin moet zoeken.
*/
.rb-kaart__samenvatting {
margin: 0;
font: var(--t-body);
color: var(--text);
text-align: left;
/*
* Iets ruimer dan de leeskolom van een artikel (--measure, 53ch). Gemeten kwam de
* samenvatting daarmee op 58 tekens per regel uit, net onder de 60 uit CLAUDE.md §3
* — de tekst hier heeft bredere letters dan gemiddelde lopende tekst, en de
* ch-eenheid houdt daar geen rekening mee. Met 58ch is het 63.
*/
max-width: min(58ch, 100%);
margin-inline: auto;
text-wrap: pretty;
}
/*
* Initiaal en kapitaaltjes, net als in de bron. Via ::first-letter en ::first-line,
* dus zonder extra markup in de tekst.
*
* Onder 480px staat de initiaal uit: op een kolom van 280px kost hij ~55px, en dan
* houden de eerste regels te weinig tekens over om prettig te lezen. Zelfde afweging
* als bij het artikel.
*/
@media (min-width: 480px) {
.rb-kaart__samenvatting::first-letter {
float: left;
font-family: var(--font-display);
font-size: 3rem;
line-height: .86;
font-weight: 300;
color: var(--heading);
margin: var(--s1) var(--s3) 0 0;
}
.rb-kaart__samenvatting::first-line {
font-variant-caps: small-caps;
letter-spacing: .04em;
}
}
/* Arabisch kent geen kapitaaltjes en geen initiaal; die zouden het schrift breken. */
.rb-kaart__samenvatting:lang(ar)::first-letter,
.rb-kaart__samenvatting:lang(ar)::first-line {
float: none;
font-size: inherit;
font-variant-caps: normal;
letter-spacing: normal;
}
@media (hover: hover) {
.rb-kaart__titel a:hover {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 4px;
}
}
@media (min-width: 640px) {
.rb-intro {
padding-top: var(--s10);
}
.rb-kaart {
padding: var(--s8) var(--s9) var(--s9);
}
}
/* ============================================================ 18. volgorde */
/*
* De sorteerkeuze boven de lijst. Bewust twee woorden en een scheidingsstreepje —
* niet meer. Het is een hulpmiddel, geen bedieningspaneel: het mag het eerste
* artikel niet onder de vouw duwen.
*/
.rb-volgorde {
max-width: calc(var(--leeskolom) + var(--gutter) * 2);
margin: 0 auto;
padding: 0 var(--gutter);
}
.rb-volgorde__lijst {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
/* 8px tussenruimte tussen tikvlakken is de ondergrens (CLAUDE.md §3). */
gap: 0 var(--s2);
font: var(--t-meta);
color: var(--muted);
}
/*
* Het scheidingsstreepje komt uit CSS en niet uit de HTML: het is decoratie, en een
* schermlezer hoeft geen "streepje" voor te lezen tussen twee keuzes.
*/
.rb-volgorde__item + .rb-volgorde__item::before {
content: "·";
margin-inline-end: var(--s2);
color: var(--rule);
}
.rb-volgorde__item {
display: flex;
align-items: center;
}
.rb-volgorde__keuze {
display: inline-flex;
align-items: center;
min-height: var(--tap);
color: var(--muted);
text-decoration: none;
}
/*
* De actieve keuze is donkerder én onderstreept. Alleen kleurverschil zou hier de
* enige aanduiding zijn, en dat mag niet (CLAUDE.md §3 / WCAG 1.4.1).
*/
.rb-volgorde__keuze--actief {
color: var(--text);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
text-decoration-color: var(--accent);
}
@media (hover: hover) {
a.rb-volgorde__keuze:hover {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 4px;
}
}