fix: port full-guide responsive rules

Move the Astro-facing responsive layer out of responsive.css, retaining the exact legacy stylesheet for full-guide/index.html until task 20. Scope worktree and fleet overrides to their components so they can win against component base styles.

Do not delete responsive.css: the legacy page still loads it. Generated screenshot artifacts are deliberately untracked.
This commit is contained in:
Marcos Paulo
2026-09-06 03:44:42 +00:00
parent 0a12e9cbcc
commit 91e8d380d0
5 changed files with 2024 additions and 4 deletions
+63
View File
@@ -37,6 +37,13 @@
--step-0: 11px;
--step-00: 10px;
--step-09: 9px;
--step-08: 8px;
--step-42: 42px;
--step-code: 10.5px;
--step-exercise-title: clamp(20px, 2.6vw, 34px);
--step-skill-title: clamp(30px, 4vw, 60px);
--step-pull-quote: clamp(20px, 2.5vw, 34px);
--step-display-wide: clamp(150px, 7vw, 220px);
/* On-dark palette. These are the values the source actually uses on the
--ink and --accent surfaces. They are not near-misses of the palette
@@ -58,6 +65,62 @@
--white-25: rgb(255 255 255 / 25.098%);
--white-31: rgb(255 255 255 / 31.3725%);
/* Full-guide supporting surfaces. These preserve the exact values from the
legacy responsive layer; they are deliberately not substitutions from the
light-background palette. */
--guide-toolbar-text: #9eabb4;
--guide-panel-blue: #244760;
--guide-worker-detail-surface: #edf0f1;
--guide-tree-rule: #41596b;
--guide-code-surface: #0b1b27;
--guide-tree-shadow: #081621;
--guide-live: #80c69a;
--guide-live-glow: #80c69a22;
--guide-grid-line: #ffffff06;
--guide-tree-border: #527085;
--guide-tree-node: #112a3b;
--guide-tree-node-label: #8ca1af;
--guide-tree-node-muted: #a9b6be;
--guide-tree-node-hover: #1c425a;
--guide-gold-glow: #efc76b18;
--guide-tree-detail-text: #aebbc3;
--guide-phase-hover: #e8ecee;
--guide-meter-border: #496274;
--guide-route-copy: #b5c0c7;
--guide-skill-hover: #315f80;
--guide-skill-copy: #c4cdd3;
--guide-skill-index-hover: #eceff0;
--guide-provider-copy: #cbd9e1;
--guide-provider-detail-copy: #b7c7d1;
--guide-provider-rule: #ffffff2b;
--guide-effort-surface: #18364a;
--guide-effort-copy: #aebfc9;
--guide-effort-active: #e9ecee;
--guide-effort-active-copy: #eeedf6;
--guide-builder-surface: #132b3b;
--guide-builder-rule: #ffffff30;
--guide-builder-action-copy: #d5dde2;
--guide-builder-copy: #a9bcc8;
--guide-builder-border: #344c5d;
--guide-builder-live-glow: #80c69a20;
--guide-builder-code: #bed0dc;
--guide-builder-grid: #ffffff05;
--guide-verify-rule: #ffffff1f;
--guide-verify-copy: #bfccd4;
--guide-verify-code: #0f2230;
--guide-verify-code-border: #2a4150;
--guide-accent-rule: #ffffff42;
--guide-accent-note: #6c6898;
--guide-accent-copy: #f1f0f7;
--guide-install-rule: #ffffff2d;
--guide-install-copy: #b9c8d1;
--guide-control-border: #ffffff50;
--guide-exercise-copy: #afbec7;
--guide-prompt-surface: #19364a;
--guide-prompt-enhanced: #596f9a;
--guide-prompt-rule: #ffffff32;
--guide-prompt-enhanced-copy: #e5e3ef;
/* Breakpoints */
--bp-sm: 560px;
--bp-md: 800px;