This is an automated email from the ASF dual-hosted git repository.
kparisa pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/iggy-website.git
The following commit(s) were added to refs/heads/main by this push:
new 918e3bc6 Fix the logo aspect ratio (#91)
918e3bc6 is described below
commit 918e3bc68988256fef607eead26de2687fc7960c
Author: Justin Mclean <[email protected]>
AuthorDate: Thu Sep 10 11:56:44 2026 +1000
Fix the logo aspect ratio (#91)
The declared width and height did not match the image files, which are
1951x652. The nav and brand kit logos were stretched to a 5:1 box.
<img width="836" height="119" alt="Screenshot 2026-09-09 at 10 47 49 am"
src="https://github.com/user-attachments/assets/9c9d42e3-8e22-45f1-94ab-37b95ca754b0";
/>
---------
Co-authored-by: Justin Mclean <[email protected]>
Co-authored-by: Kranti Parisa <[email protected]>
---
src/app/(site)/community/brand-kit/page.tsx | 2 +-
src/app/global.css | 11 +++++++++++
src/components/logo.tsx | 2 +-
src/lib/layout.shared.tsx | 8 ++++----
4 files changed, 17 insertions(+), 6 deletions(-)
diff --git a/src/app/(site)/community/brand-kit/page.tsx
b/src/app/(site)/community/brand-kit/page.tsx
index d178b22e..82c9e5ce 100644
--- a/src/app/(site)/community/brand-kit/page.tsx
+++ b/src/app/(site)/community/brand-kit/page.tsx
@@ -68,7 +68,7 @@ export default function BrandKitPage() {
src={asset.src}
alt={asset.title}
width={220}
- height={72}
+ height={73}
className="max-h-20 w-auto object-contain"
unoptimized
/>
diff --git a/src/app/global.css b/src/app/global.css
index c78f17c9..76a9c6db 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -94,6 +94,17 @@ header#nd-nav button {
font-size: 0.9375rem;
}
+/* The logo sits in an anchor fumadocs renders, and that anchor is a flex item
+ with the default shrink of 1. Once the nav links and the right-hand group
+ fill the row the anchor is squeezed and the image is squashed with it: at a
+ 1100px viewport it rendered 57x62 where the file's ratio wants 184x62. Pin
+ the anchor and the image so the row overflows instead of deforming the
mark. */
+header#nd-nav nav > a:first-child,
+header#nd-nav nav > a:first-child img {
+ flex-shrink: 0;
+ max-width: none;
+}
+
/* The default fumadocs mobile navbar background is only 80% opaque, which
lets page content ghost through while scrolling underneath. Force it
opaque. */
header#nd-subnav {
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index d5e5b693..c8354c9a 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -41,7 +41,7 @@ export function Logo({ className }: { className?: string }) {
src={src}
alt="Apache Iggy"
width={220}
- height={44}
+ height={73}
className={className}
unoptimized
/>
diff --git a/src/lib/layout.shared.tsx b/src/lib/layout.shared.tsx
index 590933a0..da78ff32 100644
--- a/src/lib/layout.shared.tsx
+++ b/src/lib/layout.shared.tsx
@@ -83,8 +83,8 @@ export function homeOptions(): BaseLayoutProps {
src="/img/apache-iggy-color-darkbg0.5x.png"
alt="Apache Iggy"
width={240}
- height={48}
- className="h-10 w-auto md:h-12"
+ height={80}
+ className="h-10 w-auto shrink-0 md:h-12"
unoptimized
/>
),
@@ -98,7 +98,7 @@ export function homeOptions(): BaseLayoutProps {
export function siteOptions(): BaseLayoutProps {
return {
nav: {
- title: <Logo className="h-10 w-auto md:h-12" />,
+ title: <Logo className="h-10 w-auto shrink-0 md:h-12" />,
transparentMode: "top",
},
searchToggle: { enabled: false },
@@ -109,7 +109,7 @@ export function siteOptions(): BaseLayoutProps {
export function docsOptions(): BaseLayoutProps {
return {
nav: {
- title: <Logo className="h-9 w-auto md:h-11" />,
+ title: <Logo className="h-9 w-auto shrink-0 md:h-11" />,
},
links: [
{ text: "Home", url: "/" },
