/* =========================================================================== hsb-merk.css — het logo, de iconen en de dag/nacht-schakeling =========================================================================== WAT DIT BESTAND DOET 1. Het logo in de menubalk: icoon plus woordmerk, met de witte variant zodra de pagina donker staat. 2. De basisopmaak voor de inline SVG-iconen uit includes/iconen.php. 3. De kleurtokens voor dag en nacht. HOE DE DAG/NACHT-SCHAKELING WERKT Er zijn twee manieren waarop de pagina donker wordt: a. De bezoeker heeft zijn systeem op donker staan. -> @media (prefers-color-scheme: dark) b. De bezoeker zet het zelf om met een knop. -> of data-thema="licht" De handmatige keuze wint altijd van de systeemkeuze. Daarom staat de media query met :root:not([data-thema="licht"]) ervoor: heeft iemand bewust licht gekozen, dan laat het systeem hem met rust. GEEN style-attributen Alles staat hier. In de templates hoort geen enkel style="" te staan. =========================================================================== */ /* --------------------------------------------------------------------------- 1. Kleuren --------------------------------------------------------------------------- */ :root { --merk-blauw: #103856; --merk-blauw-diep: #0C2A41; --merk-oranje: #ED6E26; --merk-oranje-licht: #F28B4F; /* Vlakken en tekst, in dagstand. */ --vlak: #FFFFFF; --vlak-zacht: #F4F6F8; --tekst: #10212E; --tekst-zacht: #5A6B7A; --lijn: #E2E7EC; /* De huisvorm. Alleen voor vlakken waar inhoud in staat. */ --radius-card: 24px 2px 24px 2px; --radius-large: 40px 2px 40px 2px; /* Bediening: vier gelijke hoeken. */ --radius-button: 12px; --radius-chip: 999px; } @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) { --vlak: #0E1C27; --vlak-zacht: #152836; --tekst: #E8EDF2; --tekst-zacht: #9DB0C0; --lijn: #22394B; } } :root[data-thema="donker"] { --vlak: #0E1C27; --vlak-zacht: #152836; --tekst: #E8EDF2; --tekst-zacht: #9DB0C0; --lijn: #22394B; } /* --------------------------------------------------------------------------- 2. Het logo --------------------------------------------------------------------------- In de balk staan twee bestanden: het icoon met de twee tekstballonnen en het woordmerk. Op een telefoon blijft alleen het icoon staan — het woordmerk is daar te breed en het icoon is herkenbaar genoeg. Elk logo staat er twee keer in, in kleur en in wit. Dat is bewust: een kan zijn kleur niet van de pagina overnemen, dus omwisselen is de enige manier die in elke browser werkt en die geen flits geeft. --------------------------------------------------------------------------- */ .merk { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; line-height: 0; } /* --------------------------------------------------------------------------- WAT HIER MIS GING, EN WAAROM HET NU ANDERS STAAT --------------------------------------------------------------------------- Hierboven stonden het beeldmerk en het woordmerk als twee dingen die naast elkaar horen: eerst het icoon, dan de letters ernaast. Zo was het oude logo in de menubalk ook opgebouwd. Maar sprekersburo.svg is het VOLLEDIGE logo: de twee tekstballonnen zitten er al in. Door het icoon ernaast te zetten stonden er op een breed scherm twee beeldmerken naast elkaar, met de letters erachter. Het zijn dus geen twee delen die samen één logo vormen, maar twee complete logo's: een smalle (alleen het beeldmerk) en een brede (beeldmerk plus letters). Er hoort er precies één zichtbaar te zijn. Twee assen bepalen welke: breed of smal -> het volledige logo, of alleen het beeldmerk licht of donker -> de variant in kleur, of die in wit Vier combinaties, en hieronder staat elke combinatie één keer. Alles staat eerst uit; daarna wordt er precies één aangezet. Dat leest vervelender dan een paar uitzonderingen, maar het is de enige vorm waarbij je niet opnieuw twee logo's tegelijk kunt krijgen. --------------------------------------------------------------------------- */ .merk__icoon, .merk__woord { display: none; width: auto; flex: 0 0 auto; } .merk__icoon { height: 30px; } .merk__woord { height: 34px; } /* 1. Breed en licht: het volledige logo in kleur. */ .merk__woord--kleur { display: block; } /* 2. Breed en donker: hetzelfde logo, in wit. Drie manieren waarop het donker kan zijn: de bezoeker heeft zelf donker gekozen, zijn systeem staat op donker en hij heeft niets gekozen, of het logo staat op een donker vlak (de voettekst, een hero). */ :root[data-thema="donker"] .merk__woord--kleur, .op-donker .merk__woord--kleur { display: none; } :root[data-thema="donker"] .merk__woord--wit, .op-donker .merk__woord--wit { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .merk__woord--kleur { display: none; } :root:not([data-thema="licht"]) .merk__woord--wit { display: block; } } /* 3 en 4. Smal: alleen het beeldmerk, want de letters worden dan onleesbaar klein en nemen de ruimte in die het menu nodig heeft. */ @media (max-width: 575.98px) { .merk__woord--kleur, .merk__woord--wit, :root[data-thema="donker"] .merk__woord--wit, .op-donker .merk__woord--wit { display: none; } .merk__icoon--kleur { display: block; } :root[data-thema="donker"] .merk__icoon--kleur, .op-donker .merk__icoon--kleur { display: none; } :root[data-thema="donker"] .merk__icoon--wit, .op-donker .merk__icoon--wit { display: block; } } @media (max-width: 575.98px) and (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .merk__woord--wit { display: none; } :root:not([data-thema="licht"]) .merk__icoon--kleur { display: none; } :root:not([data-thema="licht"]) .merk__icoon--wit { display: block; } } /* --------------------------------------------------------------------------- 3. De iconen --------------------------------------------------------------------------- De SVG's uit includes/iconen.php komen binnen met stroke="currentColor", dus ze nemen vanzelf de kleur van de tekst eromheen over. Hier staat alleen wat de SVG zelf niet kan weten: hoe hij op de regel moet staan. vertical-align: -0.18em zet het icoon op dezelfde hoogte als de letters. Zonder die regel hangt hij net iets te hoog naast de tekst. --------------------------------------------------------------------------- */ .icoon { display: inline-block; vertical-align: -0.18em; flex: 0 0 auto; } .icoon--oranje { color: var(--merk-oranje); } .icoon--zacht { color: var(--tekst-zacht); } /* Een icoon dat met de knop meedraait, bijvoorbeeld een pijl die vooruit schuift zodra je eroverheen gaat. */ .icoon--beweegt { transition: transform .2s ease; } a:hover > .icoon--beweegt, button:hover > .icoon--beweegt { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .icoon--beweegt { transition: none; } } /* Merkiconen zijn gevuld in plaats van lijnen; die hebben geen stroke. */ .merk-icoon { display: inline-block; vertical-align: -0.2em; flex: 0 0 auto; } /* --------------------------------------------------------------------------- 4. Toestanden die vroeger een tweede icoon waren --------------------------------------------------------------------------- Bij een icoonfont wisselde JavaScript van bi-star naar bi-star-fill: een ander teken uit het font. Bij een SVG verandert de vorm niet, alleen de vulling. Daarom deze twee klassen; het JavaScript zet ze om. fill werkt hier omdat een CSS-regel het fill-attribuut in de SVG overschrijft. Lucide levert fill="none", wij zetten er currentColor overheen. --------------------------------------------------------------------------- */ .icoon--vol { fill: currentColor; } /* Het pijltje van "toon alle sprekers" draait om in plaats van te wisselen. */ .icoon--om { transform: rotate(180deg); } .icoon, .icoon--om { transition: transform .2s ease; } @media (prefers-reduced-motion: reduce) { .icoon, .icoon--om { transition: none; } } /* Het hartje en de ster in de lijsten. */ .hart.icoon--vol, .ster.icoon--vol { fill: currentColor; } /* Sterren in een waardering: de lege sterren grijs, de volle oranje. */ .ster { color: var(--merk-oranje); } /* Het grote aanhalingsteken bij een citaat. */ .icoon--citaat { color: #d2d2d7; } /* Het aanhalingsteken als waterteken op een donker vlak. */ .icoon--waterteken { color: #fff; opacity: .5; } /* Het kruisje in een filterchip. */ .chip-sluit { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--radius-chip); background: rgba(0, 0, 0, .08); color: inherit; cursor: pointer; } .chip-sluit:hover, .chip-sluit:focus-visible { background: var(--merk-oranje); color: #fff; } /* --------------------------------------------------------------------------- 5. Het kruimelpad --------------------------------------------------------------------------- Het scheidingsteken was een letter uit het bootstrap-icons-font (\f231). Dat font is weg, dus hier staat dezelfde chevron als masker. Zo neemt hij nog steeds de kleur over en is hij scherp op elk scherm. --------------------------------------------------------------------------- */ .breadcrumb-item + .breadcrumb-item::before { content: ""; display: inline-block; width: .72em; height: .72em; margin-right: .15em; vertical-align: -0.05em; background-color: currentColor; -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; font-size: 1em; } :root { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }