I'm trying to create a responsive grid using auto-fill and minmax() but keep getting unexpected extra columns at certain viewport widths...
I'm trying to create a responsive grid using auto-fill and minmax() but keep getting unexpected extra columns at certain viewport widths...
| Change | Before | After | Principle |
|---|---|---|---|
| Information hierarchy | Votes / answers / views in a sidebar column; title at same visual weight as stats | Title is dominant (--text-lg); stats demoted to footer — read title first, then decide | operating-principles §2 (one focal point: the question title) |
| Vote widget | Score number only in stats sidebar; no interactive affordance visible | [▲ score ▼] group with 44px touch targets, hover and focus states | operating-principles §7 (Fitts); quality-gates Gate 4 (all interactive states) |
| Answer badge | Green border box in stats sidebar — same weight as vote count and views | Isolated badge in card footer — visually distinct, reads as a status not a metric | operating-principles §4 (status vs. metric distinction) |
| Tags | #e1ecf4 background pills with blue border — colour-heavy, competes with title link | Accent-tinted border only, no fill — tags present without dominating | operating-principles §5 (colour with purpose — accent reserved for primary actions) |
| User meta | 32px avatar + username + rep scattered below tags; "asked X ago" left-aligned opposite | Avatar + author + dot + time + dot + views in a single inline meta row in the footer | operating-principles §3 (group related information spatially) |
| Dark mode | None — hardcoded #fff, #0074cc, #e1ecf4 | Full dark mode via OKLCH tokens + @media (prefers-color-scheme: dark) | quality-gates Gate 6 (dark mode required) |
| Token | Light | Dark | Used for |
|---|---|---|---|
| --color-bg | oklch(96% 0.004 258) | oklch(13% 0.010 258) | Page background, card footer tint |
| --color-surface | oklch(100% 0 0) | oklch(17% 0.010 258) | Card background |
| --color-border | oklch(90% 0.006 258) | oklch(26% 0.010 258) | Card border, footer divider, vote widget border, skeleton base |
| --color-text | oklch(17% 0.012 258) | oklch(94% 0.004 258) | Question title |
| --color-text-secondary | oklch(42% 0.012 258) | oklch(72% 0.008 258) | Score, author name, excerpt text |
| --color-text-muted | oklch(60% 0.008 258) | oklch(55% 0.006 258) | Vote arrows, time, views, separator dots |
| --color-accent | oklch(52% 0.20 258) | oklch(65% 0.20 258) | Toggle active, tag borders, tag text, focus rings, avatar background |