verdwijnt bij de * conversie. Meestal maakt dat niets uit — de ondermarge van zo'n

valt * samen met die van de kop en telt dus niet mee in de hoogte. * * Bij `.method-block` wél: `.desc` staat daar op `display:flex`, en in een * flexitem kunnen marges niet samenvallen. De 20px van `p{margin-bottom:20px}` * zat dus ín de kop, die daardoor 46px hoog was in plaats van 26px. Hier komt * die ruimte terug als padding, zodat hij net als eerst binnen de kop valt. */ .glx-legacy .method-block .desc .h3 { padding-bottom: 20px; } /* Zelfde geval op de contactpagina: `

…privacy…

maakte van de link een blok over de volle kolombreedte (150px); een * `core/heading` houdt alleen inline-inhoud, dus na de conversie krimpt de link * om zijn tekst (141px) en wordt hij 3px hoger. Zichtbaar verschil is er niet — * de tekst begint op dezelfde plek — maar het aanklikbare vlak wel, en dat * zetten we hier terug. */ .glx-legacy .map-info .desc h3 a { display: block; } /* * 18. De opvangtabel. * * Hier stonden de gekleurde cellen van de tabel op /opvangvormen/: zeven inline * stijlen uit de Drupal-bron die `core/table` niet kon bewaren (dat blok houdt * alleen rijen, cellen en spans bij, geen stijl per cel), en die daarom als * *positie* waren teruggezet — `tr:first-child th:nth-child(2)`, en zo verder. * * Die regels zijn weg. De tabel is nu `glorieux/opvang-tabel` en rendert de * kleuren zelf, als eigenschap van de kolom (inc/opvang-tabel.php). Dat moest * ook: op een positie vastgezette kleur schuift mee naar de verkeerde cel zodra * er een rij of kolom bijkomt, en precies dat is wat de redacteur nu kan. * * Wat er wél nodig blijft, is een breedte voor een vijfde kolom en verder. * legacy.css regel 1321-1324 zet die per positie tot en met de vierde: * * td:nth-child(1){width:260px} … td:nth-child(4){width:210px} * * Zonder de regel hieronder krijgt een nieuwe kolom geen breedte en verdeelt de * browser de ruimte naar de inhoud — de bestaande kolommen verspringen dan * allemaal. 210px is de breedte van de derde en de vierde. * * De regel raakt de tabel van vandaag niet: die heeft vier kolommen, en de * samengevoegde cellen staan op `nth-child(2)` en `(3)`. */ .glx-legacy .reception-table table td:nth-child(n+5) { width: 210px; } /* * En een breedte voor de tabel zelf. `.reception-table{max-width:930px}` * (legacy.css regel 1311) is de som van de vier kolommen: 260 + 260 + 210 + * 210. Bij een vijfde kolom is die som 1150px, en dan doet die 930px twee * dingen die niemand vraagt: de tabel gaat binnen haar eigen wikkel schuiven * (ook op een breed venster), en omdat de browser vaste celbreedtes bij * plaatsgebrek als suggestie behandelt, versmallen álle bestaande kolommen mee * — gemeten [259,255,210,206] -> [243,186,208,142,219]. * * Daarom rekent het blok het kolomaantal in een klasse mee * (`glx-opvang-kolommen-5`) en staat de som hieronder. Boven de zes houdt het * op: dat is ook waar het blok zelf stopt, zie GLORIEUX_OPVANG_MAX_KOLOMMEN. * * Vier kolommen krijgen bewust géén regel: die vallen terug op de 930px van * legacy.css, zodat de tabel van vandaag geen enkele bridge-regel nodig heeft. * Onder 1200px is het venster smaller dan de tabel en schuift ze zoals eerst. */ .glx-legacy .reception-table.glx-opvang-kolommen-5 { max-width: 1150px; } .glx-legacy .reception-table.glx-opvang-kolommen-6 { max-width: 1360px; } /* * 19. "Onze werking": de rij tegels van het blok glorieux/werking-grid. * * De oude kolomindeling hing aan de Drupal-blocknaam: * * .block-views-blockannouncements-onze-werking-preview * > div > div > .view-content > .views-row { width: calc(100%/3) } * * Die selector had vier lege wrapper-divs nodig om aan te grijpen, en de tegel * zat daar nóg drie niveaus dieper in. Sinds de tegels blokken zijn * (inc/werking-blokken.php) staat de rij op één class en het aantal kolommen op * een tweede, zodat het in de editor te kiezen is. * * De opmaak is letterlijk die van hierboven: flexbox met `justify-content: * center`, kolomgutters van 15px zoals `.col-md-12` die had, en dezelfde * hoogtetruc (`height: calc(100% - 60px)`) waarmee tegels in één rij even hoog * worden ondanks de 60px marge waar de boog in hangt. Ook de breekpunten zijn * dezelfde: twee kolommen onder 992px, één onder 768px. Zie sectie 8 hierboven * voor de oude rij, die op de andere pagina's nog gebruikt wordt. */ .glx-legacy .glx-werking { display: flex; flex-wrap: wrap; justify-content: center; /* * De ruimte onder de rij. Die stond op de oude site op de Drupal-wikkel * eromheen (`.onze-werking-view { padding-bottom: 160px }`, legacy.css) en * hoort bij het beeld: de tegels van de laatste rij hangen met hun boog in * de 60px marge, en daaronder blijft het rustig tot de voettekst. */ padding-bottom: 160px; } .glx-legacy .glx-werking__item { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } .glx-legacy .glx-werking--cols-1 > .glx-werking__item { width: 100%; } .glx-legacy .glx-werking--cols-2 > .glx-werking__item { width: 50%; } .glx-legacy .glx-werking--cols-3 > .glx-werking__item { width: calc(100% / 3); } .glx-legacy .glx-werking--cols-4 > .glx-werking__item { width: 25%; } .glx-legacy .glx-werking__item > .method-block { height: calc(100% - 60px); display: flex; flex-direction: column; justify-content: space-between; } .glx-legacy .glx-werking__item > .method-block > .desc { height: 100%; display: flex; flex-direction: column; } @media (max-width: 992px) { .glx-legacy .glx-werking--cols-3 > .glx-werking__item, .glx-legacy .glx-werking--cols-4 > .glx-werking__item { width: 50%; } } @media (max-width: 767px) { .glx-legacy .glx-werking--cols-2 > .glx-werking__item, .glx-legacy .glx-werking--cols-3 > .glx-werking__item, .glx-legacy .glx-werking--cols-4 > .glx-werking__item { width: 100%; } } /* * 20. De nieuwsrij als query-loop. * * De kaartjes komen uit `core/query` + `core/post-template` (zie * patterns/nieuws.php). Dat blok zet de berichten in een

per * bericht; de Drupal-markup had daar geneste
's staan. Drie selectors in * legacy.css lopen met `> div >` door die divs heen en missen daardoor: * * .latest-news .col-row > div → de rij zelf (flex, gecentreerd) * .latest-news .col-row > div > div → de kolombreedte van een kaartje * .latest-news .col-row > div > div > div → de volle hoogte binnen de kolom * * Hieronder staan die drie één op één terug, nu op de
- . `.col-row` * staat op het query-blok zelf, dus de

…

…privacy…

055 23 37 63

titel