Daniel Heim
2588b6f1a5
- Brand: replace 🌈-emoji placeholder with the real logo in header, hero and footer; embed the Apex Brush webfont locally (/public/fonts) - Design system (global.css): warm paper palette, Fraunces + Hanken Grotesk, sticker buttons/cards, squiggle underlines, organic blobs, wave dividers, staggered load motion; wrap base/components in @layer so Tailwind utilities reliably override (fixes ignored padding/weight overrides) - Home: new hero showcasing the logo, manifest, three pillars, Momente gallery (placeholder photos), stats band, projects, CTA - New components: PageHeader, Wave, Decor - Subpages: unified headers (Apex Brush eyebrow + Fraunces H1), blob badges, consistent CTA bands and chips; add real .prose styling (no Tailwind typography plugin installed) - Fix datenschutz: font names Pacifico/Inter -> Fraunces/Hanken Grotesk Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
81 lines
3.2 KiB
Plaintext
81 lines
3.2 KiB
Plaintext
---
|
|
const nav = [
|
|
{ href: "/ueber-uns", label: "Über uns" },
|
|
{ href: "/was-wir-tun", label: "Was wir tun" },
|
|
{ href: "/projekte", label: "Projekte" },
|
|
{ href: "/aktuelles", label: "Aktuelles" },
|
|
{ href: "/unterstuetzen", label: "Unterstützen" },
|
|
];
|
|
const pathname = Astro.url.pathname;
|
|
const isActive = (href: string) => pathname === href || pathname.startsWith(href + "/");
|
|
---
|
|
|
|
<header class="sticky top-0 z-50">
|
|
<div class="rainbow-bar"></div>
|
|
|
|
<div class="bg-[var(--color-paper)]/85 backdrop-blur-md border-b border-[var(--color-border)]">
|
|
<div class="max-w-6xl mx-auto px-4 flex items-center justify-between gap-4 py-3">
|
|
<!-- Logo: jetzt mit Präsenz -->
|
|
<a href="/" class="shrink-0 transition-transform duration-200 hover:-rotate-2 hover:scale-[1.03]" aria-label="Kitafreunde Regenbogen — Startseite">
|
|
<img src="/logo/logo.png" alt="Kitafreunde Regenbogen" class="h-14 sm:h-16 w-auto" width="744" height="745" />
|
|
</a>
|
|
|
|
<!-- Desktop Nav -->
|
|
<nav class="hidden md:flex items-center gap-7 text-[15px] font-semibold">
|
|
{nav.map(({ href, label }) => (
|
|
<a
|
|
href={href}
|
|
class:list={[
|
|
"relative py-1 transition-colors hover:text-[var(--color-primary)]",
|
|
isActive(href) ? "text-[var(--color-primary)]" : "text-[var(--color-text-muted)]",
|
|
]}
|
|
>
|
|
{label}
|
|
{isActive(href) && (
|
|
<span class="absolute -bottom-0.5 left-0 right-0 h-[3px] rounded-full bg-[var(--color-accent)]"></span>
|
|
)}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<a href="/mitglied-werden" class="btn-primary text-sm hidden md:inline-flex">
|
|
<span aria-hidden="true">♥</span> Mitglied werden
|
|
</a>
|
|
|
|
<!-- Mobile Button -->
|
|
<button
|
|
id="mobile-menu-btn"
|
|
class="md:hidden p-2 rounded-xl text-[var(--color-primary)] hover:bg-[var(--color-surface-alt)]"
|
|
aria-label="Menü öffnen" aria-expanded="false"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M4 7h16M4 12h16M4 17h16"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile Nav -->
|
|
<div id="mobile-menu" class="hidden md:hidden border-t border-[var(--color-border)] bg-[var(--color-paper)]">
|
|
<div class="px-4 py-5 flex flex-col gap-1 text-base font-semibold">
|
|
{nav.map(({ href, label }) => (
|
|
<a href={href}
|
|
class:list={[
|
|
"py-2.5 px-3 rounded-xl transition-colors",
|
|
isActive(href) ? "text-[var(--color-primary)] bg-[var(--color-surface-alt)]" : "text-[var(--color-text)] hover:bg-[var(--color-surface-alt)]",
|
|
]}>{label}</a>
|
|
))}
|
|
<a href="/mitglied-werden" class="btn-primary mt-3"><span aria-hidden="true">♥</span> Mitglied werden</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
const btn = document.getElementById("mobile-menu-btn");
|
|
const menu = document.getElementById("mobile-menu");
|
|
btn?.addEventListener("click", () => {
|
|
const open = menu?.classList.toggle("hidden");
|
|
btn.setAttribute("aria-expanded", String(open === false));
|
|
});
|
|
</script>
|