From 40109056e97993aad8c00958bb8b5829dab8b448 Mon Sep 17 00:00:00 2001 From: enricobuehler Date: Sat, 20 Jun 2026 15:34:19 +0200 Subject: [PATCH] refactor(docs-site): use the vector SVG wordmark instead of the raster MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the CSS-mask/webp wordmark with the inline vector from Export/Punktfunk_Logo-Text_No-Border_Dark.svg (white export background dropped), painted via currentColor — deep-violet on light, light-violet on dark. Crisp at any size; drops the now-unused funk-wordmark.{webp,png}. Co-Authored-By: Claude Opus 4.8 (1M context) --- docs-site/public/funk-wordmark.png | Bin 5858 -> 0 bytes docs-site/public/funk-wordmark.webp | Bin 2490 -> 0 bytes docs-site/src/components/Wordmark.tsx | 36 ++++++++++++-------------- 3 files changed, 16 insertions(+), 20 deletions(-) delete mode 100644 docs-site/public/funk-wordmark.png delete mode 100644 docs-site/public/funk-wordmark.webp diff --git a/docs-site/public/funk-wordmark.png b/docs-site/public/funk-wordmark.png deleted file mode 100644 index 9ff3fa8acc744631690ff4b42a9515a27421535c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5858 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 diff --git a/docs-site/public/funk-wordmark.webp b/docs-site/public/funk-wordmark.webp deleted file mode 100644 index b90a04b84be944e70de7717d2c5fc5b44ba7a3fc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2490 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 E07}E(2mk;8 diff --git a/docs-site/src/components/Wordmark.tsx b/docs-site/src/components/Wordmark.tsx index 35b2f34..e5e8a42 100644 --- a/docs-site/src/components/Wordmark.tsx +++ b/docs-site/src/components/Wordmark.tsx @@ -1,27 +1,23 @@ -// The punktfunk "funk" wordmark — the real brand typo from the marketing site. -// The source asset is a single light-violet variant (made for dark surfaces), so -// rather than an we paint it as a CSS mask and colour it per theme: the +// The punktfunk "funk" wordmark — vectorised from +// Export/Punktfunk_Logo-Text_No-Border_Dark.svg (the white export background is +// dropped). Inline SVG using currentColor so it recolours per theme: the // deep-violet brand on light, the light-violet lens highlight on dark (matching -// the site). Size it by setting a height (e.g. `h-5`); width follows the 579×136 -// aspect ratio. -const maskStyle = { - maskImage: 'url(/funk-wordmark.webp)', - WebkitMaskImage: 'url(/funk-wordmark.webp)', - maskRepeat: 'no-repeat', - WebkitMaskRepeat: 'no-repeat', - maskSize: 'contain', - WebkitMaskSize: 'contain', - maskPosition: 'center', - WebkitMaskPosition: 'center', -} as const - +// the marketing site). Size via height (e.g. `h-4`); width follows the viewBox. export default function Wordmark({ className = '' }: { className?: string }) { return ( - + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 579 136" + fill="currentColor" + className={`w-auto text-[var(--pf-brand)] dark:text-[var(--pf-highlight)] ${className}`} + > + punktfunk + + + + + ) }