From 1ca77a5999bc546f92ec7189acfba1dc8088a2a7 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sat, 12 Sep 2026 09:52:06 -0700 Subject: Every answer to a post lives in one row beneath it. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reply and zap have come down from the header to join boost, quote and the heart, spread across the post's full width so each is a comfortable target instead of five buttons huddled in a corner. Only the ellipsis stays up top. Proper icons at a readable size, all the same weight: a speech bubble for reply (a return arrow is what a keyboard does, not what a person does), the repeat arrows for boost, quote marks, a heart, a bolt. Counts sit beside the icon they count. And the heart asks which feeling: tapping it opens the same six emoji the chat sheet offers, and the one you pick is the one the post then shows — NIP-25 takes any content, so there was never a reason to assume a heart. Tapping your own reaction still takes it back. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_019mrt228Upn9nNCwGixzSLx --- src/style.css | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 4eceb98..9ea8b39 100644 --- a/src/style.css +++ b/src/style.css @@ -533,16 +533,19 @@ hr.divider { margin: 16px 0; } /* Profile note feed: inline images stay contained, links wrap. */ .note-img { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; margin-top: 6px; object-fit: contain; } .note-img.clickable { cursor: zoom-in; } -/* The row under a post: like, boost, quote. Quiet until they carry a count - or you've used one, the way a timeline should read. */ -.note-acts { margin-top: 6px; } +/* The row under a post: reply, boost, quote, react, zap — spread across the + post's full width so each is a comfortable target, quiet until one carries + a count or you've used it. */ +.note-acts { margin-top: 8px; justify-content: space-between; gap: 4px; max-width: 340px; } .note-act { - background: none; border: 0; padding: 2px 0; margin: 0; font-size: 14px; line-height: 1; - color: var(--faint); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; + background: none; border: 0; padding: 4px 6px; margin: 0; line-height: 1; + color: var(--faint); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; + border-radius: 8px; } -.note-act:hover { background: none; color: var(--ink); } +.note-act:hover { background: var(--surface2); color: var(--ink); } .note-act.on { color: #e0245e; } -.note-act.on[title="Boost"], .note-act.on[aria-label="Boost"] { color: var(--green); } +.note-act.on[aria-label="Boost"] { color: var(--green); } +.note-act-emoji { font-size: 17px; line-height: 1; } .note-act-n { font-size: 12px; font-weight: 600; color: var(--muted); } /* The attach button sits between Post and Cancel: a square the size of the buttons beside it, not the sliver a .btn-sm made of a 20px icon. */ -- cgit v1.2.3