d-bis/miracles_in_motion
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(brand): enlarge nav logo and header rhythm on desktop

Browse Source 
Scale logo to 4rem from lg breakpoint, add nav min-height and lg py-4
so the wordmark reads better without crowding mobile controls.

Co-authored-by: Cursor <[email protected]>
This commit is contained in:
defiQUG
2026-05-26 20:35:59 -07:00
co-authored by Cursor
parent f5d305bfcb
commit 2019f56f27
2 changed files with 32 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Navigation.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
return (
<>
<nav className="mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8" role="navigation" aria-label="Main navigation">
<nav className="mim-site-nav mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8 lg:py-4" role="navigation" aria-label="Main navigation">
<div className="flex items-center gap-3">
<a
href="#/"
src/index.css
+31 -8
View File
@@ -85,32 +85,42 @@
object-fit: contain;
}
/* Mobile-first; larger on tablet/desktop */
/* Mobile-first; scale up on tablet/desktop (square asset: height drives width) */
.logo-mark--nav {
height: 2.125rem;
height: 2.25rem;
}
.logo-mark--nav .logo-mark__img {
height: 100%;
width: auto;
max-width: 8.75rem;
max-width: 9rem;
object-position: center;
}
@media (min-width: 640px) {
.logo-mark--nav {
height: 2.75rem;
height: 3rem;
}
.logo-mark--nav .logo-mark__img {
max-width: 10.5rem;
max-width: 11rem;
}
}
@media (min-width: 1024px) {
.logo-mark--nav {
height: 3.25rem;
height: 4rem;
}
.logo-mark--nav .logo-mark__img {
max-width: 12rem;
max-width: 14rem;
}
}
@media (min-width: 1280px) {
.logo-mark--nav {
height: 4.25rem;
}
.logo-mark--nav .logo-mark__img {
max-width: 15.5rem;
}
}
@@ -159,11 +169,24 @@
.nav-brand-link {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.25rem;
flex-shrink: 0;
padding: 0.125rem 0.375rem 0.125rem 0;
margin-right: 0.25rem;
border-radius: 0.5rem;
transition: opacity 0.2s ease;
}
/* Keep logo column aligned with max-w-7xl page grid (matches hero px) */
.mim-site-nav {
align-items: center;
}
@media (min-width: 1024px) {
.mim-site-nav {
min-height: 4.5rem;
}
}
.nav-brand-link:hover {
opacity: 0.9;
}