feat: update logo typography styles
This commit is contained in:
@@ -2,51 +2,51 @@ import { DotIcon } from "@phosphor-icons/react";
|
|||||||
import "@fontsource/knewave/400.css";
|
import "@fontsource/knewave/400.css";
|
||||||
|
|
||||||
interface LogoProps {
|
interface LogoProps {
|
||||||
scale?: number;
|
scale?: number;
|
||||||
type?: "inline" | "mono" | "logo";
|
type?: "inline" | "mono" | "logo";
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Logo({ scale = 1, type = "logo" }: LogoProps) {
|
export default function Logo({ scale = 1, type = "logo" }: LogoProps) {
|
||||||
if (type === "inline") {
|
if (type === "inline") {
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
className={
|
className={
|
||||||
"text-accent font-serif italic drop-shadow-xs drop-shadow-base-200/60 "
|
"text-accent font-display italic "
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Pi<span className="text-primary">.</span> Ku
|
pi<span className="text-primary">.</span> ku
|
||||||
<span className="text-primary">.</span>
|
<span className="text-primary">.</span>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (type === "mono") {
|
if (type === "mono") {
|
||||||
return (
|
return (
|
||||||
<span className="font-mono italic font-bold border-b-3 border-dashed border-stone-800/50">
|
<span className="font-display italic font-bold border-b-3 border-dashed border-stone-800/50">
|
||||||
pi. ku.
|
pi. ku.
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
role="img"
|
role="img"
|
||||||
aria-label="Pi. Ku. logo"
|
aria-label="Pi. Ku. logo"
|
||||||
className="inline-flex items-baseline justify-center leading-none select-none"
|
className="inline-flex items-baseline justify-center leading-none select-none"
|
||||||
style={{ fontFamily: "'Knewave', serif", scale }}
|
style={{ fontFamily: "'Knewave', serif", scale }}
|
||||||
>
|
>
|
||||||
<span className={`text-3xl font-light text-accent`}>Pi</span>
|
<span className={`text-3xl font-light text-accent`}>Pi</span>
|
||||||
<DotIcon
|
<DotIcon
|
||||||
weight="fill"
|
weight="fill"
|
||||||
size={12}
|
size={12}
|
||||||
className={`text-primary translate-y-1 -mx-px`}
|
className={`text-primary translate-y-1 -mx-px`}
|
||||||
/>
|
/>
|
||||||
<span className={`text-3xl font-light text-accent`}> Ku</span>
|
<span className={`text-3xl font-light text-accent`}> Ku</span>
|
||||||
<DotIcon
|
<DotIcon
|
||||||
weight="fill"
|
weight="fill"
|
||||||
size={12}
|
size={12}
|
||||||
className={`text-primary translate-y-1 -mx-px`}
|
className={`text-primary translate-y-1 -mx-px`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user