108 lines
2.3 KiB
Svelte
108 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import Avatar from './Avatar.svelte'
|
|
import SegmentedController from './SegmentedController.svelte'
|
|
|
|
let scrollY = $state(0)
|
|
let hasScrolled = $state(false)
|
|
let gradientOpacity = $derived(Math.min(scrollY / 40, 1))
|
|
|
|
$effect(() => {
|
|
const handleScroll = () => {
|
|
scrollY = window.scrollY
|
|
|
|
// Add hysteresis to prevent flickering
|
|
if (!hasScrolled && scrollY > 30) {
|
|
hasScrolled = true
|
|
} else if (hasScrolled && scrollY < 20) {
|
|
hasScrolled = false
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll)
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
})
|
|
</script>
|
|
|
|
<header
|
|
class="site-header {hasScrolled ? 'scrolled' : ''}"
|
|
style="--gradient-opacity: {gradientOpacity}"
|
|
>
|
|
<div class="header-content">
|
|
<a href="/about" class="header-link" aria-label="@jedmund">
|
|
<Avatar />
|
|
</a>
|
|
<SegmentedController />
|
|
</div>
|
|
</header>
|
|
|
|
<style lang="scss">
|
|
.site-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: $unit-5x 0;
|
|
transition:
|
|
padding 0.3s ease,
|
|
background 0.3s ease;
|
|
pointer-events: none;
|
|
|
|
&.scrolled {
|
|
padding: $unit-2x 0;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 120px;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, calc(0.15 * var(--gradient-opacity))),
|
|
transparent
|
|
);
|
|
backdrop-filter: blur(calc(6px * var(--gradient-opacity)));
|
|
-webkit-backdrop-filter: blur(calc(6px * var(--gradient-opacity)));
|
|
mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
|
|
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
opacity: var(--gradient-opacity);
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $unit-3x;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.header-link {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
height: 52px; // Reduced by 4px for optical balance
|
|
|
|
:global(.face-container) {
|
|
height: 52px;
|
|
width: 52px;
|
|
}
|
|
|
|
:global(svg) {
|
|
height: 100%;
|
|
width: 100%;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
&:hover {
|
|
:global(svg) {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
}
|
|
</style>
|