Show that the tutorial strip scrolls, and add a Top link

CLAUDE.md

@@ -21,12 +21,22 @@ Deployment is automatic once a change reaches `main` — see [Publishing](#publi
 
 The live site is served from **`pyoomph/pyoomph.github.io`**, which is the `upstream` remote. `origin` is the fork `cdiddens/pyoomph.github.io`. Check with `git remote -v` before pushing anywhere — a push to `upstream/main` publishes immediately, with no review step.
 
-The established flow (how PRs #19–#21 landed):
+The established flow (how PRs #19–#24 landed):
 
-1. Commit the change — on a feature branch, or on the fork's `main`; both have been used.
+1. Commit the change on a feature branch — `git checkout -b <branch>`. (The fork's `main` has also been used, but a branch keeps the fork mergeable.)
 2. `git push -u origin <branch>`
 3. `gh pr create --repo pyoomph/pyoomph.github.io --base main --head cdiddens:<branch>`
 4. Merge the PR. **Merging is what publishes the site**, so it is the user's call, not something to do unprompted.
+5. Sync all three copies of `main`:
+   ```bash
+   git checkout main && git pull upstream main && git push origin main
+   ```
+6. Delete the merged branch, locally and on the fork:
+   ```bash
+   git branch -d <branch> && git push origin --delete <branch>
+   ```
+
+Steps 5 and 6 are part of publishing, not an optional tidy-up: without them the local and fork `main` drift behind `upstream/main`, and the next branch is cut from a stale base. Finish with `git log --oneline -1 --decorate` — `HEAD -> main`, `upstream/main` and `origin/main` should all name the merge commit, and `git status` should show nothing but the untracked build outputs listed at the bottom of this file.
 
 The merge pushes to `upstream/main`, which triggers `.github/workflows/deploy.yml`: it installs the dependencies, runs `gen_page.sh` and force-pushes `_generated/` to the `gh-pages` branch via `JamesIves/github-pages-deploy-action`. That run takes ~20 s and is followed by GitHub's own "pages build and deployment" run. Check both with `gh run list --repo pyoomph/pyoomph.github.io`.
 

_generated/css/style.css

@@ -52,6 +52,21 @@ a {text-decoration:underline; color:#000000;}
 
 /* keep the mark on the same line as its label when the menu wraps */
 #menu a { white-space: nowrap; }
+
+/* the closing bar is the same green strip, but carries a single right-aligned
+   "Top" link instead of the centred nav */
+#menu.footer-bar { text-align: right; }
+#menu.footer-bar a {
+  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",helvetica,arial,sans-serif;
+  font-size: 18px;
+  letter-spacing: 1px;
+  padding: 4px 16px;
+}
+
+/* the jump to #page-top is a lot easier to follow when it is animated */
+@media (prefers-reduced-motion: no-preference) {
+  html { scroll-behavior: smooth; }
+}
 #menu li.selected a {color: #FFF}
 
 
@@ -160,19 +175,65 @@ text-decoration:none;
 }
 
 
+/* Frame around the tutorial strip, so that it reads as one scrollable panel
+   rather than as a row of thumbnails that happens to be cut off at the edge. */
+.scroller-frame {
+  border: 1px solid #CCC;
+  border-radius: 12px;
+  background-color: #FAFAFA;
+  padding: 12px 12px 4px;
+}
+
+.scroller-hint {
+  text-align: center;
+  font-size: 13px;
+  color: #555;
+  margin: 6px 0 2px;
+}
+
 .horizontal-media-scroller {
   --size: 300px;
 
-
 
-  align-items: center; 
+
+  align-items: center;
   display: grid;
   grid-auto-flow: column;
   gap: calc(var(--gap) / 2);
   margin: 0;
+  padding-bottom: 10px;
 
   overflow-x: auto;
   overscroll-behavior-inline: contain;
+
+  /* keep a scrollbar visible instead of the overlay one that only appears
+     while scrolling - it is the clearest affordance there is */
+  scrollbar-width: thin;
+  scrollbar-color: #377e22 #E0E0E0;
+
+  /* Shadows at whichever edge still has content behind it. The two covering
+     gradients scroll with the content (background-attachment: local) and so
+     uncover the shadows underneath only once there is something to scroll
+     back to - which makes them disappear by themselves at either end. */
+  background:
+    linear-gradient(to right, #FAFAFA 30%, rgba(250,250,250,0)) left center,
+    linear-gradient(to left, #FAFAFA 30%, rgba(250,250,250,0)) right center,
+    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) left center,
+    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) right center;
+  background-repeat: no-repeat;
+  background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
+  background-attachment: local, local, scroll, scroll;
+}
+
+/* the same visible scrollbar for WebKit/Blink, which ignores scrollbar-width */
+.horizontal-media-scroller::-webkit-scrollbar { height: 10px; }
+.horizontal-media-scroller::-webkit-scrollbar-track {
+  background: #E0E0E0;
+  border-radius: 5px;
+}
+.horizontal-media-scroller::-webkit-scrollbar-thumb {
+  background: #377e22;
+  border-radius: 5px;
 }
 
 /* These used to be nested inside the rule above with `&`. Written out flat, so
@@ -248,6 +309,8 @@ text-decoration:none;
   #content ol { padding-left: 1.6em; }
 
   /* one thumbnail at a time, captions wrapping under it */
+  .scroller-frame { padding: 8px 8px 2px; }
+  .scroller-hint { font-size: 12px; }
   .horizontal-media-scroller { gap: 12px; }
   .horizontal-media-scroller > li { max-width: 200px; }
 }

footer.html

@@ -1,8 +1,6 @@
-
-
 <br>
 <br>
-<div id="menu">&nbsp;</div>
+<div id="menu" class="footer-bar"><a class="back-to-top" href="#page-top"><svg class="menu-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 4.2l5 6.4h-3.3v9.9h-3.4v-9.9H7z"/></svg>Top</a></div>
 </div>
 
 

gen_example_gallery.py

@@ -51,6 +51,7 @@ def download_img_and_patch(img,skip_download=False):
 print("<center><h1>Tutorial</h1></center>")
 print('The <a href="'+html_doc+'">full tutorial can be found here</a>, but below please find some examples to start with:<br>')
 
+print('<div class="scroller-frame">')
 print('<ul class="horizontal-media-scroller">')
 for img,title in zip(imgs,titles):
     print('<li>')
@@ -66,4 +67,8 @@ def download_img_and_patch(img,skip_download=False):
     print("</a>")
     print("</li>")
 print('</ul>')
+# the strip is wider than the page: say so, since a trackpad or a touch screen
+# gives no scrollbar to notice on its own
+print('<p class="scroller-hint"><span aria-hidden="true">&#8592;</span> scroll sideways for more examples <span aria-hidden="true">&#8594;</span></p>')
+print('</div>')
 print("<br>")