looks good so far

assets/css/main.css

@@ -1,2 +1,43 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+@plugin "@tailwindcss/typography";
 @source "hugo_stats.json";
+
+@font-face {
+  font-family: 'Neonderthaw Regular';
+  src: url('/fonts/Neonderthaw-Regular.ttf');
+  unicode-range:
+    U+000D, U+0020-007E, U+00A0-0131, U+0134-0148, U+014A-017E, U+018F, U+0192,
+    U+01A0-01A1, U+01AF-01B0, U+01C4-01D6, U+01D9-01DC, U+01E6-01E7,
+    U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259,
+    U+02B9-02BA, U+02BC, U+02C6-02C7, U+02D8-02DD, U+0300-0304, U+0306-030C,
+    U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331,
+    U+0335, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2010, U+2013-2014, U+2018-201A,
+    U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044,
+    U+2052, U+2074, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB-20AD,
+    U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2116, U+2122, U+2202,
+    U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260,
+    U+2264-2265, U+25CA, U+27E8-27E9, U+F8FF, U+FB01-FB02;
+}
+
+@layer utilities {
+  .font-neon {
+    font-family: 'Neonderthaw Regular', serif;
+  }
+}
+
+lauti-calendar-list::part(container) {
+  --lauti-primary-color: #ffffff;
+  --lauti-secondary-color:;
+  --lauti-header-bg:;
+  --lauti-header-color: #ffffff;
+  --lauti-day-color: var(--color-pink-200);
+  @apply shadow-xl/20;
+  @apply rounded-lg;
+}
+lauti-calendar-list::part(header) {
+  @apply py-6;
+}
+lauti-calendar-list::part(list) {
+  @apply md:max-h-90;
+  @apply overflow-scroll;
+}

assets/js/background-blur.js

@@ -0,0 +1,51 @@
+function setBackgroundBlur(
+  targetId,
+  scrollDivisor = 300,
+  disableBlur = false,
+  isMenuBlur = false,
+) {
+  if (!targetId) {
+    console.error('data-blur-id is null');
+    return;
+  }
+  const blurElement = document.getElementById(targetId);
+  if (!blurElement) return;
+  if (disableBlur) {
+    blurElement.setAttribute('aria-hidden', 'true');
+    if (!isMenuBlur) {
+      blurElement.style.display = 'none';
+      blurElement.style.opacity = '0';
+    } else {
+      blurElement.style.display = '';
+    }
+  } else {
+    blurElement.style.display = '';
+    blurElement.removeAttribute('aria-hidden');
+  }
+  const updateBlur = () => {
+    if (!disableBlur || isMenuBlur) {
+      const scroll =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop ||
+        0;
+      blurElement.style.opacity = scroll / scrollDivisor;
+    }
+  };
+  blurElement.setAttribute('role', 'presentation');
+  blurElement.setAttribute('tabindex', '-1');
+  window.addEventListener('scroll', updateBlur);
+  updateBlur();
+}
+
+document.querySelectorAll('script[data-blur-id]').forEach((script) => {
+  const targetId = script.getAttribute('data-blur-id');
+  const scrollDivisor = Number(
+    script.getAttribute('data-scroll-divisor') || 300,
+  );
+  console.log('burring ', targetId);
+  const isMenuBlur = targetId === 'menu-blur';
+  const settings = JSON.parse(localStorage.getItem('a11ySettings') || '{}');
+  const disableBlur = settings.disableBlur || false;
+  setBackgroundBlur(targetId, scrollDivisor, disableBlur, isMenuBlur);
+});

assets/js/registerLauti.js

@@ -0,0 +1,6 @@
+import { configureLautiComponents } from 'wc-lauti';
+
+configureLautiComponents({
+  instanceUrl: 'https://eintopf.info',
+  instanceName: 'eintopf.info',
+});

content/_index.md

@@ -2,4 +2,13 @@
 title: Stuttgart Bike Night
 subtitle: Donnerstags 19 Uhr
 location: Flora & Fauna
+image: /images/bg-landing.jpg
 ---
+
+## Was ist die Stuttgarter Bike Night❓
+
+Eine aufstrebende regelmäßige bunte Nachtausfahrt mit Party-Pace durch Stuttgarts Bezirke.
+Wir wollen einen Groupride schaffen für Menschen, die sich in den sportlich fokussierten Radausfahrten vielleicht nicht ganz wohlfühlen 🤝💜 Eine 🚲 Fahrradausfahrt durch Stuttgart, bei der der Spaß am Radeln ganz oben steht 😄🙌.
+Wir verstehen uns als inklusive Gruppe 🌍✨, die einen sicheren Ort ohne Diskriminierung schaffen möchte, an dem sich alle wohl und willkommen fühlen können! 🏳️‍🌈💫.
+Also komm mit 👉🚲💡 und erkunde mit uns bunt leuchtend 🌈✨ die Stadtteile Stuttgarts 🏙️💛
+Wir fahren auf eigene Verantwortung ohne Anmeldung und sehen uns als kleine Gruppe, die aus Spaß fährt.

