diff --git a/plans/astro-refactor/task-15e-responsive-css.md b/plans/astro-refactor/task-15e-responsive-css.md index a809117..1224ed9 100644 --- a/plans/astro-refactor/task-15e-responsive-css.md +++ b/plans/astro-refactor/task-15e-responsive-css.md @@ -82,3 +82,44 @@ read the legacy files, so deleting `responsive.css` and breaking every mobile layout passes it cleanly. Before you claim done, diff the **built** CSS (`dist/_astro/*.css`) against `main` and enumerate every declaration that disappeared. Each one is either present elsewhere or a regression. + +## Attempt 1 stopped short — and the goal as written is not reachable yet + +Preserved as `rejected/15e-attempt-1` (`d2312d7`). Start by reading that diff: +it ported rules into `ChapterHero`, `FleetDiagram`, `RouteTable`, `WorktreeMap`, +`LanguageToggle`, `ReadingProgress`, `agents.astro`, `full-guide.astro` and +`tokens.css`, and it added `pixelmatch`, `pngjs` and `postcss` plus a working +screenshot-compare harness. Reuse all of it. It never finished the comparison +loop and never committed on its own. + +It also deleted `responsive.css` while **`full-guide/index.html` still links +it**. That page is the live site until task 20 cuts over; deleting the +stylesheet strips it. `src/components/islands/GuideSelector.astro` still +references it too. + +So the "delete it" checkbox in this brief cannot be honestly ticked before the +cutover. Do not tick it, and do not delete the file. **The deliverable is +everything up to the deletion:** + +- Every rule `responsive.css` provides to an Astro route lives with the + component that needs it, or in `tokens.css`. +- No `.astro` file and no Astro layout links `responsive.css` any more. +- `full-guide/index.html` still links it, unchanged, and still renders exactly + as it does today. +- A list, in this file, of the rules that remain in `responsive.css` solely for + the legacy page — that list is the deletion checklist task 20 will execute. + +Amend the "Done when" boxes to match before you start, and say in your final +report that the file is intentionally still present. + +### One rule to port properly while you are in there + +`.route-meter span` animates `height: var(--score)` — a layout property, which +task 18 was meant to eliminate. 18 changed it in `responsive.css` and that +change was reverted (`0bca43c`) because it belongs in the component, not in a +legacy file. When you port this rule, port it as +`transform: scaleY(var(--score)); transform-origin: bottom` with `height: 100%`. +`--score` is set inline as a percentage (`--score:92%`) by `GuideSelector.astro` +and `full-guide.astro`; a percentage in `scaleY()` is valid and was verified +rendering correctly at `matrix(1, 0, 0, 0.92, 0, 0)`. Leave the legacy +`responsive.css` copy of the rule alone.