some bug fixes

shorten button labels, comment out fly anim, fix gradients hidden on other pages w/ one image in conversion

package.json

@@ -17,7 +17,6 @@
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.4",
 		"@types/eslint": "^9.6.1",
-		"@types/js-cookie": "^3.0.6",
 		"@types/jsmediatags": "^3.9.6",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.18.0",

src/app.html

@@ -8,7 +8,6 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		%sveltekit.head%
 		<script>
-			// FIXME: flash of dark mode when using light mode
 			(function() {
 				// Apply theme before DOM is loaded
 				let theme = localStorage.getItem("theme");

src/lib/sections/about/Resources.svelte

@@ -20,7 +20,7 @@
 			class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
 		>
 			<MessageCircleMoreIcon size="24" class="inline-block mr-2" />
-			Discord server
+			Discord
 		</a>
 		<a
 			href="https://github.com/not-nullptr/VERT"
@@ -29,7 +29,7 @@
 			class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
 		>
 			<GithubIcon size="24" class="inline-block mr-2" />
-			Source code
+			Source
 		</a>
 	</div>
 </Panel>

src/lib/sections/settings/Appearance.svelte

@@ -131,7 +131,7 @@
 							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
 						>
 							<PlayIcon size="24" class="inline-block mr-2" />
-							Enable animations
+							Enable
 						</button>
 
 						<button
@@ -140,7 +140,7 @@
 							class="btn flex-1 p-4 rounded-lg text-black dynadark:text-white flex items-center justify-center"
 						>
 							<PauseIcon size="24" class="inline-block mr-2" />
-							Disable animations
+							Disable
 						</button>
 					</div>
 				</div>

src/routes/+layout.svelte

@@ -143,6 +143,12 @@
 
 	<div class="grid grid-rows-1 grid-cols-1 h-full flex-grow">
 		{#key data.pathname}
+			<div
+				class="row-start-1 col-start-1"
+				transition:fade={{ duration, easing: quintOut }}
+			>
+				<!--
+			FIXME fly animations cause issues for some reason (page height extending during transition, causing scrollbar to disappear briefly (on mobile) & ability to scroll)
 			<div
 				class="row-start-1 col-start-1"
 				in:fly={{
@@ -156,7 +162,6 @@
 					duration,
 					easing: quintOut,
 				}}
-			>
 				<div
 					class="flex flex-col h-full pb-36 md:pb-0"
 					in:fade={{
@@ -170,6 +175,8 @@
 						delay: 200,
 					}}
 				>
+			>-->
+				<div class="flex flex-col h-full pb-36 md:pb-0">
 					{@render children()}
 				</div>
 			</div>
@@ -202,35 +209,33 @@
 </div>
 
 <!-- Gradients placed here to prevent it overlapping in transitions -->
-{#if $showGradient}
+{#if data.pathname === "/"}
-	{#if data.pathname === "/"}
+	<div
-		<div
+		class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
-			class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
+	>
-		>
+		<VertVBig class="fill-[--fg] opacity-50" />
-			<VertVBig class="fill-[--fg] opacity-50" />
+	</div>
-		</div>
+	<div
-		<div
+		id="gradient-bg"
-			id="gradient-bg"
+		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>
+{:else if data.pathname === "/convert" && $showGradient}
-	{:else if data.pathname === "/convert"}
+	<div
-		<div
+		id="gradient-bg"
-			id="gradient-bg"
+		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-{$gradientColor || 'pink'});"
-			style="background: var(--bg-gradient-{$gradientColor || 'pink'});"
+	></div>
-		></div>
+{:else if data.pathname === "/settings"}
-	{:else if data.pathname === "/settings"}
+	<div
-		<div
+		id="gradient-bg"
-			id="gradient-bg"
+		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-blue);"
-			style="background: var(--bg-gradient-blue);"
+	></div>
-		></div>
+{:else if data.pathname === "/about"}
-	{:else if data.pathname === "/about"}
+	<div
-		<div
+		id="gradient-bg"
-			id="gradient-bg"
+		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-pink);"
-			style="background: var(--bg-gradient-pink);"
+	></div>
-		></div>
-	{/if}
 {/if}