From e81255779405deb6031f982351f4867a167edcd1 Mon Sep 17 00:00:00 2001
From: dusk <y.bera003.06@protonmail.com>
Date: Sat, 16 Nov 2024 15:17:25 +0300
Subject: [PATCH] refactor: style on windows

---
 src/components/window.svelte |   7 +-
 src/routes/+layout.svelte    |   5 +-
 src/routes/+page.svelte      | 144 +++++++++++++++++------------------
 tailwind.config.js           |   1 +
 4 files changed, 77 insertions(+), 80 deletions(-)

diff --git a/src/components/window.svelte b/src/components/window.svelte
index 25767bf..83f8447 100644
--- a/src/components/window.svelte
+++ b/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}
 >
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8987097..0bc14de 100644
--- a/src/routes/+layout.svelte
+++ b/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%
 		"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 008b079..90f0c43 100644
--- a/src/routes/+page.svelte
+++ b/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,83 +58,75 @@
 				</div>
 			</div>
 		</Window>
-		<div class="mt-auto">
-			<Window title="latest stuff">
-				<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"
-							>it's itch.io page</a
-						>!
-					</p>
-					<img
-						class="md:max-w-[35rem]"
-						src="https://img.itch.zone/aW1hZ2UvMjkxNjQzOC8xNzQ2MDY2Mi5wbmc=/original/%2BIb5Vf.png"
-						alt="fish well gameplay screenshot"
-					/>
-				</div>
-			</Window>
-		</div>
+		<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"
+						>it's itch.io page</a
+					>!
+				</p>
+				<img
+					class="md:max-w-[35rem]"
+					src="https://img.itch.zone/aW1hZ2UvMjkxNjQzOC8xNzQ2MDY2Mi5wbmc=/original/%2BIb5Vf.png"
+					alt="fish well gameplay screenshot"
+				/>
+			</div>
+		</Window>
 	</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">
-				<div class="prose prose-ralsei prose-ul:leading-[1.4rem] prose-headings:leading-none">
-					<ul>
-						<li>discord: yusdacra</li>
-						<li>
-							e-mail:
-							<a class="u-email" href="mailto:y.bera003.06@pm.me" rel="me">y.bera003.06@pm.me</a>
-						</li>
-						<li>
-							bluesky:
-							<a class="u-url" href="https://bsky.app/profile/gaze.systems" rel="me"
-								>@gaze.systems</a
-							>
-						</li>
-					</ul>
-					<h3>development</h3>
-					<ul>
-						<li>
-							github:
-							<a class="u-url" href="https://github.com/yusdacra" rel="me">@yusdacra</a>
-						</li>
-						<li>
-							my gitea:
-							<a class="u-url" href="https://git.gaze.systems/dusk" rel="me">@dusk</a>
-							(<a href="https://git.gaze.systems/gazesys/website">website repo</a>)
-						</li>
-						<li>
-							gitlab:
-							<a class="u-url" href="https://gitlab.com/yusdacra" rel="me">@yusdacra</a>
-						</li>
-						<li>
-							itch.io:
-							<a class="u-url" href="https://yusdacra.itch.io" rel="me">@yusdacra</a>
-						</li>
-					</ul>
-					<h3>services</h3>
-					<ul>
-						<li>
-							<a href="https://limbus.gaze.systems">random project moon art</a>
-						</li>
-						<li>
-							<a href="https://git.gaze.systems">gitea</a>
-							<span class="text-sm">(if i like you ask me for an acc ;3)</span>
-						</li>
-					</ul>
-				</div>
-			</Window>
-		</div>
-		<div class="mt-auto">
-			<Window title="current" iconUri="/icons/entry.png">
-				<div class="prose prose-ralsei leading-6">
-					<ul>
-						<li>playing wynncraft, helldivers 2, warframe</li>
-						<li>idk bother me to do stuff</li>
-					</ul>
-				</div>
-			</Window>
-		</div>
+		<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>
+					<li>
+						e-mail:
+						<a class="u-email" href="mailto:y.bera003.06@pm.me" rel="me">y.bera003.06@pm.me</a>
+					</li>
+					<li>
+						bluesky:
+						<a class="u-url" href="https://bsky.app/profile/gaze.systems" rel="me">@gaze.systems</a>
+					</li>
+				</ul>
+				<h3>development</h3>
+				<ul>
+					<li>
+						github:
+						<a class="u-url" href="https://github.com/yusdacra" rel="me">@yusdacra</a>
+					</li>
+					<li>
+						my gitea:
+						<a class="u-url" href="https://git.gaze.systems/dusk" rel="me">@dusk</a>
+						(<a href="https://git.gaze.systems/gazesys/website">website repo</a>)
+					</li>
+					<li>
+						gitlab:
+						<a class="u-url" href="https://gitlab.com/yusdacra" rel="me">@yusdacra</a>
+					</li>
+					<li>
+						itch.io:
+						<a class="u-url" href="https://yusdacra.itch.io" rel="me">@yusdacra</a>
+					</li>
+				</ul>
+				<h3>services</h3>
+				<ul>
+					<li>
+						<a href="https://limbus.gaze.systems">random project moon art</a>
+					</li>
+					<li>
+						<a href="https://git.gaze.systems">gitea</a>
+						<span class="text-sm">(if i like you ask me for an acc ;3)</span>
+					</li>
+				</ul>
+			</div>
+		</Window>
+		<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>
+					<li>idk bother me to do stuff</li>
+				</ul>
+			</div>
+		</Window>
 	</div>
 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 91cc14e..6e2bad3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 const colors = require('tailwindcss/colors')
+const plugin = require('tailwindcss/plugin')
 
 /** @type {import('tailwindcss').Config} */
 export default {