feat: plakat redesign phase 1 (tokens, fonts, poster hero, header) (#74)
- New design tokens: signal red, ink and paper as RGB channels; ink and paper swap roles in dark mode so every component inverts cleanly - Fonts via next/font: Bricolage Grotesque (with wdth/opsz axes), Geist, Geist Mono; drop Inter and Playfair - Poster hero: kicker, giant DK0 wordmark that reacts to pointer distance (weight and width through a damped spring, desktop only, off for reduced motion), claim as h1, intro with thesis countdown, marquee strip - Header in poster style: transparent over the red hero, paper strip with ink rule when scrolled or on subpages; drawer menu restyled - Remove wavy SVG separators, CSS shader gradient, background blobs and unused providers that caused the pink/purple bands between sections - Drop the global p/span/div color override so colors inherit properly - New hero texts in de/en, tests and i18n key check updated Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
denshooter
+104
-147
@@ -86,174 +86,131 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
|
||||
const enHref = `/en${pathWithoutLocale}${query}`;
|
||||
const deHref = `/de${pathWithoutLocale}${query}`;
|
||||
|
||||
const de = locale === "de";
|
||||
|
||||
// Über dem roten Plakat bleibt der Kopf transparent, sonst wird er zum Papierstreifen
|
||||
const solid = scrolled || !isHome;
|
||||
const pill =
|
||||
"rounded-full border-[1.5px] border-ink px-4 py-2 text-sm font-medium transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]";
|
||||
const langPill = (active: boolean) =>
|
||||
`rounded-full px-3 py-2 font-mono text-xs transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97] ${
|
||||
active ? "bg-ink text-paper" : "hover:bg-ink/10"
|
||||
}`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none">
|
||||
<div
|
||||
className={`pointer-events-auto transition-[max-width] duration-500 ease-in-out ${
|
||||
scrolled ? "w-full max-w-5xl" : "w-full max-w-7xl"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`backdrop-blur-xl transition-[padding,background-color,box-shadow,border-color] duration-500 ease-in-out flex justify-between items-center ${
|
||||
scrolled
|
||||
? "bg-white/95 border border-stone-200/50 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3"
|
||||
: "bg-white/85 border border-stone-200/30 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full"
|
||||
}`}
|
||||
<header
|
||||
className={`fixed inset-x-0 top-0 z-50 border-b-2 transition-[background-color,border-color] duration-200 ease-out ${
|
||||
solid ? "border-ink bg-paper/90 backdrop-blur-md" : "border-transparent bg-transparent"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4 px-4 py-3 text-ink sm:px-6 lg:px-10">
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="font-display text-2xl font-extrabold tracking-[-0.03em] transition-transform duration-150 ease-out active:scale-[0.97]"
|
||||
aria-label={de ? "dk0, zur Startseite" : "dk0, home"}
|
||||
>
|
||||
<div className="flex items-center space-x-2 active:scale-[0.97] transition-transform duration-150 ease-out">
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="text-2xl font-black font-sans text-stone-900 tracking-tighter liquid-hover flex items-center"
|
||||
>
|
||||
dk<span className="text-red-500">0</span>
|
||||
dk<span className={`transition-colors duration-200 ${solid ? "text-signal" : "text-paper"}`}>0</span>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden items-center gap-2 md:flex" aria-label={de ? "Hauptnavigation" : "Main navigation"}>
|
||||
{navItems.slice(1).map((item) => (
|
||||
<Link key={item.name} href={item.href} className={pill}>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<div className="ml-2 flex items-center gap-1 border-l-2 border-ink/20 pl-3">
|
||||
<Link href={deHref} className={langPill(locale === "de")} aria-current={locale === "de" ? "true" : undefined}>
|
||||
DE
|
||||
</Link>
|
||||
<Link href={enHref} className={langPill(locale === "en")} aria-current={locale === "en" ? "true" : undefined}>
|
||||
EN
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
{navItems.map((item) => (
|
||||
<div key={item.name} className="active:scale-[0.97] transition-transform duration-150 ease-out">
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-stone-700 hover:text-stone-900 font-medium transition-colors relative liquid-hover"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Language Switcher */}
|
||||
<div className="flex items-center space-x-2 ml-4 pl-4 border-l border-stone-300">
|
||||
<Link
|
||||
href={enHref}
|
||||
className={`px-2 py-1 text-sm font-medium rounded transition-colors ${
|
||||
locale === "en"
|
||||
? "bg-stone-900 text-white"
|
||||
: "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
|
||||
}`}
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
<Link
|
||||
href={deHref}
|
||||
className={`px-2 py-1 text-sm font-medium rounded transition-colors ${
|
||||
locale === "de"
|
||||
? "bg-stone-900 text-white"
|
||||
: "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
|
||||
}`}
|
||||
>
|
||||
DE
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97]"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{isOpen ? <XIcon size={24} /> : <MenuIcon size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={`${pill} inline-flex items-center gap-2 md:hidden`}
|
||||
aria-label={de ? "Menü öffnen" : "Open menu"}
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
<MenuIcon size={18} /> {de ? "Menü" : "Menu"}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Mobile menu overlay — always mounted so it can fade out, not just vanish */}
|
||||
{/* Abdunklung hinter dem Menü — bleibt gemountet, damit sie ausblenden kann */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className={`fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden transition-opacity ${
|
||||
isOpen ? "opacity-100 duration-300 ease-out" : "opacity-0 pointer-events-none duration-200 ease-out"
|
||||
className={`fixed inset-0 z-40 bg-ink/40 transition-opacity md:hidden ${
|
||||
isOpen ? "opacity-100 duration-300 ease-out" : "pointer-events-none opacity-0 duration-200 ease-out"
|
||||
}`}
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Mobile menu panel — drawer curve in, quicker exit */}
|
||||
{/* Menü als Drawer: Drawer-Kurve rein, schneller raus */}
|
||||
<div
|
||||
inert={!isOpen}
|
||||
className={`fixed right-0 top-0 h-full w-80 max-w-[85vw] bg-white shadow-2xl z-50 md:hidden overflow-y-auto overscroll-contain transition-[transform,visibility] ${
|
||||
isOpen
|
||||
? "translate-x-0 visible duration-500 ease-drawer"
|
||||
: "translate-x-full invisible duration-200 ease-out"
|
||||
role="dialog"
|
||||
aria-label={de ? "Menü" : "Menu"}
|
||||
className={`fixed right-0 top-0 z-50 flex h-full w-80 max-w-[85vw] flex-col overflow-y-auto overscroll-contain border-l-2 border-ink bg-paper text-ink transition-[transform,visibility] md:hidden ${
|
||||
isOpen ? "visible translate-x-0 duration-500 ease-drawer" : "invisible translate-x-full duration-200 ease-out"
|
||||
}`}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="text-2xl font-black text-stone-900"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
dk<span className="text-red-500">0</span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97]"
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<XIcon size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between px-5 py-3">
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="font-display text-2xl font-extrabold tracking-[-0.03em]"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
dk<span className="text-signal">0</span>
|
||||
</Link>
|
||||
<button onClick={() => setIsOpen(false)} className={`${pill} inline-flex items-center`} aria-label={de ? "Menü schließen" : "Close menu"}>
|
||||
<XIcon size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="space-y-2">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="block px-4 py-3 text-stone-700 hover:bg-stone-50 active:bg-stone-100 rounded-lg font-medium transition-colors"
|
||||
<nav className="flex flex-col border-t-2 border-ink" aria-label={de ? "Hauptnavigation" : "Main navigation"}>
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="border-b-2 border-ink px-5 py-4 font-display text-3xl font-extrabold tracking-[-0.035em] transition-colors duration-150 active:bg-paper-2"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-1 px-5 py-5">
|
||||
<Link href={deHref} onClick={() => setIsOpen(false)} className={langPill(locale === "de")}>
|
||||
DE
|
||||
</Link>
|
||||
<Link href={enHref} onClick={() => setIsOpen(false)} className={langPill(locale === "en")}>
|
||||
EN
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
<div className="mt-auto flex gap-2 px-5 pb-8">
|
||||
{socialLinks.map((link) => {
|
||||
const Icon = link.icon;
|
||||
return (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`${pill} inline-flex items-center`}
|
||||
aria-label={link.label}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Language Switcher Mobile */}
|
||||
<div className="flex items-center gap-2 mt-6 pt-6 border-t border-stone-200">
|
||||
<Link
|
||||
href={enHref}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-colors ${
|
||||
locale === "en"
|
||||
? "bg-stone-900 text-white"
|
||||
: "bg-stone-100 text-stone-600 hover:bg-stone-200"
|
||||
}`}
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
<Link
|
||||
href={deHref}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-colors ${
|
||||
locale === "de"
|
||||
? "bg-stone-900 text-white"
|
||||
: "bg-stone-100 text-stone-600 hover:bg-stone-200"
|
||||
}`}
|
||||
>
|
||||
DE
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-stone-200">
|
||||
<div className="flex justify-center space-x-6">
|
||||
{socialLinks.map((link) => {
|
||||
const Icon = link.icon;
|
||||
return (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 rounded-lg bg-stone-100 hover:bg-stone-900 hover:text-white text-stone-700 transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97]"
|
||||
aria-label={link.label}
|
||||
>
|
||||
<Icon size={20} />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<Icon size={18} />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user