web: a step's title is a road to the step

Clicking an article's h3 glides it to the middle of the viewport --
the exact spot where the tour's observer activates it, so the click
also switches the recording, through the same door scrolling uses
rather than a second mechanism. The pointer cursor and a breath of
pink on hover say clickable.

2 files changed, 16 insertions, 0 deletions

diff --git a/web/index.html b/web/index.html
index 3a71736..fa59404 100644
--- a/web/index.html
+++ b/web/index.html
@@ -460,6 +460,18 @@ if (tour) {
   const ctl = (el) => el._sloshcast;
   let current = null; // the first activation always plays
 
+  // A step's title is a road to the step: clicking it glides the article to
+  // the middle of the viewport, which is the exact spot where the observer
+  // below activates it -- so the click also switches the recording, through
+  // the same door scrolling uses.
+  for (const s of steps) {
+    const h = s.querySelector("h3");
+    if (h)
+      h.addEventListener("click", () =>
+        s.scrollIntoView({ block: "center" })
+      );
+  }
+
   const show = (name) => {
     if (!name || name === current) return;
     current = name;
diff --git a/web/site.css b/web/site.css
index d67c80c..5b280d5 100644
--- a/web/site.css
+++ b/web/site.css
@@ -450,7 +450,11 @@ section > p:last-child { margin-bottom: 0; }
   font-size: clamp(1.4rem, 2.2vw, 1.9rem);
   font-weight: 650;
   line-height: 1.25;
+  /* Clickable: the title glides its step to the centre, where it activates.
+   * The pointer and a breath of pink say so. */
+  cursor: pointer;
 }
+.step h3:hover { color: var(--pink); }
 
 .step p {
   margin: 0.8rem 0 0;