refactor: style on windows

src/components/window.svelte

@@ -9,6 +9,8 @@
 	export let entry: boolean = false;
 	export let removePadding: boolean = false;
 	export let center: boolean = false;
+	export let layered: boolean = false;
+	export let style: string = "";
 
 	const scaleKeyframes = [
 		"window-open",
@@ -43,10 +45,11 @@
 	}}
 	on:click={(data) => {focusWindow(data.currentTarget)}}
 	class="
-        relative flex flex-col {sticky ? 'md:sticky md:-top-9' : ''} {center ? "mx-auto" : ""}
+        relative {layered ? "col-[1] row-[1]" : ""} flex flex-col {sticky ? 'md:sticky md:-top-9' : ''} {center ? "mx-auto" : ""}
         max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl min-w-[30ch] lg:min-w-[40ch] w-full md:w-fit [height:fit-content]
 		bg-ralsei-black border-ralsei-white border-ridge border-8 border-t-[12px]
-		animate-{chosenKeyframe}
+		animate-{chosenKeyframe} drop-shadow-[35px_35px_35px_rgba(1,1,1,0.5)]
+		{style}
     "
 	{id}
 >

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { browser } from '$app/environment';
 	import getTitle from '$lib/getTitle';
 	import NavButton from '../components/navButton.svelte';
 	import '../styles/app.css';
@@ -133,10 +134,10 @@
 	<slot />
 </div>
 
-<nav class="w-full min-h-[5vh] max-h-[6vh] fixed bottom-0 z-10 bg-ralsei-black overflow-hidden">
+<nav class="w-full min-h-[5vh] max-h-[6vh] fixed bottom-0 z-[999] bg-ralsei-black overflow-hidden">
 	<div
 		class="
-			max-w-full max-h-fit p-1
+			max-w-full max-h-fit p-1 z-[999]
 			border-ralsei-white border-8
 			bg-gradient-to-r to-ralsei-pink-neon/30 from-ralsei-pink-regular/20 from-30%
 		"

src/routes/+page.svelte

@@ -3,7 +3,7 @@
 	import Window from '../components/window.svelte';
 </script>
 
-<div class="flex flex-col md:flex-row gap-y-4 lg:gap-y-0 md:h-full h-card">
+<div class="flex flex-col md:flex-row gap-y-2 lg:gap-y-0 md:h-full h-card">
 	<div class="flex flex-col gap-y-2 lg:gap-y-0">
 		<Window title="readme?" iconUri="/icons/question.png">
 			<div class="flex flex-col prose prose-ralsei prose-img:m-0 leading-none">
@@ -58,8 +58,7 @@
 				</div>
 			</div>
 		</Window>
-		<div class="mt-auto">
-			<Window title="latest stuff">
+		<Window title="latest stuff" style="mt-auto">
 			<div class="prose prose-ralsei prose-img:m-0 leading-6">
 				<p>
 					worked on a game for a jam!! check it out at <a href="https://manonox.itch.io/fish-well"
@@ -74,11 +73,9 @@
 			</div>
 		</Window>
 	</div>
-	</div>
 	<div class="hidden md:block md:grow" />
 	<div class="flex flex-col gap-y-2 lg:gap-y-0">
-		<div class="md:ml-auto">
-			<Window title="links!" iconUri="/icons/contact.png">
+		<Window title="links!" iconUri="/icons/contact.png" style="md:ml-auto">
 			<div class="prose prose-ralsei prose-ul:leading-[1.4rem] prose-headings:leading-none">
 				<ul>
 					<li>discord: yusdacra</li>
@@ -88,9 +85,7 @@
 					</li>
 					<li>
 						bluesky:
-							<a class="u-url" href="https://bsky.app/profile/gaze.systems" rel="me"
-								>@gaze.systems</a
-							>
+						<a class="u-url" href="https://bsky.app/profile/gaze.systems" rel="me">@gaze.systems</a>
 					</li>
 				</ul>
 				<h3>development</h3>
@@ -125,9 +120,7 @@
 				</ul>
 			</div>
 		</Window>
-		</div>
-		<div class="mt-auto">
-			<Window title="current" iconUri="/icons/entry.png">
+		<Window title="current" iconUri="/icons/entry.png" style="mt-auto">
 			<div class="prose prose-ralsei leading-6">
 				<ul>
 					<li>playing wynncraft, helldivers 2, warframe</li>
@@ -137,4 +130,3 @@
 		</Window>
 	</div>
 </div>
-</div>

tailwind.config.js

@@ -1,4 +1,5 @@
 const colors = require('tailwindcss/colors')
+const plugin = require('tailwindcss/plugin')
 
 /** @type {import('tailwindcss').Config} */
 export default {