Fork of Chiri for Astro for my blog
chore: tweak mobile behavior
+21
-5
+14
src/components/layout/TransitionWrapper.astro
+14
src/components/layout/TransitionWrapper.astro
···
35
35
return original.call(document, callback)
36
36
}
37
37
}
38
+
39
+
// Cleanup all inline opacity styles after Astro page load and on touch events
40
+
function cleanupOpacity() {
41
+
document.querySelectorAll('post-item').forEach((el) => {
42
+
el.style.opacity = ''
43
+
})
44
+
}
45
+
46
+
document.addEventListener('astro:page-load', () => {
47
+
setTimeout(cleanupOpacity, 50)
48
+
})
49
+
50
+
// Add touch event listener for touch devices
51
+
document.addEventListener('touchstart', cleanupOpacity, { passive: true })
38
52
</script>
39
53
40
54
<style is:global>
+7
-5
src/components/widgets/PostList.astro
+7
-5
src/components/widgets/PostList.astro
···
49
49
transition: opacity 0.15s ease-out;
50
50
}
51
51
52
-
ul:hover a {
53
-
opacity: 0.4;
54
-
}
52
+
@media (hover: hover) and (pointer: fine) {
53
+
ul:hover a {
54
+
opacity: 0.4;
55
+
}
55
56
56
-
ul:hover a:hover {
57
-
opacity: 1;
57
+
ul:hover a:hover {
58
+
opacity: 1;
59
+
}
58
60
}
59
61
60
62
.post-item {