Patch

Lavanic · Lavanic · commit 4d42a738d955 · 2026-03-22T02:09:35.000-05:00
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -6,14 +6,17 @@ const { title } = Astro.props;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
+    <!-- Browser chrome color: works on Android Chrome + iOS Safari 15+ for address bar -->
     <meta name="theme-color" content="#29303C" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>{title}</title>
-    <!-- Preload logo assets so the fallback appears immediately and gears
-         start decoding before the page finishes rendering everything else -->
+    <!-- Preload the static logo pieces immediately.
+         gears.webp is 2MB so we only preload it on desktop (media query). -->
     <link rel="preload" as="image" href="/images/logo_fallback.png" />
-    <link rel="preload" as="image" href="/images/gears.webp" />
     <link rel="preload" as="image" href="/images/static.png" />
+    <link rel="preload" as="image" href="/images/gears.webp" media="(min-width: 1021px)" />
   </head>
   <body>
     <slot />
@@ -44,6 +47,7 @@ const { title } = Astro.props;
     display: flex;
     justify-content: center;
     padding: 20px;
+    background-color: #29303C;
   }
 
   body::before {
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -19,12 +19,22 @@ const paddedStamps = Array(copies).fill(stamps).flat();
       <div class="logo-wrap">
         <img class="logo-fallback" src="/images/logo_fallback.png" width="823" height="287" alt="Oliver Ohrt logo" />
         <div class="logo-composite">
-          <img src="/images/gears.webp" width="169" height="287" alt=""
+          <!-- gears.webp is 2MB — skip it on mobile to avoid slow loads. -->
+          <img id="gears-img" src="" data-src="/images/gears.webp" width="169" height="287" alt=""
             onload="this.closest('.logo-wrap').querySelector('.logo-fallback').style.display='none'" />
           <img src="/images/static.png" width="654" height="287" alt="" />
         </div>
       </div>
     </div>
+    <script>
+      // Only load the 2MB animated gears on desktop
+      // static fallback PNG which is already loaded and looks the same.
+      if (window.innerWidth > 1020) {
+        const img = document.getElementById('gears-img') as HTMLImageElement | null;
+        if (img) img.src = img.dataset.src!;
+      }
+    </script>
+
     <div class="box subheader">
       <marquee behavior="scroll" direction="right" style="color:rgb(3, 48, 252); text-shadow: 0 0 6px #ffffff, 0 0 10px #ffffff; font-weight: bold; font-size: 14px;">
         Welcome to my site!
