let's try this bitch

This commit is contained in:
sakrecoer 2025-06-30 01:17:52 +02:00
parent d08c3cc0a1
commit f31b7d282d

View file

@ -34,24 +34,45 @@
</style>
<script>
// Only run on mobile
if (window.matchMedia("(max-width: 768px)").matches) {
let scrollTimeout;
const html = document.documentElement;
// Wait for the page to fully load
document.addEventListener('DOMContentLoaded', () => {
// Check if mobile AND touch device (dual verification)
const isMobile = window.matchMedia("(max-width: 768px)").matches;
const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
window.addEventListener('scroll', () => {
// Add color mode
html.classList.add('color-mode');
if (isMobile && isTouch) {
const html = document.documentElement;
let scrollTimeout;
let lastScrollTime = 0;
// Reset timeout on scroll
clearTimeout(scrollTimeout);
// Handle both touch AND scroll for compatibility
window.addEventListener('scroll', handleScroll, { passive: true });
window.addEventListener('touchmove', handleScroll, { passive: true });
// Revert to grayscale after 1 second of no scrolling
scrollTimeout = setTimeout(() => {
html.classList.remove('color-mode');
}, 1000);
}, { passive: true }); // Optimized for performance
}
function handleScroll() {
const now = Date.now();
// Throttle events to improve performance
if (now - lastScrollTime < 50) return; // 50ms throttle
lastScrollTime = now;
html.classList.add('color-mode');
clearTimeout(scrollTimeout);
// Longer delay for touch momentum (2 seconds)
scrollTimeout = setTimeout(() => {
html.classList.remove('color-mode');
}, 2000);
}
// Reset on touch end (for immediate feedback)
window.addEventListener('touchend', () => {
scrollTimeout = setTimeout(() => {
html.classList.remove('color-mode');
}, 500); // Shorter delay after touch ends
}, { passive: true });
}
});
</script>
{{ partial "body/now.html" . }}