diff --git a/nextjs-app/components/school/SchoolDetailShell.module.css b/nextjs-app/components/school/SchoolDetailShell.module.css index 90650a4..ce9c1b0 100644 --- a/nextjs-app/components/school/SchoolDetailShell.module.css +++ b/nextjs-app/components/school/SchoolDetailShell.module.css @@ -145,28 +145,42 @@ } -/* Fact line: the phase pill, then plain register values joined by dots. */ +/* Fact line: the phase pill, then plain register values joined by dots. + The line starts 1.125rem left of the column and clips that strip, so a + value that wraps to the start of a line loses the dot in front of it + instead of opening the line with one. */ .facts { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.25rem; - margin-bottom: 0.5rem; + margin: 0 0 0.5rem -1.125rem; + clip-path: inset(0 0 0 1.125rem); font-size: 0.875rem; color: var(--text-secondary); } -.fact + .fact::before { +.facts > * { + margin-left: 1.125rem; +} + + +.fact { + position: relative; +} + + +.fact::before { content: "ยท"; - margin: 0 0.5rem; + position: absolute; + left: -0.75rem; color: var(--text-muted); } /* The search rows' phase pill, in the same phase colours. */ .phasePill { - margin-right: 0.625rem; padding: 0.0625rem 0.4rem; font-size: 0.75rem; font-weight: 600;