Changes to logo

assets/css/grid.css

@@ -46,7 +46,7 @@ body .page-columns {
         [screen-end];
 }
 
-/* Simplified mobile layout for very small screens */
+/* Simplified mobile layout for small screens */
 @media (max-width: 640px) {
     body .page-columns {
         grid-template-columns: 
@@ -60,3 +60,10 @@ body .page-columns {
     }
 }
 
+/* Prevents logo cutoff on very small screens */
+@media (max-width: 335px) {
+    img.navbar-logo {
+        visibility: hidden;
+    }
+}
+

assets/css/navbar.css

@@ -41,10 +41,6 @@ footer.footer .nav-footer, #quarto-header>nav {
   padding-right: 0em;
 }
 
-.navbar-brand-container {
-    max-width: calc(100% - 50px);
-}
-
 .navbar {
     --bs-navbar-brand-padding-y: 1rem;
     --bs-nav-link-font-size: 1.2rem;

assets/logo-animation.html

@@ -4,26 +4,40 @@
     const brandLink = document.querySelector(".navbar-brand");
     const logoImg = brandLink.querySelector("img.navbar-logo");
     const video = document.createElement("video");
-
     video.classList.add("navbar-logo", "video-logo");
     video.autoplay = true;
     video.muted = true;
     video.playsInline = true;
     video.loop = false;
     video.playbackRate = 1.0;
-
     const source = document.createElement("source");
-
     source.src = "./assets/logo_movie.mp4";
     source.type = "video/mp4";
     video.appendChild(source);
 
-    // Add hover event listener to restart video
-    brandLink.addEventListener("mouseenter", function () {
-      if (video.ended) {
+    // Function to handle video playback
+    function handleVideoPlayback() {
+      if (video.ended || video.paused) {
         video.currentTime = 0;
         video.playbackRate = 3.0;
-        video.play();
+        video.play().catch(e => console.log("Playback failed:", e));
+      }
+    }
+
+    // Add hover event listener
+    brandLink.addEventListener("mouseenter", handleVideoPlayback);
+
+    // Handle visibility changes
+    document.addEventListener("visibilitychange", function () {
+      if (document.visibilityState === "visible") {
+        handleVideoPlayback();
+      }
+    });
+
+    // Handle page show (useful for mobile back button / screen unlock)
+    window.addEventListener("pageshow", function (event) {
+      if (event.persisted) {
+        handleVideoPlayback();
       }
     });