Shrink desktop header logo to 70px
Header row height (lg:h-32 -> lg:h-25) and the logo's own height (h-[108px] -> h-[70px]) both come down together so the row doesn't carry leftover empty space around the smaller mark. Footer logo is unchanged (still 108px) — the two are sized independently. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
990e1999b9
commit
8e82370b64
@@ -59,10 +59,12 @@ Fonts: IRANYekan (fa, local `public/fonts`) + Montserrat (latin, next/font).
|
|||||||
mark, not موبایل معلم) — the wiring is correct and will pick up the right
|
mark, not موبایل معلم) — the wiring is correct and will pick up the right
|
||||||
asset automatically the moment it's replaced in the dashboard; don't
|
asset automatically the moment it's replaced in the dashboard; don't
|
||||||
"fix" this by hardcoding the local fallback again.
|
"fix" this by hardcoding the local fallback again.
|
||||||
- Header/footer logo renders at `h-[108px]` (3x the original `h-9`/36px, on
|
- Header (desktop) logo renders at `h-[70px]`; footer logo stays at
|
||||||
request). If the wrong logo above still looks small at that size, it's
|
`h-[108px]` (3x the original `h-9`/36px, on request) — the two were sized
|
||||||
because that specific PNG has a lot of baked-in transparent padding around
|
independently, on request, so don't assume they should match. If the wrong
|
||||||
the mark — `object-contain` can't fix that, only the replacement asset can.
|
logo above still looks small at either size, it's because that specific
|
||||||
|
PNG has a lot of baked-in transparent padding around the mark —
|
||||||
|
`object-contain` can't fix that, only the replacement asset can.
|
||||||
- Contact data (phone, mobile, branch addresses, Instagram/Telegram) in
|
- Contact data (phone, mobile, branch addresses, Instagram/Telegram) in
|
||||||
`src/data/site.ts` is real, pulled from the live theme's footer — `GET
|
`src/data/site.ts` is real, pulled from the live theme's footer — `GET
|
||||||
/website/business-info` still returns empty `phoneNumbers`/`addresses`/
|
/website/business-info` still returns empty `phoneNumbers`/`addresses`/
|
||||||
|
|||||||
@@ -29,18 +29,18 @@ export default function Header({
|
|||||||
<div className="boxed">
|
<div className="boxed">
|
||||||
{/* Mobile keeps the header down to the search box alone — account,
|
{/* Mobile keeps the header down to the search box alone — account,
|
||||||
cart and browsing live in the fixed bottom bar instead. The row
|
cart and browsing live in the fixed bottom bar instead. The row
|
||||||
is taller on lg so a prominent 108px logo (3x the old 36px) has
|
is taller on lg so the desktop logo has room without cramming
|
||||||
room without cramming the search box/buttons beside it. */}
|
the search box/buttons beside it. */}
|
||||||
<div className="flex h-[70px] items-center gap-4 lg:h-32">
|
<div className="flex h-[70px] items-center gap-4 lg:h-25">
|
||||||
<Link href="/" className="hidden shrink-0 lg:block" aria-label={SITE_NAME}>
|
<Link href="/" className="hidden shrink-0 lg:block" aria-label={SITE_NAME}>
|
||||||
{/* h-[108px] w-auto (not a fixed box) so a square dashboard logo
|
{/* h-[70px] w-auto (not a fixed box) so a square dashboard logo
|
||||||
mark and the wide fallback wordmark both render undistorted. */}
|
mark and the wide fallback wordmark both render undistorted. */}
|
||||||
<Image
|
<Image
|
||||||
src={logoUrl}
|
src={logoUrl}
|
||||||
alt={SITE_NAME}
|
alt={SITE_NAME}
|
||||||
width={280}
|
width={180}
|
||||||
height={108}
|
height={70}
|
||||||
className="h-[108px] w-auto object-contain"
|
className="h-[70px] w-auto object-contain"
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
Reference in New Issue
Block a user