Changeset 47a0d29 in Klonkt for src/assets/css

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@…>

File:

• src/assets/css/style.css (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); }