web: the whole step is the road, not just its title

Clicking anywhere in a dimmed article glides it to the centre and so,
through the observer, switches the recording. Three guards keep the
click meaning navigation: the active step does not react (clicks there
are for reading and selecting, not going where you already are), a
selection is not a click, and a link is a link. The pointer cursor and
the title's breath of pink now belong to dimmed steps only -- the
active one is just prose.

2 files changed, 17 insertions, 13 deletions

diff --git a/web/index.html b/web/index.html
index fa59404..1a6c6b4 100644
--- a/web/index.html
+++ b/web/index.html
@@ -460,16 +460,19 @@ 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.
+  // A step is a road to itself: clicking anywhere in a dimmed article
+  // glides it to the middle of the viewport, the exact spot where the
+  // observer below activates it -- so the click also switches the
+  // recording, through the same door scrolling uses. The active step does
+  // not react: clicks there are for reading and selecting, not going where
+  // you already are. A selection is not a click, and a link is a link.
   for (const s of steps) {
-    const h = s.querySelector("h3");
-    if (h)
-      h.addEventListener("click", () =>
-        s.scrollIntoView({ block: "center" })
-      );
+    s.addEventListener("click", (ev) => {
+      if (s.classList.contains("active")) return;
+      if (ev.target.closest("a")) return;
+      if (!getSelection().isCollapsed) return;
+      s.scrollIntoView({ block: "center" });
+    });
   }
 
   const show = (name) => {
diff --git a/web/site.css b/web/site.css
index e4c9d7a..0005a72 100644
--- a/web/site.css
+++ b/web/site.css
@@ -458,17 +458,18 @@ section > p:last-child { margin-bottom: 0; }
 .step:not(:first-child):not(:last-child) { scroll-snap-align: center; }
 .step.active { opacity: 1; }
 
+/* A dimmed step is clickable everywhere -- the whole article glides itself
+ * to the centre, where it activates. The active one is just prose. */
+.step:not(.active) { cursor: pointer; }
+.step:not(.active):hover h3 { color: var(--pink); }
+
 .step h3 {
   margin: 0;
   color: var(--fg);
   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;