/** * ECUE — prose. * ============================================================================= * Typography for whatever Gutenberg puts inside a page or an article. * * The point of this file: a coworker writing a page should never have to pick a * colour, a font, a size or a width. They write a heading, a paragraph, a list, * an image with a caption — and it comes out looking like the approved design. * Everything below is keyed off `.ec-prose`, so nothing here can leak into the * header, the footer or the listings. * * Widths follow the design's containers: body text runs at --container-text, * "wide" images step out to --container-max, "full" goes edge to edge. * * @package ecue */ .ec-prose { padding-block: var(--space-9) var(--section-y); /* * Body colour is set once here and inherited, NOT repeated on p and li. * * That matters: WordPress writes a block's chosen colour as a class on the * element itself (`has-stone-color`), which is a single class — so a rule * like `.ec-prose p { color: … }` is more specific and would silently win, * and every colour an editor picked would be ignored. Inheritance loses to * any direct rule, so the editor's choice always applies. * * WordPress does mark its own preset classes !important, which would also * have covered this. Not depending on that is cheaper than finding out. */ color: var(--text-body); } /* ----------------------------------------------------------------------------- * Measure * ----------------------------------------------------------------------------- * Every direct child sits in the reading column by default. The two alignment * classes WordPress emits widen it. This is the only place widths are decided. * -------------------------------------------------------------------------- */ .ec-prose > * { max-width: var(--container-text); margin-inline: auto; } .ec-prose > .alignwide { max-width: var(--container-max); } /* * Full-bleed. Also catches .ec-band, the wrapper every shipped pattern uses, * so a pattern is edge to edge whether it was dropped on a page (inside a * container) or on the homepage (already full width) — in the second case the * margin computes to zero on its own. * * `width: auto` rather than `100vw`: 100vw includes the scrollbar's width and * would push the page sideways by however wide the scrollbar is. */ .ec-prose > .alignfull, .ec-prose > .ec-band { max-width: none; margin-inline: calc(50% - 50vw); width: auto; } /* Vertical rhythm comes from one gap rule, not per-element margins. */ .ec-prose > * + * { margin-block-start: var(--space-7); } /* * Except before a section band. A band already carries its own generous * padding, so the paragraph rhythm on top of it stacks into a visible hole * between sections — and two adjacent bands are meant to meet on a hairline. */ .ec-prose > * + .ec-band { margin-block-start: 0; } /* ----------------------------------------------------------------------------- * Text * -------------------------------------------------------------------------- */ .ec-prose p { font: var(--fw-regular) var(--fs-body-lg) / 1.7 var(--font-text); } .ec-prose a { color: var(--text-strong); text-decoration-color: var(--stone-300); } .ec-prose a:hover { color: var(--ember-700); text-decoration-color: currentColor; } .ec-prose strong { font-weight: var(--fw-semibold); color: var(--text-strong); } /* ----------------------------------------------------------------------------- * Headings * ----------------------------------------------------------------------------- * An article's own H1 is printed by the template, so inside prose the editor's * top level is H2. They get extra space above, which is why they are exempt * from the shared rhythm rule. * -------------------------------------------------------------------------- */ .ec-prose h2 { font: var(--fw-bold) var(--fs-h2) / var(--lh-heading) var(--font-display); letter-spacing: var(--tracking-heading); color: var(--text-strong); } .ec-prose h3 { font: var(--fw-semibold) var(--fs-h3) / var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-heading); color: var(--text-strong); } .ec-prose h4 { font: var(--fw-semibold) var(--fs-h4) / var(--lh-snug) var(--font-display); color: var(--text-strong); } .ec-prose > h2 + *, .ec-prose > h3 + *, .ec-prose > h4 + * { margin-block-start: var(--space-5); } .ec-prose > * + h2 { margin-block-start: var(--space-9); } .ec-prose > * + h3, .ec-prose > * + h4 { margin-block-start: var(--space-8); } /* ----------------------------------------------------------------------------- * Lists * -------------------------------------------------------------------------- */ .ec-prose ul, .ec-prose ol { display: grid; gap: var(--space-4); padding-inline-start: var(--space-6); font: var(--fw-regular) var(--fs-body-lg) / 1.7 var(--font-text); } .ec-prose li::marker { color: var(--stone-400); } .ec-prose li > ul, .ec-prose li > ol { margin-block-start: var(--space-4); } /* ----------------------------------------------------------------------------- * Quotes * ----------------------------------------------------------------------------- * The design's Pullquote is the core Pullquote block — no custom block, so the * content stays valid if this theme is ever swapped out. * -------------------------------------------------------------------------- */ .ec-prose blockquote { /* * margin-block, NOT margin. A plain `margin: 0` here would also reset the * `margin-inline: auto` that `.ec-prose > *` uses to centre the reading * column — this selector is more specific, so it would win and quietly shove * every quote to the left edge. Same reason for figure below. */ margin-block: 0; border-inline-start: var(--border-slab) solid var(--ink-900); padding-inline-start: var(--space-6); } .ec-prose blockquote p { font: var(--fw-regular) var(--fs-h3) / 1.4 var(--font-editorial); color: var(--text-strong); } .ec-prose blockquote cite { display: block; margin-block-start: var(--space-4); font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-style: normal; color: var(--text-muted); } .ec-prose .wp-block-pullquote { border: 0; border-block: var(--border-rule) solid var(--ink-900); padding-block: var(--space-7); text-align: start; } .ec-prose .wp-block-pullquote blockquote { border: 0; padding: 0; margin-inline: 0; } .ec-prose .wp-block-pullquote p { font: var(--fw-regular) var(--fs-h2) / 1.25 var(--font-editorial); } /* ----------------------------------------------------------------------------- * Media * ----------------------------------------------------------------------------- * Square corners, no shadow — the system uses lines, not elevation. Captions * sit tight under the image in the label face. * -------------------------------------------------------------------------- */ .ec-prose figure { margin-block: 0; } .ec-prose img { width: 100%; height: auto; border-radius: var(--radius-media); } .ec-prose figcaption, .ec-prose .wp-element-caption { margin-block-start: var(--space-4); font: var(--type-caption); color: var(--text-muted); text-align: start; } .ec-prose .alignfull figcaption, .ec-prose .alignwide figcaption { max-width: var(--container-text); margin-inline: auto; } /* ----------------------------------------------------------------------------- * Blocks that carry their own furniture * -------------------------------------------------------------------------- */ .ec-prose hr, .ec-prose .wp-block-separator { height: 1px; border: 0; background: var(--line-hairline); } .ec-prose .wp-block-separator.is-style-wide { background: var(--ink-900); height: var(--border-rule); } .ec-prose .wp-block-button__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-control); background: var(--ink-900); color: var(--paper); font: var(--fw-medium) var(--fs-body-sm) / 1 var(--font-text); text-decoration: none; } .ec-prose .wp-block-button__link:hover { background: var(--ember-700); color: var(--paper); } .ec-prose .is-style-outline .wp-block-button__link { background: transparent; border: 1px solid var(--ink-900); color: var(--text-strong); } /* * Tables scroll inside their own container rather than pushing the page * sideways. Gutenberg wraps a table in .wp-block-table; the classic editor does * not, so ecue_wrap_bare_tables() adds .ec-tablewrap around those. Both are * covered here. */ .ec-prose .wp-block-table, .ec-prose .ec-tablewrap { overflow-x: auto; } .ec-prose table { width: 100%; border-collapse: collapse; font: var(--type-body-sm); } .ec-prose th, .ec-prose td { border-block-end: 1px solid var(--line-hairline); padding: var(--space-4) var(--space-5) var(--space-4) 0; text-align: start; vertical-align: top; } .ec-prose th { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .ec-prose code, .ec-prose kbd { font: var(--fw-regular) 0.9em / 1.5 var(--font-mono); background: var(--surface-quiet); padding: 0.1em 0.35em; } .ec-prose pre { overflow-x: auto; padding: var(--space-6); background: var(--surface-quiet); font: var(--fw-regular) var(--fs-body-sm) / 1.6 var(--font-mono); } .ec-prose .wp-block-embed figcaption { text-align: start; } /* * Embedded media from the classic editor. * * add_theme_support( 'responsive-embeds' ) covers Gutenberg's embed block, but * a raw