Improve mobile layout, terminal glyph fallback, and pulse reliability

Author: Bikram Gole

index.html

@@ -143,13 +143,22 @@ <h2>Neo Terminal ⚡</h2>
       <p>Type commands and control the page like a mini shell.</p>
       <div class="mini-terminal">
         <div class="mini-terminal-head">
-          <p class="omp-row omp-row-top">    Neo     0ms </p>
-          <p class="omp-row omp-row-mid">╭─ </p>
+          <p class="omp-row omp-row-top">
+            <span class="omp-nerd">    Neo     0ms </span>
+            <span class="omp-fallback">[arch] Neo | OK | 0ms</span>
+          </p>
+          <p class="omp-row omp-row-mid">
+            <span class="omp-nerd">╭─ </span>
+            <span class="omp-fallback">~/home/neo</span>
+          </p>
         </div>
         <div class="mini-terminal-screen">
           <div id="mini-terminal-output" class="mini-terminal-output" aria-live="polite"></div>
           <form id="mini-terminal-form" class="mini-terminal-form">
-            <label for="mini-terminal-input">╰─❯</label>
+            <label for="mini-terminal-input">
+              <span class="omp-nerd">╰─❯</span>
+              <span class="omp-fallback">$</span>
+            </label>
             <input id="mini-terminal-input" type="text" placeholder="help" autocomplete="off" />
           </form>
         </div>

script.js

@@ -109,6 +109,11 @@ const THEME_STORAGE_KEY = "neoThemeVariant.v1";
 const ACTION_STORAGE_KEY = "neoAutoAction.v1";
 const HERO_TYPED_KEY = "neoHeroTyped.v1";
 const MINI_PROMPT = "╰─❯";
