Stack the homepage quotes so justified text sets evenly #38

Merged

iec-admin merged 1 commit from claw/quote-spacing-2d7c into main

2026-10-13 05:48:39 +00:00

iec-admin commented

2026-10-13 05:48:36 +00:00

Contributor

Closes #37.

What changed

.bb-quotes is one column instead of two, so each homepage quote uses the full row.
.bb-quote blockquote gets padding-right: 0.25em, so the lean of an italic letter at the end of a justified line stays inside the quote's animation layer.

The quotes stay justified with no hyphens (#35).

Walkthrough

Story: as a site visitor, the two homepage quotes read evenly.

Driven in a browser (Playwright) against npm run dev on this branch, 2026-10-12, with the production quote text set into the page so the real words were measured:

Width	Column	Widest word gap (Ross / Richard)
Live today, 1440px	344px	41px / 15px
1920px	920px	7px / 5px
1440px	920px	7px / 5px
1100px	860px	6px / 7px
900px	660px	11px / 10px
390px (already one column)	314px	16px / 23px

Both quotes compute text-align: justify and hyphens: none at every width. The section screenshot at 1440px shows Ross above Richard, each quote on four lines.

Reference: no reference system applies; the alternatives were measured on the same text (smarter line breaking: 41px, no gain; left-aligned: 4px, but drops the client's request for justified quotes).

QA Execution

2026-10-12, local: npx tsc --noEmit exit 0; npm run build exit 0; the browser run above.

Not done in this PR

The cropped last letter was not reproduced in the test browser, so the right-hand padding is unconfirmed as the fix for it.
On phones the quotes were already one column, so the gaps there (16px and 23px) are unchanged.
The "People / Technology / Insurance" cards still show milder stretching.
A 24px horizontal overflow measured at 1100px and 900px is already on the live site and is not from this change.

🤖 Generated with Claude Code

Closes #37. ## What changed - `.bb-quotes` is one column instead of two, so each homepage quote uses the full row. - `.bb-quote blockquote` gets `padding-right: 0.25em`, so the lean of an italic letter at the end of a justified line stays inside the quote's animation layer. The quotes stay justified with no hyphens (#35). ## Walkthrough Story: as a site visitor, the two homepage quotes read evenly. Driven in a browser (Playwright) against `npm run dev` on this branch, 2026-10-12, with the production quote text set into the page so the real words were measured: | Width | Column | Widest word gap (Ross / Richard) | |---|---|---| | Live today, 1440px | 344px | 41px / 15px | | 1920px | 920px | 7px / 5px | | 1440px | 920px | 7px / 5px | | 1100px | 860px | 6px / 7px | | 900px | 660px | 11px / 10px | | 390px (already one column) | 314px | 16px / 23px | Both quotes compute `text-align: justify` and `hyphens: none` at every width. The section screenshot at 1440px shows Ross above Richard, each quote on four lines. Reference: no reference system applies; the alternatives were measured on the same text (smarter line breaking: 41px, no gain; left-aligned: 4px, but drops the client's request for justified quotes). ## QA Execution 2026-10-12, local: `npx tsc --noEmit` exit 0; `npm run build` exit 0; the browser run above. ## Not done in this PR - The cropped last letter was not reproduced in the test browser, so the right-hand padding is unconfirmed as the fix for it. - On phones the quotes were already one column, so the gaps there (16px and 23px) are unchanged. - The "People / Technology / Insurance" cards still show milder stretching. - A 24px horizontal overflow measured at 1100px and 900px is already on the live site and is not from this change. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

iec-admin added 1 commit

2026-10-13 05:48:36 +00:00

fix: stack the homepage quotes so justified text sets evenly (#37 ) 2b9fda76d1

Justified with no hyphens, each quote's 344px column opened word gaps of
about 41px. One quote per row gives a 920px line and gaps of 7px or less.
A little room on the right keeps the last italic letter of a line from
being cropped.

fix #37

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>