tudor/school_compare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(sats): tighten cascade bars to match approved mockup
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 13s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 52s
Details
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 13s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
Details

Browse Source 
Bars drop from 22px to 14px with softer 4px radius, percentages render
in Playfair serif to match the rest of the detail page typography,
national-average line opacity bumped from 25% to 35% for legibility.
Subject name and ruler proportions also aligned with the mockup.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Tudor Sitaru
2026-04-14 13:52:00 +01:00
parent 045dbc65b7
commit a27b9abd9f
1 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/SatsChart.module.css
+20 -18
View File
@@ -3,7 +3,8 @@
.container { .container {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 2rem; gap: 1.75rem;
padding-top: 0.25rem;
} }
/* ── Individual subject column ── */ /* ── Individual subject column ── */
@@ -12,12 +13,12 @@
} }
.subjectName { .subjectName {
font-size: 0.7rem; font-size: 0.65rem;
font-weight: 600; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.1em;
color: var(--text-muted, #6d685f); color: var(--text-muted, #6d685f);
margin-bottom: 0.65rem; margin-bottom: 0.75rem;
} }
.chartArea { .chartArea {
@@ -49,20 +50,20 @@
top: 0; top: 0;
height: calc(100% - 20px); height: calc(100% - 20px);
width: 1.5px; width: 1.5px;
background: rgba(224, 114, 86, 0.25); /* --accent-coral at 25% */ background: rgba(224, 114, 86, 0.35); /* --accent-coral at 35% */
z-index: 2; z-index: 2;
pointer-events: none; pointer-events: none;
} }
.natPill { .natPill {
position: absolute; position: absolute;
top: -8px; top: -10px;
transform: translateX(-50%); transform: translateX(-50%);
background: var(--accent-coral, #e07256); background: var(--accent-coral, #e07256);
color: #fff; color: #fff;
font-size: 0.55rem; font-size: 0.55rem;
font-weight: 700; font-weight: 700;
padding: 0.1rem 0.4rem; padding: 0.1rem 0.35rem;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
z-index: 3; z-index: 3;
@@ -75,14 +76,14 @@
z-index: 1; z-index: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.65rem; gap: 0.35rem;
padding-top: 0.9rem; padding-top: 0.9rem;
} }
.barRow { .barRow {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.2rem; gap: 0.18rem;
} }
.barHeader { .barHeader {
@@ -94,13 +95,13 @@
.barTrack { .barTrack {
width: 100%; width: 100%;
height: 22px; height: 14px;
position: relative; position: relative;
} }
.bar { .bar {
height: 100%; height: 100%;
border-radius: 6px; border-radius: 4px;
position: relative; position: relative;
transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
} }
@@ -114,7 +115,8 @@
} }
.barLabel { .barLabel {
font-size: 0.75rem; font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
font-size: 0.78rem;
font-weight: 700; font-weight: 700;
color: var(--text-primary, #1a1612); color: var(--text-primary, #1a1612);
white-space: nowrap; white-space: nowrap;
@@ -125,7 +127,7 @@
.barLabelSuffix { .barLabelSuffix {
font-weight: 500; font-weight: 500;
color: var(--text-muted, #6d685f); color: var(--text-muted, #6d685f);
font-size: 0.62rem; font-size: 0.6rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
@@ -133,8 +135,8 @@
/* ── Ruler ── */ /* ── Ruler ── */
.ruler { .ruler {
position: relative; position: relative;
height: 16px; height: 14px;
margin-top: 0.5rem; margin-top: 0.3rem;
border-top: 1px solid var(--border-color, #e5dfd5); border-top: 1px solid var(--border-color, #e5dfd5);
} }
@@ -142,13 +144,13 @@
position: absolute; position: absolute;
top: 0; top: 0;
width: 1px; width: 1px;
height: 4px; height: 3px;
background: var(--border-color, #e5dfd5); background: var(--border-color, #e5dfd5);
} }
.rulerLabel { .rulerLabel {
position: absolute; position: absolute;
top: 6px; top: 5px;
font-size: 0.5rem; font-size: 0.5rem;
font-weight: 500; font-weight: 500;
color: var(--text-muted, #6d685f); color: var(--text-muted, #6d685f);