From eed7027f3c92d50948ad6d9ac40109ab3d51cc03 Mon Sep 17 00:00:00 2001
From: Evan Kiefl <kiefl.evan@gmail.com>
Date: Sun, 12 Jan 2025 23:16:31 -0800
Subject: [PATCH] Changes to logo

---
 assets/css/grid.css        |  9 ++++++++-
 assets/css/navbar.css      |  4 ----
 assets/logo-animation.html | 28 +++++++++++++++++++++-------
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/assets/css/grid.css b/assets/css/grid.css
index ef200e9..1c0e343 100644
--- a/assets/css/grid.css
+++ b/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;
+    }
+}
+
diff --git a/assets/css/navbar.css b/assets/css/navbar.css
index ec59ff3..7c43f6a 100644
--- a/assets/css/navbar.css
+++ b/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;
diff --git a/assets/logo-animation.html b/assets/logo-animation.html
index 505edc2..cbef812 100644
--- a/assets/logo-animation.html
+++ b/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();
       }
     });