Changeset 47a0d29 in Klonkt

Timestamp:

06/24/2026 11:49:19 AM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

55bc7f9

Parents:

c16e0a5

Message:

style(activitypub): polish fediverse section into clean comment cards

Dedicated markup/classes (no list numbers), circular avatar, name + muted handle
+ time, subtle rounded card per reply, pill-style stat counters. Adapts to
light/dark via color-mix on theme tokens.

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

@@ -4402 +4402 @@
 
 /* === Fediverse interactions (inbound AP replies/likes/boosts) === */
-.post-fediverse { margin: 2rem 0; }
-.post-fediverse .fedi-heading { font-size: 1.15rem; margin: 0 0 .5rem; }
-.post-fediverse .fedi-stats { display: flex; gap: 1.1rem; color: var(--ink-soft, #777); font-size: .95rem; margin: 0 0 1rem; }
-.post-fediverse .fedi-replies { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
-.post-fediverse .fedi-reply { display: flex; gap: .75rem; }
+.post-fediverse { margin: 2.5rem 0; }
+.post-fediverse .fedi-heading { font-size: 1.2rem; margin: 0 0 .85rem; }
+.post-fediverse .fedi-stats { display: flex; gap: .55rem; margin: 0 0 1.25rem; }
+.post-fediverse .fedi-stats span {
+  display: inline-flex; align-items: center; gap: .35rem;
+  padding: .25rem .7rem; border-radius: 999px; font-size: .85rem;
+  color: var(--ink-soft, #888);
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+.post-fediverse .fedi-replies { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
+.post-fediverse .fedi-reply {
+  display: flex; gap: .8rem; padding: .9rem 1rem; border-radius: 16px;
+  background: color-mix(in srgb, var(--ink, #000) 4%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ink, #000) 9%, transparent);
+}
+.post-fediverse .fedi-avatar {
+  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
+  display: flex; align-items: center; justify-content: center;
+  background: color-mix(in srgb, var(--accent, #888) 22%, transparent);
+}
+.post-fediverse .fedi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.post-fediverse .fedi-avatar-fallback { font-weight: 700; font-size: 1.05rem; color: var(--accent, #555); }
+.post-fediverse .fedi-main { flex: 1; min-width: 0; }
+.post-fediverse .fedi-line { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
+.post-fediverse .fedi-name { font-weight: 600; color: var(--ink, inherit); text-decoration: none; }
+.post-fediverse .fedi-name:hover { text-decoration: underline; }
 .post-fediverse .fedi-handle { color: var(--ink-soft, #888); font-size: .85rem; }
-.post-fediverse .comment-content { margin-top: .15rem; }
+.post-fediverse .fedi-time { color: var(--ink-soft, #999); font-size: .8rem; margin-left: auto; }
+.post-fediverse .fedi-text { margin: .3rem 0 0; line-height: 1.5; overflow-wrap: anywhere; }
+.post-fediverse .fedi-text p { margin: .25rem 0; }
+.post-fediverse .fedi-text p:first-child { margin-top: 0; }
+.post-fediverse .fedi-text a { color: var(--accent, #06c); }

src/views/pages/post.ejs

@@ -82 +82 @@
       </p>
       <% if (fediverse.replies.length) { %>
-        <ol class="fedi-replies">
+        <ul class="fedi-replies">
           <% fediverse.replies.forEach(function(r) { %>
             <li class="fedi-reply">
-              <div class="comment-avatar">
+              <div class="fedi-avatar">
                 <% if (r.actor_icon) { %><img src="<%= r.actor_icon %>" alt="" loading="lazy">
-                <% } else { %><span class="comment-avatar-fallback"><%= (r.actor_name || '?').charAt(0).toUpperCase() %></span><% } %>
+                <% } else { %><span class="fedi-avatar-fallback"><%= (r.actor_name || '?').charAt(0).toUpperCase() %></span><% } %>
               </div>
-              <div class="comment-body">
-                <div class="comment-meta">
-                  <a class="comment-author" href="<%= r.actor_url %>" rel="nofollow noopener" target="_blank"><%= r.actor_name %></a>
+              <div class="fedi-main">
+                <div class="fedi-line">
+                  <a class="fedi-name" href="<%= r.actor_url %>" rel="nofollow noopener" target="_blank"><%= r.actor_name %></a>
                   <span class="fedi-handle"><%= r.actor_handle %></span>
-                  <% if (r.published || r.created_at) { %><span class="comment-time"><%= formatDateTime(r.published || r.created_at) %></span><% } %>
+                  <% if (r.published || r.created_at) { %><time class="fedi-time"><%= formatDateTime(r.published || r.created_at) %></time><% } %>
                 </div>
-                <div class="comment-content"><%- r.content %></div>
+                <div class="fedi-text"><%- r.content %></div>
               </div>
             </li>
           <% }); %>
-        </ol>
+        </ul>
       <% } %>
     </section>

src/views/shell.ejs

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