diff --git a/CLAUDE.md b/CLAUDE.md index 9df0ce3..2f3b256 100644 --- a/CLAUDE.md +++ b/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 `. (The fork's `main` has also been used, but a branch keeps the fork mergeable.) 2. `git push -u origin ` 3. `gh pr create --repo pyoomph/pyoomph.github.io --base main --head cdiddens:` 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 && git push origin --delete + ``` + +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`. diff --git a/_generated/css/style.css b/_generated/css/style.css index c327643..8a432e2 100644 --- a/_generated/css/style.css +++ b/_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; } } diff --git a/footer.html b/footer.html index 9762ec8..ec02620 100644 --- a/footer.html +++ b/footer.html @@ -1,8 +1,6 @@ - -

- + diff --git a/gen_example_gallery.py b/gen_example_gallery.py index f10ee2b..b5f5634 100644 --- a/gen_example_gallery.py +++ b/gen_example_gallery.py @@ -51,6 +51,7 @@ def download_img_and_patch(img,skip_download=False): print("

Tutorial

") print('The full tutorial can be found here, but below please find some examples to start with:
') +print('
') print('
    ') for img,title in zip(imgs,titles): print('
  • ') @@ -66,4 +67,8 @@ def download_img_and_patch(img,skip_download=False): print("") print("
    • ") print('
') +# 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('

scroll sideways for more examples

') +print('
') print("
") \ No newline at end of file