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

31
src/routes/+page.svelte
View File

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

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

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