From 24bac6f74b7ffc6161c3c1a624b430c51aad5b08 Mon Sep 17 00:00:00 2001
From: Realmy <163438634+RealmyTheMan@users.noreply.github.com>
Date: Sun, 9 Feb 2025 20:10:37 +0100
Subject: [PATCH] chore: small UI improvements

---
 src/lib/components/visual/Footer.svelte | 12 +++++++-----
 src/routes/+layout.svelte               |  6 +++---
 src/routes/+page.svelte                 |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/visual/Footer.svelte b/src/lib/components/visual/Footer.svelte
index fd47506..2e47be7 100644
--- a/src/lib/components/visual/Footer.svelte
+++ b/src/lib/components/visual/Footer.svelte
@@ -11,12 +11,9 @@
 	const links = $derived(Object.entries(items));
 </script>
 
-<footer
-	class={classList}
-	style="background: linear-gradient(to bottom, transparent, var(--bg) 100%)"
->
+<footer class={classList}>
 	<div
-		class="w-full h-full flex items-center justify-center text-muted gap-3"
+		class="w-full h-full flex items-center justify-center text-muted gap-3 relative"
 	>
 		<p>© {year} VERT.</p>
 		{#each links as [name, url] (name)}
@@ -31,4 +28,9 @@
 			</a>
 		{/each}
 	</div>
+
+	<div
+		class="absolute bottom-0 left-0 w-full h-24 -z-10"
+		style="background: linear-gradient(to bottom, transparent, var(--bg) 100%)"
+	></div>
 </footer>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c09e8b1..167d837 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -180,7 +180,7 @@
 	<!-- FIXME: if user resizes between desktop/mobile, highlight of page disappears (only shows on original size) -->
 	<div class="z-50">
 		<!-- Mobile logo -->
-		<div class="flex md:hidden justify-center items-center p-8">
+		<div class="flex md:hidden justify-center items-center pb-8 pt-4">
 			<a
 				class="flex items-center justify-center bg-panel p-2 rounded-[20px] shadow-panel"
 				href="/"
@@ -218,7 +218,7 @@
 				}}
 			>
 				<div
-					class="flex flex-col h-full pb-36 md:pb-0"
+					class="flex flex-col h-full pb-32"
 					in:fade={{
 						duration,
 						easing: quintOut,
@@ -244,7 +244,7 @@
 
 	<div class="z-50">
 		<div
-			class="hidden md:block w-full h-14 border-t border-separator relative mt-12"
+			class="hidden md:block w-full h-14 border-t border-separator fixed bottom-0 mt-12"
 		>
 			<Footer
 				class="w-full h-full"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f3d33b3..4d586cd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <div
-	class="w-screen px-8 h-full flex items-start justify-center overflow-hidden max-h-screen"
+	class="w-screen px-2 md:px-8 h-full flex items-start justify-center overflow-hidden max-h-screen"
 >
 	<div class="content w-screen flex items-center justify-center flex-grow">
 		<div class="max-w-5xl w-full">