/*
* Vogelklas Karel Schot — de blokstijlen "Kaart" en "Olijfband" op core/group.
*
* Laadt via wp_enqueue_block_style() in functions.php: alleen op pagina's waar
* een groepsblok staat, en altijd in de editor. De stijlen heten `kaart` en
* `olijfband`; WordPress zet daarvoor de klassen `is-style-kaart` en
* `is-style-olijfband` op de groep.
*
* De kleuren, de schaduw en de hoekradius van beide stijlen staan niet hier
* maar als `style_data` bij register_block_style() in functions.php. Dat is
* theme.json-taal, dus WordPress kan er ook een voorbeeldje van tekenen in het
* stijlenmenu van de editor. Wat hier staat is wat style_data niet kan:
* indelingen, hover, kolommen en de uitzonderingen per plek.
*
* DE DRIE PLEKKEN WAAR DEZE STIJLEN NU STAAN — allemaal in templates/
* .vk-kaart een bericht op /actueel/ (templates/home.html)
* .vk-postnav vorige/volgende onder een bericht (templates/single.html)
* .vk-eerder de olijfband met de oudere berichten (templates/home.html)
* De stijlen zelf zijn algemeen: fase 4 hergebruikt `is-style-kaart` en
* `is-style-olijfband` in de patronen. Zet plek-eigen maten daarom altijd op
* een `vk-`-klasse en nooit op `is-style-…` zelf.
*/
/* ---------- Kaart ---------- */
/*
* Een kaart heeft standaard binnenruimte. Uit style.css regel 1097 e.v.
* (.next-post/.prev-post: 30px rondom) en 853 e.v. (.actueel-item).
*
* `overflow: hidden` houdt een foto binnen de afgeronde hoek.
*/
.wp-block-group.is-style-kaart {
padding: var(--wp--preset--spacing--30);
overflow: hidden;
}
/*
* De schaduw wordt zwaarder als de muis erover gaat of als er iets in de kaart
* de focus krijgt. Uit style.css regel 874. `:focus-within` hoort erbij: met de
* toetsenbord moet dezelfde staat te zien zijn als met de muis.
*
* De schaduwpresets staan in theme.json (kaart en kaart-hover).
*/
.wp-block-group.is-style-kaart {
transition: box-shadow 0.4s ease-in-out;
}
.wp-block-group.is-style-kaart:hover,
.wp-block-group.is-style-kaart:focus-within {
box-shadow: var(--wp--preset--shadow--kaart-hover);
}
@media (prefers-reduced-motion: reduce) {
.wp-block-group.is-style-kaart {
transition: none;
}
}
/* ---------- Olijfband ---------- */
/*
* Een volle band in olijf met zand tekst, over de hele breedte. Uit style.css
* regel 1017 (#more-news). De kleuren staan in style_data; hier staat wat de
* band met de tekst erin doet.
*
* Koppen en links binnen de band moeten mee omslaan: theme.json zet koppen op
* inkt en links op olijf, en dat is op een olijf ondergrond onleesbaar. Het
* gewicht van deze selectors (0,2,0 en 0,2,1) ligt boven dat van theme.json,
* dat zijn regels in :where() zet en op 0,1,0 uitkomt.
*/
.wp-block-group.is-style-olijfband :where(h1, h2, h3, h4, h5, h6) {
color: var(--wp--preset--color--zand);
}
.wp-block-group.is-style-olijfband a {
color: var(--wp--preset--color--wit);
border-bottom: 1px solid transparent;
text-decoration: none;
font-weight: 400;
}
.wp-block-group.is-style-olijfband a:hover,
.wp-block-group.is-style-olijfband a:focus {
color: var(--wp--preset--color--wit);
border-bottom-color: currentColor;
text-decoration: none;
}
/*
* De focusrand uit vogelklas.css tekent een zand binnenring en een inkt
* buitenring. Op olijf haalt de zand ring 5,57:1 — ruim boven de 3:1 die WCAG
* voor een focusrand vraagt — dus hier hoeft niets aangepast.
*/
/* ---------- Focus binnen een kaart ---------- */
/*
* EEN FOCUSRAND DIE NIET WEGGEKNIPT WORDT.
*
* Een kaart heeft `overflow: hidden`, want anders steekt een foto die tegen de
* rand aan zit buiten de afgeronde hoek uit. Een foto in een kaart is meestal
* ook een link, en die link vult de kaart tot op de pixel: nagemeten op
* /actueel/ raakt hij alle vier de randen. De focusrand wordt búiten het
* element getekend en zou daar dus volledig door de kaart worden weggeknipt —
* met de toetsenbord door de kaarten lopen zou dan onzichtbaar zijn.
*
* Voor die ene link tekenen we de ring naar binnen: een negatieve
* outline-offset legt de inkt rand net binnen de rand van de foto, en de
* binnenring wordt `inset` zodat ook die binnen blijft. De kleuren en de
* dikte blijven die van de reset in vogelklas.css, dus het contrast is
* hetzelfde.
*
* De titel- en "lees verder"-links in de kaart staan ruim binnen de
* binnenruimte en houden gewoon de normale ring.
*/
.wp-block-group.is-style-kaart > .wp-block-post-featured-image a:focus-visible,
.wp-block-group.is-style-kaart > .wp-block-image a:focus-visible {
outline-offset: -4px;
box-shadow: inset 0 0 0 6px var(--wp--preset--color--zand);
}
/* ---------- .vk-kaart: een bericht op /actueel/ ---------- */
/*
* Een liggende kaart: foto aan de ene kant, tekst aan de andere, en om en om
* gespiegeld. Uit style.css regel 896 e.v. (.actueel-image 250px breed,
* absoluut gepositioneerd; even kaarten met de foto rechts).
*
* Hier is het flexbox in plaats van absolute positionering, zodat de kaart
* meegroeit met de tekst en er geen min-height meer nodig is.
*
* MOBIEL EERST: onder elkaar, foto boven. Het gewicht (0,2,0) ligt boven dat
* van de flex-opmaak van WordPress zelf (.is-layout-flex, 0,1,0), dus deze
* regels winnen op gewicht en niet op laadvolgorde — wat bij
* wp_enqueue_block_style() ook niet vastligt.
*/
.wp-block-group.vk-kaart {
flex-direction: column;
align-items: stretch;
gap: 0;
/* De foto zit tegen de rand aan; de binnenruimte zit op de tekstkolom. */
padding: 0;
}
.vk-kaart .wp-block-post-featured-image {
margin: 0;
flex: 0 0 auto;
}
/*
* !important, en dat is hier eerlijk: het blok core/post-featured-image zet
* zijn hoogte-attribuut als inline stijl op de ![]()
(height:250px;
* object-fit:cover). Inline stijl wint van elke selector, dus dit is de enige
* manier om de mobiele hoogte lager te zetten. Het attribuut blijft staan omdat
* het de editor de juiste maat toont en de desktopmaat vastlegt.
*/
.vk-kaart .wp-block-post-featured-image img {
width: 100%;
height: 150px !important;
object-fit: cover;
}
.vk-kaart .vk-kaart__tekst {
flex: 1 1 auto;
padding: var(--wp--preset--spacing--30);
min-width: 0;
}
/* De titel van een bericht is licht, niet vet. Uit style.css regel 888. */
.vk-kaart .wp-block-post-title {
font-weight: 300;
margin-block-start: 0;
}
.vk-kaart .wp-block-post-title a {
color: var(--wp--preset--color--inkt);
}
.vk-kaart .wp-block-post-date {
color: var(--wp--preset--color--grijs);
}
.vk-kaart .wp-block-post-excerpt {
font-weight: 300;
}
/*
* "Lees verder »" rechts onderin, zoals in het oude ontwerp (style.css regel
* 930, .actueel-more). Bij een gespiegelde kaart blijft dat rechts: de tekst
* staat dan links in de kaart en de link zit dus nog steeds aan de kant van de
* foto. Dat is precies wat het oude thema deed (regel 940).
*/
.vk-kaart .wp-block-post-excerpt__more-text {
margin-block-start: var(--wp--preset--spacing--30);
margin-block-end: 0;
text-align: right;
}
/*
* VANAF 640px: naast elkaar, met de foto om en om links en rechts.
*
* De spiegeling hangt aan de van core/post-template en niet aan de kaart
* zelf: elke kaart zit in zo'n , dus is de kaart altijd het enige kind en
* zou :nth-child op de kaart altijd 1 zijn.
*/
@media screen and (min-width: 640px) {
.wp-block-group.vk-kaart {
flex-direction: row;
}
.wp-block-post-template > li:nth-child(even) .wp-block-group.vk-kaart {
flex-direction: row-reverse;
}
.vk-kaart .wp-block-post-featured-image {
flex: 0 0 250px;
width: 250px;
}
/*
* Op deze breedte vult de foto de hele hoogte van de kaart, met 250px als
* ondergrens — de maat uit het oude ontwerp. Zelfde reden voor !important
* als hierboven.
*/
.vk-kaart .wp-block-post-featured-image img {
height: 100% !important;
min-height: 250px;
}
.vk-kaart .vk-kaart__tekst {
padding: var(--wp--preset--spacing--40);
}
}
/* ---------- .vk-eerder: de olijfband met de oudere berichten ---------- */
/*
* Vanaf 640px in twee kolommen, zoals het oude thema (style.css regel 1056:
* `columns: 2`). Kolommen en geen raster, want de items verschillen in hoogte
* en moeten aaneengesloten doorlopen in plaats van in rijen uit te lijnen.
*
* break-inside houdt titel en datum van één bericht bij elkaar.
*/
.vk-eerder .wp-block-post-template {
margin: 0;
padding: 0;
list-style: none;
}
.vk-eerder .wp-block-post-template > li {
margin-block-end: var(--wp--preset--spacing--20);
break-inside: avoid;
}
/*
* assets/css/blok-query.css zet ruimte bóven elk volgend item in een lus. In
* een kolommenlijst moet die eraf: anders begint het eerste item van de tweede
* kolom lager dan dat van de eerste, en staan de twee kolommen niet meer op
* dezelfde hoogte. De ruimte zit hier onder elk item, en die telt in kolommen
* wel goed op.
*/
.vk-eerder .wp-block-post-template > li + li {
margin-block-start: 0;
}
.vk-eerder .wp-block-post-title {
margin-block: 0;
font-weight: 300;
}
.vk-eerder .wp-block-post-date {
margin-block: 0;
color: var(--wp--preset--color--zand);
}
@media screen and (min-width: 640px) {
.vk-eerder .wp-block-post-template {
columns: 2;
column-gap: var(--wp--preset--spacing--50);
}
}
/* ---------- .vk-postnav: vorige en volgende onder een bericht ---------- */
/*
* Twee kaarten naast elkaar, elk met de titel van het aangrenzende bericht.
* Uit style.css regel 1097 e.v. (.prev-post-wrapper/.next-post-wrapper, elk de
* halve breedte). Mobiel onder elkaar; dat doet flexWrap in het template zelf.
*
* De twee kaarten zijn even breed en even hoog, ook als de ene titel twee
* regels heeft en de andere één.
*/
.vk-postnav > .wp-block-group {
flex: 1 1 220px;
display: flex;
align-items: center;
}
/*
* De pijl vóór de vorige en ná de volgende. In het oude thema was dat een
* Font Awesome-teken in een apart vak met een streep ertussen (style.css regel
* 1135); Font Awesome is uit het thema verdwenen, dus is het nu het gewone
* teken « en ». Het staat in de link zelf en niet in een ::before, zodat het
* meeklikt en met de tekst meeloopt.
*/
.vk-postnav .wp-block-post-navigation-link {
margin: 0;
width: 100%;
}
.vk-postnav .wp-block-post-navigation-link a {
display: block;
color: var(--wp--preset--color--inkt);
font-weight: 400;
}
.vk-postnav .post-navigation-link-next {
text-align: right;
}
/* ==========================================================================
* FASE 4a — de plekken waar de bouwsteen-patronen hun maten vandaan halen
*
* Alles hieronder hangt aan een `vk-`-klasse op de buitenste groep van een
* patroon, nooit aan een `is-style-…`. Dat is de afspraak uit fase 3: een
* blokstijl beschrijft hoe iets eruitziet en is overal herbruikbaar; een
* plek-klasse beschrijft hoe het op díé plek staat.
*
* Waarom het hier in blok-group.css staat en niet in een eigen bestand: elk
* van deze patronen heeft een groepsblok als buitenste laag, dus deze
* stylesheet laadt precies wanneer hij nodig is.
* ========================================================================== */
/* ---------- .vk-polaroid-duo: twee gekantelde foto's ---------- */
/*
* Uit style.css regel 736 e.v. (.vrijwilliger-images en .watwedoen-images).
* Daar stonden de twee foto's absoluut gepositioneerd in een vak van 810 bij
* 650px: allebei 51% breed, de rechter 40px lager, en samen breder dan het vak
* zodat ze elkaar overlapten.
*
* Hier is het flexbox. De overlap is de negatieve marge van −2%: 51 + 51 − 2 =
* 100. De 40px verspringing blijft, want daar hangt het schuine beeld op.
*
* MOBIEL EERST: onder elkaar, 80% breed en gecentreerd. Twee gekantelde foto's
* naast elkaar zijn op 375px allebei onleesbaar klein.
*/
.wp-block-group.vk-polaroid-duo {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: var(--wp--preset--spacing--40);
}
.vk-polaroid-duo > .wp-block-image {
flex: 0 0 80%;
max-width: 80%;
}
@media screen and (min-width: 800px) {
.wp-block-group.vk-polaroid-duo {
flex-wrap: nowrap;
gap: 0;
}
.vk-polaroid-duo > .wp-block-image {
flex: 0 0 51%;
max-width: 51%;
}
.vk-polaroid-duo > .wp-block-image + .wp-block-image {
margin-left: -2%;
margin-top: 40px;
}
}
/* ---------- .vk-fotolijst-duo: de lijst met de foto ernaast ---------- */
/*
* Uit style-large.css regel 114 e.v. (Geschiedenis): de lijst van 568px breed
* links, en er half achter een staande foto van 300px. Omgerekend naar het vak
* van 810px is dat ruwweg 65% en 35%.
*
* De staande foto ligt eronder (z-index 1 via is-style-polaroid-rechts) en
* begint bovenaan, terwijl de lijst 10px lager hangt — dezelfde verspringing
* als in het oude ontwerp.
*
* MOBIEL: alleen de lijst. In het oude thema stond de staande foto onder
* 1000px al op `display: none` (style-small.css regel 423) en dat is hier niet
* anders: naast een lijst van 300px breed past er niets meer.
*/
.wp-block-group.vk-fotolijst-duo {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: 0;
}
.vk-fotolijst-duo > .wp-block-image:first-child {
flex: 0 0 100%;
max-width: 100%;
margin-top: 10px;
}
.vk-fotolijst-duo > .wp-block-image:nth-child(2) {
display: none;
}
@media screen and (min-width: 800px) {
.vk-fotolijst-duo > .wp-block-image:first-child {
flex: 0 0 65%;
max-width: 65%;
}
.vk-fotolijst-duo > .wp-block-image:nth-child(2) {
display: block;
flex: 0 0 35%;
max-width: 35%;
margin-left: -3%;
}
}
/* ---------- .vk-feiten: "Wist u dat…" ---------- */
/*
* Uit style.css regel 546 e.v. (#frontpage-block2): een olijf band met drie
* kolommen, elk met een icoon van 85px, een cijfer in vet cursief en een
* regel tekst eromheen. Alles gecentreerd.
*
* De band zelf is `is-style-olijfband`; wat hier staat is de uitlijning en de
* maat van icoon en cijfer.
*/
.wp-block-group.vk-feiten,
.vk-feiten .wp-block-column {
text-align: center;
}
/*
* Het icoon. In het oude thema was dit een Font Awesome-teken van 85px met
* 30px lucht erboven en eronder; nu is het een SVG uit assets/icons/ als gewone
* afbeelding.
*
* WAAROM EEN LOSSE ZAND-VERSIE VAN HET ICOON
* De SVG's in assets/icons/ zijn getekend met `fill="currentColor"`, wat werkt
* als ze als masker of inline worden gebruikt. Als ![]()
staat zo'n bestand op
* zichzelf en is er geen currentColor: de browser tekent hem zwart. Daarom
* staan er kopieën met de zand-kleur ingebakken — grafiek-zand.svg,
* ambulance-zand.svg, hart-zand.svg — en die gebruikt het patroon. Zichtbaar in
* de editor, geen masker nodig, geen JavaScript.
*/
.vk-feiten .wp-block-image {
margin-block: var(--wp--preset--spacing--30);
display: flex;
justify-content: center;
}
.vk-feiten .wp-block-image img {
width: 85px;
height: 85px;
}
/*
* Het cijfer. theme.json geeft elke h4 cursief en licht; hier moet hij vet
* zijn, zoals in het oude ontwerp (style.css regel 574: font-weight 700).
* De grootte komt uit het blok zelf (preset `xxl`).
*/
.vk-feiten h4 {
margin-block: 0;
font-weight: 700;
}
.vk-feiten p {
margin-block: 0;
}
/* ---------- .vk-partners: het rooster met partnerlogo's ---------- */
/*
* Uit style.css regel 620 e.v. (#frontpage-block3): cellen van 200px hoog met
* het logo verticaal gecentreerd. Het rooster zelf komt uit de rasteropmaak
* van het groepsblok (minimumColumnWidth 180px), dus er staat hier geen enkele
* media query.
*/
.wp-block-group.vk-partners {
align-items: center;
}
.vk-partners > .wp-block-image {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
/* ---------- .vk-beeldknoppen: de rij fototegels ---------- */
/*
* Drie tegels naast elkaar op de voorpagina, onder elkaar op een telefoon —
* dat doet het kolommenblok zelf. Hier staat alleen dat de kolommen even hoog
* moeten zijn, zodat de witte labelbalken op één lijn liggen ook als de ene
* foto smaller is dan de andere.
*/
.wp-block-columns.vk-beeldknoppen {
align-items: stretch;
}
.vk-beeldknoppen > .wp-block-column > .wp-block-image {
height: 100%;
}
/* ---------- .vk-videoband: tekst naast een video ---------- */
/*
* Uit style.css regel 288 e.v. (.page-video-part): een olijf band waarin de
* video de rechterhelft vult en de tekst de linker. De band is
* `is-style-olijfband`; het kolommenblok doet de verdeling.
*
* De verhouding van de video komt van `responsive-embeds` (add_theme_support in
* functions.php), dus hier is niets nodig om hem mee te laten schalen.
*/
.vk-videoband .wp-block-embed {
margin-block: 0;
}
.vk-videoband .wp-block-column:first-child > :first-child {
margin-block-start: 0;
}