Adjust layout of pages

makes it easier (at least for me) to handle pages

src/routes/+layout.svelte

@@ -1,35 +1,24 @@
 <script lang="ts">
-	import "../app.scss";
+	import { beforeNavigate, goto } from "$app/navigation";
-	import { afterNavigate, beforeNavigate, goto } from "$app/navigation";
+	import { page } from "$app/stores";
+	import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
 	import { blur, duration } from "$lib/animation";
-	import { quintOut } from "svelte/easing";
-	import { files, theme } from "$lib/store/index.svelte";
-	import Logo from "$lib/components/visual/svg/Logo.svelte";
 	import featuredImage from "$lib/assets/VERT_Feature.webp";
-	import {
+	import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
-		PUB_ENV,
-		PUB_HOSTNAME,
-		PUB_PLAUSIBLE_URL,
-	} from "$env/static/public";
-	import FancyMenu from "$lib/components/functional/FancyMenu.svelte";
-	import { writable } from "svelte/store";
-	import {
-		InfoIcon,
-		MoonIcon,
-		RefreshCw,
-		SettingsIcon,
-		SunIcon,
-		UploadIcon,
-	} from "lucide-svelte";
-	import { browser } from "$app/environment";
-	import JSCookie from "js-cookie";
-	import { onMount } from "svelte";
-	import Panel from "$lib/components/visual/Panel.svelte";
 	import Navbar from "$lib/components/functional/Navbar.svelte";
 	import Footer from "$lib/components/visual/Footer.svelte";
-	import { page } from "$app/stores";
+	import { files } from "$lib/store/index.svelte";
-	import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
+	import {
+		InfoIcon,
+		RefreshCw,
+		SettingsIcon,
+		UploadIcon,
+	} from "lucide-svelte";
+	import { onMount } from "svelte";
+	import { quintOut } from "svelte/easing";
+	import { writable } from "svelte/store";
 	import { fade } from "svelte/transition";
+	import "../app.scss";
 	let { children, data } = $props();
 
 	let shouldGoBack = writable(false);
@@ -121,7 +110,8 @@
 		></script>{/if}
 </svelte:head>
 
-<div class="absolute top-8 left-0 w-screen flex justify-center z-50">
+<div class="flex flex-col h-screen">
+	<div class="p-8 w-screen flex justify-center z-50">
 		<div class="flex flex-col gap-4">
 			<Navbar {items} />
 			{#if items
@@ -160,9 +150,9 @@
 				</div>
 			{/if}
 		</div>
-</div>
+	</div>
 
-<div class="min-h-screen grid grid-rows-1 grid-cols-1">
+	<div class="grid grid-rows-1 grid-cols-1 h-full">
 		{#key data.pathname}
 			<div
 				class="row-start-1 col-start-1"
@@ -195,11 +185,12 @@
 					origin: "top center",
 				}}
 			>
-			<div class="min-h-screen">
+				<div class="flex flex-col h-full">
+					<div class="flex-grow">
 						{@render children()}
 					</div>
 					<div
-				class="-mt-14 w-full h-14 border-t border-separator relative -z-50"
+						class="w-full h-14 border-t border-separator relative -z-50"
 					>
 						<Footer
 							class="w-full h-full"
@@ -211,7 +202,9 @@
 						/>
 					</div>
 				</div>
+			</div>
 		{/key}
+	</div>
 </div>
 
 {#if data.pathname === "/"}

src/routes/+page.svelte

@@ -11,12 +11,15 @@
 </script>
 
 <div
-	class="absolute -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
+	class="w-screen h-full flex items-center justify-center overflow-hidden -mt-20"
 >
+	<div
+		class="absolute -z-30 top-0 left-0 w-screen flex items-center justify-center overflow-hidden"
+	>
 		<VertVBig class="fill-[--fg] opacity-50" />
-</div>
+	</div>
 
-<div class="w-screen h-screen flex items-center justify-center">
+	<div class="w-screen flex items-center justify-center flex-grow">
 		<div class="max-w-5xl w-full">
 			<div class="flex items-center h-[266px] gap-24">
 				<div class="flex-grow w-full">
@@ -30,15 +33,19 @@
 						class="font-normal text-xl text-muted blur-in"
 						style:--delay="60ms"
 					>
-					All processing done on your device. No file size limit, no
+						All processing done on your device. No file size limit,
-					ads, and completely open source.
+						no ads, and completely open source.
 					</p>
 				</div>
-			<div class="flex-grow w-full h-full blur-in" style:--delay="60ms">
+				<div
+					class="flex-grow w-full h-full blur-in"
+					style:--delay="60ms"
+				>
 					<Uploader class="w-full h-full" />
 				</div>
 			</div>
 		</div>
+	</div>
 </div>
 
 <style>