diff options
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 18 |
1 files changed, 18 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css index 6507ba5..d2ad443 100644 --- a/src/style.css +++ b/src/style.css @@ -770,6 +770,24 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } feed near the top, out of the way of the thumb, and takes you up to them when tapped. Fixed, not sticky: the feed is the page scroller, and a sticky element inside the card would scroll away with the card. */ +.feed-page { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); } +.feed-bottom-nav { + position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); + z-index: 30; display: flex; width: min(100%, 560px); box-sizing: border-box; + padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); + background: var(--paper); border-top: 1px solid var(--line); + box-shadow: 0 -4px 18px rgba(0, 0, 0, .06); +} +.feed-bottom-nav[hidden] { display: none; } +.feed-nav-button { + display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; + justify-content: center; gap: 3px; min-height: 52px; padding: 4px; + border: 0; background: transparent; color: var(--ink); font-size: 12px; +} +.feed-nav-button > span:first-child { display: flex; } +.feed-page:has(.feed-bottom-nav:not([hidden])) .feed-new-pill { + bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); +} .feed-new-pill { /* Rides at the bottom of the window, where a thumb already is; the tap takes the reader up to the new posts. */ |