first draft

2026-10-04 14:19:19 +02:00 · 2026-10-04 14:19:19 +02:00 · 975f2cd9bc
commit 975f2cd9bc
parent 8096781fe2
26 changed files with 1303 additions and 993 deletions
--- a/src/pages/hamburg/2026/index.astro
+++ b/src/pages/hamburg/2026/index.astro
@ -0,0 +1,193 @@
+---
+import Footer from "../../../components/Footer.astro"
+import Layout from "../../../layouts/Layout.astro"
+import {File} from "@lucide/astro"
+import path from "../../../utils/path.ts"
+import {Picture} from "astro:assets"
+
+import traumweh_1 from "../../../assets/media/hamburg/2026/traumweh_1.png"
+
+const impressions = [
+    {
+        image: traumweh_1,
+        alt: "Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg.",
+        attribution: "CC-4.0 BY-SA traumweh",
+    },
+    {
+        image: traumweh_1,
+        alt: "Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg.",
+        attribution: "CC-4.0 BY-SA traumweh",
+    },
+    {
+        image: traumweh_1,
+        alt: "Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg.",
+        attribution: "CC-4.0 BY-SA traumweh",
+    },
+    {
+        image: traumweh_1,
+        alt: "Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg.",
+        attribution: "CC-4.0 BY-SA traumweh",
+    },
+    {
+        image: traumweh_1,
+        alt: "Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg.",
+        attribution: "CC-4.0 BY-SA traumweh",
+    },
+]
+
+const slides = [
+    {
+        name: "Vortragstitel",
+        path: "/hamburg/2026/slides/vortrag.pdf",
+    },
+    {
+        name: "Vortragstitel",
+        path: "/hamburg/2026/slides/vortrag.pdf",
+    },
+    {
+        name: "Vortragstitel",
+        path: "/hamburg/2026/slides/vortrag.pdf",
+    },
+    {
+        name: "Vortragstitel",
+        path: "/hamburg/2026/slides/vortrag.pdf",
+    },
+]
+---
+
+<Layout>
+  <div class="flex flex-col">
+    <h1 class="text-6xl font-bold mt-8 mb-4 flex justify-center">
+      <img src={path(import.meta.env.BASE_URL, "/hamburg/2026/logo.svg")} alt="Logo von den DiDays 2026 in Hamburg"
+           class="h-full"/>
+    </h1>
+    <div class="mask-[url(/transitions/big.svg)] bg-base-200 h-30 mask-repeat-x mask-[auto_100%]"/>
+  </div>
+
+  <div class="bg-base-200 pt-8 pb-16">
+    <div class="container p-8 max-w-5xl mx-auto flex flex-col md:flex-row gap-10 items-center md:items-start">
+      <p class="text-xl/8 text-center">
+        [Platzhaltertext Rückblick Event]
+      </p>
+    </div>
+  </div>
+
+  <div class="bg-white relative">
+    <div
+        class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%] absolute top-0 w-full"/>
+    <Picture
+        formats={["avif", "webp", "jpg"]}
+        widths={[540, 720, traumweh_1.width]}
+        src={traumweh_1}
+        class="w-full"
+        alt="Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg."
+    />
+    <span class="absolute px-3 text-xs py-1 bg-white/50 bottom-11 right-0 rounded-l text-black">
+      CC-4.0 BY-SA traumweh
+    </span>
+    <div
+        class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%] rotate-180 absolute bottom-0 w-full"/>
+  </div>
+
+  <div class="bg-base-200 pb-20 w-screen overflow-x-hidden">
+    <div class="container p-8 max-w-2xl mx-auto">
+      <h2 class="text-4xl font-semibold mb-8">
+        [Platzhaltertext Titel]
+      </h2>
+      <p>
+        [Platzhaltertext Inhalt]
+      </p>
+    </div>
+  </div>
+
+  <div class="bg-base-100 pb-20 w-screen overflow-x-hidden">
+    <div class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%]"/>
+    <div class="container p-8 max-w-2xl mx-auto">
+      <h2 class="text-4xl font-semibold mb-8">
+        [Platzhaltertext Titel]
+      </h2>
+      <p>
+        [Platzhaltertext Inhalt]
+      </p>
+    </div>
+  </div>
+
+  <div class="bg-base-200 pb-20 w-screen overflow-x-hidden">
+    <div class="mask-[url(/transitions/small.svg)] bg-base-100 h-10 mask-repeat-x mask-[auto_100%]"/>
+    <div class="container p-8 mx-auto">
+      <h2 class="text-4xl font-semibold my-8 mx-auto text-center">
+        Eindrücke vom Event
+      </h2>
+      <div class="flex gap-4 overflow-x-auto w-full justify-start py-4">
+          {impressions.map((impression, index) =>
+                  <button command="show-modal" commandfor={`impression-${index}`}
+                          class="mx-auto shrink-0 w-lg overflow-hidden shadow-lg rounded-xl relative">
+                    <Picture
+                        formats={["avif", "webp", "jpg"]}
+                        widths={[540, 720, impression.image.width]}
+                        src={impression.image}
+                        alt={impression.alt}
+                        layout="full-width"
+                    />
+                      {impression.attribution &&
+                          <span class="absolute px-3 text-xs py-1 bg-white/50 bottom-0 right-0 rounded-tl text-black">
+                              {impression.attribution}
+                          </span>}
+                  </button>
+
+                  <dialog id={`impression-${index}`}
+                          class="mx-auto my-auto rounded-xl max-w-6xl bg-base-100 backdrop:bg-black/50"
+                          closedby="any">
+                    <Picture
+                        src={impression.image}
+                        alt={impression.alt}
+                    />
+                    <div class="p-2 flex justify-between items-center">
+                        {
+                            impression.attribution &&
+                            <span class="px-3 text-xs py-1">
+                                {impression.attribution}
+                            </span>
+                        }
+                      <button commandfor={`impression-${index}`} command="close" class="btn btn-base-200 ml-auto">
+                        Schließen
+                      </button>
+                    </div>
+                  </dialog>
+              ,
+          )}
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-base-100 pb-20 w-screen overflow-x-hidden">
+    <div class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%]"/>
+    <div class="container p-8 max-w-4xl mx-auto">
+      <h2 class="text-4xl font-semibold mb-8">
+        [Platzhaltertitel Vortragsfolien]
+      </h2>
+      <p>
+        [Platzhaltertext Inhalt]
+      </p>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full py-6">
+          {slides.map(slide =>
+              <a href={path(import.meta.env.BASE_URL, slide.path)}
+                 class="card shrink-0 bg-base-100 card-md shadow-lg border-base-200 border-2">
+                <div class="card-body">
+                  <h2 class="card-title">{slide.name}</h2>
+                  <div class="justify-end card-actions">
+                    <button class="btn btn-base-200">
+                      <File/>
+                      Folien Ansehen
+                    </button>
+                  </div>
+                </div>
+              </a>,
+          )}
+      </div>
+    </div>
+  </div>
+
+
+  <Footer/>
+</Layout>
--- a/src/pages/hamburg/2026/programm.astro
+++ b/src/pages/hamburg/2026/programm.astro
@ -12,7 +12,7 @@ import Layout from "../../../layouts/Layout.astro"
  </div>
  <div class="bg-white">
    <pretalx-schedule event-url="https://pretalx.hamburg.ccc.de/didays-hamburg-2026/" locale="de" format="grid"
