style: visual polish for admin + student SPAs

Browse Source

Editorial-lecture-hall direction: Source Serif 4 for question prose
and headlines, IBM Plex Sans chrome, IBM Plex Mono for tabular numerics
(countdown, scores, rank, session id, join URL). Single ink-blue accent
in light mode, brass-amber in dark mode; warm paper background instead
of the soft grey wash. Dropped border-radius from soft 14px to a sharp
2-4px to read as printed material rather than consumer app.

Density rebalanced for the two viewing surfaces. Student question text
goes to clamp(1.5rem, 2.4vw, 1.95rem) so it dominates a 390px phone;
admin chrome (Q-num, countdown, hist labels) tightened so the projector
read is "QUESTION LIVE" + question + options + distribution at a glance
across a 1920x1080 lecture hall. State badge is uppercase + tracked
with a status dot; live state pulses, urgent countdown (<=10s) blinks.

Leaderboard becomes a tabular scoreboard: hairline borders, alternating
row tint, gold/silver/bronze left-border medals on top 3 only (no other
rank treatments), mono numerics throughout. QR panel now has its own
SCAN TO JOIN eyebrow, the URL row sits below in mono with a copy CTA,
session id rendered as a code chip, anchored as one shareable artifact.

Picked-answer button gets a 2-step settle (scale 0.97 -> 1, color
swap), correct-row reveal animates an inset border-draw, countdown bar
gets a slow breathing highlight overlay; all motion respects
prefers-reduced-motion. JS change is one line per SPA: toggle .urgent
on the countdown when remaining <= 10s.

...

This commit is contained in:

ameer

2026-05-02 21:29:22 +08:00

parent e7a2f0387b

commit 029d0dd399

3 changed files with 967 additions and 230 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

1195

static/style.css

File diff suppressed because it is too large Load Diff