diff --git a/static/css/ascii.css b/static/css/ascii.css index e3a9d99..57e2cdd 100644 --- a/static/css/ascii.css +++ b/static/css/ascii.css @@ -4,33 +4,36 @@ The mountain background is JS-driven: tools/mountain.py renders 60 procedural 3D mountain-flyover PNG frames; chafa converts each to 80x24 ASCII; tools/build_mountain_js.py bundles them into static/js/mountain.js. - static/js/mountain-bg.js cycles the frames at 12 fps into a single - 
 element mounted at the bottom of .
+   static/js/mountain-bg.js cycles the frames at 12 fps into the
+   
 placeholder in index.html.
 
    This CSS file:
-     - positions the frame as a full-bleed fixed background
+     - positions the frame as a full-screen top layer
      - tints the dense characters rust-orange with text-shadow + glow
      - adds a CRT scanline overlay
      - disables the animation under prefers-reduced-motion
    ========================================================================== */
 
-/* Full-bleed ASCII mountain background ---------------------------------- */
-.tp-mountain-frame {
-  position: fixed;
-  inset: 0;
+/* Full-screen ASCII mountain top layer ----------------------------------- */
+.tp-mountain-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100vw;
+  height: 100vh;
+  height: 100svh;
   z-index: 0;
   pointer-events: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   margin: 0;
   padding: 0;
   font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: clamp(8px, 1.2vw, 14px);
+  font-size: max(2.1vw, 4.17vh);
+  font-size: max(2.1vw, 4.17svh);
   line-height: 1.0;
   letter-spacing: 0;
-  color: #f4a26b;            /* warm rust-orange tint, picks up the brand */
-  text-shadow: 0 0 8px rgba(183, 65, 14, 0.35);   /* phosphor glow */
+  color: #f4a26b;
+  text-shadow: 0 0 8px rgba(183, 65, 14, 0.35);
   opacity: 0.45;
   white-space: pre;
   background: transparent;
@@ -40,7 +43,7 @@
 
 /* CRT scanlines overlay - a thin moving line every 2px. Faint so it doesn't
    fight the page content. */
-.tp-mountain-frame::after {
+.tp-mountain-bg::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -62,14 +65,14 @@
 }
 
 /* Light theme: dim the background, drop the glow, switch to dark text. */
-:root[data-theme="winter"] .tp-mountain-frame {
+:root[data-theme="winter"] .tp-mountain-bg {
   opacity: 0.20;
   color: #2a1810;
   text-shadow: none;
   mix-blend-mode: multiply;
 }
 
-:root[data-theme="winter"] .tp-mountain-frame::after {
+:root[data-theme="winter"] .tp-mountain-bg::after {
   background: repeating-linear-gradient(
     to bottom,
     transparent 0,
@@ -82,7 +85,7 @@
 
 /* Reduced motion: keep the first frame static, no scanline drift. */
 @media (prefers-reduced-motion: reduce) {
-  .tp-mountain-frame::after {
+  .tp-mountain-bg::after {
     animation: none !important;
   }
 }
diff --git a/static/js/mountain-bg.js b/static/js/mountain-bg.js
index d75b88c..2e9b189 100644
--- a/static/js/mountain-bg.js
+++ b/static/js/mountain-bg.js
@@ -12,14 +12,12 @@
 
   function init() {
     if (typeof window.TP_MOUNTAIN_FRAMES === "undefined") return;
-    if (document.querySelector("[data-tp-mountain]")) return;
 
-    var pre = document.createElement("pre");
-    pre.className = "tp-mountain-frame";
+    var pre = document.querySelector("#tp-mountain-bg");
+    if (!pre) return;
     pre.setAttribute("data-tp-mountain", "");
     pre.setAttribute("aria-hidden", "true");
     pre.textContent = window.TP_MOUNTAIN_FRAMES[0];
-    document.body.appendChild(pre);
 
     var n = window.TP_MOUNTAIN_N_FRAMES;
     var fps = window.TP_MOUNTAIN_FPS;