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

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:
Tudor Sitaru
2026-04-08 12:00:45 +01:00
parent 1e5c66d6ab
commit 41cefeedf6
@@ -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,