mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-07 19:58:24 +00:00
Nav header fix
This commit is contained in:
@@ -37,7 +37,6 @@ const isActive = (href: string) =>
|
||||
// MobileMenu expects the { items: [] }[] shape.
|
||||
const groups = [{ items: storeNav }];
|
||||
---
|
||||
---
|
||||
<header
|
||||
id="store-nav"
|
||||
data-nav
|
||||
@@ -93,13 +92,18 @@ const groups = [{ items: storeNav }];
|
||||
</header>
|
||||
|
||||
<style>
|
||||
/* Same nebula band treatment as the main NavBar. */
|
||||
/* The store nav uses a SOLID opaque band (not the main NavBar's translucent
|
||||
gradient), because the store index hero renders a bright animated field
|
||||
plus a gold label right at the top edge. A translucent nav let that hero
|
||||
content bleed through, making the nav read as if it sat behind the hero.
|
||||
Solid + a hairline border keeps it a clearly distinct bar at all times. */
|
||||
[data-nav-inner] {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(8, 10, 32, 0.92) 0%,
|
||||
rgba(12, 14, 40, 0.86) 100%
|
||||
rgb(8, 10, 32) 0%,
|
||||
rgb(12, 14, 40) 100%
|
||||
);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
|
||||
}
|
||||
[data-nav].scrolled [data-nav-inner] {
|
||||
backdrop-filter: saturate(150%) blur(12px);
|
||||
|
||||
@@ -32,7 +32,10 @@ const orderHref = "/store/order";
|
||||
|
||||
<StoreLayout title="Store — Proxy MTG Cards & 3D-Printed Deck Boxes">
|
||||
{/* --- Hero --- */}
|
||||
<section class="relative overflow-hidden pb-8 pt-28 sm:pt-32">
|
||||
{/* pt-36/sm:pt-40 gives the bright hero content clear breathing room below
|
||||
the solid fixed StoreNav (64px tall), so the gold label and nav never
|
||||
visually crowd each other. */}
|
||||
<section class="relative overflow-hidden pb-8 pt-36 sm:pt-40">
|
||||
<AnimatedBackground client:idle className="vt-sky" />
|
||||
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user