Improve browser compatibility for terminal, pulse, and penguin contrast

Author: Bikram Gole

script.js

@@ -527,7 +527,29 @@ function triggerPenguinPowerUp() {
   window.setTimeout(() => penguinAvatar.classList.remove("power-up"), 620);
 }
 
+function initRuntimeCompatibility() {
+  const apply = () => {
+    const ua = navigator.userAgent || "";
+    const isFirefoxLike = ua.includes("Firefox") || ua.includes("LibreWolf");
+    const isSmallViewport = window.matchMedia?.("(max-width: 820px)")?.matches || false;
+    const isCoarsePointer = window.matchMedia?.("(pointer: coarse)")?.matches || false;
+    const forceTerminalFallback = isSmallViewport || isCoarsePointer;
+
+    document.body.classList.toggle("browser-firefox", isFirefoxLike);
+    document.body.classList.toggle("browser-not-firefox", !isFirefoxLike);
+    document.body.classList.toggle("force-terminal-fallback", forceTerminalFallback);
+  };
+
+  apply();
+  window.addEventListener("resize", apply);
+}
+
 function applyTerminalFontFallbackMode() {
+  if (document.body.classList.contains("force-terminal-fallback")) {
+    document.body.classList.add("no-nerd-font");
+    return;
+  }
+
   const hasNerdFont = NERD_FONT_FAMILIES.some((family) => {
     if (!window?.document?.fonts?.check) return false;
     return window.document.fonts.check(`12px "${family}"`);
@@ -1568,6 +1590,7 @@ initPenguinDateBadge();
 initThemeSwitcher();
 initHeroTypewriters();
 initBlackflagGunfire();
+initRuntimeCompatibility();
 initTerminalFontFallbackMode();
 initMiniTerminal();
 initCommandPalette();

styles.css

@@ -1111,15 +1111,21 @@ kbd {
 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 {
+body.no-nerd-font .mini-terminal-form input,
+body.force-terminal-fallback .omp-row,
+body.force-terminal-fallback .mini-terminal-line,
+body.force-terminal-fallback .mini-terminal-form label,
+body.force-terminal-fallback .mini-terminal-form input {
   font-family: "JetBrains Mono", "Fira Mono", "Menlo", "Consolas", "Courier New", monospace;
 }
 
-body.no-nerd-font .omp-nerd {
+body.no-nerd-font .omp-nerd,
+body.force-terminal-fallback .omp-nerd {
   display: none;
 }
 
-body.no-nerd-font .omp-fallback {
+body.no-nerd-font .omp-fallback,
+body.force-terminal-fallback .omp-fallback {
   display: inline;
 }
 
@@ -1507,6 +1513,10 @@ body.no-nerd-font .omp-fallback {
   filter: drop-shadow(0 10px 18px rgba(24, 58, 112, 0.38));
 }
 
+body.browser-not-firefox .penguin-avatar {
+  filter: drop-shadow(0 10px 18px rgba(24, 58, 112, 0.38)) brightness(1.12) saturate(1.06);
+}
+
 .penguin-avatar::before {
   content: "";
   position: absolute;
@@ -2291,6 +2301,15 @@ body[data-theme="liquidglass"] .site-footer {
   filter: blur(1px) saturate(132%);
 }
 
+body.browser-firefox .pulse-wave {
+  mix-blend-mode: normal;
+  filter: none;
+  background:
+    radial-gradient(140px 140px at var(--pulse-x, 50%) var(--pulse-y, 35%), rgba(164, 218, 255, 0.85), transparent 66%),
+    radial-gradient(360px 260px at calc(var(--pulse-x, 50%) + 8%) calc(var(--pulse-y, 35%) - 8%), rgba(255, 162, 85, 0.34), transparent 72%),
+    radial-gradient(620px 440px at var(--pulse-x, 50%) var(--pulse-y, 35%), rgba(71, 139, 255, 0.28), transparent 78%);
+}
+
 .pulse-wave::after {
   content: "";
   position: absolute;