From eb6a019b5aa9979c970e0e42f14a9f0ab90f1639 Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 27 May 2026 19:08:54 +0200 Subject: [PATCH] =?UTF-8?q?fix(words):=20vertical=20rhythm=20=E2=80=94=20h?= =?UTF-8?q?eading=20top=20margin,=20blockquote=20distinctive,=20code=20blo?= =?UTF-8?q?ck=20generous=20padding=20(F4.3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three small typography lifts that compound into a noticeably cleaner document rhythm: - Headings (h1/h2/h3) gain 1.5× block-gap top margin when NOT first child. Opens visible breathing room between a body block and the next section. Skipped on first-child so the editor opens flush against the toolbar. - Blockquote: was just a left border + recolored text. Now adds vertical padding, italic, a 1.5× border-inline-start width, and a 4% accent background tint. Reads unambiguously as a callout rather than indistinguishable from a regular paragraph. - Pre (code block): padding bumped from 1× quote-px to 1.25× and the border mixed with 60% accent-border so the block is visually weightier and stands apart from the body bg. CSS-only change in words.css. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/uix/eidos/components/words/words.css | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index 2a2e774ce..203e91b35 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -850,6 +850,14 @@ margin-block-end: 0; } +/* Headings need more breathing room above than between body blocks + so the document gets a visible rhythm. The :not(:first-child) gate + keeps a heading at the top of the editor flush against the toolbar + instead of opening a blank top margin. */ +[data-words-content] :where(h1, h2, h3):not(:first-child) { + margin-block-start: calc(var(--words-block-gap) * 1.5); +} + [data-words-content] :where(h1, h2, h3) { color: var(--words-heading-color); font-size: var(--words-heading-font-size); @@ -904,9 +912,10 @@ [data-words-content] :where(pre) { overflow-x: auto; - padding-block: var(--words-quote-px); - padding-inline: var(--words-quote-px); - border: var(--words-border-width) solid var(--words-toolbar-border); + padding-block: calc(var(--words-quote-px) * 1.25); + padding-inline: calc(var(--words-quote-px) * 1.25); + border: var(--words-border-width) solid + color-mix(in srgb, var(--_words-accent-border) 60%, var(--words-toolbar-border)); border-radius: var(--words-code-radius); background: var(--words-code-bg); color: var(--words-code-color); @@ -975,9 +984,13 @@ } [data-words-content] :where(blockquote) { + padding-block: calc(var(--words-quote-px) * 0.5); padding-inline-start: var(--words-quote-px); - border-inline-start: var(--words-quote-border-width) solid var(--_words-accent-border); + border-inline-start: calc(var(--words-quote-border-width) * 1.5) solid + var(--_words-accent-border); + background: color-mix(in srgb, var(--_words-accent-solid) 4%, transparent); color: var(--words-quote-color); + font-style: italic; } [data-words-content] :where(ul, ol) {