From d0ff946d98b1391006db874eaa057ff94dab1ed0 Mon Sep 17 00:00:00 2001
From: bytedream <bytedream@protonmail.com>
Date: Thu, 10 Aug 2023 17:06:38 +0200
Subject: [PATCH] change countdown size on smaller screens

---
 src/lib/components/Countdown/Countdown.svelte | 16 ++++++++--------
 src/routes/+page.svelte                       |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/Countdown/Countdown.svelte b/src/lib/components/Countdown/Countdown.svelte
index 8cae751..d9639fa 100644
--- a/src/lib/components/Countdown/Countdown.svelte
+++ b/src/lib/components/Countdown/Countdown.svelte
@@ -28,26 +28,26 @@
 
 <div class="grid grid-flow-col gap-5 text-center auto-cols-max">
 	<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
-		<span class="countdown font-mono text-5xl">
-			<span style="--value:{days};" />
+		<span class="countdown font-mono text-3xl sm:text-5xl">
+			<span class="m-auto" style="--value:{days};" />
 		</span>
 		Tage
 	</div>
 	<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
-		<span class="countdown font-mono text-5xl">
-			<span style="--value:{hours};" />
+		<span class="countdown font-mono text-3xl sm:text-5xl">
+			<span class="m-auto" style="--value:{hours};" />
 		</span>
 		Stunden
 	</div>
 	<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
-		<span class="countdown font-mono text-5xl">
-			<span style="--value:{minutes};" />
+		<span class="countdown font-mono text-3xl sm:text-5xl">
+			<span class="m-auto" style="--value:{minutes};" />
 		</span>
 		Minuten
 	</div>
 	<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
-		<span class="countdown font-mono text-5xl">
-			<span style="--value:{seconds};" />
+		<span class="countdown font-mono text-3xl sm:text-5xl">
+			<span class="m-auto" style="--value:{seconds};" />
 		</span>
 		Sekunden
 	</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fdc35ad..79d13b6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { env } from '$env/dynamic/public';
-	import Timer from '$lib/components/Countdown/Countdown.svelte';
+	import Countdown from '$lib/components/Countdown/Countdown.svelte';
 </script>
 
 <svelte:head>
@@ -8,5 +8,5 @@
 </svelte:head>
 
 <div class="w-full flex justify-center items-center">
-	<Timer end={Date.parse(env.PUBLIC_START_DATE)} />
+	<Countdown end={Date.parse(env.PUBLIC_START_DATE)} />
 </div>