From 023be3d733cbd7b83c73a11fb981a1195f481b6f Mon Sep 17 00:00:00 2001
From: Yusuf Bera Ertan <y.bera003.06@protonmail.com>
Date: Sat, 24 Aug 2024 19:28:39 +0300
Subject: [PATCH] fix: even more layotuing ahhh i hate css

---
 src/routes/+layout.svelte         |  20 +++---
 src/routes/+page.svelte           |   4 +-
 src/routes/guestbook/+page.svelte | 103 +++++++++++++++---------------
 3 files changed, 62 insertions(+), 65 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d9b4ba0..442a5b7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -73,7 +73,6 @@
 			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" />
 			<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
 		</filter>
-
 		<filter id="squiggly-2">
 			<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
 			<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
@@ -82,7 +81,6 @@
 			<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" />
@@ -90,16 +88,18 @@
 	</defs>
 </svg>
 
-<div class="h-[96vh] lg:px-[4vw] 2xl:px-[8vw] lg:py-[4vh]"><slot /></div>
+<div class="md:h-[96vh] pb-[7vh] 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">
+<nav class="w-full max-h-[6vh] fixed bottom-0 z-10 bg-ralsei-black">
 	<div
 		class="
-            max-w-full max-h-fit p-1 overflow-auto
-            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%
-        "
+			max-w-full max-h-fit p-1 overflow-auto
+			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;"
 	>
 		{#each menuItems as item}
@@ -107,4 +107,4 @@
 			<NavButton {highlight} {...item} />
 		{/each}
 	</div>
-</nav>
+</nav>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bd46169..21c3bfd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,7 +2,7 @@
 	import Window from '../components/window.svelte';
 </script>
 
-<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 md:flex-row gap-y-4 lg:gap-y-0 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">
@@ -22,7 +22,7 @@
 			</div>
 		</Window>
 	</div>
-	<div class="grow" />
+	<div class="hidden md:block md:grow" />
 	<Window title="contacts!" iconUri='/icons/contact.png'>
 		<div class="prose prose-ralsei leading-6">
 			<ul>
diff --git a/src/routes/guestbook/+page.svelte b/src/routes/guestbook/+page.svelte
index 1341d47..6c8f7f3 100644
--- a/src/routes/guestbook/+page.svelte
+++ b/src/routes/guestbook/+page.svelte
@@ -7,7 +7,6 @@
 </script>
 
 <div class="flex flex-col-reverse md:flex-row gap-2 md:gap-4">
-	<div class="mb-[7vh] md:hidden" />
 	<Window title="guestbook" iconUri="/icons/guestbook.png">
 		<div class="flex flex-col gap-4 2xl:w-[60ch]">
 			<p>
@@ -56,61 +55,59 @@
 		</div>
 	</Window>
 	<div class="grow" />
-	<div class="md:mb-[7vh]">
-		<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">
-						woops, looks like you are being ratelimited, try again in like half a minute :3
-					</p>
-				{:else if data.getError}
-					<p class="text-error">got error trying to fetch entries, pls tell me about this</p>
-					<details>
-						<summary>error</summary>
-						<p>{data.getError}</p>
-					</details>
-				{:else}
-					{#each data.entries as [entry_id, entry] (entry_id)}
-						{@const date = new Date(entry.timestamp * 1e3).toLocaleString()}
-						<div class="entry entryflex">
-							<div class="flex flex-row">
-								<p class="place-self-start grow text-2xl font-monospace">
-									#{entry_id}
-								</p>
-								<p class="justify-end self-center text-sm font-monospace">{date}</p>
-							</div>
-							<p class="text-lg text-wrap overflow-hidden text-ellipsis ml-0.5 max-w-[56ch]">
-								{entry.content}
-							</p>
-							<p
-								class="place-self-end text-sm font-monospace max-w-[16ch] md:max-w-[24ch] lg:max-w-[32ch] overflow-hidden text-ellipsis"
-								title={entry.author}
-							>
-								--- posted by {entry.author}
+	<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">
+					woops, looks like you are being ratelimited, try again in like half a minute :3
+				</p>
+			{:else if data.getError}
+				<p class="text-error">got error trying to fetch entries, pls tell me about this</p>
+				<details>
+					<summary>error</summary>
+					<p>{data.getError}</p>
+				</details>
+			{:else}
+				{#each data.entries as [entry_id, entry] (entry_id)}
+					{@const date = new Date(entry.timestamp * 1e3).toLocaleString()}
+					<div class="entry entryflex">
+						<div class="flex flex-row">
+							<p class="place-self-start grow text-2xl font-monospace">
+								#{entry_id}
 							</p>
+							<p class="justify-end self-center text-sm font-monospace">{date}</p>
 						</div>
-					{:else}
-						<p>looks like there are no entries :(</p>
-					{/each}
-				{/if}
-				{#if hasPreviousPage || hasNextPage}
-					<div class="flex flex-row w-full justify-center items-center font-monospace">
-						{#if hasPreviousPage}
-							<a href="/guestbook/?page={data.entries.length < 0 ? data.page - 1 : 1}"
-								>&lt;&lt; previous</a
-							>
-						{/if}
-						{#if hasNextPage && hasPreviousPage}
-							<div class="w-1/12" />
-						{/if}
-						{#if hasNextPage}
-							<a href="/guestbook/?page={data.page + 1}">next &gt;&gt;</a>
-						{/if}
+						<p class="text-lg text-wrap overflow-hidden text-ellipsis ml-0.5 max-w-[56ch]">
+							{entry.content}
+						</p>
+						<p
+							class="place-self-end text-sm font-monospace overflow-hidden text-ellipsis text-nowrap"
+							title={entry.author}
+						>
+							--- posted by {entry.author}
+						</p>
 					</div>
-				{/if}
-			</div>
-		</Window>
-	</div>
+				{:else}
+					<p>looks like there are no entries :(</p>
+				{/each}
+			{/if}
+			{#if hasPreviousPage || hasNextPage}
+				<div class="flex flex-row w-full justify-center items-center font-monospace">
+					{#if hasPreviousPage}
+						<a href="/guestbook/?page={data.entries.length < 0 ? data.page - 1 : 1}"
+							>&lt;&lt; previous</a
+						>
+					{/if}
+					{#if hasNextPage && hasPreviousPage}
+						<div class="w-1/12" />
+					{/if}
+					{#if hasNextPage}
+						<a href="/guestbook/?page={data.page + 1}">next &gt;&gt;</a>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</Window>
 </div>
 
 <style lang="postcss">