sexyfy

themes/basspistol2025/layouts/_default/index.html

@@ -1,3 +1,5 @@
+
+
 {{ define "navigation" }}
 {{ partial "body/navigation.html" . }}
 {{ end }}
@@ -11,6 +13,47 @@
 {{ define "main" }}
 <main>
 
+<style>
+@media (max-width: 768px) {
+  /* Apply grayscale to the root HTML element (affects children) */
+  html {
+    filter: grayscale(100%);
+    transition: filter 5s ease;
+  }
+
+  /* Color mode (when scrolling) */
+  html.color-mode {
+    filter: grayscale(0%);
+  }
+
+  /* Fix for child elements inheriting filters incorrectly */
+  html * {
+    filter: none !important; /* Prevents double-filtering */
+  }
+}
+</style>
+<script>
+
+// Only run on mobile
+if (window.matchMedia("(max-width: 768px)").matches) {
+  let scrollTimeout;
+  const html = document.documentElement;
+
+  window.addEventListener('scroll', () => {
+    // Add color mode
+    html.classList.add('color-mode');
+
+    // Reset timeout on scroll
+    clearTimeout(scrollTimeout);
+
+    // Revert to grayscale after 1 second of no scrolling
+    scrollTimeout = setTimeout(() => {
+      html.classList.remove('color-mode');
+    }, 1000);
+  }, { passive: true }); // Optimized for performance
+}
+
+</script>
 {{ partial "body/now.html" . }}
 
 {{ partial "body/discog.html" . }}

themes/basspistol2025/layouts/partials/body/gancio.html

@@ -1,17 +1,6 @@
 <style>
 #gancio {
 
-  * {
-    filter: grayscale(100%);
-    transition: filter 17s linear;
-
-  }
-
-  *:hover {
-    filter: grayscale(0%) !important;
-    transition: filter .1s linear;
-  }
-
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;

themes/basspistol2025/layouts/partials/body/gang.html

@@ -1,17 +1,6 @@
 <style>
 #gang {
 
-  * {
-    filter: grayscale(100%);
-    transition: filter 17s linear;
-
-  }
-
-  *:hover {
-    filter: grayscale(0%) !important;
-    transition: filter .1s linear;
-  }
-
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;

themes/basspistol2025/layouts/partials/body/peertube.html

@@ -2,17 +2,6 @@
 
 #peertube {
 
-  * {
-    filter: grayscale(100%);
-    transition: filter 17s linear;
-
-  }
-
-  *:hover {
-    filter: grayscale(0%) !important;
-    transition: filter .1s linear;
-  }
-
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;