TudorandClaude Opus 5
dbb74d9b60
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m3s
PR Checks / Backend Smoke (pull_request) Successful in 7s
PR Checks / Build Backend (no push) (pull_request) Successful in 11s
PR Checks / Build Frontend (no push) (pull_request) Successful in 44s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 14s
The heading sat on the right edge of the column and every value on the left. A specificity collision, not a layout problem: the two were aligned by different selectors and only one of them won. .table td (0,1,1) text-align: left <- won for the value .num (0,1,0) text-align: right <- lost .table th:last-child (0,2,1) text-align: right <- won for the heading The heading and the value cell now share one class and one rule, so they cannot drift apart again whatever else changes around them. The column also stretched to half the table. It now hugs its content with width:1% and nowrap, so the school name takes the remaining width — which is what made the gap read as misalignment on a wide screen, and what crowded the name column on a narrow one. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015mWQnpye9F299NVRCCSRvj
211 lines
4.5 KiB
CSS
211 lines
4.5 KiB
CSS
/* Tokens only — see globals.css. Follows RankingsView's conventions, and in
|
|
particular its link treatment: table links take --text-primary with no
|
|
underline and a brand-coloured hover, not the browser default. The first
|
|
cut used bare <Link> with no class at all, which rendered as default blue
|
|
underlined links and read as unstyled beside the rest of the site. */
|
|
.container {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.25rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.5rem;
|
|
font-family: var(--font-display);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.summary {
|
|
font-size: 1rem;
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Links in running copy: brand colour, underline on hover only. */
|
|
.inlineLink {
|
|
color: var(--brand);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.inlineLink:hover {
|
|
color: var(--brand-strong);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Phase variants are separate indexable pages, so the bare place page has to
|
|
link them — a sitemap entry alone leaves them with no internal path in. */
|
|
.phaseLinks {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem 0.75rem;
|
|
margin: 0 0 1.25rem;
|
|
}
|
|
|
|
.phaseLink {
|
|
display: inline-block;
|
|
padding: 0.4rem 0.875rem;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 999px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition: border-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.phaseLink:hover {
|
|
border-color: var(--brand);
|
|
color: var(--brand-strong);
|
|
}
|
|
|
|
/* The one number a list cannot give you, so it gets its own band. */
|
|
.compare {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 0.875rem 1.125rem;
|
|
margin: 0 0 1.5rem;
|
|
color: var(--text-primary);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.ofsted {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem 1.25rem;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 1.5rem;
|
|
font-size: 0.9375rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.group {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.groupHeading {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.625rem;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-family: var(--font-display);
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
|
|
.groupCount {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-secondary);
|
|
border-radius: 999px;
|
|
padding: 0.125rem 0.5rem;
|
|
}
|
|
|
|
/* Wide content scrolls in its own container so the page body never does. */
|
|
.tableWrap {
|
|
overflow-x: auto;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.table th,
|
|
.table td {
|
|
padding: 0.75rem 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.table th {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/*
|
|
* Header and value share one class and one rule, so they cannot drift apart.
|
|
*
|
|
* The first cut aligned them with two different selectors: `.table th:last-child`
|
|
* at (0,2,1) beat the element rule and went right, while `.num` at (0,1,0) lost
|
|
* to `.table td` at (0,1,1) and stayed left. The heading and its numbers sat on
|
|
* opposite edges of the column.
|
|
*
|
|
* width:1% with nowrap makes the measure column hug its content so the school
|
|
* name takes the remaining width — without it the two columns split evenly and
|
|
* the gap between heading and value reads as misalignment on a wide screen.
|
|
*/
|
|
.table th.num,
|
|
.table td.num {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
width: 1%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* The measure is spelled out; the tooltip carries the definition. */
|
|
.metricHead {
|
|
text-decoration: none;
|
|
cursor: help;
|
|
border-bottom: 1px dotted var(--border-strong);
|
|
}
|
|
|
|
/* Table links: site convention is body colour, brand on hover. */
|
|
.schoolLink {
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.schoolLink:hover {
|
|
color: var(--brand-strong);
|
|
}
|
|
|
|
/* "Not published" is a fact about the school, not an error. */
|
|
.noData {
|
|
color: var(--text-muted);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.neighbours {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.neighbours h2 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0 0 0.75rem;
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.neighbours ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem 1rem;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|