Show that the tutorial strip scrolls, and add a Top link - #24
Merged
Conversation
The tutorial thumbnails were horizontally scrollable with nothing to say so: on macOS and on touch devices the overlay scrollbar only appears while scrolling, so the strip just looked like a row cut off at the page edge. Four cues now say otherwise: - a framed panel around the strip, so it reads as one bounded thing - a permanently visible scrollbar, thumb in the menu green - shadows at whichever edge still has content behind it, via the background-attachment: local trick, so they vanish at either end - a "scroll sideways for more examples" line with arrows, which is the only cue that survives on a touch screen No JavaScript, so the site stays script-free. The frame and the hint are siblings of the <ul> rather than part of it, so they stay put while the contents scroll - that is why gen_example_gallery.py changes too. The footer bar, so far an empty green strip, gets a right-aligned "Top" link with an up arrow pointing at the existing #page-top anchor, on all three pages. Scrolling is smooth unless prefers-reduced-motion is set. CLAUDE.md: record syncing main and deleting the merged branch as part of the publishing flow. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fmhceke9votYhvWyGSBKyG
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.
Tutorial strip
The thumbnails on the front page scroll horizontally, but nothing said so: on macOS and on touch devices the overlay scrollbar only appears while scrolling, so the strip looked like a row that happened to be cut off at the page edge. Four cues now say otherwise, because no single one works on every device:
.scroller-frame), so it reads as one bounded thing;#377e22—scrollbar-width/scrollbar-colorfor Firefox,::-webkit-scrollbarfor Blink/WebKit;background-attachment: localtrick, so they disappear by themselves at either end;No JavaScript, so the site stays script-free.
gen_example_gallery.pychanges because the frame and the hint have to be siblings of the<ul>, not part of it — inside it they would scroll away with the thumbnails.The hint is unconditional: on a very wide monitor it shows even if a couple more thumbnails happen to fit. With 28 entries the strip overflows at any realistic width, and hiding it dynamically would need JavaScript.
Footer
The closing bar was an empty green strip. It now carries a right-aligned Top link with an up arrow, pointing at the existing
#page-topanchor — on all three pages, since they sharefooter.html. It inherits the menu's font, white colour and#DDDhover.scroll-behavior: smoothis added, wrapped inprefers-reduced-motion: no-preference.Docs
CLAUDE.mdrecords syncingmainand deleting the merged branch as part of the publishing flow, rather than as an afterthought.🤖 Generated with Claude Code
https://claude.ai/code/session_01Fmhceke9votYhvWyGSBKyG