From f5e67284e23644ecaeaa9ae44085fc6abf6d267a Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Fri, 10 Jan 2025 17:01:26 +0300
Subject: [PATCH] Minor fixes & changes (hopefully)

- Move around things in layout.svelte (so it makes more sense lol)
- Fix navbar on about page
- Add px-4 for desktop on about page
- Remove unneeded transitions
---
 src/routes/+layout.svelte       | 84 ++++++++++++++++-----------------
 src/routes/+page.svelte         |  2 +-
 src/routes/about/+page.svelte   |  4 +-
 src/routes/convert/+page.svelte | 16 -------
 4 files changed, 44 insertions(+), 62 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ee80b51..e719d43 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -108,71 +108,69 @@
 		></script>{/if}
 </svelte:head>
 
-<div class="flex flex-col h-screen">
+<div class="flex flex-col min-h-screen h-full">
 	<!-- FIXME: if user resizes between desktop/mobile, highlight of page disappears (only shows on original size) -->
 
-	<!-- Mobile logo -->
-	<div class="flex md:hidden justify-center items-center p-8">
-		<div
-			class="flex items-center justify-center w-36 h-20 bg-panel p-4 rounded-2xl"
-		>
+	<div class="flex flex-col">
+		<!-- Mobile logo -->
+		<div class="flex md:hidden justify-center items-center p-8">
 			<div
-				class="w-[120px] h-14 bg-accent rounded-xl flex items-center justify-center"
+				class="flex items-center justify-center w-36 h-20 bg-panel p-4 rounded-2xl"
 			>
-				<div class="h-5 w-full">
-					<Logo />
+				<div
+					class="w-[120px] h-14 bg-accent rounded-xl flex items-center justify-center"
+				>
+					<div class="h-5 w-full">
+						<Logo />
+					</div>
 				</div>
 			</div>
 		</div>
+
+		<!-- Desktop navbar -->
+		<div class="hidden md:flex p-8 w-screen justify-center z-50">
+			<Navbar {items} />
+		</div>
 	</div>
 
-	<!-- Desktop navbar -->
-	<div class="hidden md:flex p-8 w-screen justify-center z-50">
-		<Navbar {items} />
-	</div>
-
-	<div class="grid grid-rows-1 grid-cols-1 h-full">
+	<div class="grid grid-rows-1 grid-cols-1 h-full flex-grow">
 		{#key data.pathname}
 			<div
 				class="row-start-1 col-start-1"
-				in:fade={{
-					duration,
-					easing: quintOut,
-				}}
-				out:fade={{
+				transition:fade={{
 					duration,
 					easing: quintOut,
 				}}
 			>
-				<div class="flex flex-col h-full">
-					<div class="flex-grow pb-36">
-						{@render children()}
-					</div>
-					<div
-						class="hidden md:block w-full h-14 border-t border-separator relative"
-					>
-						<Footer
-							class="w-full h-full"
-							items={{
-								"Privacy policy": "#",
-								"Source code":
-									"https://github.com/not-nullptr/VERT",
-								"Discord server":
-									"https://discord.gg/kqevGxYPak",
-							}}
-						/>
-					</div>
+				<div class="flex flex-col h-full pb-36 md:pb-0">
+					{@render children()}
 				</div>
 			</div>
 		{/key}
 	</div>
 
 	<!-- Mobile navbar -->
-	<div
-		class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-50"
-	>
-		<div class="flex flex-col justify-center items-center">
-			<Navbar {items} />
+
+	<div class="flex flex-col">
+		<div
+			class="hidden md:block w-full h-14 border-t border-separator relative"
+		>
+			<Footer
+				class="w-full h-full"
+				items={{
+					"Privacy policy": "#",
+					"Source code": "https://github.com/not-nullptr/VERT",
+					"Discord server": "https://discord.gg/kqevGxYPak",
+				}}
+			/>
+		</div>
+
+		<div
+			class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-50"
+		>
+			<div class="flex flex-col justify-center items-center">
+				<Navbar {items} />
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e567d12..cf860d2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,7 +19,7 @@
 		<VertVBig class="fill-[--fg] opacity-50" />
 	</div>
 
-	<div class="w-screen flex items-center justify-center flex-grow">
+	<div class="w-screen flex items-center justify-center flex-grow -mt-0 md:-mt-36">
 		<div class="max-w-5xl w-full">
 			<div
 				class="flex items-center h-auto gap-12 md:gap-24 md:flex-row flex-col"
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index ead017f..7a6a623 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -80,13 +80,13 @@
 </script>
 
 <div class="flex flex-col h-full items-center">
-	<h1 class="hidden md:block text-3xl tracking-tight leading-[72px] mb-6">
+	<h1 class="hidden md:block text-[40px] tracking-tight leading-[72px] mb-6">
 		<InfoIcon size="40" class="inline-block -mt-2 mr-2" />
 		About
 	</h1>
 
 	<div
-		class="w-full max-w-[1280px] flex flex-col md:flex-row gap-4 p-4 md:p-0"
+		class="w-full max-w-[1280px] flex flex-col md:flex-row gap-4 p-4 md:px-4 md:py-0"
 	>
 		<!-- Why VERT? & Credits -->
 		<div class="flex flex-col gap-4 flex-1">
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index 4a161ed..ce6e5e9 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -95,14 +95,6 @@
 
 <div
 	class="flex justify-center items-center -mt-4 pb-8"
-	in:fade={{
-		duration,
-		easing: quintOut,
-	}}
-	out:fade={{
-		duration,
-		easing: quintOut,
-	}}
 >
 	<div class="max-w-[796px] w-full px-4 md:p-0">
 		<ConversionPanel />
@@ -111,14 +103,6 @@
 
 <div
 	class="w-full h-full flex justify-center"
-	in:fade={{
-		duration,
-		easing: quintOut,
-	}}
-	out:fade={{
-		duration,
-		easing: quintOut,
-	}}
 >
 	<div
 		class="w-[794px] grid grid-cols-1 md:grid-cols-2 px-4 md:p-0 auto-rows-[240px] gap-4"