Layout: orientation-aware mobile, edge-feather, rotate hint

RuitingMa · claude · RuitingMa · commit 8ac030812f96 · 2026-04-22T00:36:29.000+10:00
Portrait mobile collapses to a single column with a 30svh sticky canvas
strip at the top; landscape on any device inherits the desktop two-
column grid. First-visit portrait gets a dismissable "请横屏" overlay
(persisted in localStorage, auto-dismisses on rotation).

Added edge-feather strips that dissolve the canvas↔text boundary and
fade text at the viewport bottom — body::before/::after on portrait,
.column::before/::after on desktop, scoped so the left pane isn't
touched. Both sets share the same view-transition pacing as stage/
column and live in named groups so SPA nav doesn't flicker them.

Also: last-section gap on portrait now matches preceding sections,
with the 35vh trailing quiet still in place.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -59,6 +59,23 @@ const ogImage = image ? new URL(image, Astro.site).toString() : undefined;
 
     <div class="grain" aria-hidden="true"></div>
 
+    {/* Rotate hint — shown once to first-time visitors on narrow portrait
+        screens. CSS only renders it when the media query matches, so it
+        stays out of the way on desktop/landscape. Dismisses on tap or on
+        rotate-to-landscape; seen-state persists in localStorage. */}
+    <div class="rotate-hint" role="dialog" aria-label="提示">
+      <div class="rotate-hint-card">
+        <svg class="rotate-hint-icon" viewBox="0 0 24 24" width="38" height="38"
+             fill="none" stroke="currentColor" stroke-width="1.1"
+             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <rect x="8.5" y="2.5" width="7" height="19" rx="1" />
+          <line x1="11" y1="19" x2="13" y2="19" />
+        </svg>
+        <p class="rotate-hint-text">横屏阅读体验更佳</p>
+        <span class="rotate-hint-dismiss">轻触继续</span>
+      </div>
+    </div>
+
     <script>
       // --- Space key → toggle stage pause ---
       // Canvas components listen for `stage:pause` and freeze their rAF loop.
@@ -68,7 +85,11 @@ const ogImage = image ? new URL(image, Astro.site).toString() : undefined;
       // ever does, the flag keeps us from stacking keydown listeners or
       // losing the paused state. We also re-query the stage element inside
       // the handler because it's a fresh DOM node after each navigation.
-      const w = window as unknown as { __stagePauseInstalled?: boolean; __stagePaused?: boolean };
+      const w = window as unknown as {
+        __stagePauseInstalled?: boolean;
+        __stagePaused?: boolean;
+        __rotateHintInstalled?: boolean;
+      };
       if (!w.__stagePauseInstalled) {
         w.__stagePauseInstalled = true;
         w.__stagePaused = false;
@@ -94,6 +115,44 @@ const ogImage = image ? new URL(image, Astro.site).toString() : undefined;
           window.dispatchEvent(new CustomEvent('stage:pause', { detail: { paused: true } }));
         });
       }
+
+      // Rotate-to-landscape hint. Shown only on narrow portrait screens and
+      // only until the user dismisses (tap) or rotates the device. CSS
+      // gates actual visibility via the media query — JS just toggles the
+      // body class and remembers the dismiss in localStorage so it's
+      // one-shot across visits.
+      if (!w.__rotateHintInstalled) {
+        w.__rotateHintInstalled = true;
+        const KEY = 'mien:rotate-hint-seen';
+
+        const dismiss = () => {
+          try { localStorage.setItem(KEY, '1'); } catch {}
+          document.body.classList.remove('show-rotate-hint');
+        };
+
+        const wire = () => {
+          try {
+            if (localStorage.getItem(KEY)) return;
+          } catch { return; }
+          document.body.classList.add('show-rotate-hint');
+          const hint = document.querySelector<HTMLElement>('.rotate-hint');
+          if (hint && !hint.dataset.wired) {
+            hint.dataset.wired = '1';
+            hint.addEventListener('click', dismiss);
+          }
+        };
+
+        wire();
+        document.addEventListener('astro:page-load', wire);
+
+        // Auto-dismiss the moment the user rotates to landscape, so they
+        // don't come back to the hint after rotating back.
+        try {
+          window.matchMedia('(orientation: landscape)').addEventListener('change', (e) => {
+            if (e.matches) dismiss();
+          });
+        } catch {}
+      }
     </script>
 
     <style is:global>
