Add scrolling feed navigation for home, messages and notifications

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. */