website-xp-phone 2.2.1 → 2.2.12

package/src/styles/extras.css

@@ -3,12 +3,20 @@
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
+  /* The OK button wraps below the content (margin-left: auto line) but the
+     row is full-width (the display:contents maximize-shell leaves the
+     window as a direct flex item of .page), so wrapped flex lines would
+     stack flush against the last window above. Row-gap = the window-body
+     padding gives the buttons the same vertical separation as windows. */
+  row-gap: 8px;
 }
 
 .ok-row > button {
   margin-left: auto;
 }
 
+/* Buttons get the window padding above them via .ok-row's row-gap
+   (above); no page-specific spacing needed. */
 .ok-row-bottom {
   align-items: flex-end;
 }
@@ -18,15 +26,65 @@
   inset: 0;
   z-index: 2000;
   background: rgba(0, 0, 0, 0.6);
-  /* The dimmed layer itself is the scroll surface: a maximized window
-     taller than the viewport scrolls as a whole (title bar and all)
-     instead of scrolling its interior. */
+  /* The dimmed shell is the scroll surface: a maximized window taller
+     than the viewport scrolls as a whole (title bar and all), keeping
+     one consistent piece of geometry for content, banners and rail. */
   overflow-y: auto;
   display: flex;
-  /* The window docks top-left; margin: auto on it centers it whenever it
-     fits, and lets it pin to the top edge when it overflows. */
-  align-items: flex-start;
-  justify-content: flex-start;
+  /* SAFE centering: a fitting window centers in the scrollport; an
+     overflowing one docks to the top edge instead (auto margins misbehave
+     on an overflowing scroll surface — bottom-anchoring the window). */
+  align-items: safe center;
+  justify-content: safe center;
+}
+
+/* Every window is wrapped by the shell: display: contents keeps the
+   window's own flow box while inline; the SAME wrapper becomes the
+   fixed darkened backdrop when the window lifts — the window element
+   stays inside the background element in every state. */
+.maximized-shell {
+  display: contents;
+}
+
+.maximized-backdrop:not(.page-slide-backdrop-ride):not(
+    .page-slide-backdrop-close
+  ) {
+  /* The darkening fades rather than blinking in when the window lifts
+     over the page (its removal always rides the fade-out clone,
+     whose own mount animation must not be overridden by this one). */
+  animation: page-slide-backdrop-in 180ms ease-out;
+}
+
+@keyframes page-slide-backdrop-in {
+  from {
+    opacity: 0;
+    background: rgba(0, 0, 0, 0);
+  }
+}
+
+/* The maximized window flows INSIDE its shell (the backdrop): hugging
+   content — no viewport clamp, no auto margins (they misalign on the
+   overflowing scroll surface). Alignment is the shell's safe centering.
+   Taller content extends the window; the dimmed shell scrolls it as one
+   piece (banner, posts and rail keep their DOM order and geometry). */
+.window.maximized {
+  width: max-content;
+  max-width: 96vw;
+  min-width: min(800px, 96vw);
+  height: fit-content;
+  min-height: 0;
+  max-height: none;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.window-minimized-body {
+  padding: 0.5em;
+}
+
+.window-minimized-body .ok-row {
+  margin: 0;
 }
 
 .artist-background {
@@ -50,6 +108,17 @@
   background: #fff;
   border-top: 1px solid #808080;
   color: #2f2f2f;
+  /* The bar rides out with its page (a page-slide-bar clone drops it);
+     each arrival — the music page remounts it on every navigation —
+     slides it back in from the bottom edge. */
+  animation: debug-bar-enter 240ms ease-out backwards;
+}
+
+@keyframes debug-bar-enter {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
 }
 
 .debug-bar strong {
@@ -91,34 +160,13 @@
   margin-left: 0;
 }
 
-.maximized-backdrop > .window.maximized {
-  /* Desktop maximize = a foreground modal, not a fullscreen takeover:
-     centered (margin: auto), hugging its content — shrink-wrapped width
-     with an 800px floor (narrow content must not become a sliver) and a
-     96vw cap. Content taller than the viewport extends past the backdrop
-     edge and the dimmed layer scrolls the window as one piece — no inner
-     scrolling. */
-  margin: auto;
-  width: max-content;
-  max-width: 96vw;
-  min-width: min(800px, 96vw);
-  height: auto;
-  /* Override the base .window.maximized min sizes, or the window stays at
-     full viewport size. */
-  min-height: 0;
-  box-sizing: border-box;
-  max-height: none;
-  display: flex;
-  flex-direction: column;
-}
-
 /* Leaf windows (no nested section nodes) size purely to their inner content
    on maximize — no 800px floor below. */
-.maximized-backdrop > .window.maximized.content-size {
+.window.maximized.content-size {
   min-width: 0;
 }
 
-.maximized-backdrop > .window.maximized > .window-body {
+.window.maximized > .window-body {
   /* Drop the 8px XP window-body margin so the scrollbar hugs the window
      frame; the inset moves to padding, which scrollbars do not overlap. */
   margin: 0;
@@ -131,6 +179,13 @@
 body:has(.maximized-backdrop) {
   overflow: hidden;
 }
+/* The maximized window is an in-tree fixed child of .page; the z-index
+   raise lets the dimmed shell cover the menu bar like the old body-level
+   portal did. (.page itself carries no perspective/transform-style — see
+   window.css — so fixed descendants stay viewport-anchored.) */
+body:has(.maximized-backdrop) .page {
+  z-index: 3000;
+}
 body:has(.maximized-backdrop) .debug-bar {
   display: none;
 }

package/src/styles/layout.css

@@ -119,35 +119,43 @@ body:has([data-debug-bar]) .page {
      with equal specificity. dvh (with vh fallback) tracks the *visible*
      viewport, so the Android Firefox/Chrome navigation bar cannot hide the
      window's top edge underneath it. */
-  body .maximized-backdrop > .window.maximized {
+  body .window.maximized {
     margin: 0;
     width: 100vw;
-    height: 100vh;
-    height: 100dvh;
+    max-width: 100vw;
+    /* Content-hugging like desktop, NO viewport-height clamp: taller
+       content extends the window and the dimmed shell scrolls it as one
+       piece (the artist background survives the scroll, the rail lands
+       at the true geometry end). */
     min-width: 0;
     min-height: 0;
+    scrollbar-width: none;
+  }
+  body .window.maximized::-webkit-scrollbar,
+  body .window.maximized > .window-body::-webkit-scrollbar,
+  body .window.maximized > .maximized-window-body::-webkit-scrollbar {
+    display: none;
+  }
+  body .window.maximized > .window-body,
+  body .window.maximized > .maximized-window-body {
+    scrollbar-width: none;
   }
 
-  body
-    .maximized-backdrop
-    > .window.maximized
-    > .window-body,
-  body
-    .maximized-backdrop
-    > .window.maximized
-    > .maximized-window-body {
+  body .window.maximized > .window-body,
+  body .window.maximized > .maximized-window-body {
     margin: 0;
     padding: 0;
+    scrollbar-width: none;
   }
 
   /* Leaf windows (no nested sections) keep their natural size on maximize
-     instead of ballooning to the viewport; margin: auto centers them in
-     the dimmed layer. */
-  body .maximized-backdrop > .window.maximized.content-size {
-    margin: auto;
+     instead of ballooning to the viewport; auto margins center them
+     horizontally, docked to the top edge. */
+  body .window.maximized.content-size {
+    margin: 0 auto;
     width: min(100vw, 1100px);
-    height: auto;
-    max-height: 100dvh;
+    max-width: 100vw;
+    min-height: 0;
   }
 
   /* Give the unhide button a visible chinbar on mobile so it isn't
@@ -180,7 +188,8 @@ body:has([data-debug-bar]) .page {
   :root {
     --menu-bar-height: 24px;
   }
-  .page > .window {
+  .page > .window,
+  .page > .maximized-shell > .window {
     box-sizing: border-box;
     margin: 0 auto;
     /* width: fit-content; */

package/src/styles/window.css

@@ -101,61 +101,52 @@
   }
 }
 
-.window[data-theme~="experimental"] {
-  /* The 3D perspective is provided by the .page ancestor so the raise/wobble
-     isn't clipped by this element's own box; here we just preserve the 3D
-     context and animate the transform. */
-  transform-style: preserve-3d;
-  transition:
-    transform 120ms ease-out,
-    box-shadow 120ms ease-out;
-  will-change: transform;
-}
+/* Nothing at the window level: experimental sections keep their plain
+   sizing/backgrounds — wobbling the frame itself used to clobber the
+   lifted window's background and position. */
 
-/* #feef69 box-shadow glow only while maximized: the maximized window is a
-   remounted element in the backdrop, so the flash plays exactly one pulse
-   on entry into the fullscreen view (highlighting what is being focused). */
-.window.maximized[data-theme~="experimental"] {
-  animation: theme-experimental-flash 850ms ease-in-out;
+/* The one-pulse entry glow lives on the TITLE TEXT instead: maximized
+   experimental windows flash their heading #FEEF69 exactly once on
+   entry into the fullscreen view (highlighting what is being focused). */
+.window.maximized[data-theme~="experimental"] .title-bar-text {
+  animation: title-flash-feef69 850ms ease-in-out;
 }
 
-@keyframes theme-experimental-flash {
+@keyframes title-flash-feef69 {
   0%,
   100% {
-    box-shadow: 0 0 0 0 rgba(254, 239, 105, 0);
+    color: inherit;
   }
   40%,
   75% {
-    box-shadow:
-      0 0 0 4px #feef69,
-      0 0 1.2em #feef69;
-  }
-}
-
-/* Respect reduced-motion: no fullscreen glow or wobble. */
-@media (prefers-reduced-motion: reduce) {
-  .window.maximized[data-theme~="experimental"] {
-    animation: none;
-  }
-}
-
-/* The hover/focus wobble stays a page-level affair: maximized windows must
-   not retrigger anything on mouse movement (hovering would override the
-   one-time glow, and un-hovering would replay it). */
-@media (hover: hover) {
-  .window[data-theme~="experimental"]:not(.maximized):hover {
-    /* Bob up and down (translateY) in the page's 3D space. */
-    animation: theme-experimental-wobble 0.6s ease-in-out;
+    color: #feef69;
   }
 }
 
+/* The WOBBLE is back on the window itself: an experimental section bobs
+   gently on hover/focus in the page (a11y + character); the window root
+   stays untouched when lifted (nothing retriggers in the fullscreen
+   view) — see the descendant suppression right below. */
+.window[data-theme~="experimental"]:not(.maximized):hover,
 .window[data-theme~="experimental"]:not(.maximized):focus-within {
-  /* Keyboard focus also triggers the wobble (a11y). */
   animation: theme-experimental-wobble 0.6s ease-in-out;
 }
 
-/* Respect reduced-motion: skip the wobble animation, keep the raise. */
+/* The :not(.maximized) guard above only covers the lifted ROOT window.
+   Maximizing force-expands the whole subtree (MaximizedWindow patches
+   every descendant expanded), so inline experimental child windows
+   inside the fullscreen view still match hover/focus and bob with a
+   translateY animation inside the fixed overlay's overflow-y scroll
+   surface — breaking its scroll positioning. Suppress them: the page
+   wobble is a page-context effect only. */
+.window.maximized .window[data-theme~="experimental"]:hover,
+.window.maximized .window[data-theme~="experimental"]:focus-within {
+  animation: none;
+}
+
+/* Respect reduced-motion: no glow, no wobble. */
 @media (prefers-reduced-motion: reduce) {
+  .window.maximized[data-theme~="experimental"] .title-bar-text,
   .window[data-theme~="experimental"]:not(.maximized):hover,
   .window[data-theme~="experimental"]:not(.maximized):focus-within {
     animation: none;
@@ -224,6 +215,7 @@
 
 /* Hide border on first-level windows to avoid double border */
 .page > .window,
+.page > .maximized-shell > .window,
 main > .page {
   border: none;
 }
@@ -232,7 +224,8 @@ main > .page {
    inner content (e.g. a Spotify iframe) can't push itself past the rest
    of the page. Defaults to 768px to match the website's compact reading
    width; only grows when the viewport is narrower than that. */
-.page > .window {
+.page > .window,
+.page > .maximized-shell > .window {
   width: min(768px, 100% - (var(--gap-size) * 2));
   max-width: min(768px, 100% - (var(--gap-size) * 2));
 }
@@ -299,12 +292,10 @@ li {
   flex-direction: column;
   place-items: center;
   min-height: 100%;
-  /* Establish the 3D viewing space for themed windows so their raise/wobble
-     transforms (translateZ, scale) render relative to the page rather than
-     being clipped by the page's own box. */
-  perspective: 800px;
-  /* Let a raised window overflow the page bounds without clipping. */
-  transform-style: preserve-3d;
+  /* NO perspective / transform-style here: the themed raise/wobble
+     transforms are plain 2D translateY, and any 3D viewing space would
+     turn .page into the containing block for fixed-position descendants
+     (maximized windows ride in-tree over the page). */
 }
 
 .window.maximized {
@@ -392,8 +383,7 @@ form#form > label {
 
 /* In a maximized "centered" window the content hugs the bottom left corner
    and grows upward and rightward as the space allows. */
-.maximized-backdrop
-  > .window.maximized[data-theme~="centered"]
+.window.maximized[data-theme~="centered"]
   > .maximized-window-body
   > ul {
   display: flex;
@@ -401,8 +391,7 @@ form#form > label {
   justify-content: flex-end;
 }
 
-.maximized-backdrop
-  > .window.maximized[data-theme~="centered"]
+.window.maximized[data-theme~="centered"]
   > .maximized-window-body
   > ul
   > li {
@@ -482,6 +471,20 @@ form#form > label {
   padding: 0.5em;
 }
 
+/* Desktop keeps the liked fixed-height card; mobile squares the player
+   at the player's own footprint size, so square can never balloon tall
+   (spotify favourite-link players included via .embed). */
+@media (max-width: 768px) {
+  .embed,
+  [data-testid="embed-iframe"] {
+    display: block;
+    width: min(100%, 250px);
+    aspect-ratio: 1 / 1;
+    height: auto;
+    margin: 0 auto;
+  }
+}
+
 .music-favourite-link-window ul {
   min-width: 100%;
 }

package/src/themes/pageSlide/index.ts

@@ -4,6 +4,7 @@ import {
   setTheme,
   type ThemeDefinition,
 } from "lightdni-jssas-toggle";
+import { playMinimizeClick } from "@/lib/audio";
 import { resolveDirection, type Direction } from "./direction";
 import "./pageSlide.css";
 
@@ -39,14 +40,19 @@ const slide = (name: string, inX: string, inY: string): ThemeDefinition => ({
   },
 });
 
-const themes: Record<Direction, ThemeDefinition> = {
+const themes: Record<Direction | "parked", ThemeDefinition> = {
   right: slide("right", "100vw", "0"),
   left: slide("left", "-100vw", "0"),
   down: slide("down", "0", "-100vh"),
+  /** Initial load ONTO a hyperlinked window target: the slide theme is
+   * fully installed (its class drives minimize folds and the navigation
+   * hooks) but with a zero-distance entrance — nothing visibly moves
+   * while the maximized overlay is the page's first paint. */
+  parked: slide("parked", "0", "0"),
 };
 
 const root = () => document.documentElement;
-const applyDirection = (themeName: Direction) =>
+const applyDirection = (themeName: Direction | "parked") =>
   setTheme({
     themeName,
     themes,
@@ -95,22 +101,39 @@ function leaveGhost(): void {
   ghost.querySelectorAll("iframe, audio, video").forEach((el, i) => {
     const box = mediaBoxes[i];
     if (!box) return;
+    const live = liveMedias[i];
+    const isIframe = live?.tagName === "IFRAME";
     const placeholder = document.createElement("div");
     // Media can't be cloned into the static ghost; placeholders only carry
     // the layout box, with the document-paper look for iframes.
-    placeholder.className =
-      liveMedias[i]?.tagName === "IFRAME"
-        ? "page-slide-placeholder page-slide-placeholder-frame"
-        : "page-slide-placeholder";
+    placeholder.className = isIframe
+      ? "page-slide-placeholder page-slide-placeholder-frame"
+      : "page-slide-placeholder";
     placeholder.style.cssText = `width:${box.width}px;height:${box.height}px`;
+    if (isIframe && live) {
+      // Document frames keep their own paper background while the page
+      // drops: the resume preview is styled white, and falling back to the
+      // themed (dark) background reads as the PDF unloading mid-exit.
+      // Transparent iframes (music embeds) keep the themed placeholder
+      // background — a white flash there is visual pollution.
+      const background = getComputedStyle(live).backgroundColor;
+      if (
+        background &&
+        background !== "transparent" &&
+        background !== "rgba(0, 0, 0, 0)"
+      ) {
+        placeholder.style.backgroundColor = background;
+      }
+    }
     el.replaceWith(placeholder);
   });
   // XP-style minimise: each top-level window folds down onto the taskbar
   // line — the bottom edge of the page — sucked toward it while shrinking.
   // The fold distance is measured per window; CSS does the squash.
   const taskbarLine = window.innerHeight;
-  ghost.querySelectorAll<HTMLElement>(".page > .window").forEach((win, i) => {
-    const liveWin = main.querySelectorAll(".page > .window")[i];
+  const topLevel = ".page > .window, .page > .maximized-shell > .window";
+  ghost.querySelectorAll<HTMLElement>(topLevel).forEach((win, i) => {
+    const liveWin = main.querySelectorAll(topLevel)[i];
     if (!liveWin) return;
     const dy = Math.max(
       0,
@@ -119,13 +142,28 @@ function leaveGhost(): void {
     win.style.setProperty("--page-fold-dy", `${Math.round(dy)}px`);
   });
   document.body.appendChild(ghost);
+  // Maximized overlays ride INSIDE the ghost now (they are in-tree), so
+  // the dimmed layer and the maximized window fold and drop with the
+  // page — no portal ride-out is needed on navigation.
   document.querySelectorAll<HTMLElement>("body > .debug-bar").forEach((bar) => {
+    // A bar hidden by the maximized overlay rides nothing: cloning it
+    // only paints a flash after the unlock (the folded ghost unparks
+    // body:has while the ride is still alive).
+    if (getComputedStyle(bar).display === "none") return;
     const leaving = bar.cloneNode(true) as HTMLElement;
     leaving.classList.add("page-slide-bar");
     // Layout rules key off this attribute; the clone must not keep them alive.
     leaving.removeAttribute("data-debug-bar");
     document.body.appendChild(leaving);
-    window.setTimeout(() => leaving.remove(), REMOVAL_MS);
+    // The live bar yields to the clone in the same frame — visibility,
+    // not display, so the body padding rules keep reserving its row —
+    // and the clone drops (and fades) with the page instead of the bar
+    // blinking out at the route commit.
+    bar.classList.add("page-slide-bar-hide");
+    window.setTimeout(() => {
+      leaving.remove();
+      bar.classList.remove("page-slide-bar-hide");
+    }, REMOVAL_MS);
   });
   const remove = (event?: Event) => {
     // Child windows bubbling their minimise-end must NOT retire the ghost —
@@ -146,14 +184,23 @@ function leaveGhost(): void {
 
 let current = "";
 let originalPushState: History["pushState"] | null = null;
+/** Mutes the next transition's fold click: a window ✕ that navigates
+ * closes with its own crunchy kick — no Click.ogg on top of it. */
+let clickSuppressed = false;
+
+export function suppressNextSlideClick(): void {
+  clickSuppressed = true;
+}
 
 /** On mobile screens the appearing page always slides straight down
  * (from above) — the side-by-side menu-order metaphor doesn't read on
  * a narrow, wrapped menu. Matches the layout.css 768px breakpoint. */
 const isMobileLayout = () => window.matchMedia("(max-width: 768px)").matches;
 
-function transition(to: string): void {
+function transition(to: string, hash: string): void {
   if (to === current) return;
+  if (clickSuppressed) clickSuppressed = false;
+  else playMinimizeClick();
   const direction = isMobileLayout()
     ? "down"
     : resolveDirection(current, to, menuOrder());
@@ -161,6 +208,9 @@ function transition(to: string): void {
   applyDirection(direction);
   restartArrival();
   current = to;
+  // A new page starts at the top — unless the url carries a hash, whose
+  // element the navigation scrolls itself to (scrollToHash).
+  if (!hash) window.scrollTo({ top: 0 });
 }
 
 /** Restart the just-applied destination slide so it runs in step with the
@@ -179,7 +229,39 @@ function restartArrival(): void {
   }
 }
 
-const onPopState = () => transition(location.pathname);
+const onPopState = () => {
+  if (location.pathname === current) {
+    // Same-page history traversal only moves the hash: bring the
+    // hyperlinked element into view (inside its scrolling window).
+    if (location.hash) scrollToHash(location.hash);
+    return;
+  }
+  transition(location.pathname, location.hash);
+};
+
+/** Scrolls the hash element into view — inside its scrolling window
+ * (a maximized window scrolls its own revealed content) or the page.
+ * The element can mount after the route commit (lazy pages), hence the
+ * deferred retries. */
+function scrollToHash(hash: string, attempts = 12): void {
+  const id = decodeURIComponent(hash.slice(1));
+  if (!id) return;
+  const tick = () => {
+    const el = document.getElementById(id);
+    if (el) {
+      // Maximized windows are viewport-fixed overlays; scrolling the page
+      // behind them just resets the background while the overlay hides
+      // it. The restored window scrolls itself to the hash element on
+      // dismissal instead.
+      if (!el.closest(".maximized-backdrop")) {
+        el.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+      return;
+    }
+    if (attempts > 0) window.setTimeout(tick, 100);
+  };
+  tick();
+}
 
 /**
  * Adds the sliding page transition as a lightdni-jssas-toggle theme: the
@@ -190,14 +272,34 @@ const onPopState = () => transition(location.pathname);
 export function enablePageSlide(): void {
   if (originalPushState || typeof document === "undefined") return;
   current = location.pathname;
-  applyDirection("down");
+  // Initial load ONTO a hyperlinked window target (#hash or a blog
+  // ?post= the route maximizes): install the theme "parked" so the
+  // entrance slide plays from nowhere — the maximized overlay is the
+  // only visible first paint, and minimize folds / navigation hooks
+  // stay functional. Plain loads slide in from the top as before.
+  const linkedWindowTarget =
+    !!location.hash || new URLSearchParams(location.search).has("post");
+  applyDirection(linkedWindowTarget ? "parked" : "down");
 
   const original = history.pushState.bind(history);
   originalPushState = history.pushState;
   history.pushState = (data, unused, url) => {
-    if (url != null) transition(new URL(url, location.href).pathname);
+    if (url != null) {
+      const target = new URL(url, location.href);
+      if (target.pathname !== current) {
+        transition(target.pathname, target.hash);
+        if (target.hash) scrollToHash(target.hash);
+      } else if (target.hash && target.hash !== location.hash) {
+        // Same pathname, new hash: no page transition — scroll instead.
+        scrollToHash(target.hash);
+      }
+    }
     original(data, unused, url);
   };
+  // Same-page hyperlinks to hash elements change the hash natively.
+  window.addEventListener("hashchange", (event) =>
+    scrollToHash(new URL(event.newURL).hash),
+  );
   window.addEventListener("popstate", onPopState);
 }