@@ -148,14 +207,27 @@ const ogImage = image ? new URL(image, Astro.site).toString() : undefined;
          outgoing page so navigations feel like slow dissolves, not cuts.
          The fade-in of the new page is kept short — .enter takes over
          from there for the actual reveal, so doubling up would just
-         make things muddy.  */
+         make things muddy.
+
+         Root is included so that anything left in the default group
+         (currently just the grain overlay and page background) dissolves
+         on the same clock as stage/column, instead of snapping with the
+         default snappy timing. The edge-feather strips get their own
+         named groups below so they morph between identical positions
+         without flickering.  */
+      ::view-transition-old(root),
       ::view-transition-old(stage),
-      ::view-transition-old(column) {
+      ::view-transition-old(column),
+      ::view-transition-old(edge-feather-top),
+      ::view-transition-old(edge-feather-bottom) {
         animation-duration: 600ms;
         animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
       }
+      ::view-transition-new(root),
       ::view-transition-new(stage),
-      ::view-transition-new(column) {
+      ::view-transition-new(column),
+      ::view-transition-new(edge-feather-top),
+      ::view-transition-new(edge-feather-bottom) {
         animation-duration: 300ms;
         animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
       }
@@ -226,6 +298,43 @@ const ogImage = image ? new URL(image, Astro.site).toString() : undefined;
         padding: 5rem 3rem 8rem;
         box-sizing: border-box;
         max-width: calc(var(--max-reading) + 6rem);
+        position: relative;
+      }
+
+      /* Desktop (and landscape phones that inherit the desktop layout):
+         feather the column's top and bottom at the viewport edges, the
+         same gesture we give the portrait-mobile layout. Sticky pseudo-
+         elements pin to viewport top/bottom; negative margins tuck them
+         into the column's padding area so they occupy no flow space and
+         are invisible at scrollY=0 (when bg shows through bg). Text that
+         scrolls past the top or approaches the bottom passes through the
+         gradient and dissolves into the page color.
+
+         Scoped to the right column only — the left canvas is its own
+         pane and its hard top/bottom edges are already the viewport's. */
+      @media (min-width: 861px), (orientation: landscape) {
+        .column::before,
+        .column::after {
+          content: '';
+          display: block;
+          position: sticky;
+          height: 2.5em;
+          margin-left: -3rem;
+          margin-right: -3rem;
+          pointer-events: none;
+          z-index: 2;
+        }
+        .column::before {
+          top: 0;
+          margin-top: -5rem;                       /* tuck into padding-top */
+          margin-bottom: calc(5rem - 2.5em);       /* keep first child at 5rem */
+          background: linear-gradient(to bottom, var(--bg), transparent);
+        }
+        .column::after {
+          bottom: 0;
+          margin-top: calc(8rem - 2.5em);          /* sit inside padding-bottom */
+          background: linear-gradient(to top, var(--bg), transparent);
+        }
       }
 
       /* --- Film-grain overlay, subtle, above everything --- */
@@ -239,23 +348,141 @@ const ogImage = image ? new URL(image, Astro.site).toString() : undefined;
         background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
       }
 
