Changeset 848b76d in Klonkt

Timestamp:

06/24/2026 05:36:40 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

62dea30

Parents:

b2c3699

Message:

Prettier fediverse stats: monochrome line-icons + clean outline pills

Replace the multicolour emoji (star/repeat/speech) with consistent monochrome SVG
line-icons in subtle bordered pills, matching the site's aesthetic; the ⭐ like
hovers to the accent colour. style.css?v=48.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/pages/post.ejs (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -4468 +4468 @@
 
 /* === Fediverse interactions — inherits the native .comment styling === */
-.post-fediverse .fedi-stats { display: flex; gap: .55rem; margin: .25rem 0 1.25rem; align-items: center; }
-.post-fediverse .fedi-stats span,
-.post-fediverse .fedi-stats .fedi-stat-btn {
-  display: inline-flex; align-items: center; gap: .35rem;
-  padding: .2rem .65rem; border-radius: 999px; font-size: .82rem;
-  color: var(--ink-soft, #888);
-  background: color-mix(in srgb, currentColor 12%, transparent);
-}
-.post-fediverse .fedi-stats .fedi-stat-btn { border: 0; cursor: pointer; font-family: inherit; }
-.post-fediverse .fedi-stats .fedi-stat-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
+.post-fediverse .fedi-stats { display: flex; gap: .45rem; margin: .35rem 0 1.5rem; align-items: center; }
+.post-fediverse .fedi-stat {
+  display: inline-flex; align-items: center; gap: .4rem;
+  padding: .32rem .7rem; border-radius: 999px; font-size: .85rem; line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-muted); background: transparent;
+  border: 1px solid var(--rule);
+}
+.post-fediverse .fedi-stat svg { width: 15px; height: 15px; }
+.post-fediverse .fedi-stat-btn { cursor: pointer; font: inherit; line-height: 1; transition: color .15s, border-color .15s, background .15s; }
+.post-fediverse .fedi-stat-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); background: var(--accent-tint); }
+.post-fediverse .fedi-stat-btn:hover svg { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
 .post-fediverse .fedi-handle { color: var(--ink-soft, #888); font-size: .82rem; }
 .post-fediverse .comment-content p { margin: .2rem 0; }

src/views/pages/post.ejs

@@ -73 +73 @@
     <section class="post-fediverse post-comments" id="fediverse">
       <h2 class="comments-heading"><%= t('fedi.heading') %></h2>
-      <p class="fedi-stats">
-        <button type="button" class="fedi-stat-btn fedi-remote-reply-btn" data-fedi-uri="<%= _postAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>" title="<%= t('like.fedi_title') %>">⭐ <%= _fedi.likeCount %></button>
-        <span title="<%= t('fedi.boosts') %>">🔁 <%= _fedi.announceCount %></span>
-        <span title="<%= t('fedi.replies') %>">💬 <%= (_fedi.thread || []).length %></span>
-      </p>
+      <div class="fedi-stats">
+        <button type="button" class="fedi-stat fedi-stat-btn fedi-remote-reply-btn" data-fedi-uri="<%= _postAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>" title="<%= t('like.fedi_title') %>">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+          <span><%= _fedi.likeCount %></span>
+        </button>
+        <span class="fedi-stat" title="<%= t('fedi.boosts') %>">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
+          <span><%= _fedi.announceCount %></span>
+        </span>
+        <span class="fedi-stat" title="<%= t('fedi.replies') %>">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+          <span><%= (_fedi.thread || []).length %></span>
+        </span>
+      </div>
       <% if (_fedi.thread && _fedi.thread.length) { %>
         <ol class="comments-list">

src/views/shell.ejs

@@ -175 +175 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=47">
+<link rel="stylesheet" href="/assets/css/style.css?v=48">
 
 <!-- Audio player styles: loaded on every page so the mini-player works