fix(words): vertical rhythm — heading top margin, blockquote distinctive, code block generous padding (F4.3)

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) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent c09f7b0d87
commit eb6a019b5a

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

Loading…
Cancel
Save

Powered by TurnKey Linux.