feat: make everything use the banding (no worky on firefox)

src/components/window.svelte

@@ -13,20 +13,30 @@
 >
 	<div
 		class="
-            flex
             p-1 border-ralsei-white border-8
-            bg-gradient-to-l from-ralsei-pink-neon to-75%
+            bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75%
         "
 		style="border-style: hidden hidden ridge hidden;"
 	>
-		<h1 class="font-monospace text-xl text-ralsei-pink-regular grow justify-self-start self-center">
+		<div class="flex bg-opacity-100 pixelate-bg">
+			<h1
+				class="font-monospace text-xl text-ralsei-pink-regular grow justify-self-start self-center"
+			>
 				{title}
 			</h1>
 			{#if iconUri !== ''}
-			<img class="justify-self-end self-center max-h-7" style="image-rendering: pixelated;" src={iconUri} alt={iconUri} />
+				<img
+					class="justify-self-end self-center max-h-7"
+					style="image-rendering: pixelated;"
+					src={iconUri}
+					alt={iconUri}
+				/>
 			{/if}
 		</div>
+	</div>
 	<div class="p-2 bg-gradient-to-tl to-ralsei-pink-neon/15 from-ralsei-pink-regular/20">
+		<div class="bg-opacity-100 pixelate-bg">
 			<slot />
 		</div>
+	</div>
 </div>

src/routes/+layout.svelte

@@ -85,11 +85,11 @@
 			</filter>
 		{/each}
 		<filter id="pixelate" color-interpolation-filters="linearRGB" x="0" y="0">
-			<feFlood x="4" y="4" height="2" width="2"/>
+			<feFlood x="4" y="4" height="2" width="2" />
-			<feComposite width="10" height="10"/>
+			<feComposite width="10" height="10" />
-			<feTile result="a"/>
+			<feTile result="a" />
-			<feComposite in="SourceGraphic" in2="a" operator="in"/>
+			<feComposite in="SourceGraphic" in2="a" operator="in" />
-			<feMorphology operator="dilate" radius="5"/>
+			<feMorphology operator="dilate" radius="5" />
 		</filter>
 		<filter id="dither" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%">
 			<feImage
@@ -105,7 +105,14 @@
 				<feFuncB type="discrete" tableValues="0 1" />
 			</feComponentTransfer>
 		</filter>
-		<filter id="dither-red" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%">
+		<filter
+			id="dither-red"
+			color-interpolation-filters="sRGB"
+			x="0"
+			y="0"
+			width="100%"
+			height="100%"
+		>
 			<feFlood flood-color="#000000" flood-opacity="0.50" x="0%" y="0%" result="flood" />
 			<feBlend mode="normal" x="0%" y="0%" in="SourceGraphic" in2="flood" result="blend1" />
 			<feImage
@@ -137,16 +144,17 @@
 <nav class="w-full min-h-[5vh] max-h-[6vh] fixed bottom-0 z-10 bg-ralsei-black">
 	<div
 		class="
-			max-w-full max-h-fit p-1 overflow-auto
+			max-w-full max-h-fit p-1
-			grid grid-flow-col grid-rows-1 gap-2 justify-start
 			border-ralsei-white border-8
 			bg-gradient-to-r to-ralsei-pink-neon/30 from-ralsei-pink-regular/20 from-30%
 		"
 		style="border-style: ridge hidden hidden hidden;"
 	>
+		<div class="bg-opacity-100 pixelate-bg flex flex-row flex-nowrap gap-2 justify-start overflow-auto">
 			{#each menuItems as item}
 				{@const highlight = isRoute(item.href)}
 				<NavButton {highlight} {...item} />
 			{/each}
 		</div>
+	</div>
 </nav>