content/impressum.md

@@ -0,0 +1,17 @@
+---
+title: Impressum
+image: /images/halloween.jpg
+---
+
+**Angaben gemäß § 5 TMG:**
+
+Jasper Levin Spahl  
+Goppeltstr. 4D  
+70191 Stuttgart  
+Deutschland
+
+**Kontakt:**  
+E-Mail: [jasperspahl@web.de](mailto:jasperspahl@web.de)
+
+Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:  
+Jasper Levin Spahl (Anschrift wie oben)

data/footer.toml

@@ -0,0 +1,21 @@
+brand = "Stuttgart Bike Night"
+
+[[links]]
+name = "Impressum"
+url = "/impressum"
+
+[[links]]
+name = "Instagram"
+url = "https://instagram.com/stuttgartbikenight"
+
+[[links]]
+name = "Mastodon"
+url = "https://verkehrswende.social/@stuttgartbikenight"
+
+#[[links]]
+#name = "Signal Gruppe"
+#url = "https://signal.org"
+
+[[links]]
+name = "eintopf.info"
+url = "https://eintopf.info/gruppe/2e2994eb-ae45-4297-a2f6-9f7948da784c"

layouts/_partials/footer.html

@@ -0,0 +1,22 @@
+<footer class="relative py-6 mt-6">
+  <div class="absolute backdrop-blur-xs bottom-0 h-full w-screen left-[50%] right-[50%] ml-[-50vw] mr-[-50vw] -z-1"></div>
+  <div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center opacity-80">
+    <div class="mb-4 md:mb-0">
+      <h1 class="text-xl font-serif font-bold">{{ .Site.Title }}</h1>
+    </div>
+
+    <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 mb-4 md:mb-0 text-center">
+      {{ $footerMenu := .Site.Data.footer.links }}
+      {{ range $footerMenu }}
+        <a href="{{ .url }}" {{ if strings.HasPrefix .url "http" }}target="_blank"{{ end }} class="hover:drop-shadow-pink-400 hover:drop-shadow-[0_0_6px]">
+          {{ .name | safeHTML }}
+        </a>
+      {{ end }}
+    </div>
+  </div>
+
+  <div class="text-center mt-4 opacity-50">
+    &copy; {{ now.Format "2006" }} {{ .Site.Title }}. All rights reserved.
+  </div>
+  </div>
+</footer>

layouts/_partials/header.html

@@ -2,15 +2,33 @@
 <header class="fixed inset-x-0 z-100">
   <div
     id="menu-blur"
-    class="absolute opacity-0 inset-x-0 top-0 h-full backdrop-blur-2xl shadow-2xl"
+    class="absolute opacity-100 inset-x-0 top-0 h-full backdrop-blur-2xl shadow-2xl"
     role="presentation"
     tab-index="-1"></div>
+    {{ with resources.Get "js/background-blur.js" }}
+      {{ with . | minify | fingerprint "sha256" }}
+        <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" data-blur-id="menu-blur"></script>
+      {{ end }}
+    {{ end }}
   <div
     class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-25 lg:px-32">
-    <nav class="flex items-center py-6 pr-2 md:pr-4 pb-[3px] pl-0">
+    <nav class="flex items-center py-6">
-      <a href="{{ "/" | relURL }}" class="text-base font-medium"
+      <a href="{{ "/" | relURL }}" class="text-base font-serif font-bold hover:drop-shadow-pink-400 hover:drop-shadow-[0_0_6px]">
-        >{{ .Site.Title }}</a
+        {{ .Site.Title }}
-      >
+      </a>
     </nav>
   </div>
 </header>
+{{ with .Params.Image | default "/images/bg-landing.jpg" }}
+  <div class="fixed inset-0 top-0 -z-10 bg-black/60">
+    <img src="{{ . }}" class="w-full h-full object-cover -z-10" role="presentation">
+    <div class="absolute inset-0 h-full bg-linear-to-t to-transparent mix-blend-soft-light from-neutral-800"></div>
+    <div class="absolute inset-0 h-full bg-linear-to-t opacity-60 mix-blend-soft-light from-neutral-800 to-neutral-800"></div>
+  </div>
+  <div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full -z-10 backdrop-blur-2xl"></div>
+  {{ with resources.Get "js/background-blur.js" }}
+    {{ with . | minify | fingerprint "sha256" }}
+      <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" data-blur-id="background-blur"></script>
+    {{ end }}
+  {{ end }}
+{{ end }}

