Standardize responsive breakpoints (Refs #130)

2026-10-10 19:44:55 -04:00
parent 7442c6fd15
commit d2b2958700
6 changed files with 214 additions and 14 deletions
@@ -127,6 +127,14 @@
    --space-16: 64px;
    --space-24: 96px;

+    /* Responsive widths — use these literal pixel values in @media queries;
+       CSS custom properties cannot be used in media conditions. The style
+       checker reads this scale. See docs/development/ui-patterns.md. */
+    --breakpoint-xs: 360px; /* Extra-small screen adjustments. */
+    --breakpoint-sm: 640px; /* Compact controls, cards and page summaries. */
+    --breakpoint-md: 960px; /* Sidebar switches to the navigation drawer. */
+    --breakpoint-lg: 1100px; /* Dense, multi-column layouts reflow. */
+
    /* Radii — three steps + pill. Softer than the old 4/8/12. */
    --radius-sm: 6px;
    --radius-md: 10px;