From f6e0b7db5d9a0087356117c8f4d299bc27e48178 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Thu, 6 Feb 2025 19:59:26 +0300
Subject: [PATCH] add gradient to blurred image bg in convert page

---
 src/app.scss              | 10 ++++++++++
 src/routes/+layout.svelte | 14 +++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 32d4fb7..4a00f11 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -89,6 +89,11 @@
 		var(--accent-blue),
 		hsl(220, 100%, 91%) 100%
 	);
+	--bg-gradient-image: linear-gradient(
+		to bottom,
+		hsla(0, 0%, 95%, 0.5),
+		hsla(0, 0%, 95%, 1) 100%
+	);
 	--bg-panel: hsl(0, 0%, 100%);
 	--bg-panel-accented: hsl(0, 0%, 92%);
 	--bg-separator: hsl(0, 0%, 88%);
@@ -160,6 +165,11 @@
 		var(--accent-blue),
 		hsl(220, 100%, 91%) 100%
 	);
+	--bg-gradient-image: linear-gradient(
+		to bottom,
+		hsla(220, 5%, 12%, 0.5),
+		hsla(220, 5%, 12%, 1) 100%
+	);
 	--bg-panel: hsl(220, 4%, 18%);
 	--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
 	--bg-separator: hsl(220, 4%, 28%);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 434a7ed..9ccdc33 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -95,7 +95,9 @@
 		});
 
 		motion.set(localStorage.getItem("motion") !== "false"); // defaults to true if not set
-		theme.set(localStorage.getItem("theme") as "light" | "dark" || "light");
+		theme.set(
+			(localStorage.getItem("theme") as "light" | "dark") || "light",
+		);
 	});
 
 	let goingLeft = $state(false);
@@ -234,7 +236,7 @@
 	></div>
 {:else if page.url.pathname === "/convert" && files.files.length === 1 && files.files[0].blobUrl}
 	<div
-		class="fixed w-screen h-screen opacity-75 overflow-hidden top-0 left-0 -z-50 pointer-events-none grid grid-cols-1 grid-rows-1"
+		class="fixed w-screen h-screen opacity-75 overflow-hidden top-0 left-0 -z-50 pointer-events-none grid grid-cols-1 grid-rows-1 scale-105"
 	>
 		<div
 			class="w-full relative"
@@ -244,12 +246,14 @@
 			}}
 		>
 			<img
-				class="object-cover w-full {!$isMobile
-					? 'h-[calc(100%-66px)]'
-					: 'h-full'} blur-md"
+				class="object-cover w-full h-full blur-md"
 				src={files.files[0].blobUrl}
 				alt={files.files[0].name}
 			/>
+			<div
+				class="absolute top-0 left-0 w-full h-full"
+				style="background: var(--bg-gradient-image);"
+			></div>
 			<!-- <div class="absolute bottom-0 left-0 w-full h-full">
 				<ProgressiveBlur
 					direction="bottom"