From d08c3cc0a1cb72489ada14c458ada449ca2aca5b Mon Sep 17 00:00:00 2001
From: sakrecoer <setto@dyne.org>
Date: Mon, 30 Jun 2025 01:10:28 +0200
Subject: [PATCH] sexyfy

---
 .../layouts/_default/index.html               | 43 +++++++++++++++++++
 .../layouts/partials/body/gancio.html         | 11 -----
 .../layouts/partials/body/gang.html           | 11 -----
 .../layouts/partials/body/peertube.html       | 11 -----
 4 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/themes/basspistol2025/layouts/_default/index.html b/themes/basspistol2025/layouts/_default/index.html
index b7a053d..1b8c77d 100644
--- a/themes/basspistol2025/layouts/_default/index.html
+++ b/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" . }}
diff --git a/themes/basspistol2025/layouts/partials/body/gancio.html b/themes/basspistol2025/layouts/partials/body/gancio.html
index 1a3188b..09e2977 100644
--- a/themes/basspistol2025/layouts/partials/body/gancio.html
+++ b/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;
diff --git a/themes/basspistol2025/layouts/partials/body/gang.html b/themes/basspistol2025/layouts/partials/body/gang.html
index 2f979be..0d840ff 100644
--- a/themes/basspistol2025/layouts/partials/body/gang.html
+++ b/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;
diff --git a/themes/basspistol2025/layouts/partials/body/peertube.html b/themes/basspistol2025/layouts/partials/body/peertube.html
index fab235a..4021810 100644
--- a/themes/basspistol2025/layouts/partials/body/peertube.html
+++ b/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;