From 5941f353b0d157ad566c14d20cbf50820fe29388 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Thu, 9 Jan 2025 21:55:45 +0300
Subject: [PATCH] Remove page transitions

performance moment (will experiment asp to bring them back hopefully)
---
 src/routes/+layout.svelte     |  5 -----
 src/routes/+page.svelte       | 31 +++----------------------------
 src/routes/about/+page.svelte | 24 ++----------------------
 3 files changed, 5 insertions(+), 55 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2975f76..653ea7d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -18,7 +18,6 @@
 	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();
 
@@ -239,10 +238,6 @@
 
 {#if data.pathname === "/"}
 	<div
-		transition:fade={{
-			duration,
-			easing: quintOut,
-		}}
 		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
 		style="background: var(--bg-gradient);"
 	></div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 07755f5..e567d12 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -26,46 +26,21 @@
 			>
 				<div class="flex-grow w-full text-center md:text-left">
 					<h1
-						class="text-4xl px-12 md:p-0 md:text-6xl flex-wrap tracking-tight leading-tight md:leading-[72px] mb-4 md:mb-6 blur-in"
-						style:--delay="20ms"
+						class="text-4xl px-12 md:p-0 md:text-6xl flex-wrap tracking-tight leading-tight md:leading-[72px] mb-4 md:mb-6"
 					>
 						The file converter you'll love.
 					</h1>
 					<p
-						class="font-normal px-5 md:p-0 text-lg md:text-xl text-black text-opacity-60 dynadark:text-white dynadark:text-opacity-60 blur-in"
-						style:--delay="60ms"
+						class="font-normal px-5 md:p-0 text-lg md:text-xl text-black text-opacity-60 dynadark:text-white dynadark:text-opacity-60"
 					>
 						All processing is done on your device. No file size
 						limit, no ads, and completely open source.
 					</p>
 				</div>
-				<div
-					class="flex-grow w-11/12 md:w-full h-72 blur-in"
-					style:--delay="60ms"
-				>
+				<div class="flex-grow w-11/12 md:w-full h-72">
 					<Uploader class="w-full h-full" />
 				</div>
 			</div>
 		</div>
 	</div>
 </div>
-
-<style>
-	@keyframes blur-in {
-		0% {
-			filter: blur(8px);
-			transform: translateY(-8px) scale(0.9);
-			opacity: 0;
-		}
-		100% {
-			filter: blur(0);
-			transform: translateY(0) scale(1);
-			opacity: 1;
-		}
-	}
-
-	.blur-in {
-		animation: blur-in 0.75s var(--transition) var(--delay, 0ms) forwards;
-		opacity: 0;
-	}
-</style>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 9b028de..a1e6b1d 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -81,7 +81,7 @@
 
 <div class="flex flex-col h-full items-center">
 	<h1
-		class="hidden md:block text-3xl tracking-tight leading-[72px] mb-6 blur-in"
+		class="hidden md:block text-3xl tracking-tight leading-[72px] mb-6"
 		style="--delay: 20ms;"
 	>
 		<InfoIcon size="40" class="inline-block -mt-2 mr-2" />
@@ -89,7 +89,7 @@
 	</h1>
 
 	<div
-		class="w-full max-w-[1280px] flex flex-col md:flex-row gap-4 blur-in p-4 md:p-0"
+		class="w-full max-w-[1280px] flex flex-col md:flex-row gap-4 p-4 md:p-0"
 		style="--delay: 60ms"
 	>
 		<!-- Why VERT? & Credits -->
@@ -105,23 +105,3 @@
 		</div>
 	</div>
 </div>
-
-<style>
-	@keyframes blur-in {
-		0% {
-			filter: blur(8px);
-			transform: translateY(-8px) scale(0.9);
-			opacity: 0;
-		}
-		100% {
-			filter: blur(0);
-			transform: translateY(0) scale(1);
-			opacity: 1;
-		}
-	}
-
-	.blur-in {
-		animation: blur-in 0.75s var(--transition) var(--delay, 0ms) forwards;
-		opacity: 0;
-	}
-</style>