layouts/_shortcodes/br.html

@@ -0,0 +1 @@
+<br/>

layouts/baseof.html

@@ -14,12 +14,28 @@
     {{ partial "head.html" . }}
   </head>
   <body
-    class="flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32 text-lg bg-white text-neutral-900 dark:bg-neutral-800 dark:text-white scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600">
+    class="flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32 text-lg bg-black text-white">
     {{ partial "header.html" . }}
-    <main>
+    <main class="grow">
       {{ block "main" . }}
       {{ end }}
     </main>
     {{ partial "footer.html" . }}
+    {{ with resources.Get "js/registerLauti.js" }}
+      {{$opts := dict
+        "minify" (not hugo.IsDevelopment)
+        "sourceMap" (cond hugo.IsDevelopment "external" "")
+        "targetPath" "js/main.js"
+      }}
+      {{ with . | js.Build $opts }}
+        {{ if hugo.IsDevelopment }}
+          <script src="{{ .RelPermalink }}"></script>
+        {{ else }}
+          {{ with . | fingerprint }}
+            <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    {{ end }}
   </body>
 </html>

layouts/home.html

@@ -1,3 +1,32 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
+  <!-- Text content -->
+  <article class="relative z-10 w-full">
+    <!-- Curved headline using SVG -->
+    <svg viewBox="25 0 450 300" class="mx-auto w-full drop-shadow-pink-400 drop-shadow-[0_0_6px]">
+      <defs>
+        <path id="curve" d="M 50 150 Q 250 10 450 150" />
+      </defs>
+      <text width="500">
+        <textPath href="#curve" startOffset="50%" text-anchor="middle"
+                  class="fill-pink-200 text-4xl font-bold font-serif uppercase">
+          {{ .Title }}
+        </textPath>
+      </text>
+
+      <!-- Subtext -->
+      <text x="250" y="190" text-anchor="middle" class="fill-pink-200 text-3xl md:text-2xl font-bold font-serif">
+        {{ .Params.Subtitle }}
+      </text>
+      <text x="250" y="225" text-anchor="middle" class="fill-pink-200 text-3xl md:text-2xl font-bold font-serif">
+        {{ .Params.Location }}
+      </text>
+    </svg>
+  </article>
+
+  <article class="grid grid-cols-1 md:grid-cols-[1fr_300px] lg:grid-cols-[1fr_350px] gap-6">
+    <section class="prose lg:prose-xl prose-invert backdrop-blur-xs shadow-xl/20 p-6 rounded-lg">
+      {{ .Content }}
+    </section>
+    <lauti-calendar-list title="Nächste Bike Nights" group="2e2994eb-ae45-4297-a2f6-9f7948da784c" infos="name,location,time" link></lauti-calendar-list>
+  </article>
 {{ end }}

layouts/single.html

@@ -0,0 +1,6 @@
+{{ define "main" }}
+  <section class="prose lg:prose-xl prose-invert backdrop-blur-xs shadow-xl/20 p-6 rounded-lg">
+    <h1>{{.Title}}</h1>
+    {{.Content}}
+  </section>
+{{end}}

package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "devDependencies": {
         "@tailwindcss/cli": "^4.1.16",
+        "@tailwindcss/typography": "^0.5.19",
         "prettier": "3.6.2",
         "prettier-plugin-go-template": "^0.0.15",
         "prettier-plugin-toml": "^2.0.6",
@@ -647,6 +648,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
     "node_modules/@taplo/core": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@taplo/core/-/core-0.2.0.tgz",
@@ -677,6 +691,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -1099,6 +1126,20 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/prettier": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
@@ -1166,7 +1207,8 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
       "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tapable": {
       "version": "2.3.0",
@@ -1204,6 +1246,13 @@
       "bin": {
         "ulid": "bin/cli.js"
       }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
     }
   }
 }

package.json

@@ -1,9 +1,11 @@
 {
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.16",
+    "@tailwindcss/typography": "^0.5.19",
     "prettier": "3.6.2",
     "prettier-plugin-go-template": "^0.0.15",
     "prettier-plugin-toml": "^2.0.6",
-    "tailwindcss": "^4.1.16"
+    "tailwindcss": "^4.1.16",
+    "wc-lauti": "^1.0.0"
   }
 }