From 49949739aa919835e1964bcd94558073dee29bed Mon Sep 17 00:00:00 2001
From: Yusuf Bera Ertan <y.bera003.06@protonmail.com>
Date: Sat, 24 Aug 2024 15:38:51 +0300
Subject: [PATCH] feat: add new content, improve layout and styling

---
 src/routes/+layout.svelte         | 39 ++++++++++++++++++++++++++-----
 src/routes/+page.svelte           | 31 +++++++++++++++---------
 src/routes/guestbook/+page.svelte |  6 ++---
 src/styles/app.css                | 29 ++++++++++++++++++++++-
 4 files changed, 84 insertions(+), 21 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d4d9acd..85a181d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -15,7 +15,7 @@
 		{ href: '', name: 'home', iconUri: '/icons/home.png' },
 		{ href: 'entries', name: 'entries', iconUri: '/icons/entries.png' },
 		{ href: 'guestbook', name: 'guestbook', iconUri: '/icons/guestbook.png' },
-		{ href: 'about', name: 'about', iconUri: '/icons/about.png' },
+		{ href: 'about', name: 'about', iconUri: '/icons/about.png' }
 	];
 
 	const routeComponents = data.route.split('/');
@@ -43,10 +43,10 @@
 </script>
 
 <svelte:head>
-    <title>{title}</title>
+	<title>{title}</title>
 	<meta property="og:title" content={title} />
-	<meta property="og:site_name" content="gaze.systems"/>
-	<meta property="og:url" content="https://gaze.systems/"/>
+	<meta property="og:site_name" content="gaze.systems" />
+	<meta property="og:url" content="https://gaze.systems/" />
 	<meta property="og:image" content="https://gaze.systems/icons/gaze_website.png" />
 </svelte:head>
 
@@ -63,9 +63,36 @@
     "
 />
 
-<div class="lg:mx-[4vw] 2xl:mx-[8vw] lg:my-[4vh]"><slot /></div>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="hidden">
+	<defs>
+		<filter id="squiggly-0">
+			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" />
+			<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
+		</filter>
+		<filter id="squiggly-1">
+			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
+			<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
+		</filter>
 
-<nav class="w-full z-10 fixed bottom-0 bg-ralsei-black">
+		<filter id="squiggly-2">
+			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
+			<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
+		</filter>
+		<filter id="squiggly-3">
+			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" />
+			<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
+		</filter>
+
+		<filter id="squiggly-4">
+			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" />
+			<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
+		</filter>
+	</defs>
+</svg>
+
+<div class="h-[96vh] lg:px-[4vw] 2xl:px-[8vw] lg:py-[4vh]"><slot /></div>
+
+<nav class="w-full max-h-[4vh] z-10 fixed bottom-0 bg-ralsei-black">
 	<div
 		class="
             max-w-full max-h-fit p-1 overflow-auto
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cba51eb..bd46169 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,17 +2,26 @@
 	import Window from '../components/window.svelte';
 </script>
 
-<div class="flex flex-none gap-y-4 lg:gap-y-0 flex-wrap md:flex-nowrap">
-	<Window title="readme?" iconUri='/icons/question.png'>
-		<div class="prose prose-ralsei prose-img:m-0 leading-6">
-			<p>hi there <img class="inline h-6" src="/wavey.gif" alt="wavey" title="hi :33" /></p>
-			<p>
-				i'm dusk! and this is my personal spot where i plan to put everything that i do on (<i>if i don't forget to...</i>)
-			</p>
-			<p>not much else to say, hopefully will add more text here one day :></p>
-			<p>website very much in progress still !!!</p>
-		</div>
-	</Window>
+<div class="flex flex-none gap-y-4 lg:gap-y-0 flex-wrap md:flex-nowrap md:h-full">
+	<div class="flex flex-col gap-y-2 lg:gap-y-0">
+		<Window title="readme?" iconUri='/icons/question.png'>
+			<div class="prose prose-ralsei prose-img:m-0 leading-6">
+				<p>hi there <img class="inline h-6 animate-squiggle" src="/wavey.gif" alt="wavey" title="hi :33" /></p>
+				<p>
+					i'm dusk! and this is my personal spot where i plan to put everything that i do on (<i>if i don't forget to...</i>)
+				</p>
+				<p>not much else to say, hopefully will add more text here one day :></p>
+				<p>website very much in progress still !!!</p>
+			</div>
+		</Window>
+		<div class="grow"/>
+		<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 src="https://img.itch.zone/aW1hZ2UvMjkxNjQzOC8xNzQ2MDY2Mi5wbmc=/original/%2BIb5Vf.png" alt="fish well gameplay screenshot">
+			</div>
+		</Window>
+	</div>
 	<div class="grow" />
 	<Window title="contacts!" iconUri='/icons/contact.png'>
 		<div class="prose prose-ralsei leading-6">
diff --git a/src/routes/guestbook/+page.svelte b/src/routes/guestbook/+page.svelte
index 4a106bf..1ca67cb 100644
--- a/src/routes/guestbook/+page.svelte
+++ b/src/routes/guestbook/+page.svelte
@@ -8,7 +8,7 @@
 
 <div class="flex flex-col-reverse md:flex-row gap-2 md:gap-4">
 	<div class="mb-[7vh] md:hidden" />
-	<Window title="guestbook">
+	<Window title="guestbook" iconUri="/icons/guestbook.png">
 		<div class="flex flex-col gap-4 2xl:w-[60ch]">
 			<p>
 				hia, here is the guestbook if you wanna post anything :)
@@ -52,7 +52,7 @@
 							type="submit"
 							value={platform}
 							formaction="?/post_{platform}"
-							class="text-lg text-ralsei-green-light leading-5 motion-safe:hover:animate-bounce w-fit p-0.5"
+							class="text-lg text-ralsei-green-light leading-5 hover:underline motion-safe:hover:animate-squiggle w-fit p-0.5"
 						/>
 					{/each}
 				</div>
@@ -70,7 +70,7 @@
 		</div>
 	</Window>
 	<div class="grow" />
-	<Window title="entries">
+	<Window title="entries" iconUri="/icons/entries.png">
 		<div class="flex flex-col gap-2 md:gap-4 2xl:w-[60ch]">
 			{#if data.getRatelimited}
 				<p class="text-error">
diff --git a/src/styles/app.css b/src/styles/app.css
index 0c8105d..d44fddd 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -27,8 +27,13 @@
         content: '>>>> ';
     }
 
+    .prose a {
+        text-decoration: none;
+    }
+
     .prose a:hover {
-        @apply animate-pulse-fast;
+        @apply motion-safe:animate-squiggle;
+        text-decoration: underline;
     }
 
     h1,h2,h3,h4,h5,h6 {
@@ -83,6 +88,28 @@
         font-display: swap;
         src: url('/fonts/comici.woff2') format('woff2');
     }
+
+    .animate-squiggle {
+        animation: squigglevision 0.3s infinite;
+    }
+
+    @keyframes squigglevision {
+        0% {
+          filter: url("#squiggly-0");
+        }
+        25% {
+          filter: url("#squiggly-1");
+        }
+        50% {
+          filter: url("#squiggly-2");
+        }
+        75% {
+          filter: url("#squiggly-3");
+        }
+        100% {
+          filter: url("#squiggly-4");
+        }
+      }
 }
 
 @layer utilities {