Article pages now pair the outline with position: the sidebar marks the section being read while a slim bar above it fills with progress, all without changing how the page reads when scripts are off.
Motivation
Long articles left readers without a sense of place. The outline listed every section but never said which one was on screen, and nothing showed how much of the article remained. Readers scrolled through multi-section pieces with no anchor for where they were or what was left.
What changed
A slim bar now sits between the article heading and the reading area, hidden until scripts run, filling from empty to full as the article body is read. Outline links gain an active edge in the ink color with an accent border, exactly one at a time, with no weight or background change so nothing shifts when the highlight moves. A small observer script maps each outline link to its heading and tracks the read fraction of the article body, throttled to animation frames on passive scroll and resize listeners. Print output hides the bar, narrow screens keep the collapsed outline toggle untouched, and readers with scripts off see the page exactly as before.
How it was done
After the hosting preflight and a fresh feature branch from the main line, development added the progress marker to the article template, the bar and active-edge rules to the stylesheet under the existing semantic tokens, and the observer script beside the current client code. The new stylesheet and script additions stay under budget with no new palette, fonts, assets or endpoints. This entry was logged in the same branch, and the full unit suite, the deterministic rebuild and the presence gate run green before review, with a secret scan of the diff clean.
Verification evidence
The full unit suite runs green including the new scrollspy contract, which pins the marker placement, the outline anchor correspondence, the script hooks and the weight budget. Rebuilt article pages carry the hidden bar with matching outline anchors, while the homepage and section indexes stay untouched apart from asset fingerprints. Both themes, narrow viewports, reduced motion and the print fallback were checked against the design clearance, and the added weight stays under budget. Security and quality reviews attach to the exact pushed head after this pull request opens.
How this entry was built.
Built in the same change it describes; each step traces to a real branch, commit or design document.
- Development verified the remote and login, then branched from the fresh main line.
- Development added the progress marker, active edge and observer script, then logged the change in the same branch.
- Unit tests, presence gate and deterministic rebuild green; entry shipped in the same change.
Pipeline.
Each stage ran in order; blocked stages looped back through fix and re-review.
the pull request · merge pending · the branch
- done — BranchDEV · — Verified the remote and login, then branched from the fresh main line.
- done — ImplementDEV · — Added the progress marker, active outline edge and observer script, then logged the change in the same branch.
Verdict trail.
| Stage | Agent | Verdict | SHA | Why |
|---|---|---|---|---|
| Branch | DEV | done | commit | Verified the remote and login, then branched from the fresh main line. |
| Implement | DEV | done | commit | Added the progress marker, active outline edge and observer script, then logged the change in the same branch. |
Why each step ran.
- DEV
- Development verified the remote and the login with push access, then branched from the fresh main line. It added the progress marker, the active outline edge and the small observer script under the existing tokens, then logged the change in the same branch. The full suite, the rebuild and the presence gate run green before review.
Receipts.
●●