Changeset aadb11e in Klonkt for src/assets

Timestamp:

06/24/2026 05:31:51 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

b2c3699

Parents:

48ca5fc

Message:

Fediverse UI: one ⭐ like, transparent circle logos, accent-following Klonkt gradient

• Merge the duplicate ⭐ like: drop the post-header like-button; the 'From the fediverse' section now always shows and its ⭐ is the clickable like (with count).
• Circle-feed avatar: transparent background behind a logo image (accent stays only for the letter fallback) — fixes the accent showing through transparent logos.
• Klonkt palette now uses the generic accent glow so its background gradient follows the chosen accent (dropped the hard-coded navy override). style.css?v=47.

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

File:

• src/assets/css/style.css (modified) (3 diffs)

src/assets/css/style.css

@@ -440 +440 @@
                 linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
 }
-/* Klonkt-palet (donker): zuivere navy-diepte i.p.v. de accent(goud)-wash — anders
-   kleurt het gouden accent de navy warm/bruinig. Matcht de klonkt.com-look. */
-[data-theme="dark"][data-palette="klonkt"] body:not(.admin)::before {
-    background: radial-gradient(ellipse at top, #1a1f2b 0%, transparent 62%),
-                linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
-}
-@media (prefers-color-scheme: dark) {
-    [data-palette="klonkt"]:not([data-theme="light"]) body:not(.admin)::before {
-        background: radial-gradient(ellipse at top, #1a1f2b 0%, transparent 62%),
-                    linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
-    }
-}
+/* Klonkt-palet gebruikt nu (net als de andere paletten) de generieke accent-glow
+   hierboven → de achtergrond-gradient volgt de gekozen accentkleur. */
 ::selection { background: var(--accent-tint); color: var(--accent); }
 
@@ -4478 +4468 @@
 
 /* === Fediverse interactions — inherits the native .comment styling === */
-.post-fediverse .fedi-stats { display: flex; gap: .55rem; margin: .25rem 0 1.25rem; }
-.post-fediverse .fedi-stats span {
+.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;
@@ -4485 +4476 @@
   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-handle { color: var(--ink-soft, #888); font-size: .82rem; }
 .post-fediverse .comment-content p { margin: .2rem 0; }