/* Theme Name: DreamGlow Theme URI: https://dreamglow.nl Author: DreamGlow Author URI: https://dreamglow.nl Description: Het blokthema van DreamGlow. Kleuren, letters en maten staan in theme.json; de bedrijfslogica en de eigen blokken staan in de Dreamglow plugin. Version: 0.1.0 Requires at least: 7.0 Tested up to: 7.1 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: dreamglow Update URI: false */ /* * Wat hier staat, past niet in theme.json (ontwerpsysteem, sectie 8, * docs/superpowers/specs/2026-09-27-dreamglow-ontwerpsysteem.md). Vier * dingen, en geen losse getallen: alle waarden staan in theme.json. * * 1. Namen voor de plugin: `--dg-max` en `--dg-gutter`, die de cookiemelding * als schermbrede strook gebruikt. * 2. De schakelaar. theme.json kent geen mediaquery's; de waarden per * breedte staan er wel in (custom), de keuze ertussen valt hier. * 3. Twee eigenschappen van de letters die theme.json niet kent. * 4. Het ritme: header, main en footer sluiten zonder tussenruimte aan. */ :root { --dg-max: var(--wp--style--global--wide-size); /* De plugin zet --dg-gutter als padding op een schermbrede strook, zoals de cookiemelding. Zo begint die strook op dezelfde lijn als de pagina: de zijmarge uit 2, en op brede schermen de helft van wat er naast de 1320 px aan inhoud overblijft. */ --dg-gutter: max(var(--dg-zijmarge), (100% - var(--dg-max)) / 2); } /* * 2. De schakelaar: één :root-blok met elke --dg-* op zijn stand smal of * basis, en per breakpoint één mediaquery die ze omzet. Mobile-first: * elke mediaquery geldt vanaf zijn breedte. De vorm is die van WordPress, * (width > 1023px) en niet (min-width: 1024px): bij zoomen kan een * venster 1023,5 px breed zijn, en dan gold tussen 1023 en 1024 geen van * beide. * * - De zijmarge: 5vw tot en met 1023 px, 3vw daarboven. Dat is ontwerp- * regel 1, één containerformule: pagina, header, footer en cookie- * melding houden dezelfde marge, en de inhoud wordt nooit breder dan * wideSize. De rootpadding in theme.json is var(--dg-zijmarge); * WordPress zet die op het buitenste blok met .has-global-padding. * Ontbreekt deze naam, dan valt die padding stil terug op 0. * ContainerTest in devenv/tests/test_blok_toegankelijkheid.py meet dat. * - De rollen: een tekst noemt zijn rol, nooit een maat. Eén sprong bij * 1024 px; de kopladder van mijn-shop (768, 900, 1024, 1200) is weg. * theme.json zet de rollen op h1 tot en met h4, en xl op h5 en h6. Een * selector op een kop hoort hier niet: :root h1 (specificiteit 0,1,1) * wint van de h1{…} van de Site Editor (0,0,1), en dan deed een * kopgrootte die de eigenaar in Stijlen kiest vanaf 1024 px niets. * KopselectorTest in test_blok_fundament.py bewaakt de selectors, * RollenTest in test_blok_toegankelijkheid.py de maten. * * - Voor de latere deelprojecten (groep D): de kaart, het productgrid, * de modulepadding en de vaste beeldhoogtes. Nog niets gebruikt ze; * 1b, 2/3, 4/7 en 5/6 lezen ze als --dg-*. Het grid staat tot en met * 450 px van rand tot rand (besluit van de eigenaar): daarvoor is er * --dg-grid-uitloop, min de zijmarge tot en met 450 en daarboven 0. * - Vanaf 2560 px is de container 1920 breed: wideSize schakelt mee, en * daarmee --dg-max en --dg-gutter. * * Elke naam is --dg- plus het pad in custom: custom.grid.kolommen wordt * --dg-grid-kolommen. SchakelaarTest in test_blok_fundament.py * controleert dat elk token met standen hier zijn naam heeft, in de * juiste mediaquery; SchakelaarTest in test_blok_toegankelijkheid.py * meet het in de browser. */ :root { --dg-zijmarge: var(--wp--custom--zijmarge--smal); --dg-rol-hero: var(--wp--custom--rol--hero--smal); --dg-rol-paginatitel: var(--wp--custom--rol--paginatitel--smal); --dg-rol-winkeltitel: var(--wp--custom--rol--winkeltitel--smal); --dg-rol-sectietitel: var(--wp--custom--rol--sectietitel--smal); --dg-rol-tussenkop: var(--wp--custom--rol--tussenkop--smal); --dg-rol-productnaam: var(--wp--custom--rol--productnaam--smal); --dg-rol-koopbalk: var(--wp--custom--rol--koopbalk--smal); --dg-rol-eyebrow: var(--wp--custom--rol--eyebrow--smal); --dg-rol-oude-prijs: var(--wp--custom--rol--oude-prijs--smal); --dg-kaart-inset: var(--wp--custom--kaart--inset--smal); --dg-kaart-carrousel: var(--wp--custom--kaart--carrousel--smal); --dg-grid-kolommen: var(--wp--custom--grid--kolommen--basis); --dg-grid-kolomafstand: var(--wp--custom--grid--kolomafstand--basis); --dg-grid-rijafstand: var(--wp--custom--grid--rijafstand--basis); /* Een grid binnen de container krijgt margin-inline: var(--dg-grid-uitloop): tot en met 450 px van rand tot rand, daarboven gelijk met titel en werkbalk. */ --dg-grid-uitloop: var(--wp--custom--grid--uitloop--basis); --dg-module-carrousel: var(--wp--custom--module--carrousel--smal); --dg-module-beeld-tekst: var(--wp--custom--module--beeld-tekst--smal); --dg-module-uitgelicht: var(--wp--custom--module--uitgelicht--smal); --dg-module-tegels: var(--wp--custom--module--tegels--basis); --dg-module-tekstband: var(--wp--custom--module--tekstband--smal); --dg-module-productgrid: var(--wp--custom--module--productgrid--smal); --dg-module-productdetails: var(--wp--custom--module--productdetails--smal); --dg-hoogte-hero: var(--wp--custom--hoogte--hero--basis); --dg-hoogte-beeldtekst: var(--wp--custom--hoogte--beeldtekst--basis); --dg-hoogte-galerij: var(--wp--custom--hoogte--galerij--smal); --dg-hoogte-tegel: var(--wp--custom--hoogte--tegel--basis); --dg-hoogte-vol-beeld: var(--wp--custom--hoogte--vol-beeld--smal); /* Voor 1b (header en navigatie): header-rij 2, 56 tot en met 1279 en 64 vanaf 1280 px. */ --dg-header-rij-2: var(--wp--custom--header--rij-2--basis); /* Geen smal/breed: de aanraakmaat wisselt niet met de breedte maar met het aanwijsapparaat. Zie het blok (pointer: coarse) verderop. */ --dg-raakvlak: var(--wp--custom--raakvlak); } @media (width > 450px) { :root { --dg-grid-uitloop: var(--wp--custom--grid--uitloop--vanaf-451); } } @media (width > 639px) { :root { --dg-grid-kolommen: var(--wp--custom--grid--kolommen--vanaf-640); --dg-grid-kolomafstand: var(--wp--custom--grid--kolomafstand--vanaf-640); --dg-grid-rijafstand: var(--wp--custom--grid--rijafstand--vanaf-640); } } @media (width > 767px) { :root { --dg-hoogte-hero: var(--wp--custom--hoogte--hero--vanaf-768); --dg-hoogte-tegel: var(--wp--custom--hoogte--tegel--vanaf-768); } } @media (width > 1023px) { :root { --dg-zijmarge: var(--wp--custom--zijmarge--breed); --dg-rol-hero: var(--wp--custom--rol--hero--breed); --dg-rol-paginatitel: var(--wp--custom--rol--paginatitel--breed); --dg-rol-winkeltitel: var(--wp--custom--rol--winkeltitel--breed); --dg-rol-sectietitel: var(--wp--custom--rol--sectietitel--breed); --dg-rol-tussenkop: var(--wp--custom--rol--tussenkop--breed); --dg-rol-productnaam: var(--wp--custom--rol--productnaam--breed); --dg-rol-koopbalk: var(--wp--custom--rol--koopbalk--breed); --dg-rol-eyebrow: var(--wp--custom--rol--eyebrow--breed); --dg-rol-oude-prijs: var(--wp--custom--rol--oude-prijs--breed); --dg-kaart-inset: var(--wp--custom--kaart--inset--breed); --dg-kaart-carrousel: var(--wp--custom--kaart--carrousel--breed); --dg-grid-kolomafstand: var(--wp--custom--grid--kolomafstand--vanaf-1024); --dg-module-carrousel: var(--wp--custom--module--carrousel--breed); --dg-module-beeld-tekst: var(--wp--custom--module--beeld-tekst--breed); --dg-module-uitgelicht: var(--wp--custom--module--uitgelicht--breed); --dg-module-tegels: var(--wp--custom--module--tegels--vanaf-1024); --dg-module-tekstband: var(--wp--custom--module--tekstband--breed); --dg-module-productgrid: var(--wp--custom--module--productgrid--breed); --dg-module-productdetails: var(--wp--custom--module--productdetails--breed); --dg-hoogte-galerij: var(--wp--custom--hoogte--galerij--breed); --dg-hoogte-tegel: var(--wp--custom--hoogte--tegel--vanaf-1024); --dg-hoogte-vol-beeld: var(--wp--custom--hoogte--vol-beeld--breed); } } @media (width > 1279px) { :root { --dg-grid-kolommen: var(--wp--custom--grid--kolommen--vanaf-1280); --dg-header-rij-2: var(--wp--custom--header--rij-2--vanaf-1280); } } @media (width > 1439px) { :root { --dg-module-tegels: var(--wp--custom--module--tegels--vanaf-1440); --dg-hoogte-hero: var(--wp--custom--hoogte--hero--vanaf-1440); --dg-hoogte-tegel: var(--wp--custom--hoogte--tegel--vanaf-1440); } } /* Vanaf 2560 gaat deze regel vóór een wideSize uit de Site Editor; zo vraagt D1 van het ontwerpsysteem het. */ @media (width > 2559px) { :root { --wp--style--global--wide-size: var(--wp--custom--container--xxl); /* Op 2560 was de hero 4,57:1; 720 geeft 3,6:1, zoals Rituals tot 1920 (13-10-2026, L-17). */ --dg-hoogte-hero: var(--wp--custom--hoogte--hero--vanaf-2560); /* Het beeld naast de tekst in 16:9: in 4:3 werd het 1080 hoog, hoger dan het scherm (13-10-2026, L-15). */ --dg-hoogte-beeldtekst: var(--wp--custom--hoogte--beeldtekst--vanaf-2560); } } /* * De aanraakmaat --dg-raakvlak wisselt niet met de breedte maar met het * aanwijsapparaat: 40 px (custom.raakvlak) voor een precieze muis of * trackpad, 44 px (custom.raakvlak-grof) voor een vinger. Daarom staat hij * niet in de schakelaar hierboven, met zijn smal/breed-standen, maar in een * eigen mediaquery op (pointer: coarse) — de enige vorm in dit bestand die * geen breedte toetst. test_mediaquerys_in_de_vorm_van_wordpress in * test_blok_fundament.py staat naast (width > Npx) precies deze ene andere * vorm toe. */ @media (pointer: coarse) { :root { --dg-raakvlak: var(--wp--custom--raakvlak-grof); } } /* * 3. De letters. Eén gewicht per letter: de fontFace in theme.json noemt * alleen 500 (Cormorant) en 400 tot en met 500 (Jost). Vraagt iets een * ander gewicht, zoals strong in een kop, dan maakt de browser het niet * zelf vet. Cijfers als kapitaalcijfers: anders zet Cormorant mediëvale * cijfers, en hangt de 9 van €12,99 onder de regel. */ html { font-synthesis-weight: none; } body { font-variant-numeric: lining-nums proportional-nums; /* Dunnere weergave op macOS, zoals Rituals (13-10-2026, T-46). */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Vet is 500, het zwaarste gewicht dat er is (ontwerpsysteem §2); de browser gaf strong 700 (13-10-2026, T-06). */ strong, b { font-weight: 500; } /* * 4. Het verticale ritme zit in de modules; paginasecties hebben zelf geen * marge. WordPress zet de blockGap (16) ook tussen header, main en * footer, met :where(.wp-site-blocks) > * (specificiteit 0). Dan telt die * 16 overal mee, en komen er witte strepen tussen crème vlakken. RitmeTest * in test_blok_toegankelijkheid.py meet het. */ .wp-site-blocks > * { margin-block-start: 0; } :focus-visible { outline: var(--wp--custom--focus-ring); outline-offset: var(--wp--custom--focus--afstand); }