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>