mirror of
https://github.com/rohitg00/agentmemory.git
synced 2026-09-14 20:16:33 +08:00
Ritesh Rana
f6f9e3cb13
* fix(website): portal mobile nav sheet to body so it covers the viewport The mobile nav sheet was rendered inside the <header> element, which uses backdrop-filter: blur(10px). Per CSS spec, backdrop-filter establishes a containing block for fixed-positioned descendants, so the sheet's `position: fixed; inset: 0` was clipped to the header strip instead of covering the viewport. The dark overlay only painted across the top bar, leaving the hero fully visible behind the menu and the panel items squeezed into a strip too short to render. Render the sheet through createPortal to document.body so it escapes the nav's containing block. Drop backdrop-filter on the sheet (no longer needed once the bg is fully opaque) and switch to var(--abyss) so hero content can't bleed through even if a browser ignores 0.94 opacity. Closes #669 * fix(website): close mobile nav gaps on top of the portal fix Show the hamburger at the same 860px breakpoint that hides the section links; previously the links disappeared at 860px but the hamburger only appeared at 720px, leaving tablet widths with no navigation at all. Make the closed sheet inert so keyboard focus cannot tab into hidden links, return focus to the toggle when the sheet closes, and add noreferrer to the external links. --------- Co-authored-by: Rohit Ghumare <ghumare64@gmail.com>
102 lines
1.9 KiB
CSS
102 lines
1.9 KiB
CSS
.hamburger {
|
|
display: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 1px solid var(--charcoal);
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.bar {
|
|
display: block;
|
|
width: 18px;
|
|
height: 2px;
|
|
background: var(--white);
|
|
transition:
|
|
transform 220ms ease,
|
|
opacity 220ms ease;
|
|
transform-origin: center;
|
|
}
|
|
.bar1 {
|
|
transform: translateY(6px) rotate(45deg) !important;
|
|
}
|
|
.bar2 {
|
|
opacity: 0;
|
|
}
|
|
.bar3 {
|
|
transform: translateY(-6px) rotate(-45deg) !important;
|
|
}
|
|
|
|
.sheet {
|
|
position: fixed;
|
|
inset: 0;
|
|
/* Portaled to <body>, so this sits in the root stacking context. Kept
|
|
below the nav (z-index: 100) so the brand + close button stay on top.
|
|
Fully opaque so hero content can't bleed through. */
|
|
background: var(--abyss);
|
|
z-index: 95;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 200ms ease;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 88px 20px 40px;
|
|
}
|
|
.sheetOpen {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
.panel {
|
|
width: 100%;
|
|
max-width: 520px;
|
|
padding-top: 24px;
|
|
}
|
|
.list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.list li {
|
|
border-bottom: 1px solid var(--charcoal);
|
|
}
|
|
.list a {
|
|
display: block;
|
|
padding: 18px 0;
|
|
font-size: 26px;
|
|
font-weight: 900;
|
|
letter-spacing: -0.01em;
|
|
text-transform: uppercase;
|
|
transition: color 180ms ease, padding-left 180ms ease;
|
|
}
|
|
.list a:hover {
|
|
color: var(--gold);
|
|
padding-left: 8px;
|
|
}
|
|
.foot {
|
|
margin-top: 24px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 14px 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid var(--charcoal);
|
|
}
|
|
.foot a {
|
|
font-size: 12px;
|
|
letter-spacing: 0.96px;
|
|
color: var(--steel);
|
|
text-transform: uppercase;
|
|
}
|
|
.foot a:hover {
|
|
color: var(--gold);
|
|
}
|
|
|
|
/* Must match the breakpoint that hides .links in Nav.module.css, or the
|
|
721-860px range has no navigation at all. */
|
|
@media (max-width: 860px) {
|
|
.hamburger {
|
|
display: inline-flex;
|
|
}
|
|
}
|