/* * De opmaak van geschreven inhoud. * * Dit bestand wordt op twee plekken geladen: op de site zelf en in de * blokkeneditor. Daardoor is wat je tijdens het schrijven ziet hetzelfde als * wat de bezoeker krijgt. * * Op de site zit geschreven tekst in .prose — de sjablonen zetten * post-content daarin. In de editor bestaat die omhulling niet, dus daar * gelden dezelfde regels op de schrijfruimte zelf. * * Let op: de breedte en de grondkleur staan bewust alléén op .prose. In de * editor is het canvas óók de homepage, en die is opgebouwd uit brede * secties; zou de leeskolom daar gelden, dan stond het hele ontwerp klem. */ /* Alle variabelen ook in de editor. WordPress zet editorstijlen binnen .editor-styles-wrapper, en een selector die die klasse al bevat laat het met rust — daarom staat dit blok hier en niet op :root. */ .editor-styles-wrapper { --bg: #070d16; --fg: #eef3fa; --muted: #8b9aad; --dim: #5f6f81; --line: rgba(255, 255, 255, .1); --glass: rgba(255, 255, 255, .045); --panel: rgba(13, 22, 32, .92); --read: #b4c2d2; --o1: #3d9bd4; --o2: #c8912a; --o3: #4a9e57; --o4: #8e44c8; --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --font-mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace; --app-bg: #10202c; --app-line: #24404f; --app-fg: #cfe0ec; --app-muted: #7e97a8; --app-red: #e0655c; --onair: #d63a2f; --next: #37c46a; --shell: 1240px; --gutter: 28px; background: var(--bg); color: var(--read); color-scheme: dark; } /* De leeskolom. Alleen op de site: zie de opmerking bovenaan. */ :is(.prose, .is-style-prose) { font-family: var(--font-text); font-size: 16px; line-height: 1.75; color: var(--read); } /* * De leesbreedte ligt op de regels, niet op de kolom. * * WordPress centreert elk kind van een constrained lay-out met * `margin-left: auto !important`. Gaf je .prose zelf een breedte van 72ch, * dan schoof die kolom naar het midden terwijl de kop erboven de volle * inhoudsbreedte houdt — en dan staat de tekst ingesprongen ten opzichte * van de titel. Dat met `margin-left: 0` terugduwen maakt het erger: dan * springt de kolom naar de rand van het vénster, buiten de band waar de * kop op staat. * * Dus houdt .prose de volle breedte — en dus dezelfde linkerrand als de kop * — en krijgen de regels erbinnen hun maat. Het blok .prose staat daarom in * de sjablonen op een gewone (flow) lay-out, zodat WordPress zijn kinderen * niet alsnog centreert. */ /* * Geschreven tekst loopt mee met de kolom waarin hij staat — even breed als * de kop erboven en als de balken van de kop- en voettekst. Een eigen, * smallere leesbreedte is er bewust niet: die maakte de tekst zichtbaar * smaller dan de rest van de pagina. * * Wil je toch een kortere leesregel, dan is dat één regel CSS: zet hier * bijvoorbeeld `.prose > * { max-width: 72ch; }` terug. Doe dat niet op .prose * zelf — zie de opmerking hieronder bij .prose-panel. */ /* Alleen dit blijft zinnig: iets dat smaller is dan de kolom en gecentreerd moet staan. Een aparte breedte voor alignwide zou nu juist een versmalling zijn, want de tekst vult de kolom al. */ :is(.prose, .is-style-prose) > .aligncenter { margin-inline: auto; } /* * Een stuk tekst in een eigen venster, óp het leesvel. * * Het vel onder de pagina zorgt al dat alles leesbaar is; dit vak is voor het * geval dat een stuk tekst zich moet losmaken van de rest — de forumintro, of * een blok waar je in de editor "Reading panel" op kiest. * * Het paneel krijgt geen eigen breedte mee: het vult de kolom waarin het * staat. Zou je het smaller maken, dan centreert de constrained lay-out van * WordPress het met `margin-left: auto !important` en staat het scheef onder * de kop. Wil je het smaller, doe dat dan op een omhulling met een gewone * (flow) lay-out — zoals .article in het berichtsjabloon. * * Dit is géén --panel. Het leesvel onder de hele pagina (zie theme.css) is al * --panel; zou dit vak dezelfde kleur krijgen, dan zag je het niet meer staan. * --glass tilt het een slagje op boven het vel, en dat is precies wat het moet * doen: een stuk tekst dat apart staat van de rest — de forumintro, of een * blok waar je in de editor "Reading panel" op hebt gezet. * * De schaduw doet het werk dat de rand alleen niet kan: een streepje licht op * de bovenrand tilt het vak van het vel af, de zachte slagschaduw eronder * houdt het daar. Dat scheelt meer dan een zwaardere lijn, die het venster * juist als een omkaderd vak laat lezen. */ :is(.prose-panel, .is-style-prose-panel) { background: var(--glass); border: 1px solid var(--line); /* 12px is de maat die .card en het downloadpaneel in de portal ook gebruiken; een eigen 16px maakte dit het enige afwijkende vlak. */ border-radius: 12px; padding: 44px 48px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 18px 50px -24px rgba(0, 0, 0, .75); } :is(.prose-panel, .is-style-prose-panel) > :first-child { margin-top: 0; } :is(.prose-panel, .is-style-prose-panel) > :last-child { margin-bottom: 0; } /* Een lege pagina of een berichtenpagina zonder introtekst zou anders een leeg vak laten zien. post-content zet alles in blokken, dus "geen enkel element erin" betekent hier: er staat niets. */ :is(.prose-panel, .is-style-prose-panel):not(:has(*)) { display: none; } @media (max-width: 900px) { :is(.prose-panel, .is-style-prose-panel) { padding: 34px 32px; } } @media (max-width: 620px) { :is(.prose-panel, .is-style-prose-panel) { padding: 24px 22px; border-radius: 12px; } } :where(.prose, .is-style-prose, .editor-styles-wrapper) > * + * { margin-top: 1.1em; } :where(.prose, .is-style-prose, .editor-styles-wrapper) h1, :where(.prose, .is-style-prose, .editor-styles-wrapper) h2, :where(.prose, .is-style-prose, .editor-styles-wrapper) h3, :where(.prose, .is-style-prose, .editor-styles-wrapper) h4, :where(.prose, .is-style-prose, .editor-styles-wrapper) h5, :where(.prose, .is-style-prose, .editor-styles-wrapper) h6 { color: var(--fg); font-family: var(--font); line-height: 1.25; letter-spacing: -.02em; } :is(.prose, .is-style-prose) h2 { font-size: 26px; font-weight: 700; margin-top: 1.7em; } :is(.prose, .is-style-prose) h3 { font-size: 19px; font-weight: 600; margin-top: 1.5em; } :is(.prose, .is-style-prose) h4 { font-size: 16.5px; font-weight: 600; margin-top: 1.4em; } :where(.prose, .is-style-prose, .editor-styles-wrapper) a { color: var(--o1); } :where(.prose, .is-style-prose, .editor-styles-wrapper) strong { color: var(--fg); } :where(.prose, .is-style-prose, .editor-styles-wrapper) ul, :where(.prose, .is-style-prose, .editor-styles-wrapper) ol { padding-left: 22px; } :where(.prose, .is-style-prose, .editor-styles-wrapper) li + li { margin-top: .4em; } :where(.prose, .is-style-prose, .editor-styles-wrapper) blockquote { border-left: 2px solid var(--o1); padding-left: 16px; margin-left: 0; color: var(--fg); } :where(.prose, .is-style-prose, .editor-styles-wrapper) code { font-family: var(--font-mono); font-size: .9em; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; } :where(.prose, .is-style-prose, .editor-styles-wrapper) pre { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 10px; padding: 16px; overflow-x: auto; color: var(--fg); } :where(.prose, .is-style-prose, .editor-styles-wrapper) pre code { background: none; border: 0; padding: 0; } :where(.prose, .is-style-prose, .editor-styles-wrapper) img { border-radius: 10px; max-width: 100%; height: auto; } :where(.prose, .is-style-prose, .editor-styles-wrapper) figure { margin-inline: 0; } :where(.prose, .is-style-prose, .editor-styles-wrapper) figcaption { font-size: 13px; color: var(--dim); margin-top: .6em; } :where(.prose, .is-style-prose, .editor-styles-wrapper) table { width: 100%; border-collapse: collapse; } :where(.prose, .is-style-prose, .editor-styles-wrapper) th, :where(.prose, .is-style-prose, .editor-styles-wrapper) td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; } :where(.prose, .is-style-prose, .editor-styles-wrapper) hr, :where(.prose, .is-style-prose, .editor-styles-wrapper) .wp-block-separator { border: 0; border-top: 1px solid var(--line); } /* Een knop binnen geschreven tekst krijgt dezelfde vorm als de knoppen in de secties, zonder dat je er een blokstijl voor hoeft te kiezen. */ :is(.prose, .is-style-prose) .wp-block-button__link { background: linear-gradient(100deg, var(--o1), #6ab8e8); color: #04121d; border-radius: 10px; padding: 12px 24px; font-weight: 600; text-decoration: none; } /* De paginatitel in dezelfde stijl als de kop op de site. */ .editor-styles-wrapper .editor-post-title__input { color: var(--fg); font-family: var(--font); font-size: clamp(27px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }