Give the catalogue buttons real depth, and cut the duplicate heading - #231
Merged
Conversation
New guide No. 40 (agents / broad) from Matthew Berman's 'Master Codex with these 15 Tips'. Covers the one-workspace model: cross-chat search and delegation, voice control, ChatGPT Sites as an agent-to-agent handoff, and Connections for phone access. The other tips restate existing guides and are cross-linked. Registry row added. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Adds a 17-tag vocabulary (site/src/data/tags.ts) enforced through the content schema, tags every published guide, swaps the home catalogue table's minutes column for each track's top three topic chips, and adds /tags/<slug>/ listing pages (in the sitemap). Guide minutes frontmatter and track pages are unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Chips rendered with no whitespace between them, leaving the browser no break points: the all-topics row on tag pages ran off-screen and forced a horizontal scroll bar. Both chip rows now sit in flex-wrap containers with gap spacing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
New /guides/ page lists all 33 published guides newest first as cards (track and level label, title, description, minutes, clickable topic tags in place of the number-and-date footer), with an all-topics chip row at the bottom. The home catalogue table's total row is now a CTA linking to it. Added to the sitemap. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The catalogue grid carried one reveal class for all 33 cards. At 5336px tall it never reached the observer's 0.12 threshold on load (395px of it visible, ratio 0.074), so the whole grid stayed at opacity 0 until a scroll brought more of it into view. Each card now reveals on its own, matching the home page's latest-guides cards. The same container-level reveal on tag pages moves onto each row for the same reason. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Card footers carry the guide's month and year in place of the reading time, matching the home page's card footers. The standfirst under the All guides heading is gone. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
A tag chip is nowrap and up to 170px wide, so with 43px of card padding each side three columns demanded about 1150px before the old 900px breakpoint could drop to two, giving 43px of horizontal overflow at a 929px viewport. Tracks are now minmax(0, 1fr) so a long chip cannot push a column past its share, the card footer wraps instead of forcing the date and chips onto one line, and the two-column breakpoint moves to 1080px. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
An atlas puts an index plate between its sheets, a key diagram of how the chart is divided. This is that plate. In the left margin, one cell per published guide in the catalogue's three columns, portrait because the cards are portrait, with the top three lit: they are the three cards printed directly above. Beside it the heading, two sentences and the link. Frame, inner rule, registration crosses, graticule and running heads are all hairlines and tokens, so both themes work unchanged. Two fixes ride along because the work exposed them: - Day --ink-mute measured 4.44:1 on paper, under the 4.5 AA floor, and this block adds mono text at that colour. Nudged to #6f6656 (4.93:1), which clears AA everywhere the token is used. - The home page scrolled sideways on small phones. A tag chip cannot wrap, so the topics column set a 323px min-content the catalogue table would not shrink below, and the section head could not wrap its label. The constellation column stands down under 620px, the table gets its own scroll container, and section heads wrap. Verified in a browser at 1440, 375 and 320 css px in both themes: scrollWidth equals clientWidth at 320, the button stays inside the frame, the key cells measure 0.95 aspect against the real card's 0.94, the three lit cells share one animation delay, and mono marginalia measure 4.93:1 in day and 4.62:1 in night. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replaces the index plate's grid of cells with a struck constellation: a figure line swept through five ringed layer markers in curriculum order, the three newest guides called out as bright labelled stars off their own layer's ring, and the remaining thirty as a faint field. Star positions for the field come from a hash of each guide's catalogue number, so the plate is byte identical on every build and a new guide only ever adds one star. It is a printed plate about the sky rather than a second copy of the hero's live sky: every mark is apparatus the hero has none of, namely a figure line, open rings as chart symbols, roman numerals, leader lines and catalogue designations, and it holds still except for one draw-on and a slow twinkle. Per the editor: no standfirst paragraph, no legend rail, and the link is the loud element, reading "Every Guide" at a larger size. Verified at 1440 and 375 css px in both themes: no page overflow, the button stays inside the frame, 3 lit stars and 30 field stars render, and the copy gate and build pass. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The plate's link now carries a warp field: fifty-four stars streaming out of the distance behind the label, drawn by one fragment shader on a fullscreen triangle with no library. Values come from the editor's own tuning pass in the button lab: 49 by 34 padding, a 38px label (kept in rem so it scales with the page), 0.16em tracking, a half pixel rule, speed 0.45, depth 1.1, glow 1.05, hover 1.15. The "Every guide" heading above it is gone, since the button already says it. The hero's two links grow to match and change job: "Browse the layers" becomes "All Guides" pointing at the catalogue rather than an anchor on the same page, with a three.js depth field of 420 points drifting toward the reader, and "Latest guide" shortens to "Latest". three.js is already on this page for the hero sky, so that costs no new dependency. Both effects degrade honestly: no WebGL leaves an empty canvas and a plain working link, prefers-reduced-motion draws one settled frame and never animates, the loops stop on document.hidden, and the canvases are hidden from assistive tech. Neither button fills on hover, because a fill would hide the field behind the label. Verified at 1440 in both themes: no console errors, the warp button measures 471 by 134 with a 38px label, the hero links measure 248 and 180 wide, and hover keeps the label legible. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ported from the button lab, using the editor's own tuned values.
Plate button (Warp, raw WebGL). Fifty-four stars streaming out of the distance behind the label, one fragment shader on a fullscreen triangle, no library. Tuned values: 49x34 padding, 38px label (kept in rem so it scales with the page), 0.16em tracking, 0.5px rule, speed 0.45, depth 1.1, glow 1.05, hover 1.15. The "Every guide" heading is gone, since the button says it.
Hero buttons. "Browse the layers" becomes All Guides and points at /guides/ instead of an anchor on the same page, carrying a three.js depth field of 420 points drifting toward the reader. "Latest guide" shortens to Latest. Both step up to 22x38 padding at 1.05rem. three.js is already on this page for the hero sky, so the depth field adds no new dependency.
Degradation, on purpose:
One knob that did not map 1:1: the lab's label size was a flat 38px, but the site's type is fluid, so it ships as 1.76rem, which is exactly 38px at this page's root size and scales gently either side.
Verified at 1440 in both themes: no console errors, warp button measures 471x134 with a 38px label, hero links 248 and 180 wide, hover keeps the label legible. Build passes, copy gate clean, no em dashes.
🤖 Generated with Claude Code