RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove page transitions 

performance moment (will experiment asp to bring them back hopefully)
This commit is contained in:
JovannMC 2025-01-09 21:55:45 +03:00
parent 1667d6a98c
commit 5941f353b0
No known key found for this signature in database
3 changed files with 5 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/routes/+layout.svelte
View File

@ -18,7 +18,6 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import { quintOut } from "svelte/easing"; import { quintOut } from "svelte/easing";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import { fade } from "svelte/transition";
import "../app.scss"; import "../app.scss";
let { children, data } = $props(); let { children, data } = $props();
@ -239,10 +238,6 @@
{#if data.pathname === "/"} {#if data.pathname === "/"}
<div <div
transition:fade={{
duration,
easing: quintOut,
}}
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none" class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient);" style="background: var(--bg-gradient);"
></div> ></div>

31
src/routes/+page.svelte
View File

@ -26,46 +26,21 @@
> >
<div class="flex-grow w-full text-center md:text-left"> <div class="flex-grow w-full text-center md:text-left">
<h1 <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" 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"
style:--delay="20ms"
> >
The file converter you'll love. The file converter you'll love.
</h1> </h1>
<p <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" 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"
style:--delay="60ms"
> >
All processing is done on your device. No file size All processing is done on your device. No file size
limit, no ads, and completely open source. limit, no ads, and completely open source.
</p> </p>
</div> </div>
<div <div class="flex-grow w-11/12 md:w-full h-72">
class="flex-grow w-11/12 md:w-full h-72 blur-in"
style:--delay="60ms"
>
<Uploader class="w-full h-full" /> <Uploader class="w-full h-full" />
</div> </div>
</div> </div>
</div> </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>

24
src/routes/about/+page.svelte
View File

@ -81,7 +81,7 @@
<div class="flex flex-col h-full items-center"> <div class="flex flex-col h-full items-center">
<h1 <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;" style="--delay: 20ms;"
> >
<InfoIcon size="40" class="inline-block -mt-2 mr-2" /> <InfoIcon size="40" class="inline-block -mt-2 mr-2" />
@ -89,7 +89,7 @@
</h1> </h1>
<div <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" style="--delay: 60ms"
> >
<!-- Why VERT? & Credits --> <!-- Why VERT? & Credits -->
@ -105,23 +105,3 @@
</div> </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>