diff options
| author | Adam Soltys <[email protected]> | 2026-10-01 23:05:25 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-10-01 23:05:25 -0700 |
| commit | 6cdcbb7cc03e8f3f3f0c04884828236284fb074f (patch) | |
| tree | dbc5f10c512a06231576896a48fcd50c76bfd2e4 /src/style.css | |
| parent | da6c8360726f499aa5cccec0b76839fd868fdc0e (diff) | |
| download | coinosv3-6cdcbb7cc03e8f3f3f0c04884828236284fb074f.tar.gz coinosv3-6cdcbb7cc03e8f3f3f0c04884828236284fb074f.zip | |
Bigger new-posts pill that swipes away
The pill is thumb-sized now (16px, 12/24 padding) and rides above the
Post button on a phone. Drag it sideways or down and let go: it flies
off and stays away until more posts arrive than it was showing. A short
drag springs back and is not a tap.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Dmcrt9KyNDKVWFKnb8BREo
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 9 |
1 files changed, 7 insertions, 2 deletions
diff --git a/src/style.css b/src/style.css index 825332a..3b2020c 100644 --- a/src/style.css +++ b/src/style.css @@ -844,14 +844,19 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .feed-page .feed-new-pill { bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); } +/* a phone is too narrow for it beside the Post button: it rides above */ +@media (max-width: 480px) { + .feed-page .feed-new-pill { bottom: calc(env(safe-area-inset-bottom, 0px) + 142px); } +} .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. */ position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); left: 50%; transform: translateX(-50%); - z-index: 30; width: auto; padding: 7px 16px; border-radius: 999px; + z-index: 30; width: auto; padding: 12px 24px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); border: none; - font-size: 13px; font-weight: 650; cursor: pointer; + font-size: 16px; font-weight: 650; cursor: pointer; + touch-action: none; user-select: none; -webkit-user-select: none; /* it swipes away */ box-shadow: 0 3px 12px rgba(0, 0, 0, .28); animation: pill-in .18s ease-out; } |