fix: lower the z index and increase z index of header (#504)

frontend/src/lib/components/header.svelte

@@ -10,6 +10,7 @@
 	import { type Writable } from 'svelte/store';
 	import { goto } from '$app/navigation';
 	import { onMount, onDestroy } from 'svelte';
+	import { browser } from '$app/environment';
 
 	const navItems: NavItem[] = [
 		{
@@ -38,33 +39,41 @@
 
 	export let darkWhiteText: boolean = false;
 
+	let applyBackdropBlur = () => {};
+
 	onMount(async () => {
 		const header = document.getElementById('header');
-		const headerHeight = header?.offsetHeight;
-		console.log(headerHeight);
-
-		// header?.style.transition = 'padding 0.5s ease, other-properties 0.5s ease';
 
-		window.addEventListener('scroll', () => {
+		applyBackdropBlur = () => {
 			if (window.scrollY) {
-				// header?.classList.add('absolute');
 				header?.classList.remove('p-8');
 				header?.classList.add('p-4');
 				header?.classList.add('backdrop-blur-sm');
 			} else {
-				// header?.classList.remove('absolute');
 				header?.classList.remove('p-4');
 				header?.classList.add('p-8');
 				header?.classList.remove('backdrop-blur-sm');
 			}
-		});
+		};
+
+		applyBackdropBlur();
+
+		if (browser) {
+			window.addEventListener('scroll', applyBackdropBlur);
+		}
+	});
+
+	onDestroy(() => {
+		if (browser) {
+			window.removeEventListener('scroll', applyBackdropBlur);
+		}
 	});
 </script>
 
 <header
 	id="header"
 	class={clsx(
-		'fixed top-0 flex w-full items-center justify-between bg-transparent p-8 transition-all duration-300 ease-in-out md:px-24 lg:px-32',
+		'fixed top-0 z-50 flex w-full items-center justify-between bg-transparent p-8 transition-all duration-300 ease-in-out md:px-24 lg:px-32',
 		{
 			'text-background dark:text-foreground': darkWhiteText
 		},

frontend/src/lib/components/media-item.svelte

@@ -26,7 +26,7 @@
 			/>
 		</span>
 		<div
-			class="absolute inset-0 z-10 flex h-full w-full flex-col justify-end gap-1 bg-gradient-to-t from-zinc-900 p-[.35rem] pb-2 tracking-wide lg:group-hover:opacity-100"
+			class="absolute inset-0 z-0 flex h-full w-full flex-col justify-end gap-1 bg-gradient-to-t from-zinc-900 pb-2 tracking-wide lg:group-hover:opacity-100"
 		>
 			<div
 				class="flex flex-wrap justify-center gap-1 text-xs font-normal tracking-wide text-gray-200 md:items-center 2xl:text-sm"

frontend/src/routes/+page.svelte

@@ -48,7 +48,7 @@
 							class="h-[70vh] w-full select-none object-cover object-center md:h-[100vh]"
 							loading="lazy"
 						/>
-						<div class="absolute inset-0 z-[1] flex select-none bg-slate-900 opacity-60"></div>
+						<div class="absolute inset-0 z-[1] flex select-none bg-gradient-to-t from-zinc-900"></div>
 						<div class="absolute inset-0 z-[2] mt-16 flex flex-col gap-4 md:mb-56">
 							<!-- TODO: Maybe change m-4 to padding? -->
 							<div class="ml-4 flex h-full w-full flex-col justify-end gap-2 p-8 md:px-24 lg:px-32">
@@ -143,7 +143,7 @@
 										/></span
 									>
 								</div>
-								<div class="absolute inset-0 z-[1] flex select-none bg-slate-900 opacity-20"></div>
+								<div class="absolute inset-0 z-[1] flex select-none bg-gradient-to-t from-zinc-900"></div>
 								<div class="absolute inset-0 z-[2] flex flex-col justify-end gap-2 p-4">
 									<div class="flex items-center gap-2">
 										<Clapperboard class="size-4" />