/* Verse by Verse — gedeelde stijl. Drie standen: licht, donker, en "systeem" (dan volgt de pagina de voorkeur van het toestel). De keuze staat als data-theme op en wordt vóór het tekenen gezet, zodat er geen flits is. */ :root { --paper: #ffffff; --raised: #f7f7f6; --ink: #121212; --soft: #6b6b6b; --faint: #9e9e9e; --rule: #e2e2e0; color-scheme: light; } /* Geen keuze gemaakt: volg het toestel. De guard zorgt dat een uitdrukkelijke keuze voor licht wint van een donker toestel. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0b0b0b; --raised: #161616; --ink: #ebebeb; --soft: #9e9e9e; --faint: #6b6b6b; --rule: #292929; color-scheme: dark; } } /* En uitdrukkelijk donker wint van een licht toestel. */ :root[data-theme="dark"] { --paper: #0b0b0b; --raised: #161616; --ink: #ebebeb; --soft: #9e9e9e; --faint: #6b6b6b; --rule: #292929; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } main { max-width: 40rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; } header { display: flex; align-items: center; gap: .9rem; /* Op een heel smal scherm zakt de schakelaar naar een eigen regel in plaats van de naam in tweeën te breken. */ flex-wrap: wrap; row-gap: .8rem; margin-bottom: 3.5rem; } header .mark { width: 44px; height: 44px; flex: none; } header .name { font-weight: 600; color: var(--soft); white-space: nowrap; } h1 { font: 400 2.4rem/1.15 Georgia, "Times New Roman", serif; margin: 0 0 1rem; letter-spacing: -.01em; text-wrap: balance; } h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 2.5rem 0 .6rem; } p { margin: 0 0 1rem; } p.lead { font-size: 1.15rem; color: var(--soft); margin-bottom: 2.5rem; } p.date { color: var(--soft); margin-bottom: 2rem; } .verse { font: 400 1.7rem/1.35 Georgia, "Times New Roman", serif; margin-bottom: .4rem; } .ref { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 3rem; } ul { padding-left: 1.1rem; margin: 0 0 1rem; } li { margin: .3rem 0; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; } footer { margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: .9rem; color: var(--soft); display: flex; gap: 1.2rem; flex-wrap: wrap; } /* De schakelaar. Staat in de HTML met `hidden`; het scriptje in de haalt dat weg, zodat wie geen JavaScript heeft geen dode knop ziet. */ /* Zonder deze regel wint `display:flex` van het `hidden`-attribuut, en zou wie geen JavaScript heeft een knop zien die niets doet. */ .theme[hidden] { display: none; } .theme { margin-left: auto; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); } .theme button { appearance: none; border: 0; background: none; color: var(--faint); padding: 5px 8px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; line-height: 0; } .theme button:hover { color: var(--soft); } .theme button[aria-checked="true"] { background: var(--raised); color: var(--ink); } .theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: no-preference) { .theme button { transition: color .15s, background-color .15s; } } @media (max-width: 26rem) { header { gap: .7rem; } header .name { font-size: .95rem; } h1 { font-size: 2rem; } } /* Schermen uit de app: een rij die zijwaarts scrolt, elk beeld op telefoonbreedte. De beelden zijn 600 px breed voor scherpe weergave op 300 css-px. */ .shots { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem 0 1rem; margin: 0 -1.5rem 2rem; padding-left: 1.5rem; padding-right: 1.5rem; scrollbar-width: thin; } .shots figure { flex: 0 0 auto; width: 240px; margin: 0; scroll-snap-align: start; } .shots img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08); background: var(--raised); } .shots figcaption { font-size: .85rem; color: var(--soft); margin-top: .6rem; line-height: 1.4; } @media (min-width: 40rem) { .shots figure { width: 260px; } }