co-op/docs
4
0 Fork 3
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

docs site: scale headings with the viewport so the title stops breaking mid-word

Browse Source 
At 360px wide the h1 was still 52px, because Material keeps a 20px root on mobile, so
"Cooperative" (297px at that size) left only ~30px of slack before breaking mid-word.

Headings now use clamp() to track the viewport and reach the same desktop sizes, with
word-break: normal, hyphens: none and text-wrap: balance so wrapping happens at the
space and the two lines are balanced rather than one word sitting alone.
This commit is contained in:
inference-bot committed 2026-11-03 20:50:27 +00:00
1 parent bf356cd9a3
commit 4e44793aaf
1 file changed
+25 -4
Download Patch File Download Diff File Expand all files Collapse all files
publishing/typography.css
+25 -4
View File
@@ -32,10 +32,31 @@ body,
letter-spacing: -0.01em;
}
.md-typeset h1 { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; }
.md-typeset h2 { font-size: 1.7rem; font-weight: 600; }
.md-typeset h3 { font-size: 1.25rem; font-weight: 600; }
.md-header__title { font-weight: 600; }
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title {
/* Never break a word mid-way; wrap at the space, and let the browser balance the
two lines rather than leaving one word on its own. */
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
text-wrap: balance;
}
/* Fluid scale. Fixed rem sizes do not shrink on a phone -- Material keeps a 20px root
* even at 360px wide -- so a 2.6rem h1 stays 52px and "Cooperative" (297px at that
* size) runs out of room on anything narrower than ~370px and breaks mid-word.
* These track the viewport instead and land at the same desktop size.
*/
.md-typeset h1 { font-size: clamp(1.6rem, 1.5rem + 3.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; }
.md-typeset h2 { font-size: clamp(1.3rem, 1.1rem + 1.6vw, 1.7rem); font-weight: 600; }
.md-typeset h3 { font-size: clamp(1.1rem, 1rem + 0.7vw, 1.25rem); font-weight: 600; }
.md-header__title { font-size: clamp(0.85rem, 0.7rem + 0.8vw, 0.95rem); font-weight: 600; }
/* Long prose stays readable; measured in characters rather than pixels. */
.md-typeset { line-height: 1.65; }
/* Colour is scheme-specific, so it stays out of the rules above. */
[data-md-color-scheme="default"] .md-typeset h1,