From 8c17117e432a40d3c253f05b0bc57e3ceed86f95 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Tue, 31 Dec 2024 10:08:14 +0300
Subject: [PATCH] Adjust layout of pages

makes it easier (at least for me) to handle pages
---
 src/routes/+layout.svelte | 189 ++++++++++++++++++--------------------
 src/routes/+page.svelte   |  49 +++++-----
 2 files changed, 119 insertions(+), 119 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5f3a67e..dbb646a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,35 +1,24 @@
 <script lang="ts">
-	import "../app.scss";
-	import { afterNavigate, beforeNavigate, goto } from "$app/navigation";
+	import { 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 {
-		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 ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
 	import Navbar from "$lib/components/functional/Navbar.svelte";
 	import Footer from "$lib/components/visual/Footer.svelte";
-	import { page } from "$app/stores";
-	import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
+	import { files } from "$lib/store/index.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,99 +110,103 @@
 		></script>{/if}
 </svelte:head>
 
-<div class="absolute top-8 left-0 w-screen flex justify-center z-50">
-	<div class="flex flex-col gap-4">
-		<Navbar {items} />
-		{#if items
-			.find((i) => i.url === "/convert")
-			?.activeMatch($page.url.pathname)}
+<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
+				.find((i) => i.url === "/convert")
+				?.activeMatch($page.url.pathname)}
+				<div
+					in:blur={{
+						blurMultiplier: 8,
+						duration: duration + 50,
+						delay: 50,
+						easing: quintOut,
+						y: {
+							start: -24,
+							end: 0,
+						},
+						scale: {
+							start: 0.95,
+							end: 1,
+						},
+					}}
+					out:blur={{
+						blurMultiplier: 8,
+						duration,
+						easing: quintOut,
+						y: {
+							start: 0,
+							end: 24,
+						},
+						scale: {
+							start: 1,
+							end: 1.05,
+						},
+					}}
+				>
+					<ConversionPanel />
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<div class="grid grid-rows-1 grid-cols-1 h-full">
+		{#key data.pathname}
 			<div
+				class="row-start-1 col-start-1"
 				in:blur={{
 					blurMultiplier: 8,
-					duration: duration + 50,
-					delay: 50,
+					duration,
 					easing: quintOut,
-					y: {
-						start: -24,
+					x: {
+						start: goingLeft ? -100 : 100,
 						end: 0,
 					},
-					scale: {
-						start: 0.95,
-						end: 1,
+					y: {
+						start: 72,
+						end: 0,
 					},
+					origin: "top center",
 				}}
 				out:blur={{
 					blurMultiplier: 8,
 					duration,
 					easing: quintOut,
+					x: {
+						start: 0,
+						end: goingLeft ? 100 : -100,
+					},
 					y: {
 						start: 0,
-						end: 24,
-					},
-					scale: {
-						start: 1,
-						end: 1.05,
+						end: 72,
 					},
+					origin: "top center",
 				}}
 			>
-				<ConversionPanel />
+				<div class="flex flex-col h-full">
+					<div class="flex-grow">
+						{@render children()}
+					</div>
+					<div
+						class="w-full h-14 border-t border-separator relative -z-50"
+					>
+						<Footer
+							class="w-full h-full"
+							items={{
+								"Privacy Policy": "#",
+								"Source Code": "#",
+								"Discord Server": "#",
+							}}
+						/>
+					</div>
+				</div>
 			</div>
-		{/if}
+		{/key}
 	</div>
 </div>
 
-<div class="min-h-screen grid grid-rows-1 grid-cols-1">
-	{#key data.pathname}
-		<div
-			class="row-start-1 col-start-1"
-			in:blur={{
-				blurMultiplier: 8,
-				duration,
-				easing: quintOut,
-				x: {
-					start: goingLeft ? -100 : 100,
-					end: 0,
-				},
-				y: {
-					start: 72,
-					end: 0,
-				},
-				origin: "top center",
-			}}
-			out:blur={{
-				blurMultiplier: 8,
-				duration,
-				easing: quintOut,
-				x: {
-					start: 0,
-					end: goingLeft ? 100 : -100,
-				},
-				y: {
-					start: 0,
-					end: 72,
-				},
-				origin: "top center",
-			}}
-		>
-			<div class="min-h-screen">
-				{@render children()}
-			</div>
-			<div
-				class="-mt-14 w-full h-14 border-t border-separator relative -z-50"
-			>
-				<Footer
-					class="w-full h-full"
-					items={{
-						"Privacy Policy": "#",
-						"Source Code": "#",
-						"Discord Server": "#",
-					}}
-				/>
-			</div>
-		</div>
-	{/key}
-</div>
-
 {#if data.pathname === "/"}
 	<div
 		transition:fade={{
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 93db27a..3aa2803 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,31 +11,38 @@
 </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"
 >
-	<VertVBig class="fill-[--fg] opacity-50" />
-</div>
+	<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 class="w-screen h-screen flex items-center justify-center">
-	<div class="max-w-5xl w-full">
-		<div class="flex items-center h-[266px] gap-24">
-			<div class="flex-grow w-full">
-				<h1
-					class="text-6xl tracking-tight leading-[72px] mb-6 blur-in"
-					style:--delay="20ms"
-				>
-					The file converter you'll love.
-				</h1>
-				<p
-					class="font-normal text-xl text-muted blur-in"
+	<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">
+					<h1
+						class="text-6xl tracking-tight leading-[72px] mb-6 blur-in"
+						style:--delay="20ms"
+					>
+						The file converter you'll love.
+					</h1>
+					<p
+						class="font-normal text-xl text-muted blur-in"
+						style:--delay="60ms"
+					>
+						All processing done on your device. No file size limit,
+						no ads, and completely open source.
+					</p>
+				</div>
+				<div
+					class="flex-grow w-full h-full blur-in"
 					style:--delay="60ms"
 				>
-					All processing done on your device. No file size limit, no
-					ads, and completely open source.
-				</p>
-			</div>
-			<div class="flex-grow w-full h-full blur-in" style:--delay="60ms">
-				<Uploader class="w-full h-full" />
+					<Uploader class="w-full h-full" />
+				</div>
 			</div>
 		</div>
 	</div>