/* Theme Name: Jimmy-Dean 2026 Theme URI: https://jimmy-dean.nl/ Author: Jimmy-Dean Author URI: https://jimmy-dean.nl/ Template: Bootstrap-on-WordPress Description: Portfolio thema op basis van Materialize CSS v2.3. Opvolger van Jimmy-Dean 2024. Het parent theme levert Bootstrap, maar dit thema schakelt dat uit in remove_theme_codes(); de opmaaklaag is volledig Materialize, met een compatibiliteitsblok in style.css voor de overstap van v1 naar v2. Version: 4.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: jimmydean */ /* Vormschaal --------------------------------------------------------------------------- Material Design 3 werkt met een vaste reeks hoekrondingen in plaats van één waarde overal: extra small 4dp, small 8dp, medium 12dp, large 16dp en full. Elk componenttype heeft er een vaste plek in, zodat de vorm iets zegt over hoe groot en hoe belangrijk iets is. Dit thema stond overal op 4px, ook op de kaarten en de grote witte vlakken. Materialize v2.3.3 houdt zelf ook 4px aan voor knoppen (--btn-border-radius), dus dat kwam niet van MD3 maar van het framework. De waarden staan hier als variabelen zodat één regel de hele schaal verzet als de vorm te rond of te hoekig uitpakt. */ :root { --jd-vorm-xs: 4px; /* kleine vlakken: tooltip, thumbnails in de kaart */ --jd-vorm-s: 8px; /* invoervelden */ --jd-vorm-m: 12px; /* kaarten en de grote inhoudsvlakken */ --jd-vorm-l: 16px; /* niet in gebruik; staat er voor als er een dialoog bijkomt */ --jd-vorm-vol: 999px; /* knoppen en chips */ /* Hoogte van de hulpbalk bovenin (.header .nav-content): 8px padding boven, 32px min-height op de links, 8px onder -- gemeten 48,0px. Dit is het stuk dat wegscrollt voordat de navigatiebalk blijft hangen, dus de sticky-offset onder "Meelopende navigatiebalk" rekent hiermee. Stond daar als kaal getal, los van de --navbar-height-tokens waar de balk eronder wél mee rekent; verander je de padding of de tekstgrootte van die hulpbalk, dan hoort dit getal mee. */ --jd-hulpbalk-hoogte: 48px; } /* Themakleur --------------------------------------------------------------------------- Materialize v2 is gebouwd op de kleurtokens van Material Design 3, afgeleid van één bronkleur: --md-source: #006495, een staalblauw. Elk onderdeel dat Materialize zelf kleurt grijpt naar die tokens -- --md-sys-color-primary komt 78 keer voor in materialize.min.css. Dat blauw komt in dit thema nergens voor, en dook daardoor telkens op bij iets nieuws: de actieve pagina in de paginering, het vlak achter een chip met focus, en het pictogram naar de klantwebsite als je erover gaat. Elke keer losten we het op met een eigen regel op dat ene onderdeel -- dweilen terwijl de kraan openstaat. Hieronder staat de kraan dicht. Materialize zet de tokens in twee lagen op :root: eerst de kleuren zelf (--md-sys-color-primary-light en -dark), daarna een koppeling die per kleurmodus de juiste van die twee kiest. Door alleen de eerste laag te overschrijven blijft die koppeling werken en volgen beide modi vanzelf. style.css laadt na materialize, dus dit wint zonder !important. Alleen de accentkleuren staan hier. Vlakken en achtergronden (surface, background) schildert dit thema zelf, en rood voor foutmeldingen hoort rood te blijven. Nieuw onderdeel toevoegen dat Materialize kleurt? Dan hoeft er niets meer: het komt vanzelf in de huisstijl binnen. */ :root { /* Lichte modus */ --md-sys-color-primary-light: #1a237e; --md-sys-color-on-primary-light: #e8eaf6; --md-sys-color-primary-container-light: #e8eaf6; --md-sys-color-on-primary-container-light: #1a237e; --md-sys-color-inverse-primary-light: #9fa8da; --md-sys-color-secondary-light: #3949ab; /* Gedempte tekst en pictogrammen; stond op #41474d, een neutraal grijs. */ --md-sys-color-on-surface-variant-light: #3949ab; /* De rand van een outlined-knop. Stond op #72787e: een neutraal grijs dat Materialize afleidt van zijn eigen bronkleur (#006495, staalblauw) en dat naast het indigo van dit thema vuil oogt. Deze waarde is indigo lighten-1, dus dezelfde familie als de rest. */ --md-sys-color-outline-light: #5c6bc0; /* Zie de toelichting bij --md-sys-color-outline-light. Deze waarde stond nog op de standaard van Materialize en wordt nergens anders in dit thema gebruikt; hij is hier alleen gezet zodat de kleurrol klopt als hij ooit wél ergens opduikt. */ --md-sys-color-surface-tint-light: #1a237e; /* Donkere modus. Zelfde rollen, omgekeerd: op donker moet het accent oplichten in plaats van verdiepen. De waarden komen overeen met --jd-accent en --jd-text-muted onderaan dit bestand. */ --md-sys-color-primary-dark: #aab4ff; --md-sys-color-on-primary-dark: #1a237e; --md-sys-color-primary-container-dark: #283593; --md-sys-color-on-primary-container-dark: #e8eaf6; --md-sys-color-inverse-primary-dark: #3949ab; --md-sys-color-secondary-dark: #9fa8da; --md-sys-color-on-surface-variant-dark: #a9adc9; /* Op donker moet de rand oplichten in plaats van verdiepen, net als het accent. Indigo lighten-3 tegen de donkere kaart. */ --md-sys-color-outline-dark: #9fa8da; --md-sys-color-surface-tint-dark: #aab4ff; } body, html { background-color: #c5cae9; height: 100%; margin: 0; padding: 0; width: 100%; } html { line-height: 1.5; } body .grecaptcha-badge { display: none; } /* De wikkel om alles heen. --------------------------------------------------------------------------- Hier stond `height: 100%` én `min-height: 100%`. Die eerste won, en daarmee was de tweede dood -- maar hij was ook de bedoeling: min-height houdt een korte pagina toch schermvullend zodat de footer onderaan blijft, zonder een lange pagina af te kappen. Dat is nu wat er staat. `height: 100%` was bovendien de enige reden dat de startpagina niet scrolt. Gemeten: haal je dat weg, dan groeit de pagina van 900 naar 1163px. De vergrendeling staat daarom nu expliciet op .home hieronder, in plaats van als neveneffect op elke pagina. */ .wrapper { display: flex; flex-direction: column; min-height: 100%; } .material-tooltip { background-color: #1a237e; color: #e8eaf6; } .popup-wrapper { width: 350px; margin: 0 auto; } .popup-block { max-width: 350px; margin: 40px auto; position: relative; } .flex { display: flex; flex-wrap: wrap; } /* De chiptekst stond op #5c6bc0: op het vlak van #e8eaf6 is dat 4,06:1, en met 13px valt dat onder de 4,5:1 die WCAG 1.4.3 voor gewone tekst vraagt. #3949ab is dezelfde indigo, twee stappen donkerder, en komt op 6,46:1. Het raakt elke chip -- ook die onder de projectkaarten -- en dat was al zo voor de toollijst erbij kwam. */ .chip { background: #e8eaf6; color: #3949ab; overflow: hidden; text-transform: initial; word-break: break-all; } .divider { margin: 30px 0 15px 0; } .valign-grid { align-items: center; } /* Zelfde reden als bij .card .process img: zonder height: auto klemmen max-width en max-height allebei de presentatie-hint uit de width/height-attributen, elk op hun eigen as, en gaat de verhouding verloren. Nu valt het niet op omdat alle uitgelichte afbeeldingen vierkant zijn -- getest met een 4:3-afbeelding werd 192x192 in plaats van 192x144. */ .related-posts-grid .img { border-radius: var(--jd-vorm-m); height: auto; max-height: 192px; max-width: 192px; } /* De projecttitels onder Gerelateerde projecten stonden op de volle h3-maat van 30px, in een kolom van 202px. Daardoor brak elke titel over twee regels en zaten ze te dicht bij de sectiekop erboven (40px). Op 20px past de kortste titel weer op één regel en is het verschil met die kop weer een echte stap. De marge gaat mee omlaag: Materialize geeft een h3 29,2px boven en 17,5px onder, wat bij een kop van 30px klopte maar bij 20px meer ruimte is dan de tekst hoog is. Het gat tussen beeld en titel gaat zo van 35 naar 18px. Het niveau blijft h3 -- dat is de kopstructuur van de pagina, los van de maat. */ .related-posts-grid .grid-item h3 { font-size: var(--jd-tekst-h5); margin: .8rem 0 0; } /* Het raster is het laatste blok vóór de footer, en de ondermarge van 17,5px die de titel daar had is met de regel hierboven verdwenen: de titels sloten daardoor naadloos op de footer aan, op elke schermbreedte. De ruimte hoort ook niet van de kop te komen maar van het blok. 2.5rem is hetzelfde ritme als de rest van deze pagina: 38px onder het uitnodigingsblok, 36px boven de sectiekop. */ .related-posts-grid { padding-bottom: 2.5rem; } .indigo-text.text-darken-5 { color: #101974 !important; } .indigo.darken-5 { background-color: #101974 !important; } .row .colold { padding: 0 .75rem; } /* Typography */ /* text-wrap: balance verdeelt de regels van een kop gelijkmatig in plaats van de laatste regel met één woord te laten eindigen. De browser doet dat alleen bij koppen van hooguit een handvol regels, dus het is veilig op alles hier. Browsers die het niet kennen negeren de regel en breken zoals voorheen. .card-title staat erbij omdat de projecttitel over het beeld ligt en juist daar een eenzaam laatste woord opvalt. */ h1, h2, h3, h4, h5, h6, .card-title { overflow-wrap: break-word; text-wrap: balance; } h1, h2, h3, h4, h5, h6, .brand-logo, .card-title, .content .aside span, nav ul a.btn { font-family: 'Raleway'; font-weight: 700; } /* Tekstschaal --------------------------------------------------------------------------- Gemeten voordat dit erin kwam: h1 63px, h2 53,4, h3 43,8, h4 34,2, h5 24,6, h6 17,25 -- de standaardschaal van Materialize, met stappen van 1,18 tot 1,43. Die koppen waren dus niet te klein. Het probleem was dat de pagina's die ertoe doen ze niet gebruikten (de homepage begon bij h5) en dat `.flow-text` op een h3 of h6 de maat terugzette naar 25,2px, waardoor kop en alinea even zwaar werden. Deze schaal maakt de stappen bewust ongelijk: 1,5 aan de top waar het verschil moet vallen, aflopend naar 1,18 onderin waar koppen dicht bij de lopende tekst staan. Van boven naar beneden op een breed scherm: 60 / 40 / 30 / 24 / 20 / 17. clamp() in rem, niet in px, en zonder aan de lettergrootte van `html` te komen: die staat op 15px en er hangen 217 rem-waarden aan. Zou je die verhogen, dan groeit de tekst maar blijven de handgemeten dozen (chips 32px, invoervelden 56px, de navigatiebalk) staan -- en je overschrijft de lettergrootte die de bezoeker zelf heeft ingesteld. De middelste waarde van elke clamp bepaalt hoe snel de maat meegroeit met het scherm; de vw-component is groter naarmate de kop groter is, zodat de verhouding tussen de niveaus op elke breedte ongeveer gelijk blijft. */ :root { /* De ondergrenzen zijn niet losjes gekozen. Met een vaste h6 en een lage ondergrens voor h5 kwamen die twee op een smal scherm uit op 15,9 en 16,2px: een stap van 1,02, dus twee kopniveaus die er identiek uitzagen. De grenzen hieronder houden ook op 375px een echte trap: 32,4 / 26 / 22 / 19 / 16,8 / 14,7, met stappen van 1,24 tot 1,13. */ --jd-tekst-h1: clamp(2.29rem, 1.4rem + 3.4vw, 4rem); --jd-tekst-h2: clamp(1.857rem, 1.3rem + 2vw, 2.667rem); --jd-tekst-h3: clamp(1.571rem, 1.2rem + 1.2vw, 2rem); --jd-tekst-h4: clamp(1.357rem, 1.15rem + .6vw, 1.6rem); --jd-tekst-h5: clamp(1.2rem, 1.05rem + .4vw, 1.333rem); --jd-tekst-h6: clamp(1.05rem, 1rem + .18vw, 1.133rem); --jd-tekst-lead: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); /* Grote koppen mogen strakker zetten dan kleine: bij 60px is 1,5 regelafstand een gat, bij 17px is 1,15 te krap. */ --jd-regel-groot: 1.08; --jd-regel-midden: 1.2; --jd-regel-klein: 1.32; } h1 { font-size: var(--jd-tekst-h1); line-height: var(--jd-regel-groot); letter-spacing: -.02em; } /* De paginatitel in de smalle kolom. --------------------------------------------------------------------------- .popup-wrapper is 650px breed en wordt gebruikt door de categorie-, tag-, klant- en projectpagina's. De volle h1-schaal van 60px is voor een bredere kolom bedoeld: "Gedrukte communicatiemiddelen" liep daar over drie regels en 194px hoogte, "Websites, van ontwerp tot ontwikkeling" over twee. Met 2.6rem (39px) past de eerste op één regel en de langste titel van de site op twee. De ondergrens van 1.7rem houdt hem op een telefoon boven de h2. De projecttitel over het beeld heeft een eigen regel met meer gewicht in de selector en blijft dus op zijn eigen maat. */ .popup-wrapper h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); } h2 { font-size: var(--jd-tekst-h2); line-height: var(--jd-regel-groot); letter-spacing: -.015em; } h3 { font-size: var(--jd-tekst-h3); line-height: var(--jd-regel-midden); letter-spacing: -.01em; } h4 { font-size: var(--jd-tekst-h4); line-height: var(--jd-regel-midden); } h5 { font-size: var(--jd-tekst-h5); line-height: var(--jd-regel-klein); } h6 { font-size: var(--jd-tekst-h6); line-height: var(--jd-regel-klein); } /* Aanloopalinea. Dit is wat `.flow-text` altijd al probeerde te zijn: iets groter dan de lopende tekst, voor de eerste alinea van een pagina. Materialize zet er alleen een font-size op; hier komt de regelhoogte en een leesbreedte bij, want 25px tekst over de volle kaartbreedte leest slecht. Op koppen hoort hij niet meer te staan -- die zijn uit de templates gehaald. */ .flow-text { font-size: var(--jd-tekst-lead); line-height: 1.5; max-width: 62ch; } .flow-text.center-align { margin-left: auto; margin-right: auto; } /* Icons */ .fa, .fab, .fad, .fal, .far, .fas { display: inline; } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; display: inline; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; } /* Buttons */ a { color: #1a237e; } /* MD3 geeft knoppen een volledig ronde vorm; Materialize v2.3.3 houdt 4px aan. De pil is het duidelijkste verschil tussen "knop" en "vlak" in MD3. */ /* Geen hoofdletters meer op knoppen. Material Design 2 zette knoplabels in kapitalen; Material Design 3 -- waar de rest van dit thema op staat -- gebruikt zinsnotatie. Kapitalen lezen trager omdat de woordvorm wegvalt, en ze maken van elke knop een uitroep. Ze blijven wel staan waar ze wél iets doen: op de meta-labels ("Klant:", "Categorie 3 van 8", "Vorige project"), die juist als etiket moeten lezen en niet als tekst. Terugdraaien is één woord: zet text-transform hier weer op uppercase. */ .btn, .btn-large, .btn-small, .btn-flat { border-radius: var(--jd-vorm-vol); text-transform: none; } .btn-floating { border-radius: 50%; } .btn-floating i { color: #e8eaf6; } .btn, .btn-large, .btn-small, .btn-floating, .btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus { background-color: #1a237e; color: #e8eaf6; } .btn:hover, .btn-large:hover, .btn-small:hover, .btn-floating:hover { background-color: #010A65; } .btn-flat:focus { background-color: rgba(26, 35, 126, 0.1); } .sidenav li > a.btn, .sidenav li > a.btn-large, .sidenav li > a.btn-small, .sidenav li > a.btn-large { background-color: #1a237e; color: #ffffff; } .sidenav li > a.btn:hover, .sidenav li > a.btn-large:hover, .sidenav li > a.btn-small:hover, .sidenav li > a.btn-large:hover { background-color: #010A65; } .wp-block-buttons { text-align: center; justify-content: center; } .wp-block-buttons .wp-block-button { padding: 0 8px; margin: 1rem 0 0; } /* De blokeditor levert een knop als
. De Materialize-klassen staan op die div, dus de div ís de knop en de link erbinnen moet onzichtbaar zijn -- daar gaat deze regel over. border-radius stond op `unset`, en dat is voor deze eigenschap hetzelfde als 0. De link kreeg daardoor rechte hoeken binnen een pil van 999px, en omdat hij maar 8px van de rand begint -- dus bínnen de ronding -- staken zijn vier hoeken als blokjes buiten de pilrand uit. `inherit` neemt de ronding van de div over. color hoorde er ook bij: zonder die regel geeft Gutenberg de link wit, terwijl elke andere knop op de site #e8eaf6 is. */ .wp-block-buttons .wp-block-button__link { background-color: inherit; border: none; border-radius: inherit; box-shadow: none; color: inherit; font-size: inherit; padding: inherit; text-align: inherit; text-decoration: none; overflow-wrap: unset; } /* Focus --------------------------------------------------------------------------- Materialize zet op een reeks elementen `outline: none` of `outline: 0`. Gemeten op de categorietegel, de menulinks, de CONTACT-knop, het logo en de hamburger: bij alle vijf veranderde er niets tussen rust en focus. Wie met Tab navigeert zag dus nergens waar hij stond — dat is een WCAG-eis (2.4.7) en Material Design schrijft het ook voor. :focus-visible en niet :focus, zodat de ring alleen verschijnt bij toetsenbord- navigatie en niet na een muisklik. 3px komt overeen met wat Materialize zelf voor zijn eigen focusring aanhoudt. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #1a237e; outline-offset: 2px; } /* Op de donkere vlakken — navigatiebalk, lade, footer, de gekleurde tegels en de knoppen in de popup — zou indigo wegvallen. Daar een lichte ring. */ .navbar a:focus-visible, .navbar button:focus-visible, .sidenav a:focus-visible, .page-footer a:focus-visible, .footer-copyright a:focus-visible, .content .aside:focus-visible { outline-color: #e8eaf6; } /* De tegel is een groot vlak; een ring strak om de rand leest rustiger dan een ring op 2px afstand die buiten de tegel valt. */ .content .aside:focus-visible { outline-offset: -3px; } /* Vier selectors uit materialize.min.css zetten `outline` uit met een hogere specificiteit dan de elementselectors hierboven, dus daar bleef de ring weg. Gemeten in de popup: de klantlink en de toolchips onder een projectkaart kregen focus zonder dat er iets zichtbaar veranderde. .tabs .tab a:focus (0,3,1) — klant- en jaarlink in de kaart .card .card-action a (0,2,1) — de toolchips .chip:focus (0,2,0) .collapsible-header:focus (0,2,0) — de blokken op Over mij Onderstaande selectors liggen er net boven of gelijk; style.css laadt na materialize, dus gelijk is genoeg. */ .card .jd-projectmeta-lijst li a:focus-visible, .card .card-action a:focus-visible, .chip:focus-visible, .collapsible-header:focus-visible { outline: 3px solid #1a237e; outline-offset: 2px; } /* De chips zitten in een zonder eigen vorm, dus de ring liep als rechthoek om de pil heen -- alsof het vlak eromheen de focus had in plaats van de chip zelf. Een outline volgt de border-radius van het element, dus de link krijgt dezelfde pilvorm als de chip erin. */ .jd-toollijst a, .post_tags a, /* In de kaart geeft Materialize .card .card-action a (0,2,1) de knopvorm van 4px mee; deze selector ligt daarboven. */ .card .card-action .post_tags a { border-radius: var(--jd-vorm-vol); } /* Materialize kleurt een chip met focus om naar --md-sys-color-primary (#006495), een blauw dat in dit thema nergens voorkomt. De chip zelf is hier nooit focusbaar -- de link eromheen is dat -- maar deze regel houdt dat blauw hoe dan ook buiten de deur. */ .chip:focus { background-color: inherit; color: inherit; } /* De link om een chip in een kaart is bij Materialize een knop: .card .card-action a deelt zijn opmaak met .btn, inclusief het vlak dat een knop bij focus krijgt. Gemeten op een projectkaart werd dat rgba(0, 75, 113, .765) over 160 bij 74 pixels, terwijl de pil zelf maar 107 bij 32 is -- een grote lap van hetzelfde afwijkende blauw rondom de chip. */ .card .card-action .post_tags a:focus, .card .card-action .post_tags a:hover { background-color: transparent; } /* De ring volgde het linkvlak, en dat is bij een chip in een kaart 160 bij 74 pixels terwijl de pil zelf 107 bij 32 is: een ovaal op ruime afstand om de chip heen. Bij een chip laat de focus zich daarom niet met een ring zien maar met de pil zelf -- die kleurt om naar dezelfde indigo als de chip van de tool waar je op staat in de toollijst, zodat focus en "hier ben je" dezelfde taal spreken. outline: none mag hier omdat er iets anders voor in de plaats komt dat groter en duidelijker is: het vlak van de pil gaat van #e8eaf6 naar #1a237e, een verschil van 11,06:1. Daarmee is aan WCAG 2.4.7 voldaan. */ .post_tags a:focus-visible, .jd-toollijst a:focus-visible, .card .card-action .post_tags a:focus-visible { outline: none; } .post_tags a:focus-visible .chip, .jd-toollijst a:focus-visible .chip { background-color: #1a237e; color: #e8eaf6; } /* Paginering (jd_pagination in functions.php) --------------------------------------------------------------------------- Materialize v2 kleurt .pagination met de Material Design 3-systeemkleuren: de actieve pagina kreeg --md-sys-color-primary (#006495), een blauw dat verder nergens in dit thema voorkomt. Daarom staan de kleuren hier, met dezelfde waarden als de knoppen hierboven: #1a237e, hover #010A65, tekst #e8eaf6. Deze regels staan bewust op dezelfde specificiteit als die van Materialize; style.css laadt erna, dus ze winnen zonder !important. De hoogte van 40px vervangt de 2rem (28px) van Materialize: dat is te klein om betrouwbaar aan te tikken op een telefoon. */ .pagination { margin: 2rem 0 0; } .pagination li { margin: 0 2px; vertical-align: middle; } .pagination li a { align-items: center; border-radius: 4px; color: #1a237e; display: inline-flex; font-size: 1rem; font-weight: 500; height: 40px; justify-content: center; min-width: 40px; padding: 0 0.5rem; transition: background-color .2s ease-out, color .2s ease-out; } .pagination li a:hover, .pagination li a:focus { background-color: rgba(26, 35, 126, 0.1); } .pagination li a:focus-visible { outline: 2px solid #1a237e; outline-offset: 2px; } /* De actieve pagina krijgt hetzelfde blok als een .btn, zodat de paginering herkenbaar bij de rest van de site hoort. */ .pagination li.active a, .pagination li.active a:focus { background-color: #1a237e; color: #e8eaf6; } .pagination li.active a:hover { background-color: #010A65; color: #e8eaf6; } /* Uiteinden en beletselteken: gedempt indigo in plaats van het grijs van Materialize, en geen achtergrondvlak. */ .pagination li.disabled a, .pagination li.disabled a:hover, .pagination li.disabled a:focus { background-color: transparent; color: rgba(26, 35, 126, 0.32); } /* 2rem valt te zwaar uit naast cijfers van 1rem. */ .pagination li i { font-size: 1.5rem; line-height: 1; } /* Materialize v2.3 compatibiliteit --------------------------------------------------------------------------- Materialize v2.3.3 stylet de navigatiebalk via .navbar in plaats van de element-selector nav, maakt .nav-wrapper een flexbox met eigen achtergrond, en liet de regels voor .nav-extended, .nav-content en .sidenav-trigger vervallen. Onderstaande regels zijn overgenomen uit Materialize v2.1.1 zodat de bestaande header-markup en de eigen regels hieronder blijven werken. Verwijderbaar zodra de header naar de v2.3-opzet is herschreven. */ .navbar { color: var(--md-sys-color-on-primary); line-height: var(--navbar-height-mobile); } /* v2.0.3 gaf `nav` een slagschaduw; in v2.3.3 heeft .navbar er geen meer, waardoor de balk vlak op de witte inhoud aansloot. Dezelfde waarden als .btn hierboven. */ .navbar { -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2); } .navbar.nav-extended { height: auto; } .navbar .nav-wrapper { display: block; height: 100%; position: relative; background-color: transparent; padding-left: 0; padding-right: 0; } .navbar.nav-extended .nav-wrapper { min-height: var(--navbar-height-mobile); height: auto; } .navbar.nav-extended .nav-content { position: relative; line-height: normal; } .navbar ul:not(.dropdown-content) { display: block; gap: 0; } .navbar ul:not(.dropdown-content) > li { float: left; } .navbar ul:not(.dropdown-content) > li > a { padding: 0 15px; font-size: 1rem; } .navbar ul:not(.dropdown-content) > li > a.btn, .navbar ul:not(.dropdown-content) > li > a.btn-small, .navbar ul:not(.dropdown-content) > li > a.btn-large, .navbar ul:not(.dropdown-content) > li > a.btn-flat, .navbar ul:not(.dropdown-content) > li > a.btn-floating { margin-top: -2px; margin-left: 15px; margin-right: 15px; display: inline-block; } .navbar .brand-logo { position: absolute; font-size: 2.1rem; } .navbar .brand-logo i { float: left; margin-right: 15px; } .navbar .sidenav-trigger { float: left; position: relative; z-index: 1; height: var(--navbar-height-mobile); margin: 0 18px; } .navbar .sidenav-trigger i { height: var(--navbar-height-mobile); line-height: var(--navbar-height-mobile); } /* v2.0.3 had `nav a { color: var(--font-on-primary-color-main) }`; die regel is in v2.3.3 vervallen. De hamburger is een zonder eigen kleurklasse, dus viel hij terug op de algemene `a { color: #1a237e }` hierboven: indigo op een indigo balk, contrast 1.12. De overige items in de balk hebben wel een kleurklasse en waren daardoor niet geraakt. #e8eaf6 is dezelfde kleur als het logo en de menu-items. */ .navbar .sidenav-trigger, .navbar .sidenav-trigger i { color: #e8eaf6; } @media only screen and (min-width: 601px) { .navbar, .navbar .nav-wrapper i, .navbar a.sidenav-trigger, .navbar a.sidenav-trigger i { height: var(--navbar-height); line-height: var(--navbar-height); } .navbar.nav-extended .nav-wrapper { min-height: var(--navbar-height); } } @media only screen and (max-width: 992.99px) { .navbar .brand-logo { left: 50%; transform: translateX(-50%); } .navbar .brand-logo.left, .navbar .brand-logo.right { padding: 0; transform: none; } } @media only screen and (min-width: 993px) { .navbar a.sidenav-trigger { display: none; } .navbar .brand-logo.center { left: 50%; transform: translateX(-50%); } } /* Formuliervelden. v2.3.3 liet de regel vervallen die invoervelden een breedte en hoogte gaf. Zonder die regel valt de browserstandaard terug: het veld werd 394px breed in een kolom van 308px en overlapte de kolom ernaast, en de hoogte zakte van 56 naar 38px. Waarden overgenomen uit v2.0.3-alpha. */ input:not([type]):not(.browser-default), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=month]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea { outline: none; width: 100%; font-size: 16px; height: 56px; } /* Knoppen. v2.3.3 haalde de slagschaduw van .btn af (die zit daar nu alleen nog op .btn.elevated) en verruimde de padding van 16 naar 24px. Het icoon in een knop verloor bovendien zijn marge en kreeg een vaste regelhoogte, waardoor er een blok naast het label ontstond. */ .btn, .btn-small, .btn-large, .btn-flat { --btn-padding: 16px; } /* v2.0.3 centreerde het label met line-height in een inline-block; v2.3.3 doet dat met inline-flex en zet geen line-height meer. In de navigatiebalk erfde de knop daardoor de line-height van .navbar (64px). */ .btn, .btn-small, .btn-large, .btn-flat { display: inline-block; line-height: var(--btn-height); } /* De letterspatiëring van .5px hoorde bij de kapitalen hierboven: die hebben lucht nodig omdat alle letters even hoog zijn. In zinsnotatie werkt dezelfde spatiëring averechts en trekt ze het woord uit elkaar. */ .btn, .btn-small, .btn-large { text-align: center; letter-spacing: normal; } .btn, .btn-small, .btn-large { -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2); } .btn i, .btn-floating i, .btn-large i, .btn-small i, .btn-flat i { font-size: 1.3rem; line-height: inherit; height: auto; } .btn i.right, .btn-large i.right, .btn-small i.right, .btn-flat i.right { margin-left: 15px; } .btn i.left, .btn-large i.left, .btn-small i.left, .btn-flat i.left { margin-right: 15px; } /* Accordeon. v2.3.3 voegde een chevron toe via .collapsible-header::after. De koppen hier bevatten een h5 op blokniveau, waardoor die pijl los onderaan naast het blok komt te hangen. v2.0.3 had geen pijl. Materialize zet de pijl in uitgeklapte toestand nog een keer met `.active .collapsible-header::after`. Die selector weegt zwaarder (0,2,1 tegen 0,1,1), dus zonder de tweede regel hieronder kwam de pijl bij het openklappen alsnog tevoorschijn. Beide toestanden moeten dus expliciet uit. */ .collapsible-header::after, .active .collapsible-header::after { content: none; } /* Kaartvoet met de tags. v2.3.3 gaf .card-action een padding van 0 24px en liet `background-color: inherit` vervallen, en haalde de marge en de pilvorm van de chips af. Zonder die marge raken de chips elkaar en vormen ze een aaneengesloten lichtblauwe balk; met alles op één regel viel de kaartvoet van 76 naar 41px. In v2.3.3 kreeg .card bovendien een lichtblauwe achtergrond in plaats van #fcfcff; omdat .card-action die met `inherit` overneemt, kleurde de hele kaartvoet mee. */ .card { background-color: var(--md-sys-color-surface); } /* De 0 was hier goed zolang de eromheen 24px padding had: er pasten dan maar twee chips op een regel en die rij bleef vanzelf smaller dan de kaart. Met de kleinere padding hieronder past er een derde bij, wordt de rij breder dan de kaart, en liep de eerste chip er 21px links buiten -- de rij is gecentreerd, dus hij stak aan beide kanten uit. Zonder padding is er niets dat de regelafbreking binnen de kaart houdt. */ .card .card-action { background-color: inherit; padding: 10px 8px; } /* De chips stonden scheef in de kaartvoet: 7px ruimte erboven tegen 16,5px eronder. Twee oorzaken, allebei onder de motorkap. De chip is een inline-block en stond dus op een tekstregel, met de onderruimte voor stokletters eronder -- 5,5px die niemand ziet maar die wel meetelt. En de chip had `margin-bottom: 5px` voor de ruimte tussen twee regels chips; op de laatste regel bleef die als extra ruimte onderaan hangen. Flex met een gap lost allebei op: de gap geeft dezelfde 5px tussen de chips als de marge deed, maar alleen tússen ze en niet erna, en als flexitem staat de chip niet meer op een tekstregel. align-items: center legt hem netjes in het midden van zijn link. Resultaat: 17px boven en 16px onder, waarbij die ene pixel afronding op halve pixels is. */ .card .card-action .post_tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; } .card .card-action .post_tags a { display: flex; align-items: center; } .card .card-action .post_tags .chip { margin: 0; } /* De witruimte boven en onder de tags komt niet van .card-action zelf maar van de eromheen. v2.3.3 zet daar bovendien height: var(--btn-height) op, wat met box-sizing: border-box de padding opslokt -- vandaar height: auto. Die padding stond op de 16px 24px van Materialize, en dat was te veel: op een kaart met vijf chips gaf dat 53px tussen twee chips en een kaartvoet van 225px. Er pasten er nog maar twee op een regel. Met 8px passen er drie op een regel, staan ze 21px uit elkaar (8 + 8 plus de 5px gap hieronder) en is de kaartvoet 69px in plaats van 225. Niet strakker: deze padding is het aanraakvlak. De chip is 32px hoog, en met 8px erboven en eronder komt de link op precies 48px -- de maat die Material Design aanhoudt en die dit thema elders ook gebruikt. Op 6px werd dat 44px: nog altijd ruim boven de 24px van WCAG 2.5.8, maar onder de eigen norm. */ .card .card-action a { display: inline-block; padding: 8px; height: auto; } /* Materialize trekt de buitenste links in een kaartvoet naar buiten met `margin-left: -1.6rem` op de eerste en `margin-right: -1.6rem` op de laatste. Dat hoort bij zijn eigen tekstlinks met 24px padding: zo ligt de tekst gelijk met de kaartrand. Onze chips staan gecentreerd, dus die uitlijning speelt hier niet. Met de kleinere padding hierboven werden die -22,4px schadelijk. Links trok het de hele rij naar buiten (eerste chip 14px buiten de kaart); rechts was het verraderlijker, want een negatieve rechtermarge verkort de ruimte die de laatste chip opeist -- een rij van 345px 'paste' daardoor in een vak van 334px en brak niet af, om vervolgens 9px buiten de kaart te steken. */ .card .card-action a:first-child { margin-left: 0; } .card .card-action a:last-child { margin-right: 0; } /* v2.3.3 maakt de chip een inline-flex met gap: 8px en vertical-align: top. Die gap maakt elke chip breder dan de natuurlijke spatie tussen icoon en tekst, en top-uitlijning haalt de onderruimte onder de regel weg. */ .chip { line-height: 32px; border-radius: 16px; margin: 0 5px 5px 0; padding: 0 12px; font-size: 13px; display: inline-block; vertical-align: baseline; } /* Tooltip. v2.3.3 stapte over op de Material Design 3-typografietokens en zet font-family op var(--md-sys-typescale-body-small-font-family-name), wat naar Roboto verwijst. Dit thema laadt Roboto niet, dus viel de browser terug op zijn standaardlettertype. inherit pakt de fontstack van de site (de tooltip hangt onder ) en blijft kloppen als je later een ander lettertype kiest. De rest van de maatvoering is de v2.0.3-waarde. */ .material-tooltip { font-family: inherit; font-size: 15px; line-height: 18px; letter-spacing: normal; padding: 10px 8px; border-radius: 2px; } /* Footer. v2.0.3 zette hier de tekstkleur (wit op indigo); v2.3.3 laat dat weg, waardoor koppen zonder eigen class de donkere bodykleur erven en onleesbaar worden. De nieuwe marge en stippellijn horen niet bij dit ontwerp. */ /* margin-top: auto en niet 0. Beide halen de 5rem van v2.3.3 weg, maar auto duwt de footer in de flexkolom van .wrapper naar de onderkant zodra de pagina korter is dan het scherm — zoals bij de 404 en een leeg archief, waar hij anders halverwege bleef zweven met achtergrond eronder. Op langere pagina's is er geen vrije ruimte en gedraagt auto zich als 0. */ .page-footer { color: var(--md-sys-color-on-primary); margin-top: auto; padding-top: 20px; border-top: 0; } /* De twee kopjes in de footer waren h5. Ze staan op élke pagina, dus na een pagina met h1, h2 en h3 sprong de structuur daar naar niveau vijf. Het zijn sectiekoppen van de pagina en dus h2 -- maar wel met een eigen maat: de volle 40px van de schaal zou de footer zwaarder maken dan de inhoud erboven. */ /* De marges horen erbij, niet alleen de maat. Deze koppen waren h5 en zijn h2 geworden om de kopstructuur kloppend te maken -- maar Materialize geeft een h2 fors ruimere standaardmarges dan een h5: gemeten 35,6px erboven en 21,4px eronder, tegen de lijst die daar zelf ook nog 15px bovenop legde. De footer werd daardoor zichtbaar hoger zonder dat er iets bij was gekomen. Deze waarden brengen het blok terug naar de compactheid van voorheen: geen marge boven -- de kolom begint daar -- en een bescheiden gat naar wat volgt. */ .page-footer h2 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); line-height: 1.25; margin: 0 0 .6rem; } /* De lijst eronder legde er nog 15px bovenop; die is niet nodig naast de marge van de kop. */ .page-footer h2 + ul { margin-top: 0; } /* TWEE FUNCTIES BIJ DEZELFDE WERKGEVER Bij Lindenhaeghe staat het bedrijf als kop en staan de functies eronder, aan een verticale lijn met een stip per functie. Die lijn is het hele punt: hij maakt zichtbaar dat het om doorgroei binnen één dienstverband gaat en niet om twee losse banen. De bovenste stip is gevuld en de rest open -- hetzelfde onderscheid dat een tijdlijn maakt tussen 'nu' en 'geweest'. Dat scheelt een woord als "huidige" en werkt ook als je de tekst niet leest. De stippen staan met een negatieve left buiten de lijst. Zou een voorouder ooit overflow: hidden krijgen, dan worden ze afgeknipt. */ .jd-rollen { list-style: none; margin: .6rem 0 1.1rem; padding-left: 1.25rem; /* Niet #c5cae9: dat is de paginakleur en haalt op wit maar 1,62:1 -- de lijn was er wel maar zag je niet. #9fa8da geeft 2,31:1 en gebruikt het thema al voor de randen van de zoekvelden. Bewust niet donkerder: de stippen staan op ruim 4:1 en dragen de betekenis, de lijn verbindt ze alleen. */ border-left: 2px solid #9fa8da; } .jd-rollen > li { position: relative; } .jd-rollen > li + li { margin-top: .9rem; } .jd-rollen > li::before { content: ''; position: absolute; /* 12px stip gecentreerd op een lijn van 2px: halve stip (6px) plus de helft van de lijn (1px) terug vanaf de linkerrand van de tekst. */ left: calc(-1.25rem - 5px); top: .45em; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid #5c6bc0; background-color: #fff; } /* Gevuld betekent 'loopt nu', niet 'staat bovenaan'. Met :first-child kreeg elke werkgever met één functie een gevulde stip, ook de banen die allang voorbij zijn. CSS kan dat verschil niet zien, dus .jd-nu staat in de markup. */ .jd-rollen > li.jd-nu::before { background-color: #3949ab; border-color: #3949ab; } /* Bij één functie valt er niets te verbinden; de lijn zou een streepje naast een losse stip worden. De inspringing blijft wel staan, zodat de functietitels bij alle werkgevers op dezelfde plek beginnen -- dat is het hele punt van deze opzet. Kent een browser :has() niet, dan blijft de lijn overal staan: hinderlijk noch onjuist, alleen wat minder rustig. */ .jd-rollen:not(:has(> li + li)) { border-left-color: transparent; } /* Niet het h4-token uit het typeschema: #about-me h3 hierboven zet alle kopjes in deze sectie op ten hoogste 1.25rem, en met de standaard h4 (1.36rem) werden de functies groter dan de werkgever erboven -- omgekeerde hiërarchie. Een stap kleiner dan de werkgever, en het gewicht een stap lichter: de lijn en de stip maken al duidelijk dat dit kopjes zijn. */ .jd-rollen h4 { font-size: var(--jd-tekst-h6); font-weight: 600; margin: 0; } .jd-rollen p { margin: .1rem 0 0; } /* Profielfoto Over mij. Los van de Materialize-versie: #about-me img krijgt height:100% en de kolom eromheen is een flexbox die meerekt met de tekst ernaast. De bron is 300x300, maar werd zo tot 117x218 uitgerekt - een ovaal in plaats van een cirkel. aspect-ratio houdt hem vierkant, object-fit snijdt bij in plaats van te vervormen, en align-self voorkomt dat flex hem alsnog oprekt. Alleen de directe kindafbeelding: de klantlogo's zitten in een . */ #about-me .col > img.circle { height: auto; aspect-ratio: 1 / 1; object-fit: cover; align-self: flex-start; } /* Header */ .header { display: flex; flex-direction: column; justify-content: center; } /* MEELOPENDE NAVIGATIEBALK Alleen .nav-wrapper blijft tijdens het scrollen staan; de hulpbalk erboven (contact, LinkedIn, e-mailadres) schuift gewoon weg en komt bij terugscrollen vanzelf weer tevoorschijn. WAAROM DE REGEL OP .header STAAT EN NIET OP .nav-wrapper Een sticky element loopt alleen mee binnen de box van zijn ouder. De ouder van .nav-wrapper is