CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

change countdown size on smaller screens
All checks were successful
delpoy / build-and-deploy (push) Successful in 28s
Details

Browse Source
This commit is contained in:
bytedream 2023-08-10 17:06:38 +02:00
parent 793c43adc0
commit d0ff946d98
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/components/Countdown/Countdown.svelte
View File

@ -28,26 +28,26 @@
<div class="grid grid-flow-col gap-5 text-center auto-cols-max"> <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"> <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-3xl sm:text-5xl">
<span style="--value:{days};" /> <span class="m-auto" style="--value:{days};" />
</span> </span>
Tage Tage
</div> </div>
<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content"> <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-3xl sm:text-5xl">
<span style="--value:{hours};" /> <span class="m-auto" style="--value:{hours};" />
</span> </span>
Stunden Stunden
</div> </div>
<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content"> <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-3xl sm:text-5xl">
<span style="--value:{minutes};" /> <span class="m-auto" style="--value:{minutes};" />
</span> </span>
Minuten Minuten
</div> </div>
<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content"> <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-3xl sm:text-5xl">
<span style="--value:{seconds};" /> <span class="m-auto" style="--value:{seconds};" />
</span> </span>
Sekunden Sekunden
</div> </div>

4
src/routes/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { env } from '$env/dynamic/public'; import { env } from '$env/dynamic/public';
import Timer from '$lib/components/Countdown/Countdown.svelte'; import Countdown from '$lib/components/Countdown/Countdown.svelte';
</script> </script>
<svelte:head> <svelte:head>
@ -8,5 +8,5 @@
</svelte:head> </svelte:head>
<div class="w-full flex justify-center items-center"> <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> </div>