github-starred/awesome-python
2
0
Fork 0
mirror of https://github.com/vinta/awesome-python.git synced 2026-11-08 02:15:12 -06:00
Code Issues 461 Packages Projects Releases Wiki Activity

style: set sponsorship ledes in Manrope and stack past sponsor names above descriptions

Browse Source 
The sponsorship ledes were set in Cormorant Garamond, whose short x-height and thin strokes read poorly across a paragraph, and past sponsor names shared a baseline with Manrope descriptions, where the mismatched x-heights clash.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-10-21 15:49:35 +08:00
co-authored by Claude
parent b3b3bc202f
commit 537aff4a46
2 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+14 -12
View File
@@ -99,20 +99,22 @@ Pairing (do not swap):
- **Display**: `Cormorant Garamond` (serif, 600 only).
- **Body**: `Manrope` (sans, 400 / 600 / 700 / 800).
Cormorant Garamond sets headings and standalone names only, never running sentences, and never on the same line as Manrope. Its short x-height and thin strokes tire the eye across a paragraph, and next to Manrope on one baseline the two x-heights clash. Ledes and other multi-line copy use Manrope (`--text-2xl`); a display name with a description stacks the name above it, as in the sponsor band.
Scale:
| Role | Token | Size | Family | Weight | Notes |
| ---------------- | ----------------- | -------------------------------- | ------------------ | --------- | ----------------------------------------------- |
| Hero headline | (literal `clamp`) | `clamp(4.5rem, 11vw, 8.5rem)` | Cormorant Garamond | 600 | Magazine-cover scale, single use on the hero |
| Page title | `--display-lg` | `clamp(3.6rem, 9vw, 7rem)` | Cormorant Garamond | 600 | Category and sponsorship `h1` |
| Section heading | `--display-md` | `clamp(2.25rem, 4.2vw, 3.3rem)` | Cormorant Garamond | 600 | Guide, results, CTA `h2`, sponsor name |
| Display small | `--display-sm` | `clamp(1.75rem, 2.8vw, 2.25rem)` | Cormorant Garamond | 600 | Group-row `h2`, sponsorship lede, past sponsors |
| Lede | `--text-2xl` | `1.5rem` | Manrope | 400 | First paragraph of a category intro |
| Subtitle | `--text-xl` | `1.25rem` | Manrope | 400 | Hero and category subtitles, category intro |
| Body large | `--text-lg` | `1.125rem` | Manrope | 400 | Content-heavy passages, project names, search |
| Body | `--text-base` | `1rem` (16px) | Manrope | 400 | Body floor |
| Meta / secondary | `--text-sm` | `0.95rem` | Manrope | 400 / 600 | Meta rows, secondary copy |
| Caption / pill | `--text-xs` | `0.8rem` (12.8px) | Manrope | 600 / 700 | Smallest token, pills, badges, tags, footnotes |
| Role | Token | Size | Family | Weight | Notes |
| ---------------- | ----------------- | -------------------------------- | ------------------ | --------- | ------------------------------------------------- |
| Hero headline | (literal `clamp`) | `clamp(4.5rem, 11vw, 8.5rem)` | Cormorant Garamond | 600 | Magazine-cover scale, single use on the hero |
| Page title | `--display-lg` | `clamp(3.6rem, 9vw, 7rem)` | Cormorant Garamond | 600 | Category and sponsorship `h1` |
| Section heading | `--display-md` | `clamp(2.25rem, 4.2vw, 3.3rem)` | Cormorant Garamond | 600 | Guide, results, CTA `h2`, sponsor name |
| Display small | `--display-sm` | `clamp(1.75rem, 2.8vw, 2.25rem)` | Cormorant Garamond | 600 | Group-row `h2`, past sponsor names |
| Lede | `--text-2xl` | `1.5rem` | Manrope | 400 | Category intro first paragraph, sponsorship ledes |
| Subtitle | `--text-xl` | `1.25rem` | Manrope | 400 | Hero and category subtitles, category intro |
| Body large | `--text-lg` | `1.125rem` | Manrope | 400 | Content-heavy passages, project names, search |
| Body | `--text-base` | `1rem` (16px) | Manrope | 400 | Body floor |
| Meta / secondary | `--text-sm` | `0.95rem` | Manrope | 400 / 600 | Meta rows, secondary copy |
| Caption / pill | `--text-xs` | `0.8rem` (12.8px) | Manrope | 600 / 700 | Smallest token, pills, badges, tags, footnotes |
Hard-won sizing rules (do not relax):
website/static/style.css
+7 -9
View File
@@ -1367,11 +1367,9 @@ th[data-sort].sort-asc::after {
}
.sponsorship-lede {
font-family: var(--font-display);
font-size: var(--display-sm);
line-height: 1.25;
font-size: var(--text-2xl);
line-height: 1.45;
color: var(--ink);
letter-spacing: -0.01em;
text-wrap: pretty;
}
@@ -1516,9 +1514,9 @@ th[data-sort].sort-asc::after {
.past-sponsors li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.65rem;
flex-direction: column;
align-items: start;
gap: 0.35rem;
padding-block: 0.4rem;
}
@@ -1537,8 +1535,8 @@ th[data-sort].sort-asc::after {
}
.past-sponsor-desc {
color: var(--ink-muted);
font-size: var(--text-base);
color: var(--ink-soft);
font-size: var(--text-lg);
}
.sponsorship-cta-row {