Daniel Heim
7f9328f2ef
- Replace the baked-in full-logo PNG in the header with the standalone Bildmarke (SVG) + live Apex Brush wordmark; "Regenbogen" uses the rainbow gradient (same as headings) - Responsive: icon-only on mobile, two-line wordmark on sm–lg, one-line on xl; move nav breakpoint md->lg so the two-line wordmark doesn't collide with the inline nav (tablet uses the menu button) - Footer and elsewhere keep the full logo Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
90 lines
3.7 KiB
Plaintext
90 lines
3.7 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: Bildmarke + Apex-Brush-Wortmarke (responsiv) -->
|
||
<a href="/" class="group shrink-0 flex items-center gap-2.5" aria-label="Kitafreunde Regenbogen — Startseite">
|
||
<img
|
||
src="/logo/bildmarke.svg" alt=""
|
||
class="h-12 lg:h-14 w-auto transition-transform duration-200 group-hover:-rotate-3 group-hover:scale-105"
|
||
width="159" height="177"
|
||
/>
|
||
<!-- Wortmarke: mobil aus · sm–xl zweizeilig · xl+ einzeilig -->
|
||
<span class="hidden sm:flex font-brand text-[var(--color-primary)] leading-[0.9] flex-col xl:flex-row xl:items-baseline xl:gap-2 text-[26px] xl:text-[30px]">
|
||
<span>Kitafreunde</span>
|
||
<span class="rainbow-text">Regenbogen</span>
|
||
</span>
|
||
</a>
|
||
|
||
<!-- Desktop Nav (ab lg, damit die zweizeilige Wortmarke Platz hat) -->
|
||
<nav class="hidden lg:flex items-center gap-6 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 lg:inline-flex">
|
||
<span aria-hidden="true">♥</span> Mitglied werden
|
||
</a>
|
||
|
||
<!-- Mobile/Tablet Button -->
|
||
<button
|
||
id="mobile-menu-btn"
|
||
class="lg: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/Tablet Nav -->
|
||
<div id="mobile-menu" class="hidden lg: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>
|