`, dus de kop van een
nieuwsbericht viel onder "link in lopende tekst" en kreeg een streep. Die
kop staat in een eigen kaart met een datum erboven — dat is geen lopende
tekst, en de regel `.hoi-news .wp-block-post-title a { text-decoration:
none }` verloor het omdat de `:not()`-reeks hierboven zwaarder weegt. De
samenvatting eronder is wél een ``, dus een link daarin blijft
onderstreept. */
main :where(p, li:not(.wp-block-post), dd, figcaption) a:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
main :where(p, li:not(.wp-block-post), dd, figcaption) a:not(.wp-element-button):not(.wp-block-social-link-anchor):hover {
text-decoration-color: currentColor;
}
main .wp-block-social-links .wp-social-link a,
main .wp-block-social-links .wp-social-link a:hover,
main .wp-block-social-links .wp-social-link a:focus,
main .wp-block-social-links .wp-social-link a:active {
text-decoration: none;
}
/* --- Openingstijden als nette lijst -------------------------------------
Dag en tijd zijn een naam-waardepaar, dus een
: dat is wat het is, en
een schermlezer leest het als paren voor. Twee kolommen in een grid, zodat
alle tijden onder elkaar beginnen; met
-regels lukt dat niet. De kolom
is precies zo breed als de langste dagnaam (`auto`), dus er ontstaat geen
gat bij een kortere taal. */
.hoi-openingstijden {
display: grid;
grid-template-columns: auto auto;
justify-content: start;
column-gap: 1.5rem;
row-gap: .35rem;
margin: 0;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--contrast-2);
}
.hoi-openingstijden dt {
grid-column: 1;
/* Geen vet: de kop "Openingstijden" staat er al boven, en twee vette
niveaus naast elkaar gaan met elkaar concurreren. Het raster doet het
ordenende werk. */
color: var(--wp--preset--color--contrast);
}
.hoi-openingstijden dd {
grid-column: 2;
margin: 0;
/* Cijfers met vaste breedte, dan staan de dubbele punten recht onder elkaar. */
font-variant-numeric: tabular-nums;
}
/* --- Sociale iconen: merkkleur bij hover --------------------------------
Bij hover en toetsenbordfocus krijgt het icoon de kleur van het platform.
Twee dingen maken dit lastiger dan het lijkt. De kleur van het icoon staat
als inline stijl op het `li` (dat doet de blokinstelling "Icoonkleur"), en
core zet op het anker zelf `color: currentcolor` met een selector van vijf
klassen — óók voor `:hover`. Een gewone regel op `a:hover` verliest daarvan
en dan gebeurt er niets. Daarom staat de klasse van het anker hieronder
twee keer: dat tilt het gewicht naar zes klassen, net boven dat van core,
zonder afhankelijk te zijn van de stijlvariant (logos-only). De svg volgt
automatisch, want die erft `fill: currentcolor`.
Op lichte vlakken kan de echte merkkleur; op donkere niet. Daar haalt
LinkedIn-blauw (#0a66c2) maar 1,3:1 tegen het grijs van de donkere modus en
2,5:1 op het footer-marine — dan wordt het icoon bij hover juist slechter
zichtbaar. Voor donkere vlakken staat er een lichtere variant die nog steeds
onmiskenbaar het merk is en overal boven 3:1 blijft (WCAG 1.4.11).
Doorgerekend: LinkedIn #66b3f8 = 3,3:1 op #545557 en 6,4:1 op #022d41;
YouTube #ff8080 = 3,1:1 en 6,0:1.
De donkere-modus-varianten staan in donker.css (gegenereerd). */
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor {
transition: color var(--hoi-transition);
}
main .wp-block-social-links .wp-block-social-link.wp-social-link-linkedin .wp-block-social-link-anchor.wp-block-social-link-anchor:hover,
main .wp-block-social-links .wp-block-social-link.wp-social-link-linkedin .wp-block-social-link-anchor.wp-block-social-link-anchor:focus-visible {
color: #0a66c2;
}
main .wp-block-social-links .wp-block-social-link.wp-social-link-youtube .wp-block-social-link-anchor.wp-block-social-link-anchor:hover,
main .wp-block-social-links .wp-block-social-link.wp-social-link-youtube .wp-block-social-link-anchor.wp-block-social-link-anchor:focus-visible {
color: #ff0000;
}
.hoi-footer .wp-block-social-links .wp-block-social-link.wp-social-link-linkedin .wp-block-social-link-anchor.wp-block-social-link-anchor:hover,
.hoi-footer .wp-block-social-links .wp-block-social-link.wp-social-link-linkedin .wp-block-social-link-anchor.wp-block-social-link-anchor:focus-visible {
color: #66b3f8;
}
.hoi-footer .wp-block-social-links .wp-block-social-link.wp-social-link-youtube .wp-block-social-link-anchor.wp-block-social-link-anchor:hover,
.hoi-footer .wp-block-social-links .wp-block-social-link.wp-social-link-youtube .wp-block-social-link-anchor.wp-block-social-link-anchor:focus-visible {
color: #ff8080;
}
/* Footer: linkkolommen zijn lijsten van losse links, geen doorlopende tekst.
Daar zijn bolletjes en onderstrepingen alleen ruis; hover blijft duidelijk. */
.hoi-footer ul.wp-block-list { list-style: none; margin: 0; padding: 0; }
/* --- Footer: de contactkolom als één blok --------------------------------
Alles in de footerkolommen erfde de blokruimte van 1,75 rem (28 px). Tussen
twee alinea's is dat ongeveer een hele lege regel, en de kop "Contact" stond
daardoor 28 px van zijn adres terwijl "Over Hoitsema" direct op zijn lijst
staat (die lijst heeft `margin: 0` uit de regel hierboven). Die twee kolommen
liepen dus niet in hetzelfde ritme en de kop zweefde los.
Hier komt de kop op zijn tekst te staan, adres en contactgegevens vormen één
groep, en alleen de sociale iconen houden lucht — dat is een ander soort
element. */
.hoi-footer .wp-block-column > :is(h2, h3) + * {
margin-top: .35rem;
}
.hoi-footer .wp-block-column > p + p {
margin-top: .6rem;
}
.hoi-footer .wp-block-column > .wp-block-social-links {
margin-top: 1.5rem;
}
.hoi-footer :where(p, li) a { text-decoration: none; }
.hoi-footer :where(p, li) a:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
}
/* In de donkere footer moet het "Since 1653"-regeltje juist lichter zijn. */
.hoi-footer .hoi-logo__since { color: var(--wp--preset--color--accent); }
/* --- Afronding: alle afbeeldingen, velden en knoppen ---------------------
De knopradius komt uit theme.json; hier de rest, zodat beeld en formulier
hetzelfde ritme volgen. */
:where(.wp-block-image, .wp-block-post-featured-image, figure) :where(img) {
border-radius: var(--hoi-radius);
}
.wp-block-image :where(figcaption) { border-radius: 0; }
/* Zoekveld en -knop meelaten lopen met de knoppen. */
.wp-block-search__input {
border-radius: var(--hoi-radius);
border: 1px solid var(--wp--preset--color--border);
padding: .7rem .9rem;
}
.wp-block-search .wp-block-search__button { border-radius: var(--hoi-radius); }
/* Kaarten en de donkere/lichte blokken houden dezelfde radius. */
.wp-block-group.is-style-card,
.wp-block-group.is-style-card-hover { border-radius: var(--hoi-radius); }
/* --- Koppen niet middenin een woord afbreken ----------------------------
WordPress zet word-break: break-word, waardoor lange Nederlandse woorden
als "uitgangspunt" midden doorgesneden worden. Alleen als een woord
werkelijk niet past mag het nog wijken. */
:where(h1, h2, h3, h4, h5, h6, .hoi-logo__word) {
word-break: normal;
overflow-wrap: break-word;
}
/* --- Zijmarge van de volle-breedte secties ------------------------------
WordPress' root-padding-aware alignments leveren hier maar ~11 px, wat op
een telefoon te krap is. Daarom expliciet: 20 px op mobiel, 32 px vanaf
tablet. De inhoud zelf blijft begrensd op 1320 px. */
section.wp-block-group.alignfull,
.wp-block-group.alignfull.has-global-padding,
.hoi-header,
.hoi-footer {
padding-left: clamp(1.25rem, 5vw, 2rem);
padding-right: clamp(1.25rem, 5vw, 2rem);
}