74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import type { ReactNode } from "react";
|
||
import { cn } from "@/lib/utils";
|
||
import { chrome as chromeDe, type Chrome } from "@/content/chrome";
|
||
import { TransitionLink } from "@/components/motion/TransitionLink";
|
||
|
||
export interface WordmarkProps {
|
||
size?: "nav" | "footer";
|
||
href?: string;
|
||
className?: string;
|
||
/** Optional monogram rendered before the name (header 28 px, footer 40 px). */
|
||
mark?: ReactNode;
|
||
/** Texte der Hülle. Ohne Angabe die deutsche Fassung. */
|
||
chrome?: Chrome;
|
||
}
|
||
|
||
/**
|
||
* HTML wordmark: ANELIA WOLF (Jost 300, ls .32em) over a gold hairline and the
|
||
* sub-line. One `<a>` with aria-label „Anelia Wolf – Startseite“.
|
||
* Nav: 1.0625rem, name only – rule and sub-line are the footer's job (the
|
||
* header row has no width to spare between 1024 and 1440). Footer: fluid
|
||
* 20–44 px name, sub-line gold at 0.45em / 0.18em tracking (spec §3.2: the
|
||
* sub never out-tracks the name).
|
||
*/
|
||
export function Wordmark({ size = "nav", href = "/", className, mark, chrome = chromeDe }: WordmarkProps) {
|
||
const footer = size === "footer";
|
||
return (
|
||
<TransitionLink
|
||
href={href}
|
||
aria-label={chrome.wordmark.ariaLabel}
|
||
className={cn("wordmark group inline-flex max-w-full items-center", footer ? "gap-4 sm:gap-6" : "gap-4", className)}
|
||
>
|
||
{mark && (
|
||
<span
|
||
aria-hidden="true"
|
||
className={cn("wordmark__mark shrink-0 [&_svg]:h-full [&_svg]:w-auto", footer ? "h-10" : "h-7")}
|
||
>
|
||
{mark}
|
||
</span>
|
||
)}
|
||
<span
|
||
className={cn(
|
||
"wordmark__text flex flex-col",
|
||
footer ? "min-w-0 text-[clamp(1.25rem,0.75rem+1.8vw,2.75rem)]" : "text-[1.0625rem]",
|
||
)}
|
||
>
|
||
<span
|
||
className={cn(
|
||
"wordmark__name whitespace-nowrap pl-[0.32em] font-sans text-[1em] font-light uppercase leading-none tracking-[0.32em]",
|
||
"text-fg",
|
||
)}
|
||
>
|
||
{chrome.wordmark.name}
|
||
</span>
|
||
<span
|
||
aria-hidden="true"
|
||
className={cn("wordmark__rule rule-gold", footer ? "my-[0.3em]" : "hidden")}
|
||
/>
|
||
<span
|
||
className={cn(
|
||
"wordmark__sub pl-[0.22em] font-sans font-normal uppercase",
|
||
footer
|
||
? "max-sm:whitespace-normal max-sm:leading-[1.5] sm:whitespace-nowrap sm:leading-none text-[0.55em] tracking-[0.18em] text-gold sm:text-[0.45em]"
|
||
: "hidden",
|
||
)}
|
||
>
|
||
{chrome.wordmark.sub}
|
||
</span>
|
||
</span>
|
||
</TransitionLink>
|
||
);
|
||
}
|
||
|
||
export default Wordmark;
|