-                      style="--pretalx-clr-primary: #ffad12; --pretalx-sticky-top-offset: 68px;">
+                      style="--pretalx-clr-primary: #ffad12; --pretalx-sticky-top-offset: 80px;">
    </pretalx-schedule>
    <noscript>
      <div class="pretalx-widget">
--- a/src/pages/hamburg/2026/wer.astro
+++ b/src/pages/hamburg/2026/wer.astro
@ -7,7 +7,7 @@ import path from "../../../utils/path.ts"
 const orgs = [
    {
        url: "https://hamburg.ccc.de",
-        image: "/ccchh.svg",
+        image: "/hamburg/2026/ccchh.svg",
        alt: "Logo des Chaos Computer Club Hamburg e.V.",
        name: "Chaos Computer Club Hamburg",
        info: "Wir sind die lokale Gruppe des Chaos Computer Club in Hamburg: Eine Gruppe von Menschen, die ein Interesse am kreativen Umgang mit Technik teilen. Unsere Gesprächsthemen und Projekte reichen von Soft- und Hardware zu Datenschutz und Netzpolitik.",
@ -17,7 +17,7 @@ const orgs = [
 const support = [
    {
        url: "https://www.wauland.de",
-        image: "/wauland.svg",
+        image: "/hamburg/2026/wauland.svg",
        alt: "Logo der Wau-Holland-Stiftung",
        name: "Wau-Holland-Stiftung",
        info: "Unser Anliegen ist es, die freidenkerischen Ansätze Wau Hollands zu bewahren und weiterzuführen.",
@ -27,77 +27,77 @@ const support = [
 const partners = [
    {
        url: "https://digitalcourage.de/treffen-vor-ort/hamburg",
-        image: "/digitalcourage.svg",
+        image: "/hamburg/2026/digitalcourage.svg",
        alt: "Logo der Digitalcourage e.V. Ortsgruppe Hamburg",
        name: "Digitalcourage e.V. Ortsgruppe Hamburg",
        info: "Wir engagieren uns in Hamburg gegen Digitalzwang und für digitale Souveränität.",
    },
    {
        url: "https://wiki.openstreetmap.org/w/index.php?title=Hamburg",
-        image: "/osm.svg",
+        image: "/hamburg/2026/osm.svg",
        alt: "Logo der Hamburger OpenStreetMap Community",
        name: "Hamburger OpenStreetMap Community",
        info: "Wir sind keine feste Organisation aber eine Gruppe von Menschen, die gemeinsam in Hamburg und Umgebung Daten zum OpenStreetMap Projekt beitragen.",
    },
    {
        url: "https://mastodon.online/@citydata",
-        image: "/citydataexplosion.svg",
+        image: "/hamburg/2026/citydataexplosion.svg",
        alt: "Logo von city/data/explosion",
        name: "city/data/explosion",
        info: "Projekte und Veranstaltungen zu Stadt, Öffentlichkeit und Digitalisierung",
    },
    {
        url: "https://ogrbund.de/",
-        image: "/ogr.svg",
+        image: "/hamburg/2026/ogr.svg",
        alt: "Logo der OMAS GEGEN RECHTS",
        name: "OMAS GEGEN RECHTS",
        info: "Zivilgesellschaftliche Initiative zum Schutz der Demokratie",
    },
    {
        url: "https://endof10hh.de/",
-        image: "/endof10.svg",
+        image: "/hamburg/2026/endof10.svg",
        alt: "Logo von End of 10",
        name: "End of 10 Hamburg",
        info: "Wir veranstalten regelmäßig an unterschiedlichen Orten in Hamburg Linux-Workshops, wo wir Interessierte beim Umstieg von Windows zu Linux unterstützen.",
    },
    {
        url: "https://www.vhs-hamburg.de/",
-        image: "/vhs.svg",
+        image: "/hamburg/2026/vhs.svg",
        alt: "Logo der Hamburger Volkshochschule",
        name: "Hamburger Volkshochschule",
        info: "Hamburgs größter Weiterbildungsanbieter mit über 9000 Kursen im Jahr - darunter ein breites digitales Angebot von der Computer-Einführung bis Programmieren.",
    },
    {
        url: "https://www.bezahlkarte-nein.de/",
-        image: "/bezahlkarte.png",
+        image: "/hamburg/2026/bezahlkarte.png",
        alt: "Logo von NEIN zur Bezahlkarte",
        name: "NEIN zur Bezahlkarte",
        info: "",
    },
    {
        url: "https://www.vzhh.de/",
-        image: "vzhh.png",
+        image: "/hamburg/2026/vzhh.png",
        alt: "Logo der Verbraucherzentrale Hamburg",
        name: "Verbraucherzentrale Hamburg",
        info: "",
    },
    {
        url: "https://annaelbe.net/",
-        image: "annaelbe.svg",
+        image: "/hamburg/2026/annaelbe.svg",
        alt: "Logo von anna elbe",
        name: "anna elbe",
        info: "Wir sagen NEIN zum Ausverkauf von öffentlichen Räumen",
    },
    {
        url: "https://repaircafe-eidelstedt.de/",
-        image: "repaircafe.svg",
+        image: "/hamburg/2026/repaircafe.svg",
        alt: "Logo vom Repair Café Eidelstedt",
        name: "Repair Café Eidelstedt",
        info: "Wegwerfen? Denkste! Wir haben die Nachhaltigkeit im Blick.",
    },
    {
        url: "https://www.instagram.com/teeplushamburg/",
-        image: "teeplus.png",
+        image: "/hamburg/2026/teeplus.png",
        alt: "Logo von Tee& Hamburg",
        name: "Tee& Hamburg",
        info: "Ein Blick unter die Oberfläche, Tee im Dialog mit Kunst, Kultur und Philosophie. Von Mai bis September im japanischen Teehaus Planten un Blomen",
@ -109,17 +109,13 @@ const partners = [

  <div class="bg-base-100">
    <div class="container p-8 max-w-2xl mx-auto">
-      <h2 class="text-4xl text-center font-semibold">Veranstaltet von</h2>
-    </div>
-  </div>
-  <div class="bg-base-200 pb-20 w-screen overflow-x-hidden">
-    <div class="mask-[url(/transitions/small.svg)] bg-base-100 h-10 mask-repeat-x mask-[auto_100%]"/>
-    <div class="container p-8 mx-auto">
+      <h2 class="text-4xl text-center font-semibold mb-6">Veranstaltet von</h2>
      <div class="grid grid-cols-1 place-content-center place-items-center">
          {orgs.map(org => (
-              <a href={org.url} class="flex flex-col items-center text-center h-full transition-colors max-w-md hover:bg-white/20 p-4 rounded-xl">
+              <a href={org.url}
+                 class="flex flex-col items-center text-center h-full transition-colors max-w-md hover:bg-white/20 p-4 rounded-xl">
                <img alt={org.alt} src={path(import.meta.env.BASE_URL, org.image)}
-                     class="max-w-60 h-40 mb-4 invert"/>
+                     class="max-w-60 h-20 mb-4 invert"/>
                <h3 class="font-bold link">{org.name}</h3>
                <p>
                    {org.info}
@ -130,18 +126,14 @@ const partners = [
    </div>
  </div>

-  <div class="bg-base-100">
-    <div class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%]"/>
-    <div class="container p-8 max-w-2xl mx-auto">
-      <h2 class="text-4xl text-center font-semibold">In Zusammenarbeit mit</h2>
-    </div>
-  </div>
-  <div class="bg-base-200 pb-20 w-screen overflow-x-hidden">
+  <div class="bg-base-200">
    <div class="mask-[url(/transitions/small.svg)] bg-base-100 h-10 mask-repeat-x mask-[auto_100%]"/>
-    <div class="container p-8 mx-auto">
+    <div class="container p-8 max-w-2xl mx-auto">
+      <h2 class="text-4xl text-center font-semibold mb-6">In Zusammenarbeit mit</h2>
      <div class="grid grid-cols-1 place-content-center place-items-center">
          {support.map(org => (
-              <a href={org.url} class="flex flex-col items-center text-center h-full transition-colors max-w-md hover:bg-white/20 p-4 rounded-xl">
+              <a href={org.url}
+                 class="flex flex-col items-center text-center h-full transition-colors max-w-md hover:bg-white/20 p-4 rounded-xl">
                <img alt={org.alt} src={path(import.meta.env.BASE_URL, org.image)}
                     class="max-w-60 h-40 mb-4 invert"/>
                <h3 class="font-bold link">{org.name}</h3>