polish(school-detail): align hero stat numbers on a shared baseline
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 14s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 51s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 8s
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 14s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 51s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 8s
The three at-a-glance stats were misaligned — the serif "Outstanding" tile
sat noticeably above the "70%" and "64%" numerals because the serif variant
used a smaller font. That pushed its label row ("INSPECTED NOVEMBER 2023")
up too, breaking the horizontal rhythm across the row.
- Give .heroStatNumber and .heroStatNumberSerif a shared min-height tied
to the largest clamp value, plus display: flex; align-items: flex-end.
Content bottom-aligns inside the box, so every stat's label sits at the
same Y regardless of how tall the actual glyph is.
- Bump the serif variant up slightly (1.75rem → 2.25rem clamp) so it
feels closer in weight to the numerals while still leaving room for
longer words like "Requires Improvement".
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -801,21 +801,29 @@
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.heroStatNumber {
|
||||
.heroStatNumber,
|
||||
.heroStatNumberSerif {
|
||||
font-family: var(--font-playfair), 'Playfair Display', serif;
|
||||
font-size: clamp(2rem, 4vw, 2.75rem);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: var(--text-primary, #1a1612);
|
||||
/* Fixed height so every stat's label row sits at the same Y, regardless
|
||||
of whether the content is a short numeral or a longer word. Each
|
||||
stat's content is bottom-aligned within this box. */
|
||||
min-height: clamp(2rem, 4vw, 2.75rem);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.heroStatNumber {
|
||||
font-size: clamp(2rem, 4vw, 2.75rem);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.heroStatNumberSerif {
|
||||
font-family: var(--font-playfair), 'Playfair Display', serif;
|
||||
font-size: clamp(1.5rem, 3vw, 2rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
color: var(--text-primary, #1a1612);
|
||||
/* Slightly smaller so long words like "Requires Improvement" still fit,
|
||||
but aligned on the same bottom baseline as the numeric stats. */
|
||||
font-size: clamp(1.75rem, 3.5vw, 2.25rem);
|
||||
}
|
||||
|
||||
.heroStatNumberSerif.tone-teal,
|
||||
|
||||
Reference in New Issue
Block a user