aboutsummaryrefslogtreecommitdiffstats
path: root/src/style.css
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2026-09-16 11:23:54 -0700
committerAdam Soltys <[email protected]>2026-09-16 11:23:54 -0700
commit49caed082a67851fcd5479d1c462b95f1a5d4a7c (patch)
tree0c755602d49d97d89e47b8af89d21561f1e41332 /src/style.css
parent398bb77165e3ff454f1401b3c114a976aae5216c (diff)
downloadcoinosv3-49caed082a67851fcd5479d1c462b95f1a5d4a7c.tar.gz
coinosv3-49caed082a67851fcd5479d1c462b95f1a5d4a7c.zip
Feed: what arrives waits behind the pill; the count bumps; no auto-flush.
Posts a refresh found slid in a beat after the cached page painted, moving what you had begun reading, and reaching the top of the page let waiting posts in with a re-render under a finger on its way to the pill — the tap landed on the post beneath. Now everything that arrives after the first paint, the boot catch-up included, waits behind the pill wherever you are; the pill is a keyed node whose count bumps on each change; and a tap scrolls to the top before painting so the new posts open under your eyes. A rebuilt follow list still rebuilds the feed in place. Co-Authored-By: Claude Fable 5.1 <[email protected]> Claude-Session: https://claude.ai/code/session_01JuwQqNWtDJcxPWtEm9134z
Diffstat (limited to 'src/style.css')
-rw-r--r--src/style.css6
1 files changed, 6 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css
index dd90ec1..366efe6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -636,6 +636,12 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
animation: pill-in .18s ease-out;
}
+/* the count bumps each time it changes: a fresh node per value replays it */
+.feed-new-pill .n { display: inline-block; min-width: 1.1em; text-align: center; animation: pill-bump .32s cubic-bezier(.2,.9,.3,1.4); }
+@keyframes pill-bump {
+ from { transform: scale(1.7); opacity: .4; }
+ to { transform: scale(1); opacity: 1; }
+}
@keyframes pill-in {
from { opacity: 0; transform: translate(-50%, -8px); }
to { opacity: 1; transform: translate(-50%, 0); }