transitions, theme stuff, layout stuff

src/lib/components/Dropdown.svelte

@@ -10,13 +10,16 @@
 </script>
 
 <div class="flex relative w-fit">
-	<button class="my-auto w-min" on:click={toggle}>
-		<Menu class="w-5 h-5"></Menu>
+	<button
+		class="my-auto w-min transition-colors hover:text-overlay2 {visible && 'text-overlay2'}"
+		on:click={toggle}
+	>
+		<Menu size="20"></Menu>
 	</button>
 	{#if visible}
 		<div
 			transition:slide
-			class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-crust rounded-lg origin-top right-0 absolute transition-all shadow-md"
+			class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-crust rounded-lg origin-top right-0 absolute transition-all shadow-md translate-x-3.5"
 		>
 			<slot />
 		</div>

src/lib/components/Footer.svelte

@@ -1,4 +1,3 @@
 <div
-	class="w-full h-full py-auto flex px-4 place-content-between rounded-xl
-    bg-neutral-200 dark:bg-neutral-900 transition-colors"
+	class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust"
 ></div>

src/lib/components/Forms/LoginForm.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { blur } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 	import { Mail, SquareAsterisk, LogIn, Undo } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
@@ -46,7 +46,7 @@
 	}
 </script>
 
-<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-full">
+<div class="flex justify-center items-center h-full">
 	<div class="flex flex-col space-y-2">
 		<div class="transition-colors fill-black dark:fill-white">
 			<Logo />

src/lib/components/Forms/RegisterForm.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { blur } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 	import { Mail, SquareAsterisk, Undo, User, UserPlus } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
@@ -56,7 +56,7 @@
 	}
 </script>
 
-<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-full">
+<div class="flex justify-center items-center h-full">
 	<div class="flex flex-col space-y-2">
 		<div class="transition-colors fill-black dark:fill-white">
 			<Logo />

src/lib/components/HeaderLink.svelte

@@ -13,7 +13,7 @@
 	{href}
 	class="my-auto md:text-lg transition-all {selected
 		? 'font-bold tracking-wider'
-		: 'hover:text-neutral-500 focus:text-neutral-500'}"
+		: 'hover:text-overlay2 focus:text-overlay2'}"
 >
 	<slot />
 </a>

src/routes/(app)/+layout.svelte

@@ -1,16 +1,23 @@
 <script>
+	import { page } from '$app/stores';
+	import { fade } from 'svelte/transition';
+
 	import Header from '$lib/components/Header.svelte';
 	import Footer from '$lib/components/Footer.svelte';
+
+	let show = false;
 </script>
 
-<div class="my-2 w-full min-h-screen">
+<div class="container my-2 w-full min-h-screen">
 	<div class="w-full h-12">
 		<Header></Header>
 	</div>
 
-	<div class="w-full min-h-[calc(100vh-4.5rem)] my-2">
-		<slot />
-	</div>
+	{#key $page.url}
+		<div in:fade|global class="w-full min-h-[calc(100vh-4.5rem)] my-2">
+			<slot />
+		</div>
+	{/key}
 
 	<div class="w-full h-20">
 		<Footer></Footer>

src/routes/(landing)/+layout.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { page } from '$app/stores';
+	import { fade } from 'svelte/transition';
+</script>
+
+{#key $page.url}
+	<div in:fade class="container">
+		<slot />
+	</div>
+{/key}

src/routes/(landing)/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { blur } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 	import { LogIn, UserPlus } from 'lucide-svelte';
 	import { writable } from 'svelte/store';
 	import { page } from '$app/stores';
@@ -27,7 +27,7 @@
 
 <div class="h-[85vh] md:h-screen">
 	{#if $state === '/landing'}
-		<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-full">
+		<div class="flex justify-center items-center h-full">
 			<div class="flex flex-col space-y-1.5">
 				<div>
 					<Logo />

src/routes/+layout.svelte

@@ -3,10 +3,12 @@
 
 	import { Toaster } from 'svelte-sonner';
 	import { CircleAlert, TriangleAlert, Info, Check, Loader } from 'lucide-svelte';
+	import { page } from '$app/stores';
 
-	import { darkMode, user } from '$lib/stores.js';
+	import { user } from '$lib/stores.js';
 	import ThemeHandler from '$lib/components/ThemeHandler.svelte';
 	import PageMeta from '$lib/components/PageMeta.svelte';
+	import { fade } from 'svelte/transition';
 
 	export let data;
 
@@ -35,6 +37,4 @@
 	<TriangleAlert size="20" class="text-text" slot="warning-icon" />
 </Toaster>
 
-<div class="container">
-	<slot />
-</div>
+<slot />