Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/trueberryless/the-thinking-hub. The central knowledge hub for 8 key Computer Science thinking modes. the-thinking-hub.felixs.dev
Something went wrong. Try again.
1.2 kB · 55 lines
Astro
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<div class="gradient-mask"> <slot /></div>
<script> function updateMask() { const mask = document.querySelector('.gradient-mask') as HTMLElement const threshold = 64 const scrollY = window.scrollY
if (scrollY >= threshold) { mask.style.opacity = '1' } else { mask.style.opacity = '0' } }
document.addEventListener('DOMContentLoaded', () => { updateMask() window.addEventListener('scroll', updateMask) })</script>
<style> .gradient-mask { position: fixed; top: 0; left: 0; width: 100%; height: 6rem; z-index: 99; pointer-events: none; background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%); mask-image: linear-gradient( to bottom, black 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.2) 80%, transparent 100% ); -webkit-mask-image: linear-gradient( to bottom, black 0%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.2) 80%, transparent 100% ); opacity: 0; transition: opacity 0.3s ease; }</style>