-      /* --- Mobile: collapse to single column, stage becomes a short hero --- */
-      @media (max-width: 860px) {
+      /* --- Portrait mobile: collapse to a single column with a sticky
+         canvas strip pinned to the top. Why sticky (not relative)? The
+         canvas is meant to react to reading cues — if it scrolls away,
+         the cue system keeps firing but nobody sees it. z-index keeps
+         the pinned strip above the text that scrolls beneath it.
+
+         Landscape mobile (phones rotated, short tablets) inherits the
+         desktop two-column layout — that's the point of the rotate hint
+         we show on first visit in portrait.  --- */
+      @media (max-width: 860px) and (orientation: portrait) {
         main {
           grid-template-columns: 1fr;
         }
         .stage {
-          position: relative;
+          position: sticky;
+          top: 0;
           /* svh = small viewport height, ignores dynamic URL bar on mobile.
-             Without it, 45vh shifts when Safari collapses its chrome.   */
-          height: 45svh;
+             Without it, heights jump when Safari collapses its chrome.  */
+          height: 30svh;
+          z-index: 1;
           border-right: none;
-          border-bottom: 1px solid var(--rule);
+          /* Hard 1px rule replaced by the body::before fade strip below,
+             which dissolves the canvas edge and fades text in together. */
+          border-bottom: none;
         }
         .column {
-          padding: 2.5rem 1.5rem 5rem;
+          padding: 2rem 1.5rem 5rem;
           max-width: 100%;
         }
+
+        /* Edge-feather strips, fixed to the viewport. Sit above the text
+           column (z-index 2 > default) and above the sticky stage (z-index
+           1) so the top strip can reach up into the canvas and soften its
+           bottom edge.
+
+           Top strip: overlays the last ~0.8em of the canvas with a
+           transparent→bg ramp (softens the canvas's hard bottom edge),
+           peaks opaque at the stage boundary (no half-character hard-
+           clip), then fades bg→transparent across ~2.5em so text
+           surfaces gradually from under the canvas.
+
+           Bottom strip: mirror — text dissolves into bg as it scrolls
+           off the lower viewport edge. Symmetric gesture to the top.  */
+        body::before,
+        body::after {
+          content: '';
+          position: fixed;
+          left: 0;
+          right: 0;
+          pointer-events: none;
+          z-index: 2;
+        }
+        body::before {
+          top: calc(30svh - 0.8em);
+          height: 3.3em;
+          background: linear-gradient(
+            to bottom,
+            transparent 0%,
+            var(--bg) 24%,
+            transparent 100%
+          );
+          /* Named groups so these survive SPA navigation as their own
+             transition layer. Without a name they fall into root, which
+             Chromium sometimes drops fixed elements from — the strip
+             would vanish mid-transition and snap back after, visible as
+             a flicker. With a name, the element is captured directly
+             and cross-fades against its identical counterpart on the
+             new page (same position + same gradient = no visible
+             change). */
+          view-transition-name: edge-feather-top;
+        }
+        body::after {
+          bottom: 0;
+          height: 2.5em;
+          background: linear-gradient(to top, var(--bg), transparent);
+          view-transition-name: edge-feather-bottom;
+        }
+      }
+
+      /* --- Rotate-hint overlay (one-shot, first visit only) ---
+         Hidden by default; the body class is toggled by JS, but we also
+         gate on the media query here so rotating mid-display hides it
+         without any JS coordination.  */
+      .rotate-hint {
+        display: none;
+        position: fixed;
+        inset: 0;
+        z-index: 10000;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem;
+        cursor: pointer;
+        background: rgba(18, 20, 22, 0.94);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        animation: enter-soft 520ms ease-out both;
+      }
+      @media (max-width: 860px) and (orientation: portrait) {
+        body.show-rotate-hint .rotate-hint { display: flex; }
+      }
+      .rotate-hint-card {
+        text-align: center;
+        color: var(--fg);
+        max-width: 18em;
+      }
+      .rotate-hint-icon {
+        display: block;
+        margin: 0 auto 1.8em;
+        color: var(--accent);
+        animation: rotate-hint-turn 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+      }
+      @keyframes rotate-hint-turn {
+        0%, 20%  { transform: rotate(0deg); }
+        45%, 70% { transform: rotate(-90deg); }
+        95%, 100% { transform: rotate(-90deg); }
+      }
+      .rotate-hint-text {
+        font-family: var(--font-body);
+        font-size: 1.05rem;
+        letter-spacing: 0.12em;
+        margin: 0;
+        color: var(--fg);
+      }
+      .rotate-hint-dismiss {
+        display: block;
+        margin-top: 2.2em;
+        font-family: var(--font-mono);
+        text-transform: uppercase;
+        letter-spacing: 0.32em;
+        font-size: 0.66rem;
+        color: var(--muted);
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .rotate-hint { animation: none; }
+        .rotate-hint-icon { animation: none; transform: rotate(-90deg); }
       }
     </style>
   </body>
diff --git a/src/layouts/EssayLayout.astro b/src/layouts/EssayLayout.astro
@@ -225,10 +225,22 @@ const tintClass = tint ? `tint-${tint}` : '';
     color: var(--accent);
   }
 
-  @media (max-width: 860px) {
+  /* Portrait-only: relax section min-heights, since a short 30svh sticky
+     canvas + tall 72vh sections would force too many scrolls per piece.
+     Landscape phones fall through to the desktop pacing.
+
+     Last-child also drops its min-height here — otherwise its desktop
+     40vh + flex-center would push the final section's content to the
+     middle of its box, creating a bigger lead-in gap than preceding
+     sections. Its padding-bottom: 35vh stays (inherited from the
+     desktop last-child rule) as the intentional trailing quiet.  */
+  @media (max-width: 860px) and (orientation: portrait) {
     .body :global(section) {
       min-height: 0;
       padding: 1.6em 0;
     }
+    .body :global(section:last-child) {
+      min-height: 0;
+    }
   }
 </style>
