mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Nav header fix
This commit is contained in:
@@ -37,7 +37,6 @@ const isActive = (href: string) =>
|
|||||||
// MobileMenu expects the { items: [] }[] shape.
|
// MobileMenu expects the { items: [] }[] shape.
|
||||||
const groups = [{ items: storeNav }];
|
const groups = [{ items: storeNav }];
|
||||||
---
|
---
|
||||||
---
|
|
||||||
<header
|
<header
|
||||||
id="store-nav"
|
id="store-nav"
|
||||||
data-nav
|
data-nav
|
||||||
@@ -93,13 +92,18 @@ const groups = [{ items: storeNav }];
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<style>
|
<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] {
|
[data-nav-inner] {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
180deg,
|
180deg,
|
||||||
rgba(8, 10, 32, 0.92) 0%,
|
rgb(8, 10, 32) 0%,
|
||||||
rgba(12, 14, 40, 0.86) 100%
|
rgb(12, 14, 40) 100%
|
||||||
);
|
);
|
||||||
|
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
|
||||||
}
|
}
|
||||||
[data-nav].scrolled [data-nav-inner] {
|
[data-nav].scrolled [data-nav-inner] {
|
||||||
backdrop-filter: saturate(150%) blur(12px);
|
backdrop-filter: saturate(150%) blur(12px);
|
||||||
|
|||||||
@@ -32,7 +32,10 @@ const orderHref = "/store/order";
|
|||||||
|
|
||||||
<StoreLayout title="Store — Proxy MTG Cards & 3D-Printed Deck Boxes">
|
<StoreLayout title="Store — Proxy MTG Cards & 3D-Printed Deck Boxes">
|
||||||
{/* --- Hero --- */}
|
{/* --- 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" />
|
<AnimatedBackground client:idle className="vt-sky" />
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user