diff options
| -rw-r--r-- | src/style.css | 13 |
1 files changed, 13 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css index 803979f..ec9fd18 100644 --- a/src/style.css +++ b/src/style.css @@ -95,6 +95,8 @@ * { box-sizing: border-box; } html { + /* a post scrolled into view lands below the sticky top bar */ + scroll-padding-top: 72px; /* Reserve the scrollbar's gutter always, so it doesn't appear the instant the history list fills the page and shrink the viewport — that width change re-centered the balance carousel's snapped card, the "slight move @@ -176,6 +178,17 @@ input { scroll-margin-top: 12px; } .logo-full { height: 40px; flex: none; color: var(--ink); display: grid; place-items: center; } .logo-full svg { height: 40px; width: auto; display: block; } .brand h1 { font-size: 19px; } +/* The top bar (logo, search, settings, avatar) stays on screen while the + page scrolls under it (Adam, 2026-11-12). A frosted strip the width of the + column, padded out by the same amount it's pulled in, so the layout at + rest doesn't move; the safe-area inset keeps it clear of a notch. */ +.brand-header { + position: sticky; top: 0; z-index: 30; + margin: -8px -16px; padding: 8px 16px; + padding-top: max(8px, env(safe-area-inset-top)); + background: color-mix(in srgb, var(--bg) 84%, transparent); + -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); +} .badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; |