chore: small UI improvements

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>

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"

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">