Changeset aadb11e in Klonkt for src


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

Location:
src
Files:
1 deleted
4 edited

Legend:

Unmodified
Added
Removed

  • src/assets/css/style.css

    r48ca5fc raadb11e  
    440440                linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
    441441}
    442 /* Klonkt-palet (donker): zuivere navy-diepte i.p.v. de accent(goud)-wash — anders
    443    kleurt het gouden accent de navy warm/bruinig. Matcht de klonkt.com-look. */
    444 [data-theme="dark"][data-palette="klonkt"] body:not(.admin)::before {
    445     background: radial-gradient(ellipse at top, #1a1f2b 0%, transparent 62%),
    446                 linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
    447 }
    448 @media (prefers-color-scheme: dark) {
    449     [data-palette="klonkt"]:not([data-theme="light"]) body:not(.admin)::before {
    450         background: radial-gradient(ellipse at top, #1a1f2b 0%, transparent 62%),
    451                     linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
    452     }
    453 }
     442/* Klonkt-palet gebruikt nu (net als de andere paletten) de generieke accent-glow
     443   hierboven → de achtergrond-gradient volgt de gekozen accentkleur. */
    454444::selection { background: var(--accent-tint); color: var(--accent); }
    455445
    … …  
    44784468
    44794469/* === Fediverse interactions — inherits the native .comment styling === */
    4480 .post-fediverse .fedi-stats { display: flex; gap: .55rem; margin: .25rem 0 1.25rem; }
    4481 .post-fediverse .fedi-stats span {
     4470.post-fediverse .fedi-stats { display: flex; gap: .55rem; margin: .25rem 0 1.25rem; align-items: center; }
     4471.post-fediverse .fedi-stats span,
     4472.post-fediverse .fedi-stats .fedi-stat-btn {
    44824473  display: inline-flex; align-items: center; gap: .35rem;
    44834474  padding: .2rem .65rem; border-radius: 999px; font-size: .82rem;
    … …  
    44854476  background: color-mix(in srgb, currentColor 12%, transparent);
    44864477}
     4478.post-fediverse .fedi-stats .fedi-stat-btn { border: 0; cursor: pointer; font-family: inherit; }
     4479.post-fediverse .fedi-stats .fedi-stat-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
    44874480.post-fediverse .fedi-handle { color: var(--ink-soft, #888); font-size: .82rem; }
    44884481.post-fediverse .comment-content p { margin: .2rem 0; }

  • src/views/pages/circle-feed.ejs

    r48ca5fc raadb11e  
    2020      <% sites.forEach(function(s){ %>
    2121        <% if (s.url) { %><a class="cirkel-member" href="<%= s.url %>" target="_blank" rel="noopener" title="<%= s.name %>"><% } else { %><span class="cirkel-member" title="<%= s.name %>"><% } %>
    22           <span class="cirkel-avatar"<% if (s.avatar) { %> style="background-image:url('<%= s.avatar %>')"<% } %>><% if (!s.avatar) { %><%= (s.name || '?').charAt(0).toUpperCase() %><% } %></span>
     22          <span class="cirkel-avatar"<% if (s.avatar) { %> style="background-image:url('<%= s.avatar %>');background-color:transparent"<% } %>><% if (!s.avatar) { %><%= (s.name || '?').charAt(0).toUpperCase() %><% } %></span>
    2323          <span class="cirkel-member-name"><%= s.name %></span>
    2424        <% if (s.url) { %></a><% } else { %></span><% } %>

  • src/views/pages/post.ejs

    r48ca5fc raadb11e  
    3131      <% } %>
    3232    </div>
    33     <% if (post.status === 'published') { %>
    34       <div class="post-like-row">
    35         <%- include('../partials/like-button', { post: post, noteUri: (typeof ogOrigin !== 'undefined' && ogOrigin ? ogOrigin : '') + (typeof _base !== 'undefined' && _base ? _base : '') + '/' + post.slug, fediLikeCount: (typeof fediverse !== 'undefined' && fediverse ? fediverse.likeCount : 0), fediPh: t('fedi.remote_ph') }) %>
    36       </div>
    37     <% } %>
    3833  </header>
    3934
    … …  
    7267  <% } %>
    7368
    74   <!-- Fediverse interactions (threaded: inbound replies/likes/boosts + our replies) -->
    75   <% if (typeof fediverse !== 'undefined' && fediverse && fediverse.total > 0) { %>
     69  <!-- Fediverse interactions — single place: ⭐ like (clickable) + 🔁/💬 counts + reply -->
     70  <% var _postAbsUrl = (typeof ogOrigin !== 'undefined' && ogOrigin ? ogOrigin : '') + (typeof _base !== 'undefined' && _base ? _base : '') + '/' + post.slug; %>
     71  <% var _fedi = (typeof fediverse !== 'undefined' && fediverse) ? fediverse : { thread: [], likeCount: 0, announceCount: 0 }; %>
     72  <% if (post.status === 'published') { %>
    7673    <section class="post-fediverse post-comments" id="fediverse">
    7774      <h2 class="comments-heading"><%= t('fedi.heading') %></h2>
    7875      <p class="fedi-stats">
    79         <span title="<%= t('fedi.likes') %>">⭐ <%= fediverse.likeCount %></span>
    80         <span title="<%= t('fedi.boosts') %>">🔁 <%= fediverse.announceCount %></span>
    81         <span title="<%= t('fedi.replies') %>">💬 <%= (fediverse.thread || []).length %></span>
     76        <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>
     77        <span title="<%= t('fedi.boosts') %>">🔁 <%= _fedi.announceCount %></span>
     78        <span title="<%= t('fedi.replies') %>">💬 <%= (_fedi.thread || []).length %></span>
    8279      </p>
    83       <% if (fediverse.thread && fediverse.thread.length) { %>
     80      <% if (_fedi.thread && _fedi.thread.length) { %>
    8481        <ol class="comments-list">
    85           <% fediverse.thread.forEach(function(n){ %>
     82          <% _fedi.thread.forEach(function(n){ %>
    8683            <li class="comment"><%- include('../partials/fedi-node', { n: n, t: t, canManageSite: (typeof canManageSite !== 'undefined' ? canManageSite : false), _base: _base, siteAvatar: (typeof siteAvatar !== 'undefined' ? siteAvatar : null), formatDateTime: formatDateTime }) %></li>
    8784          <% }); %>
    8885        </ol>
    8986      <% } %>
     87      <div class="post-fediverse-cta">
     88        <button type="button" class="btn fedi-remote-reply-btn" data-fedi-uri="<%= _postAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>">
     89          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
     90          <%= t('fedi.remote_reply') %>
     91        </button>
     92      </div>
    9093    </section>
    9194  <% } %>
    92 
    93   <!-- Reply via the fediverse (remote interaction: bounces to the visitor's own server) -->
    94   <% var _postAbsUrl = (typeof ogOrigin !== 'undefined' && ogOrigin ? ogOrigin : '') + (typeof _base !== 'undefined' && _base ? _base : '') + '/' + post.slug; %>
    95   <div class="post-fediverse-cta">
    96     <button type="button" class="btn fedi-remote-reply-btn" data-fedi-uri="<%= _postAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>">
    97       <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
    98       <%= t('fedi.remote_reply') %>
    99     </button>
    100   </div>
    10195  <script>
    10296  (function(){

  • src/views/shell.ejs

    r48ca5fc raadb11e  
    175175
    176176<!-- v9 stylesheet (full palette system) -->
    177 <link rel="stylesheet" href="/assets/css/style.css?v=46">
     177<link rel="stylesheet" href="/assets/css/style.css?v=47">
    178178
    179179<!-- Audio player styles: loaded on every page so the mini-player works
Note: See TracChangeset for help on using the changeset viewer.