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) {