From 5066c3ba7aa9e2f792733667c98c143981f9ac79 Mon Sep 17 00:00:00 2001
From: 0d0 <0d0acre@esiliati.org>
Date: Tue, 8 Apr 2025 21:31:34 +0200
Subject: [PATCH] better css

---
 src/routes/+layout.svelte |  7 +++++
 src/routes/+page.svelte   | 63 ++++++++++++++++++++-------------------
 2 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 61642b3..0d97a1a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -17,4 +17,11 @@
 		transform: rotate(180deg);
 		display: inline-block;
 	}
+
+	@media screen and (max-height: 600px) {
+		/* Your CSS rules here */
+		footer {
+			display: none;
+		}
+	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b52b963..e63159a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -94,7 +94,7 @@
 
 <div
 	id="wrapper"
-	class="relative mx-auto rounded-lg bg-black p-6 text-[#00ff7f] shadow-lg sm:max-w-sm sm:border-4 sm:border-[#00ff7f] md:mt-10 md:max-w-md lg:max-w-lg 2xl:max-w-2xl"
+	class="relative mx-auto rounded-lg bg-black p-6 text-[#00ff7f] shadow-lg sm:max-w-sm sm:border-4 sm:border-[#00ff7f] sm:mt-10 lg:max-w-lg 2xl:max-w-2xl"
 >
 	<div
 		id="loader"
@@ -123,20 +123,36 @@
 	<p id="title" class="mb-6 text-center text-[#00e5ff]">🐙 Scaricatore 🐙</p>
 	<form class="space-y-6">
 		<!-- Source selection -->
-		<div>
-			<label for="source" class="mb-2 block text-[#00e5ff]"> Choose Source: </label>
-			<select
-				id="source"
-				name="source"
-				bind:value={source}
-				class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
-			>
-				{#each sources as source}
-					<option value={source.value}>{source.label}</option>
-				{/each}
-			</select>
-		</div>
+		<div class="flex justify-between">
+			<div class="sm:w-2/6 lg:w-3/6">
+				<label for="source" class="mb-2 block text-[#00e5ff]"> Choose Source: </label>
+				<select
+					id="source"
+					name="source"
+					bind:value={source}
+					class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
+				>
+					{#each sources as source}
+						<option value={source.value}>{source.label}</option>
+					{/each}
+				</select>
+			</div>
 
+			<!-- Format Selection -->
+			<div class="w-2/6">
+				<label for="format" class="mb-2 block text-[#00e5ff]"> Choose Format: </label>
+				<select
+					id="format"
+					name="format"
+					bind:value={format}
+					class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
+				>
+					{#each formats as format}
+						<option value={format.value}>{format.label}</option>
+					{/each}
+				</select>
+			</div>
+		</div>
 		<!-- Link Input -->
 		<div>
 			<label for="link" class="mb-2 block text-[#00e5ff]"> Enter Video Link: </label>
@@ -151,21 +167,6 @@
 			/>
 		</div>
 
-		<!-- Format Selection -->
-		<div>
-			<label for="format" class="mb-2 block text-[#00e5ff]"> Choose Format: </label>
-			<select
-				id="format"
-				name="format"
-				bind:value={format}
-				class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
-			>
-				{#each formats as format}
-					<option value={format.value}>{format.label}</option>
-				{/each}
-			</select>
-		</div>
-
 		<!-- Metadata -->
 		<div>
 			<label for="metadata" class="mb-2 block text-[#00e5ff]"
@@ -230,7 +231,8 @@
 			font-size: 10px;
 		}
 	}
-	@media (min-width: 1024px) {
+
+	@media (min-width: 1400px) {
 		* {
 			font-size: 12px;
 		}
@@ -239,6 +241,7 @@
 	#loader {
 		display: none;
 	}
+	
 	#loader.downloading {
 		display: grid;
 		justify-items: center;