met een link erin. Er is een echte linktekst (.lk-dienst__meer), dus het
klikvlak heeft ook voor een schermlezer een naam. */
.lk-dienst {
display: flex;
flex-direction: column;
padding: 2rem 1.75rem 1.75rem;
background-color: var(--lk-bg);
color: inherit;
text-decoration: none;
transition: background-color 0.25s;
}
.lk-dienst:hover {
background-color: var(--lk-surface);
}
/* Naar binnen (-2px), want een outline buiten de kaart valt in de 1px gap weg
tegen de rand van de buurkaart. */
.lk-dienst:focus-visible {
outline: 2px solid var(--lk-link);
outline-offset: -2px;
}
.lk-dienst__titel {
margin: 0 0 0.75rem;
font-size: 1.125rem;
}
.lk-dienst__tekst {
margin: 0;
line-height: 1.6;
color: var(--lk-muted);
}
/* Ziet eruit als een link maar is het niet: de hele kaart is de link. Het
pijltje zit in ::after en niet in de tekst, zodat een schermlezer geen los
teken voorleest. margin-block-start: auto duwt hem naar de onderkant, zodat
drie kaarten van ongelijke lengte hun pijltje toch op een lijn hebben. */
.lk-dienst__meer {
margin-block-start: auto;
padding-block-start: 1.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--lk-link);
}
.lk-dienst__meer::after {
content: " \2192";
}
/* --------------------------------------------------------------------------
Stappen (lampenkappen/stappen)
Vier stappen op een rij, elk met een haarlijn erboven en een genummerd
label. Anders dan de diensten staan deze los van elkaar: geen aaneengesloten
raster maar vier losse kolommen met de gewone gutter ertussen.
Het nummer staat in systeem-mono. Cijfers in Petrona zijn hier te zacht - een
stapnummer is een label, geen kop.
-------------------------------------------------------------------------- */
.lk-stappen {
display: grid;
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--50);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 30rem) {
.lk-stappen {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.lk-stappen {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.lk-stap {
padding-block-start: 1.125rem;
border-block-start: 1px solid var(--lk-border);
}
.lk-stap__nummer {
display: block;
margin-block-end: 0.625rem;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 1rem;
color: var(--lk-link);
}
.lk-stap__titel {
margin: 0 0 0.5rem;
font-size: 1.125rem;
font-weight: 500;
}
.lk-stap__tekst {
margin: 0;
color: var(--lk-muted);
}
/* --------------------------------------------------------------------------
Portfolio
Het raster zelf komt uit core: post-template staat in de sjablonen op een
grid-layout met drie kolommen, en de gutter is de blockGap van 24px. Bij een
container van 1440px is een derde precies 464px - vier rasterkolommen plus de
drie gutters ertussen - dus het valt samen met .lk-grid zonder dat hier iets
herhaald hoeft te worden.
Wat wel hier moet: de titel onder het beeld. Core zet daar dezelfde blockGap
van 24px tussen als tussen twee losse blokken, en dan hangt het bijschrift los
van zijn afbeelding in plaats van erbij.
-------------------------------------------------------------------------- */
.lk-portfolio .wp-block-post-title {
margin-block-start: 0.75rem;
line-height: 1.35;
}
.lk-portfolio .wp-block-post-title a {
color: var(--lk-text);
text-decoration: none;
}
.lk-portfolio .wp-block-post-title a:hover {
color: var(--lk-link);
text-decoration: underline;
}
.lk-portfolio .wp-block-post-featured-image img {
display: block;
inline-size: 100%;
}
/* Core geeft de uitgelichte afbeelding een ondermarge, bedoeld als ruimte naar
de titel eronder. Die titel staat er niet meer, en de marge maakte de afstand
tussen de rijen 42px terwijl die tussen de kolommen 24px is. Nu is de ruimte
rondom elke foto overal even groot: de gutter, en niets erbovenop. */
.lk-portfolio .wp-block-post-featured-image {
margin-block-end: 0;
}
/* De soort onder de titel op een projectpagina: een label, geen kop. */
.wp-block-post-terms {
display: block;
margin-block-end: var(--wp--preset--spacing--50);
color: var(--lk-muted);
}
/* --------------------------------------------------------------------------
Het raster: twaalf kolommen met 24px ertussen.
De 24px staat niet hier maar in theme.json, als spacing-preset 50 en als
blockGap. Daar is het de enige bron: de editor biedt dezelfde maat aan, core
gebruikt hem tussen blokken, en dit raster leest hem uit. Verander je de
gutter, dan verander je die preset - niet deze regels.
Gebruik vanuit markup (een eigen blok, een render.php, of het veld
"Extra CSS-klasse" in de editor):
Een cel vult standaard de volle breedte. Twaalf kolommen naast elkaar is op
een telefoon niets, dus mobiel is het een kolom en kies je vanaf md zelf.
-------------------------------------------------------------------------- */
.lk-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--wp--preset--spacing--50);
}
/* Gelijke specificiteit met .lk-col-*, dus deze regel moet hierboven blijven
staan: bij gelijkspel wint de laatste. */
.lk-grid > * {
grid-column: span 12;
}
.lk-col-1 {
grid-column: span 1;
}
.lk-col-2 {
grid-column: span 2;
}
.lk-col-3 {
grid-column: span 3;
}
.lk-col-4 {
grid-column: span 4;
}
.lk-col-5 {
grid-column: span 5;
}
.lk-col-6 {
grid-column: span 6;
}
.lk-col-7 {
grid-column: span 7;
}
.lk-col-8 {
grid-column: span 8;
}
.lk-col-9 {
grid-column: span 9;
}
.lk-col-10 {
grid-column: span 10;
}
.lk-col-11 {
grid-column: span 11;
}
.lk-col-12 {
grid-column: span 12;
}
@media (min-width: 48rem) {
.lk-col-md-1 {
grid-column: span 1;
}
.lk-col-md-2 {
grid-column: span 2;
}
.lk-col-md-3 {
grid-column: span 3;
}
.lk-col-md-4 {
grid-column: span 4;
}
.lk-col-md-5 {
grid-column: span 5;
}
.lk-col-md-6 {
grid-column: span 6;
}
.lk-col-md-7 {
grid-column: span 7;
}
.lk-col-md-8 {
grid-column: span 8;
}
.lk-col-md-9 {
grid-column: span 9;
}
.lk-col-md-10 {
grid-column: span 10;
}
.lk-col-md-11 {
grid-column: span 11;
}
.lk-col-md-12 {
grid-column: span 12;
}
}
/* --------------------------------------------------------------------------
Leesbreedte (blokstijl op core/group)
Zelfde maat als .lk-tekstbreedte, maar aan te zetten in de editor onder
Stijlen. Voor wie een lap tekst op een pagina zet zonder aan CSS-klassen
te willen denken.
-------------------------------------------------------------------------- */
.wp-block-group.is-style-leesbreedte {
max-inline-size: var(--lk-tekstbreedte);
/* Zie .lk-tekstbreedte hierboven: links uitlijnen, en core's !important
vraagt hetzelfde terug. */
margin-inline: 0 auto !important;
}
/* De groep is vaak zelf een constrained container; dan bepaalt core de breedte
van de kinderen op contentSize (1440px) en zou de max-width hierboven alleen
op de groep zelf werken. Deze regel haalt dat weg, zodat de kinderen de
leesbreedte volgen in plaats van eroverheen te schieten. */
.wp-block-group.is-style-leesbreedte > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-inline-size: none;
}
/* --------------------------------------------------------------------------
Sectiebreedte: hoeveel van de twaalf kolommen neemt een blok?
De kolombreedte wordt uit de container en de gutter berekend, niet
ingetypt - verandert een van beide, dan schuift dit mee:
kolom = (container - 11 gutters) / 12
Een sectie van n kolommen is dan n kolommen plus de n-1 gutters ertussen.
Bij 1440px en 24px gutter: kolom = 98px, dus 12 = 1440, 10 = 1196, 8 = 952.
Even spans landen precies op rasterlijnen als je ze centreert: de ruimte die
overblijft is dan een heel aantal kolommen plus gutters. Vandaar dat de
blokstijlen 12, 10, 8 en 6 aanbieden en niet de oneven maten - die zouden op
een halve gutter uitkomen.
Onder md is alles volle breedte: acht van de twaalf kolommen is op een
telefoon geen sectie maar een marge.
-------------------------------------------------------------------------- */
:root {
--lk-kolom: calc(
(var(--wp--style--global--content-size) - 11 * var(--wp--preset--spacing--50)) / 12
);
}
@media (min-width: 48rem) {
.lk-breedte-1,
.lk-breedte-2,
.lk-breedte-3,
.lk-breedte-4,
.lk-breedte-5,
.lk-breedte-6,
.lk-breedte-7,
.lk-breedte-8,
.lk-breedte-9,
.lk-breedte-10,
.lk-breedte-11,
.lk-breedte-12,
.wp-block-group.is-style-breedte-12,
.wp-block-columns.is-style-breedte-12,
.wp-block-group.is-style-breedte-10,
.wp-block-columns.is-style-breedte-10,
.wp-block-group.is-style-breedte-8,
.wp-block-columns.is-style-breedte-8,
.wp-block-group.is-style-breedte-6,
.wp-block-columns.is-style-breedte-6 {
max-inline-size: calc(
var(--lk-span) * var(--lk-kolom) + (var(--lk-span) - 1) * var(--wp--preset--spacing--50)
);
margin-inline: auto;
}
}
.lk-breedte-1 {
--lk-span: 1;
}
.lk-breedte-2 {
--lk-span: 2;
}
.lk-breedte-3 {
--lk-span: 3;
}
.lk-breedte-4 {
--lk-span: 4;
}
.lk-breedte-5 {
--lk-span: 5;
}
.lk-breedte-6,
.wp-block-group.is-style-breedte-6,
.wp-block-columns.is-style-breedte-6 {
--lk-span: 6;
}
.lk-breedte-7 {
--lk-span: 7;
}
.lk-breedte-8,
.wp-block-group.is-style-breedte-8,
.wp-block-columns.is-style-breedte-8 {
--lk-span: 8;
}
.lk-breedte-9 {
--lk-span: 9;
}
.lk-breedte-10,
.wp-block-group.is-style-breedte-10,
.wp-block-columns.is-style-breedte-10 {
--lk-span: 10;
}
.lk-breedte-11 {
--lk-span: 11;
}
.lk-breedte-12,
.wp-block-group.is-style-breedte-12,
.wp-block-columns.is-style-breedte-12 {
--lk-span: 12;
}
/* --------------------------------------------------------------------------
Volle-breedte blok direct onder de header
Core zet tussen de header en main de blockGap van 24px. Begint een pagina met
een blok dat van rand tot rand loopt, dan hoort dat blok tegen de header aan
te sluiten - die 24px leest daar als een kier, niet als witruimte.
De :has() kijkt of het eerste blok in de inhoud alignfull is. Zo geldt het
alleen waar het moet: op een pagina die met een titel of een gewone alinea
begint, blijft de ruimte gewoon staan.
-------------------------------------------------------------------------- */
main:has(> .wp-block-post-content > .alignfull:first-child) {
margin-block-start: 0;
}
/* En dan hoort de scheidingslijn onder de header ook weg: tegen een foto aan is
het geen scheiding meer maar een streep over het beeld. De header houdt zijn
lijn wel op pagina's die met een titel of gewone tekst beginnen, waar hij de
navigatie van de inhoud scheidt.
Transparant in plaats van weggehaald, zodat de header even hoog blijft en de
hero niet 1px verspringt ten opzichte van andere pagina's. */
:root:has(main > .wp-block-post-content > .alignfull:first-child) .lk-header {
border-block-end-color: transparent;
}
/* --------------------------------------------------------------------------
Kapvormen (lampenkappen/vormen)
--------------------------------------------------------------------------
Een raster met vaste minimumbreedte in plaats van een vast aantal kolommen:
het aantal vormen staat niet vast - dat beheert de klant zelf - dus mag het
raster niet uitgaan van twaalf. auto-fill houdt de kaarten even breed, ook
als er een vorm bijkomt of afvalt.
De tekeningen zijn inline SVG uit assets/vormen/ en tonen de kap zelf, zonder
voet of steel: onder een kap hoort in dit raster niets te staan behalve de
naam. Ze delen een kader (viewBox), dus Empire XL blijft groter dan Empire.
Inline en niet als ![]()
, want het geel komt uit het palet in de CSS.
-------------------------------------------------------------------------- */
.lk-vormen {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.lk-vorm {
display: flex;
flex-direction: column;
align-items: center;
/* Met height 100% moet de padding en de rand binnen die hoogte vallen -
anders komt er 38px bovenop en steekt elke kaart onder zijn cel uit. */
box-sizing: border-box;
/* Een pixel hoger dan de cel: net als de negatieve marge hieronder laat dat
de onderrand samenvallen met de bovenrand van de kaart eronder. Met
height 100% raken de twee randen elkaar en wordt de lijn 2px. */
height: calc(100% + 1px);
padding: 1.25rem 1rem 1rem;
background-color: var(--lk-bg);
border: 1px solid var(--lk-border);
border-radius: 2px;
color: inherit;
text-align: center;
text-decoration: none;
/* Zonder gutter staan twee randen van 1px tegen elkaar en wordt de lijn
tussen twee kaarten 2px, terwijl de buitenrand er 1px blijft. Elke kaart
schuift daarom 1px over zijn rechterbuur heen (en over de rij eronder,
zie de hoogte hierboven): de twee randen vallen samen tot een lijn, en
overal even dik. */
margin-inline-end: -1px;
}
/* Alleen een klikbare kaart reageert op de muis. Zonder bestemming rendert
render.php een
...
...
, en dan zou hover een klikvlak suggereren dat er niet
is. */
/* Bij hover licht het vlak op, net als bij de kaarten van Wat we doen
(.lk-dienst). Geen gele rand: die trekt een lijn om een kaart die al door
rasterlijnen omsloten is. En geen verschuiving - in een raster waar alles op
een lijn staat, valt die beweging op als een fout. */
a.lk-vorm {
transition: background-color 0.25s;
}
a.lk-vorm:hover {
background-color: var(--lk-surface);
}
a.lk-vorm:focus-visible {
outline: 2px solid var(--lk-link);
outline-offset: 2px;
}
.lk-vorm__tekening {
display: block;
width: 100%;
max-width: 8rem;
margin-block-end: 1rem;
}
.lk-vorm__tekening :is(svg, img) {
display: block;
width: 100%;
height: auto;
}
.lk-vorm__afbeelding {
filter: var(--lk-tekening-omkeren);
mix-blend-mode: var(--lk-tekening-meng);
}
.lk-vorm__naam {
margin: 0;
font-size: 1rem;
}
.lk-vorm__maat {
margin-block-start: 0.25rem;
font-size: 0.8125rem;
color: var(--lk-muted);
font-variant-numeric: tabular-nums;
}
/* Alleen zichtbaar voor wie kan bewerken: een lege sectie op de site zelf zou
de bezoeker niets zeggen. */
.lk-vormen__leeg {
margin: 0;
color: var(--lk-muted);
}
/* --------------------------------------------------------------------------
Meetbriefje (lampenkappen/meetbriefje)
--------------------------------------------------------------------------
Een formulier op de leesbreedte: velden naast elkaar waar dat kan, onder
elkaar op een telefoon. De rijen zijn flex met wrap en geen raster - een
veld dat niet meer past hoort naar de volgende regel te vallen, niet
smaller te worden dan zijn inhoud.
-------------------------------------------------------------------------- */
.lk-briefje {
max-inline-size: 44rem;
margin-block-start: var(--wp--preset--spacing--50);
padding: var(--wp--preset--spacing--60);
background-color: var(--lk-surface);
border: 1px solid var(--lk-border);
border-radius: 2px;
}
.lk-briefje__rij {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--40);
}
.lk-briefje__rij > .lk-veld {
flex: 1 1 12rem;
}
.lk-veld {
display: block;
margin: 0 0 var(--wp--preset--spacing--40);
border: 0;
padding: 0;
}
.lk-veld > label,
.lk-veld > legend {
display: block;
margin-block-end: 0.375rem;
font-size: var(--wp--preset--font-size--small);
color: var(--lk-muted);
}
.lk-veld :is(input[type="text"], input[type="email"], input[type="number"], select, textarea) {
inline-size: 100%;
box-sizing: border-box;
padding: 0.625rem 0.75rem;
background-color: var(--lk-bg);
border: 1px solid var(--lk-border);
border-radius: 2px;
color: var(--lk-text);
font-family: inherit;
font-size: inherit;
}
.lk-veld :is(input, select, textarea):focus-visible {
outline: 2px solid var(--lk-link);
outline-offset: -1px;
}
.lk-veld textarea {
resize: vertical;
}
/* Het honeypot-veld. Uit beeld in plaats van display:none: een bot die de CSS
leest, slaat een verborgen veld over - maar de meeste lezen niets en vullen
alles in wat in de HTML staat. */
.lk-briefje__val {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
}
/* Aantal, met de knoppen ernaast. */
.lk-aantal {
display: flex;
inline-size: max-content;
max-inline-size: 100%;
}
.lk-aantal__knop {
inline-size: 2.75rem;
background-color: var(--lk-bg);
border: 1px solid var(--lk-border);
color: var(--lk-text);
font-size: 1.125rem;
line-height: 1;
cursor: pointer;
}
.lk-aantal__knop:hover {
border-color: var(--lk-link);
color: var(--lk-link);
}
/* De drie delen sluiten aan tot één veld: de knoppen delen hun rand met het
invoervak ertussen. */
.lk-aantal__knop:first-child {
border-radius: 2px 0 0 2px;
margin-inline-end: -1px;
}
.lk-aantal__knop:last-child {
border-radius: 0 2px 2px 0;
margin-inline-start: -1px;
}
.lk-veld .lk-aantal__waarde {
inline-size: 4rem;
border-radius: 0;
text-align: center;
}
/* De kleurstalen. Het bolletje is de achtergrond van het label, de radio zelf
staat buiten beeld - maar wel in de tabvolgorde, want zonder radio geen
toetsenbord. */
.lk-stalen__rij {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--30);
}
.lk-staal {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem 0.375rem 0.5rem;
border: 1px solid var(--lk-border);
border-radius: 999px;
font-size: var(--wp--preset--font-size--small);
cursor: pointer;
}
.lk-staal::before {
content: "";
inline-size: 1rem;
block-size: 1rem;
border-radius: 50%;
background-color: var(--lk-staal);
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
}
.lk-staal input {
position: absolute;
opacity: 0;
inline-size: 1px;
block-size: 1px;
}
/* De radiogroep weet zelf wat aanstaat; daar is geen JavaScript voor nodig. */
.lk-staal:has(input:checked) {
border-color: var(--lk-link);
color: var(--lk-link);
}
.lk-staal:has(input:focus-visible) {
outline: 2px solid var(--lk-link);
outline-offset: 2px;
}
/* Onder de stalen: een eigen tint en een omschrijving. Zes stalen dekken een
collectie van 230+ kleuren niet, dus dit is waar de bezoeker zegt wat hij
werkelijk zoekt. */
.lk-eigenkleur {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--wp--preset--spacing--40);
margin-block-start: var(--wp--preset--spacing--40);
}
.lk-eigenkleur__tekst {
flex: 1 1 16rem;
}
.lk-eigenkleur :is(label) {
display: block;
margin-block-end: 0.375rem;
font-size: var(--wp--preset--font-size--small);
color: var(--lk-muted);
}
/* De kleurkiezer van de browser is per platform anders van maat; een vaste
hoogte houdt hem gelijk aan het tekstveld ernaast. */
.lk-eigenkleur input[type="color"] {
inline-size: 3.5rem;
block-size: 2.75rem;
padding: 0.25rem;
background-color: var(--lk-bg);
border: 1px solid var(--lk-border);
border-radius: 2px;
cursor: pointer;
}
/* Zolang niemand de kiezer heeft aangeraakt telt zijn kleur niet mee, en dat
mag je zien: pas na een keuze krijgt hij de accentrand. */
.lk-eigenkleur__tint.is-gekozen input[type="color"] {
border-color: var(--lk-link);
}
.lk-eigenkleur input[type="color"]:focus-visible {
outline: 2px solid var(--lk-link);
outline-offset: 2px;
}
.lk-briefje__notitie {
margin: 0 0 var(--wp--preset--spacing--40);
font-size: var(--wp--preset--font-size--small);
color: var(--lk-muted);
}
.lk-briefje__verzenden {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wp--preset--spacing--40);
}
.lk-briefje__status:not(:empty) {
font-size: var(--wp--preset--font-size--small);
color: var(--lk-muted);
}
.lk-briefje__status.is-gelukt {
color: var(--lk-link);
}
.lk-briefje__status.is-mislukt {
color: var(--wp--preset--color--brown);
}
/* Uitgezette knop: na een geslaagde aanvraag blijft hij uit, zodat er geen
tweede mail met dezelfde inhoud volgt. */
.lk-knop:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* --------------------------------------------------------------------------
Footer
--------------------------------------------------------------------------
Drie kolommen met een haarlijn erboven: menu, contactgegevens en een korte
omschrijving. Onder md vallen ze onder elkaar - dat doet de kolommenblok van
core zelf.
-------------------------------------------------------------------------- */
/* De footer wordt naar de onderkant geduwd, zodat hij op een korte pagina niet
halverwege het scherm blijft hangen met wit eronder. Geen position: fixed:
dan zou hij over de inhoud heen liggen en op een telefoon een vijfde van het
scherm opeten. Dit blijft gewoon het einde van de pagina - hij staat alleen
onderaan het venster als de inhoud korter is. */
.wp-site-blocks {
display: flex;
flex-direction: column;
min-block-size: 100vh;
}
/* Een flexkind krimpt standaard mee als het krap wordt; hier moet elk blok zijn
eigen hoogte houden en de pagina langer worden. */
.wp-site-blocks > * {
flex-shrink: 0;
}
.lk-footer {
/* Alles wat overblijft gaat hierboven zitten. Dat is wat de footer
onderaan houdt. */
margin-block-start: auto;
/* Een eigen vlak in plaats van een lijn: de kleur scheidt de footer al van
de pagina, en dan is een rand erbij dubbelop. Hetzelfde oppervlak als het
formulier en als een kaart bij hover - één token, dus ze blijven gelijk.
Rechtstreeks op de footer en niet op een ::before eronder: de footer loopt
zelf al van rand tot rand, en een laag met z-index: -1 belandt achter de
achtergrond van body en is dus onzichtbaar. */
background-color: var(--lk-surface);
color: var(--lk-muted);
}
/* Zelfde keuze als bij de contactgegevens: geen kapitalen. */
.lk-footer__kop {
margin: 0 0 var(--wp--preset--spacing--30);
font-weight: 500;
color: var(--lk-text);
}
.lk-footer p {
margin: 0 0 var(--wp--preset--spacing--30);
line-height: 1.7;
}
.lk-footer__contact a:hover {
color: var(--lk-link);
text-decoration: underline;
}
.lk-footer__contact a {
color: var(--lk-muted);
text-decoration: none;
}
/* De footerkolommen op een eigen raster, dwars door core/columns heen. Core
legt de kolommen als flexrij neer en klapt ze onder 782px in een keer naar
een kolom; hier is dat te grof. Vier kolommen op desktop, zodat ze op
dezelfde lijnen vallen als de rest van de pagina, en daaronder in stappen
terug naar drie, twee en een.
Vier plekken bij drie kolommen betekent dat de laatste plek leeg blijft. Dat
is de bedoeling: de tekst loopt niet tot de rechterrand, en er is ruimte voor
een vierde kolom zonder dat de opmaak dan hoeft te veranderen.
Twee klassen diep, omdat .wp-block-columns van core even zwaar weegt als
.lk-footer__kolommen en anders de volgorde van de stylesheets zou beslissen. */
.lk-footer .lk-footer__kolommen {
display: grid;
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--50);
}
/* De laatste kolom neemt de ruimte die overblijft: bij twee kolommen staat hij
anders alleen op een halve regel, bij vier blijft de vierde plek leeg. Bij
drie kolommen is er niets over, dus daar niet.
:last-child:nth-child(3) raakt de laatste kolom alleen als het er precies
drie zijn. Komt er ooit een vierde kolom bij, dan valt deze regel vanzelf weg
en is er niets aan te passen. */
@media (min-width: 30rem) {
.lk-footer .lk-footer__kolommen {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lk-footer .lk-footer__kolommen > :last-child:nth-child(3) {
grid-column: span 2;
}
}
@media (min-width: 48rem) {
.lk-footer .lk-footer__kolommen {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lk-footer .lk-footer__kolommen > :last-child:nth-child(3) {
grid-column: auto;
}
}
@media (min-width: 64rem) {
.lk-footer .lk-footer__kolommen {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lk-footer .lk-footer__kolommen > :last-child:nth-child(3) {
grid-column: span 2;
}
}
/* --------------------------------------------------------------------------
Contactgegevens (lampenkappen/contactgegevens)
-------------------------------------------------------------------------- */
/* Browsers zetten cursief. Het element klopt hier semantisch, maar
de schuine letter hoort niet bij de rest van de site. */
.lk-contactgegevens__adres {
margin: 0;
font-style: normal;
line-height: 1.7;
}
/* Een gewone kop in gewone letters: even groot als de kop van de kolom ernaast,
zodat de twee kolommen op dezelfde regel beginnen. Kapitalen maken van een
kopje van een woord een blokje dat harder roept dan de gegevens eronder. */
.lk-contactgegevens__kop {
margin: 0 0 var(--wp--preset--spacing--40);
color: var(--lk-text);
}
/* Elke contactpersoon een eigen blokje: de naam, en daaronder zijn nummer.
Naast elkaar op een regel lezen twee namen met twee nummers als een rij
losse woorden. */
.lk-contactgegevens__bereikbaar {
margin-block-start: var(--wp--preset--spacing--40);
}
.lk-contactgegevens__persoon,
.lk-contactgegevens__email {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.125rem;
margin: 0 0 var(--wp--preset--spacing--30);
}
.lk-contactgegevens__naam {
color: var(--lk-text);
}
/* --------------------------------------------------------------------------
Sociale kanalen (lampenkappen/sociale-kanalen)
-------------------------------------------------------------------------- */
/* Lijstopmaak eraf: het is semantisch een lijst, maar bolletjes naast een
logo lezen als twee opsommingstekens per regel. */
.lk-sociale-kanalen__lijst {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--30);
margin: 0;
padding: 0;
list-style: none;
}
.lk-sociale-kanalen--kolom .lk-sociale-kanalen__lijst {
flex-direction: column;
gap: 0.5rem;
}
.lk-sociale-kanalen--rij .lk-sociale-kanalen__lijst {
column-gap: var(--wp--preset--spacing--40);
}
.lk-sociale-kanalen__kop {
margin: 0 0 var(--wp--preset--spacing--40);
color: var(--lk-text);
}
/* Logo en naam vormen samen één klikdoel: een regel waarvan de helft niet
werkt is op een telefoon een gemiste tik. */
.lk-sociale-kanalen__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--lk-muted);
text-decoration: none;
}
.lk-sociale-kanalen__link:hover {
color: var(--lk-link);
text-decoration: underline;
}
/* De SVG's uit core zijn 24x24 met een vaste breedte in het element zelf; die
overschrijven we, zodat het logo meegroeit met de letter ernaast in plaats
van er als los blokje naast te staan. currentColor: het logo pakt de kleur
van de link op, dus ook de hoverkleur en de kleuren van licht en donker. */
.lk-sociale-kanalen__icoon {
display: inline-flex;
flex-shrink: 0;
}
.lk-sociale-kanalen__icoon svg {
inline-size: 1.25em;
block-size: 1.25em;
fill: currentColor;
}