/* =========================================================
boeken.css — de besprekingen op dick.wursten.be/boeken
Deze stylesheet vervangt het OnePress-thema. Waar een pagina
nu zeven stylesheets laadt (bootstrap, Font Awesome, animate,
lightgallery, cv.css, het thema zelf en de shims), volstaat
voortaan deze ene regel in de :
/ is dat ../boeken.css; vanuit de
indexpagina boeken/ is het boeken.css. De @import hieronder
wordt gerekend vanaf DIT bestand en niet vanaf de pagina, dus
hoe diep een pagina staat maakt verder niet uit.
TWEE SOORTEN PAGINA'S, ÉÉN WOORDENSCHAT
De bestaande besprekingen dragen de klassennamen van
WordPress: .site-header, .page-header, .entry-content. Die
staan er nu eenmaal, in elke pagina, en ze zijn niet verkeerd
gekozen. Daarom houdt deze stylesheet die namen aan en
gebruiken nieuwe pagina's ze ook. Gevolg: een nieuwe pagina en
een oude zijn hetzelfde bouwsel.
Dit is dan ook de enige map waar de klassennamen Engels zijn.
GEEN ZIJBALK, GEEN BOEKENLIJST IN DE PAGINA (sep 2026)
De lijst van alle besprekingen staat op één plek: inhoud.html.
Een bespreking linkt daarheen vanuit de kop. Zo hoeft er bij
een nieuw boek maar één bestand bij te worden gewerkt, in
plaats van elke pagina.
DE OPBOUW VAN EEN PAGINA
Let op: de nieuwe krijgt GEEN id="site-navigation".
Dat id is van het oude WordPress-menu en wordt hieronder
verborgen.
========================================================= */
@import url("../styles.css");
/* =========================================================
De lettergrootte
Het thema zette de tekst op 18px met !important. De --fs-base
van de huisstijl komt op een gewoon scherm uit op ongeveer
17,9px, dus daar verandert niets merkbaars aan. Wat wél
verandert is de letter zelf: Sitka Text of Cambria wordt
Georgia. Beide zijn schreefletters van dezelfde soort; het
verschil is te zien, maar niet te voelen bij het lezen.
========================================================= */
/* =========================================================
De sitekop
.sitenaam uit styles.css doet dit al; .site-title is de naam
die de bestaande pagina's ervoor gebruiken. Vandaar dat de
twee hier aan elkaar geknoopt worden.
========================================================= */
.site-header .container { padding-bottom: 0; }
/* De uit styles.css heeft een scheidslijn onder zich en
ruimte eronder. Vlak boven de grijze band zou dat twee lijnen
kort onder elkaar geven en een gat van bijna vier regels. De
bovenrand van de band doet het scheiden hier. */
.site-header { margin-bottom: 0; }
.site-header nav {
margin-bottom: 1.2rem;
padding-bottom: 0;
border-bottom: none;
}
.site-title {
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
margin: 0;
line-height: 1.3;
}
.site-title a { color: inherit; text-decoration: none; }
.site-description {
font-size: var(--fs-small);
color: var(--color-muted);
margin: 0.2rem 0 0;
}
/* OVERGANGSREGEL. Pagina's die nog niet zijn omgezet, hebben in
de kop het oude WordPress-menu met de volledige boekenlijst.
Bootstrap verstopte dat achter een menuknop; zonder bootstrap
zou het als een lijst van honderd titels boven de bespreking
uitkomen. Zodra het menu overal door de korte is
vervangen, mag deze regel weg. */
#site-navigation,
#nav-toggle,
.screen-reader-text,
.btt { display: none; }
/* =========================================================
De titelband
De grijze balk over de volle breedte met de titel in
kapitalen. Dat is het gezicht van deze map en het enige wat
/boeken visueel onderscheidt van de rest van de site.
#f8f9f9 met een lijntje #e9e9e9 erboven en eronder waren de
kleuren van het thema. Ze zijn hier gelaten zoals ze waren;
de --color-rule van de huisstijl (#d8d2c8) is warmer en zou
het grijs van de band naar geel trekken.
========================================================= */
.page-header {
background: #f8f9f9;
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
padding: 1.6rem 0;
margin-bottom: 2rem;
}
.page-header .container {
padding-top: 0;
padding-bottom: 0;
}
.page-header .entry-title {
font-family: var(--font-ui);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-accent);
max-width: none;
margin: 0;
}
/* De boektitel binnen de kop staat cursief. In kapitalen is dat
nauwelijks te zien; een spoor extra spatiëring maakt het weer
leesbaar. */
.page-header .entry-title i,
.page-header .entry-title em { letter-spacing: 0.07em; }
/* Een ondertitel mag mee in de band, onder de titel. De maat van
.ondertitel uit styles.css (h3-grootte, cursief) is bedoeld
voor een tweede regel bóven de tekst; in de band zou hij de
titel overstemmen. Vandaar kleiner en rechtop. */
.page-header .ondertitel {
font-family: var(--font-ui);
font-style: normal;
font-size: var(--fs-small);
color: var(--color-muted);
max-width: none;
margin: 0.45rem 0 0;
}
/* =========================================================
De bespreking zelf
Zonder zijbalk is de kolom 60rem breed, en dat is te breed
voor doorlopende tekst. Daarom houdt elk blok in de
bespreking zich aan de leesmaat. De omslag hoort daar ook bij:
afbeeldingen staan standaard binnen de leesmaat, niet breed.
De klasse .right-sidebar die oude pagina's nog op hun
container hebben, doet hier niets meer; ze mag bij een
opruimronde uit de HTML.
========================================================= */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > figure,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 { max-width: var(--max-width); }
/* De omslag. In het bestaande bestand staat die als
, links, op ware grootte. */
.entry-content figure { margin: 0 0 1.6rem; }
.entry-content figure img { max-width: 100%; height: auto; }
.entry-content figcaption {
font-family: var(--font-ui);
font-size: var(--fs-small);
color: var(--color-muted);
margin-top: 0.4rem;
}
/* =========================================================
De voettekst
========================================================= */
.site-footer {
border-top: 1px solid var(--color-rule);
margin-top: 3rem;
padding: 1.2rem 0 3rem;
font-family: var(--font-ui);
font-size: var(--fs-small);
color: var(--color-muted);
}
.site-footer .container { padding-top: 0; padding-bottom: 0; }
/* =========================================================
Afdrukken
========================================================= */
@media print {
.page-header { background: none; }
nav { display: none; }
}