From 3760cba8e8ae5f2a86e17114662394092d20ca4f Mon Sep 17 00:00:00 2001
From: Ales Lerch <13370338+axeII@users.noreply.github.com>
Date: Sun, 3 May 2026 23:28:58 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20refactor:=20Improve=20animated?=
 =?UTF-8?q?=20SVG=20display=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/partials/extend-footer.html | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/layouts/partials/extend-footer.html b/layouts/partials/extend-footer.html
index 634d9db..4df2682 100644
--- a/layouts/partials/extend-footer.html
+++ b/layouts/partials/extend-footer.html
@@ -1,8 +1,15 @@
 <script>
   (function () {
-    // Swap to animated SVG on non-Firefox browsers when page uses the default background
-    // (i.e. walp.jpg). Articles with their own feature image keep that image.
-    if (navigator.userAgent.indexOf("Firefox") === -1) {
+    // Swap to animated SVG only on non-touch desktop screens.
+    // - maxTouchPoints === 0: reliable across all browsers and simulators
+    // - hover + pointer: secondary check for touch-capable laptops (Surface etc.)
+    // - innerWidth > 1024: hard screen-size cutoff
+    // - not Firefox: Firefox struggles with SVG animation perf
+    var noTouch = navigator.maxTouchPoints === 0;
+    var isDesktop = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+    var isLargeScreen = window.innerWidth > 1024;
+    var isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
+    if (noTouch && isDesktop && isLargeScreen && !isFirefox) {
       var bg = document.getElementById("background-image");
       if (bg && bg.src && bg.src.indexOf("walp") !== -1) {
         bg.src = "/img/bg.svg";