+const NERD_FONT_FAMILIES = [
+  "JetBrainsMono Nerd Font",
+  "FiraCode Nerd Font",
+  "CaskaydiaCove Nerd Font",
+];
 const THEME_OPTIONS = [
   "neo",
   "mint",
@@ -461,7 +466,17 @@ function triggerPulseBackdrop(clientX = null, clientY = null) {
   layer.style.setProperty("--pulse-y", `${Math.round((y / height) * 100)}%`);
 
   document.body.appendChild(layer);
-  layer.addEventListener("animationend", () => layer.remove(), { once: true });
+
+  // Force animation start reliably on slower mobile browsers.
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      layer.classList.add("is-active");
+    });
+  });
+
+  const cleanup = () => layer.remove();
+  layer.addEventListener("animationend", cleanup, { once: true });
+  window.setTimeout(cleanup, 1150);
 }
 
 function playPulseSound(pulseCount = 1) {
@@ -512,6 +527,25 @@ function triggerPenguinPowerUp() {
   window.setTimeout(() => penguinAvatar.classList.remove("power-up"), 620);
 }
 
+function applyTerminalFontFallbackMode() {
+  const hasNerdFont = NERD_FONT_FAMILIES.some((family) => {
+    if (!window?.document?.fonts?.check) return false;
+    return window.document.fonts.check(`12px "${family}"`);
+  });
+  document.body.classList.toggle("no-nerd-font", !hasNerdFont);
+}
+
+function initTerminalFontFallbackMode() {
+  applyTerminalFontFallbackMode();
+  if (window?.document?.fonts?.ready) {
+    window.document.fonts.ready
+      .then(() => applyTerminalFontFallbackMode())
+      .catch(() => {
+        // Ignore font readiness failures.
+      });
+  }
+}
+
 function initPenguinDateBadge() {
   if (!penguinBelly) return;
 
@@ -1534,6 +1568,7 @@ initPenguinDateBadge();
 initThemeSwitcher();
 initHeroTypewriters();
 initBlackflagGunfire();
+initTerminalFontFallbackMode();
 initMiniTerminal();
 initCommandPalette();
 initPersonaQuiz();

styles.css

@@ -1089,6 +1089,9 @@ kbd {
   font-family: "JetBrainsMono Nerd Font", "FiraCode Nerd Font", "CaskaydiaCove Nerd Font", "Courier New", monospace;
   letter-spacing: 0.01em;
   text-shadow: 0 0 10px rgba(96, 169, 255, 0.18);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .omp-row-top {
@@ -1101,6 +1104,25 @@ kbd {
   font-size: 0.8rem;
 }
 
+.omp-fallback {
+  display: none;
+}
+
+body.no-nerd-font .omp-row,
+body.no-nerd-font .mini-terminal-line,
+body.no-nerd-font .mini-terminal-form label,
+body.no-nerd-font .mini-terminal-form input {
+  font-family: "JetBrains Mono", "Fira Mono", "Menlo", "Consolas", "Courier New", monospace;
+}
+
+body.no-nerd-font .omp-nerd {
+  display: none;
+}
+
+body.no-nerd-font .omp-fallback {
+  display: inline;
+}
+
 .mini-terminal-output {
   flex: 1;
   min-height: 0;
@@ -2258,7 +2280,7 @@ body[data-theme="liquidglass"] .site-footer {
   position: fixed;
   inset: -16%;
   pointer-events: none;
-  z-index: 32;
+  z-index: 52;
   overflow: hidden;
   opacity: 0;
   background:
@@ -2267,7 +2289,6 @@ body[data-theme="liquidglass"] .site-footer {
     radial-gradient(680px 460px at var(--pulse-x, 50%) var(--pulse-y, 35%), rgba(68, 130, 244, 0.26), transparent 78%);
   mix-blend-mode: screen;
   filter: blur(1px) saturate(132%);
-  animation: pulse-bg-wave 840ms cubic-bezier(0.16, 0.82, 0.27, 1) forwards;
 }
 
 .pulse-wave::after {
@@ -2282,6 +2303,13 @@ body[data-theme="liquidglass"] .site-footer {
   box-shadow: 0 0 16px rgba(122, 186, 255, 0.62), 0 0 28px rgba(255, 158, 74, 0.35);
   transform: translate(-50%, -50%) scale(0.34);
   opacity: 0;
+}
+
+.pulse-wave.is-active {
+  animation: pulse-bg-wave 840ms cubic-bezier(0.16, 0.82, 0.27, 1) forwards;
+}
+
+.pulse-wave.is-active::after {
   animation: pulse-ring 840ms ease-out forwards;
 }
 
@@ -2343,27 +2371,71 @@ body.istj-mode .egg-btn {
   color: var(--orange-2);
 }
 
+@media (max-width: 980px) {
+  .site-header,
+  main,
+  .site-footer {
+    width: min(1200px, calc(100vw - 2rem));
+  }
+
+  .hero,
+  .panel {
+    padding: 0.74rem;
+  }
+}
+
 @media (max-width: 760px) {
+  .site-header,
+  main,
+  .site-footer {
+    width: min(1200px, calc(100vw - 1.25rem));
+  }
+
   .site-header {
     top: 0.34rem;
     padding: 0.4rem;
-    flex-direction: column;
-    align-items: flex-start;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.45rem;
+  }
+
+  .brand-name {
+    font-size: 0.9rem;
+  }
+
+  nav a {
+    padding: 0.24rem 0.48rem;
+    font-size: 0.78rem;
   }
 
   nav {
-    width: 100%;
+    width: auto;
+    flex: 1 1 auto;
   }
 
   .header-tools {
-    width: 100%;
-    justify-content: flex-end;
+    width: auto;
+    margin-left: 0;
   }
 
   .hero-grid {
     grid-template-columns: 1fr;
   }
 
+  .hero,
+  .panel {
+    padding: 0.68rem;
+  }
+
+  h1 {
+    font-size: clamp(1.35rem, 8vw, 1.95rem);
+  }
+
+  .subtitle,
+  .panel p {
+    font-size: 0.8rem;
+  }
+
   .btn,
   .egg-btn {
     width: 100%;
@@ -2390,8 +2462,21 @@ body.istj-mode .egg-btn {
     margin-top: 6vh;
   }
 
-  .mini-terminal-form {
-    grid-template-columns: auto 1fr;
+  .mini-terminal {
+    padding: 0.48rem;
+  }
+
+  .mini-terminal-screen {
+    height: 196px;
+  }
+
+  .mini-terminal-form input,
+  .mini-terminal-line {
+    font-size: 0.74rem;
+  }
+
+  .mini-terminal-hint {
+    font-size: 0.71rem;
   }
 
   .theme-grid {
@@ -2406,3 +2491,33 @@ body.istj-mode .egg-btn {
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 520px) {
+  .site-header,
+  main,
+  .site-footer {
+    width: calc(100vw - 0.9rem);
+  }
+
+  .site-header {
+    top: 0.24rem;
+    padding: 0.34rem;
+  }
+
+  .theme-top-label {
+    display: none;
+  }
+
+  .theme-top-select {
+    max-width: 10.2rem;
+  }
+
+  .mini-terminal-screen {
+    height: 178px;
+  }
+
+  .hero-actions,
+  .control-row {
+    gap: 0.3rem;
+  }
+}