Redesign: "Warm Paper" visual system, real logo + webfont, polished pages
- 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>
This commit is contained in:
@@ -6,57 +6,66 @@ const nav = [
|
||||
{ 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 bg-white/95 backdrop-blur border-b border-[var(--color-border)]">
|
||||
<header class="sticky top-0 z-50">
|
||||
<div class="rainbow-bar"></div>
|
||||
<div class="max-w-6xl mx-auto px-4 flex items-center justify-between h-16">
|
||||
<a href="/" class="flex items-center gap-2 font-brand text-xl text-[var(--color-primary)]">
|
||||
🌈 Kitafreunde Regenbogen
|
||||
</a>
|
||||
|
||||
<!-- Desktop Nav -->
|
||||
<nav class="hidden md:flex items-center gap-6 text-sm font-medium">
|
||||
{nav.map(({ href, label }) => (
|
||||
<a
|
||||
href={href}
|
||||
class:list={[
|
||||
"transition-colors hover:text-[var(--color-primary)]",
|
||||
pathname.startsWith(href)
|
||||
? "text-[var(--color-primary)] font-semibold"
|
||||
: "text-[var(--color-text-muted)]"
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
<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>
|
||||
|
||||
<a href="/mitglied-werden" class="btn-primary text-sm hidden md:inline-flex">
|
||||
Mitglied werden
|
||||
</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>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button
|
||||
id="mobile-menu-btn"
|
||||
class="md:hidden p-2 rounded-lg text-[var(--color-text-muted)]"
|
||||
aria-label="Menü öffnen"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="/mitglied-werden" class="btn-primary text-sm hidden md:inline-flex">
|
||||
<span aria-hidden="true">♥</span> Mitglied werden
|
||||
</a>
|
||||
|
||||
<!-- Mobile Nav -->
|
||||
<div id="mobile-menu" class="hidden md:hidden border-t border-[var(--color-border)] bg-white">
|
||||
<div class="px-4 py-4 flex flex-col gap-4 text-sm font-medium">
|
||||
{nav.map(({ href, label }) => (
|
||||
<a href={href} class="text-[var(--color-text)] hover:text-[var(--color-primary)]">{label}</a>
|
||||
))}
|
||||
<a href="/mitglied-werden" class="btn-primary text-center">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>
|
||||
@@ -64,5 +73,8 @@ const pathname = Astro.url.pathname;
|
||||
<script>
|
||||
const btn = document.getElementById("mobile-menu-btn");
|
||||
const menu = document.getElementById("mobile-menu");
|
||||
btn?.addEventListener("click", () => menu?.classList.toggle("hidden"));
|
||||
btn?.addEventListener("click", () => {
|
||||
const open = menu?.classList.toggle("hidden");
|
||||
btn.setAttribute("aria-expanded", String(open === false));
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user