From 91bcd33c44287d6ccd283c28a4c416e5eff30c0f Mon Sep 17 00:00:00 2001
From: kritzl <kritzl@kritzl.dev>
Date: Tue, 7 Jul 2026 14:40:20 +0200
Subject: [PATCH] improve layout

---
 src/pages/index.astro | 59 +++++++++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5414b58..011602a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,45 +7,40 @@ import {Calendar} from "@lucide/astro"
   <div class="hero bg-base-200 min-h-screen">
     <div class="hero-content text-center">
       <div class="max-w-md">
-        <div class="grid auto-cols-max grid-flow-col gap-5 text-center mx-auto w-fit mb-8 opacity-0"
+        <div class="grid auto-cols-max grid-flow-col gap-2 text-center mx-auto w-fit mb-8 opacity-0"
              id="countdown">
-          <div class="flex flex-col items-center">
-            <span class="countdown font-mono text-5xl">
+          <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
+            <span class="countdown font-mono text-4xl">
               <span id="days" style="--value:0;" aria-live="polite" aria-label="0">0</span>
             </span>
-            Tage
+            Tag(e)
           </div>
-          <div class="flex flex-col items-center">
-            <span class="countdown font-mono text-5xl">
+          <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
+            <span class="countdown font-mono text-4xl">
               <span id="hours" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
             </span>
-            Stunden
+            Std.
           </div>
-          <div class="flex flex-col items-center">
-            <span class="countdown font-mono text-5xl">
+          <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
+            <span class="countdown font-mono text-4xl">
               <span id="minutes" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
             </span>
-            Minuten
+            Min.
           </div>
-          <div class="flex flex-col items-center">
-            <span class="countdown font-mono text-5xl">
+          <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
+            <span class="countdown font-mono text-4xl">
               <span id="seconds" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
             </span>
-            Sekunden
+            Sek.
           </div>
         </div>
-        <h1 class="text-7xl font-bold">
+        <h1 class="text-6xl font-bold">
           DIDAYS 2026
         </h1>
         <p class="py-6 text-xl leading-10">
           02.-04.10.2026<br>
           <a class="link" href="https://www.kulturpalast-harburg.com">Kultur Palast Harburg</a><br>
-          Eintritt frei<br>
-          veranstaltet vom <a class="link" href="https://hamburg.ccc.de">
-          CCCHH
-        </a> & <a class="link" href="https://www.wauland.de">
-          WHS
-        </a>
+          Eintritt frei
         </p>
         <div class="aura aura-rainbow">
           <a href="/didays2026.ics" class="btn btn-lg" target="_blank">
@@ -140,16 +135,16 @@ import {Calendar} from "@lucide/astro"
 
   <script>
       const countdownElement: HTMLElement = document.getElementById("countdown")!
-      const daysElement: HTMLElement = countdownElement.querySelector('#days')!
-      const hoursElement: HTMLElement = countdownElement.querySelector('#hours')!
-      const minutesElement: HTMLElement = countdownElement.querySelector('#minutes')!
-      const secondsElement: HTMLElement = countdownElement.querySelector('#seconds')!
+      const daysElement: HTMLElement = countdownElement.querySelector("#days")!
+      const hoursElement: HTMLElement = countdownElement.querySelector("#hours")!
+      const minutesElement: HTMLElement = countdownElement.querySelector("#minutes")!
+      const secondsElement: HTMLElement = countdownElement.querySelector("#seconds")!
       const targetDateTime = new Date(2026, 9, 2, 10, 0, 0)
 
-      const second = 1000;
-      const minute = 60 * second;
-      const hour = 60 * minute;
-      const day = 24 * hour;
+      const second = 1000
+      const minute = 60 * second
+      const hour = 60 * minute
+      const day = 24 * hour
 
       function updateCountdown() {
           countdownElement.classList.add("opacity-50")
@@ -162,9 +157,17 @@ import {Calendar} from "@lucide/astro"
           const seconds = Math.floor((diff % minute) / second)
 
           daysElement.style.setProperty("--value", String(days))
+          daysElement.innerText = String(days)
+          daysElement.setAttribute("aria-label", String(days))
           hoursElement.style.setProperty("--value", String(hours))
+          hoursElement.innerText = String(hours)
+          hoursElement.setAttribute("aria-label", String(hours))
           minutesElement.style.setProperty("--value", String(minutes))
+          minutesElement.innerText = String(minutes)
+          minutesElement.setAttribute("aria-label", String(minutes))
           secondsElement.style.setProperty("--value", String(seconds))
+          secondsElement.innerText = String(seconds)
+          secondsElement.setAttribute("aria-label", String(seconds))
       }
 
       if (new Date() < targetDateTime) {