From 326f28e4ac057a6b3cd43ec761954faad1796f34 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sat, 20 Jun 2026 11:15:06 +0200
Subject: [PATCH] feat(story): sticky nav title + floating back-to-top pill

Nav title: absolutely centered in the site-header, fades in via
IntersectionObserver when .story-hero__content scrolls above the fold.
Hidden on mobile (< 640px) where there is no room.

Back-to-top: fixed bottom-right pill, appears after 80% of the hero
viewport is scrolled past, smooth-scrolls to top on click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
---
 themes/intotheeast/css/style.css             | 46 ++++++++++++++++++++
 themes/intotheeast/templates/story.html.twig | 31 +++++++++++++
 2 files changed, 77 insertions(+)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index d990013..26826e4 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -1194,6 +1194,52 @@ body::after {
     text-decoration: none;
 }
 
+/* ── Story nav title (desktop: fades into header center) ─────── */
+.story-nav-title {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-ink);
+    white-space: nowrap;
+    max-width: 40%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 0;
+    transition: opacity 0.35s ease;
+    pointer-events: none;
+}
+.story-nav-title.is-visible { opacity: 1; }
+@media (max-width: 640px) { .story-nav-title { display: none; } }
+
+/* ── Back to top pill ─────────────────────────────────────── */
+.story-totop {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    font-family: var(--font-ui);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    color: var(--color-ink);
+    background: var(--color-canvas);
+    border: 1px solid var(--color-border);
+    border-radius: 9999px;
+    padding: 0.4rem 0.9rem;
+    cursor: pointer;
+    opacity: 0;
+    transform: translateY(6px);
+    transition: opacity 0.3s ease, transform 0.3s ease, background 0.15s;
+    pointer-events: none;
+    z-index: 90;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+.story-totop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
+.story-totop:hover { background: var(--color-paper); }
+
 /* ── ChapterBreak ─────────────────────────────────────────── */
 .chapter-break {
     position: relative;
diff --git a/themes/intotheeast/templates/story.html.twig b/themes/intotheeast/templates/story.html.twig
index 47781b8..cce4be0 100644
--- a/themes/intotheeast/templates/story.html.twig
+++ b/themes/intotheeast/templates/story.html.twig
@@ -2,6 +2,7 @@
 
 {% block nav %}
 <a class="story-escape" href="{{ page.parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
+<span class="story-nav-title" id="story-nav-title" aria-hidden="true">{{ page.title }}</span>
 {% endblock %}
 
 {% block content %}
@@ -50,6 +51,8 @@
     </footer>
 </div>
 
+<button class="story-totop" id="story-totop" aria-label="Back to top">↑ Top</button>
+
 <script src="https://cdn.jsdelivr.net/npm/scrollama@3/build/scrollama.min.js"></script>
 <script>
 /* ── Hero scroll effect ──────────────────────────────────── */
@@ -85,6 +88,34 @@
     update();
 })();
 
+/* ── Story title in nav (fades in when hero title leaves viewport) ─────── */
+(function () {
+    var navTitle    = document.getElementById('story-nav-title');
+    var heroContent = document.querySelector('.story-hero__content');
+    if (!navTitle || !heroContent) return;
+    new IntersectionObserver(function (entries) {
+        navTitle.classList.toggle('is-visible', !entries[0].isIntersecting);
+    }, { threshold: 0 }).observe(heroContent);
+})();
+
+/* ── Back to top button ─────────────────────────────────── */
+(function () {
+    var btn       = document.getElementById('story-totop');
+    if (!btn) return;
+    var threshold = window.innerHeight * 0.8;
+    var shown     = false;
+    btn.addEventListener('click', function () {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    window.addEventListener('scroll', function () {
+        var shouldShow = window.scrollY > threshold;
+        if (shouldShow !== shown) {
+            shown = shouldShow;
+            btn.classList.toggle('is-visible', shown);
+        }
+    }, { passive: true });
+})();
+
 /* ── ChapterBreak scroll-reveal ─────────────────────────── */
 (function () {
     var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;