From 80d93b62c364ff82c386f8e61ee1a82cef4833d3 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Fri, 3 Jan 2025 15:52:21 +0300
Subject: [PATCH] make upload page mobile friendly

---
 src/routes/+page.svelte       | 14 ++++++++------
 src/routes/about/+page.svelte |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7c3464c..f8d13bc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <div
-	class="w-screen h-full flex items-center justify-center overflow-hidden -mt-14"
+	class="w-screen h-full flex items-center justify-center overflow-hidden md:-mt-14 -mt-24"
 >
 	<div
 		class="absolute -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
@@ -21,16 +21,18 @@
 
 	<div class="w-screen flex items-center justify-center flex-grow">
 		<div class="max-w-5xl w-full">
-			<div class="flex items-center h-[266px] gap-24">
-				<div class="flex-grow w-full">
+			<div
+				class="flex items-center h-auto gap-12 md:gap-24 md:flex-row flex-col"
+			>
+				<div class="flex-grow w-full text-center md:text-left">
 					<h1
-						class="text-6xl tracking-tight leading-[72px] mb-6 blur-in"
+						class="text-4xl px-16 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"
 					>
 						The file converter you'll love.
 					</h1>
 					<p
-						class="font-normal text-xl text-muted blur-in"
+						class="font-normal px-4 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"
 					>
 						All processing is done on your device. No file size
@@ -38,7 +40,7 @@
 					</p>
 				</div>
 				<div
-					class="flex-grow w-full h-full blur-in"
+					class="flex-grow w-11/12 md:w-full h-72 md:h-full blur-in"
 					style:--delay="60ms"
 				>
 					<Uploader class="w-full h-full" />
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 649005c..468a8ba 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="text-3xl tracking-tight leading-[72px] mb-6 blur-in"
+		class="hidden md:block text-3xl tracking-tight leading-[72px] mb-6 blur-in"
 		style="--delay: 20ms;"
 	>
 		<InfoIcon size="40" class="inline-block -mt-2 mr-2" />