style content, add arrow indicating more content

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@lucide/astro": "^1.23.0",
+    "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.2",
     "astro": "^7.0.6",
     "tailwindcss": "^4.3.2"

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@lucide/astro':
         specifier: ^1.23.0
         version: 1.23.0(astro@7.0.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.2)(jiti@2.7.0))
+      '@tailwindcss/typography':
+        specifier: ^0.5.20
+        version: 0.5.20(tailwindcss@4.3.2)
       '@tailwindcss/vite':
         specifier: ^4.3.2
         version: 4.3.2(vite@8.1.3(esbuild@0.28.1)(jiti@2.7.0))
@@ -774,6 +777,11 @@ packages:
     resolution: {integrity: sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==}
     engines: {node: '>= 20'}
 
+  '@tailwindcss/typography@0.5.20':
+    resolution: {integrity: sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >=4.0.0 || insiders'
+
   '@tailwindcss/vite@4.3.2':
     resolution: {integrity: sha512-eHpMeX4JXfVNJDEcsouTeCBubJBTcTLigeaw/NTUW6PB5ATKKXdyonnXgTBX2VuRbjz1hjfz6C5XAhr52ImQXA==}
     peerDependencies:
@@ -895,6 +903,11 @@ packages:
     resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
     engines: {node: '>= 6'}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   csso@5.0.5:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@@ -1249,6 +1262,10 @@ packages:
     resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
     engines: {node: '>=12'}
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss@8.5.16:
     resolution: {integrity: sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1461,6 +1478,9 @@ packages:
       uploadthing:
         optional: true
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
@@ -2090,6 +2110,11 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.3.2
       '@tailwindcss/oxide-win32-x64-msvc': 4.3.2
 
+  '@tailwindcss/typography@0.5.20(tailwindcss@4.3.2)':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.3.2
+
   '@tailwindcss/vite@4.3.2(vite@8.1.3(esbuild@0.28.1)(jiti@2.7.0))':
     dependencies:
       '@tailwindcss/node': 4.3.2
@@ -2283,6 +2308,8 @@ snapshots:
 
   css-what@6.2.2: {}
 
+  cssesc@3.0.0: {}
+
   csso@5.0.5:
     dependencies:
       css-tree: 2.2.1
@@ -2617,6 +2644,11 @@ snapshots:
 
   picomatch@4.0.5: {}
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss@8.5.16:
     dependencies:
       nanoid: 3.3.15
@@ -2838,6 +2870,8 @@ snapshots:
       ofetch: 1.5.1
       ufo: 1.6.4
 
+  util-deprecate@1.0.2: {}
+
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3

src/components/Footer.astro

@@ -0,0 +1,23 @@
+---
+
+---
+
+<footer class="bg-base-300 pb-20">
+  <div class="container p-8 mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-3 items-center gap-12">
+    <div class="flex flex-col items-center">
+      <a class="link" href="https://hamburg.ccc.de/imprint/">Kontakt & Impressum</a>
+      <a class="link" href="https://hamburg.ccc.de/privacy-notice/">Datenschutzerklärung</a>
+      <a class="link" rel="me" href="https://chaos.social/@didays">Fediverse</a>
+    </div>
+    <div class="flex flex-col items-center">
+      <a href="https://hamburg.ccc.de">
+        <img alt="Logo des Chaos Computer Club Hamburg e.V." src="/ccchh.svg" class="max-w-40"/>
+      </a>
+    </div>
+    <div class="flex flex-col items-center">
+      <a href="https://www.wauland.de">
+        <img alt="Logo der Wau-Holland-Stiftung" src="/wauland.svg" class="max-w-40"/>
+      </a>
+    </div>
+  </div>
+</footer>

src/layouts/Content.astro

@@ -0,0 +1,15 @@
+---
+import "../styles/global.css"
+import Footer from "../components/Footer.astro"
+import Layout from "./Layout.astro"
+
+const {frontmatter} = Astro.props
+---
+
+<Layout title={frontmatter.title}>
+  <main class="prose max-w-3xl mx-auto p-4 mt-10 mb-40">
+    <h1>{frontmatter.title}</h1>
+    <slot/>
+  </main>
+  <Footer />
+</Layout>

src/layouts/Layout.astro

@@ -1,5 +1,7 @@
 ---
 import "../styles/global.css";
+
+const props = Astro.props;
 ---
 
 <!doctype html>
@@ -10,7 +12,7 @@ import "../styles/global.css";
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
-		<title>DIDAYS 2026</title>
+		<title>DIDAYS 2026{props.title ? ` | ${props.title}` : ''}</title>
 	</head>
 	<body>
 		<slot />

src/pages/einladung-initiativen.md

@@ -1,4 +1,8 @@
-# DIDAYS 2026: Macht mit!
+---
+layout: ../layouts/Content.astro
+title: "DIDAYS 2026: Macht mit!"
+author: CCCHH
+---
 
 Der [CCC Hansestadt Hamburg e.V.](https://hamburg.ccc.de) und die [Wau Holland Stiftung](https://www.wauland.de) veranstalten vom 2. bis 4. Oktober zusammen mit Hamburger Stadtteilinitiativen, Maker- und Hackerspaces und weiteren zivilgesellschaftlichen Organisationen aus der Region die ersten Digital Independance Days in Hamburg. Ihr und eure Gruppe seid herzlich eingeladen, euch aktiv zu beteiligen!
 

src/pages/index.astro

@@ -1,12 +1,13 @@
 ---
+import Footer from "../components/Footer.astro"
 import Layout from "../layouts/Layout.astro"
-import {Calendar} from "@lucide/astro"
+import {Calendar, ChevronDown} from "@lucide/astro"
 ---
 
 <Layout>
   <div class="hero bg-base-200 min-h-screen">
-    <div class="hero-content text-center">
+    <div class="hero-content text-center flex-col">
-      <div class="max-w-md">
+      <div class="max-w-md mb-10">
         <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="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
@@ -42,18 +43,23 @@ import {Calendar} from "@lucide/astro"
           <a class="link" href="https://www.kulturpalast-harburg.com">Kultur Palast Harburg</a><br>
           Eintritt frei
         </p>
-        <div class="not-motion-reduce:aura not-motion-reduce:aura-rainbow">
+        <div class="motion-safe:aura motion-safe:aura-rainbow">
           <a href="/didays2026.ics" class="btn btn-lg motion-reduce:btn-outline" target="_blank">
             <Calendar/>
             Im Kalender speichern
           </a>
         </div>
       </div>
+      <div class="flex w-full justify-center">
+        <ChevronDown class="size-14 motion-safe:animate-[bounce_3s_ease-in-out_infinite]"/>
+      </div>
     </div>
   </div>
   <div class="container p-8 my-40 max-w-2xl mx-auto text-center text-xl/8">
     <p>
-      Der <a class="link" href="https://hamburg.ccc.de">CCC Hansestadt Hamburg e.V.</a> und die <a class="link" href="https://www.wauland.de">Wau Holland Stiftung</a> veranstalten vom 2. bis 4. Oktober zusammen mit Hamburger Stadtteilinitiativen,
+      Der <a class="link" href="https://hamburg.ccc.de">CCC Hansestadt Hamburg e.V.</a> und die <a class="link"
+                                                                                                   href="https://www.wauland.de">Wau
+      Holland Stiftung</a> veranstalten vom 2. bis 4. Oktober zusammen mit Hamburger Stadtteilinitiativen,
       Maker- und Hackerspaces und weiteren zivilgesellschaftlichen Organisationen aus der Region die ersten Digital
       Independence Days in Hamburg.<br><br>
       Euch erwartet ein Programm rund um digitale Unabhängigkeit: Messenger,
@@ -120,25 +126,7 @@ import {Calendar} from "@lucide/astro"
     </div>
   </div>
 
-  <footer class="bg-base-300 pb-20">
+  <Footer/>
-    <div class="container p-8 mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-3 items-center gap-12">
-      <div class="flex flex-col items-center">
-        <a class="link" href="https://hamburg.ccc.de/imprint/">Kontakt & Impressum</a>
-        <a class="link" href="https://hamburg.ccc.de/privacy-notice/">Datenschutzerklärung</a>
-        <a class="link" rel="me" href="https://chaos.social/@didays">Fediverse</a>
-      </div>
-      <div class="flex flex-col items-center">
-        <a href="https://hamburg.ccc.de">
-          <img alt="Logo des Chaos Computer Club Hamburg e.V." src="/ccchh.svg" class="max-w-40"/>
-        </a>
-      </div>
-      <div class="flex flex-col items-center">
-        <a href="https://www.wauland.de">
-          <img alt="Logo der Wau-Holland-Stiftung" src="/wauland.svg" class="max-w-40"/>
-        </a>
-      </div>
-    </div>
-  </footer>
 
   <script>
       const countdownElement: HTMLElement = document.getElementById("countdown")!

src/styles/global.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 @plugin "daisyui";
 @plugin "daisyui/theme" {
     name: "mytheme";