source: Klonkt/src/views/pages/post.ejs@ 3fb8390

main
Last change on this file since 3fb8390 was 535f955, checked in by roboburr <roboburr@…>, 3 months ago

feat: post likes + favourites page for logged-in users

  • New post_likes table (unique per post+user).
  • ♥ like button on the post (shared partial, htmx toggle via POST /posts/:id/like); shows the like count. Anonymous → button links to login.
  • /favorieten page (requireAuth) shows your liked posts (solo: own site, hub: across all sites with correct links). Link in account menu (sheet + topnav).

Co-Authored-By: Claude <noreply@…>
  • Property mode set to 100644
File size: 22.2 KB
Line 
1<%
2// In hub-mode is de site bereikbaar onder /user/<slug>; alle site-scoped links
3// (tag, edit, delete, comments) moeten met die prefix anders vallen ze terug op
4// de primaire site → 404 / verkeerde site. In solo is _base = ''.
5const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
6%>
7<article class="container post-page">
8
9 <%# Navigatie over ALLE posts — BOVEN de post (gedeeld partial). %>
10 <%- include('../partials/post-nav', { newerPost: newerPost, olderPost: olderPost }) %>
11
12 <% if (post.cover_image_url) { %>
13 <figure class="post-cover">
14 <img src="<%= post.cover_image_url %>" alt="">
15 </figure>
16 <% } %>
17
18 <header class="post-header">
19 <h1 class="post-title"><%= post.title %></h1>
20 <div class="post-meta">
21 <a class="author" href="/users/<%= encodeURIComponent(post.author_username) %>"
22 hx-get="/users/<%= encodeURIComponent(post.author_username) %>?partial=1"
23 hx-target="#pcms-main" hx-swap="innerHTML"
24 hx-push-url="/users/<%= encodeURIComponent(post.author_username) %>"
25 hx-indicator="#pcms-loading"><%= post.author_username %></a>
26 <span class="meta-sep">·</span>
27 <time datetime="<%= post.published_at || post.created_at %>"><%= formatDate(post.published_at || post.created_at) %></time>
28 <% if (post.status !== 'published') { %>
29 <span class="meta-sep">·</span>
30 <span class="status-badge status-<%= post.status %>"><%= post.status %></span>
31 <% } %>
32 </div>
33 <% if (post.status === 'published') { %>
34 <div class="post-like-row">
35 <%- include('../partials/like-button', { post: post, likedByMe: (typeof likedByMe !== 'undefined' && likedByMe), likeCount: (typeof likeCount !== 'undefined' ? likeCount : 0), loggedIn: !!user, loginNext: _base + '/' + post.slug }) %>
36 </div>
37 <% } %>
38 </header>
39
40 <div class="post-content">
41 <%- post.content_html %>
42 </div>
43
44 <% if (post.tags && post.tags.length > 0) { %>
45 <div class="post-tags">
46 <% post.tags.forEach(t => { %>
47 <a class="tag" href="<%= _base %>/tag/<%= encodeURIComponent(t) %>"
48 hx-get="<%= _base %>/tag/<%= encodeURIComponent(t) %>?partial=1"
49 hx-target="#pcms-main" hx-swap="innerHTML"
50 hx-push-url="<%= _base %>/tag/<%= encodeURIComponent(t) %>"
51 hx-indicator="#pcms-loading">#<%= t %></a>
52 <% }); %>
53 </div>
54 <% } %>
55
56 <!-- Inline admin actions: only visible if user has permission -->
57 <% if (user && (permissions.canEditPost(user, post, site) || permissions.canDeletePost(user, post, site))) { %>
58 <aside class="post-actions">
59 <% if (permissions.canEditPost(user, post, site)) { %>
60 <a href="<%= _base %>/posts/<%= post.slug %>/edit" class="btn"
61 hx-get="<%= _base %>/posts/<%= post.slug %>/edit?partial=1" hx-target="#pcms-main"
62 hx-push-url="<%= _base %>/posts/<%= post.slug %>/edit" hx-indicator="#pcms-loading">
63 ✏️ Edit
64 </a>
65 <% } %>
66 <% if (permissions.canDeletePost(user, post, site)) { %>
67 <form method="post" action="<%= _base %>/posts/<%= post.slug %>/delete" style="display:inline" onsubmit="return confirm('Delete this post?')">
68 <button type="submit" class="btn btn-danger">🗑 Delete</button>
69 </form>
70 <% } %>
71 </aside>
72 <% } %>
73
74 <!-- Comments -->
75 <section class="post-comments" id="comments">
76 <h2 class="comments-heading">
77 <%= totalComments %> comment<%= totalComments === 1 ? '' : 's' %>
78 </h2>
79
80 <% if (typeof currentPath === 'string' && currentPath && currentPath.indexOf('/' + post.slug) === 0) { %>
81 <% /* If the URL has ?pending=1, the previous submit landed in the queue */ %>
82 <% } %>
83 <script>
84 (function() {
85 if (location.search.indexOf('pending=1') !== -1) {
86 var s = document.createElement('div');
87 s.className = 'comments-pending-flash';
88 s.textContent = 'Your comment is awaiting moderation. It will appear once an admin approves it.';
89 document.currentScript.parentNode.insertBefore(s, document.currentScript);
90 }
91 })();
92 </script>
93
94 <% if (!comments || !comments.length) { %>
95 <p class="comments-empty">No comments yet.<% if (!user) { %> <a href="/auth/login?next=<%= encodeURIComponent(_base + '/' + post.slug + '#comments') %>">Log in</a> to start the conversation.<% } %></p>
96 <% } else { %>
97 <ol class="comments-list">
98 <% comments.forEach(function(c) { %>
99 <li class="comment" id="comment-<%= c.id %>">
100 <div class="comment-avatar">
101 <% if (c.author_avatar) { %>
102 <img src="<%= c.author_avatar %>" alt="">
103 <% } else { %>
104 <span><%= c.author_username.charAt(0).toUpperCase() %></span>
105 <% } %>
106 </div>
107 <div class="comment-body">
108 <div class="comment-meta">
109 <a class="comment-author" href="/users/<%= encodeURIComponent(c.author_username) %>"><%= c.author_username %></a>
110 <span class="comment-time" title="<%= c.created_at %>"><%= formatDateTime(c.created_at) %></span>
111 </div>
112 <div class="comment-content"><%= c.content %></div>
113 <div class="comment-actions">
114 <% if (user && canMutate) { %>
115 <button type="button" class="comment-reply-btn" data-reply-to="<%= c.id %>">Reply</button>
116 <% } %>
117 <% if (user && permissions.canDeleteComment(user, c, site)) { %>
118 <form method="post" action="<%= _base %>/comments/<%= c.id %>/delete" style="display:inline" onsubmit="return confirm('Delete this comment?')">
119 <button type="submit" class="comment-delete-btn">Delete</button>
120 </form>
121 <% } %>
122 </div>
123
124 <!-- Inline reply form (hidden by default) -->
125 <% if (user && canMutate) { %>
126 <form method="post" action="<%= _base %>/comments" class="comment-reply-form" hidden data-reply-form-for="<%= c.id %>">
127 <input type="hidden" name="post_slug" value="<%= post.slug %>">
128 <input type="hidden" name="parent_comment_id" value="<%= c.id %>">
129 <textarea name="content" rows="3" maxlength="4000" placeholder="Reply to <%= c.author_username %>…" required></textarea>
130 <div class="comment-reply-form-actions">
131 <button type="submit" class="btn btn-primary">Reply</button>
132 <button type="button" class="btn comment-cancel-reply">Cancel</button>
133 </div>
134 </form>
135 <% } %>
136
137 <!-- Replies (1 level deep) -->
138 <% if (c.replies && c.replies.length) { %>
139 <ol class="comment-replies">
140 <% c.replies.forEach(function(r) { %>
141 <li class="comment comment-reply" id="comment-<%= r.id %>">
142 <div class="comment-avatar">
143 <% if (r.author_avatar) { %>
144 <img src="<%= r.author_avatar %>" alt="">
145 <% } else { %>
146 <span><%= r.author_username.charAt(0).toUpperCase() %></span>
147 <% } %>
148 </div>
149 <div class="comment-body">
150 <div class="comment-meta">
151 <a class="comment-author" href="/users/<%= encodeURIComponent(r.author_username) %>"><%= r.author_username %></a>
152 <span class="comment-time"><%= formatDateTime(r.created_at) %></span>
153 </div>
154 <div class="comment-content"><%= r.content %></div>
155 <div class="comment-actions">
156 <% if (user && permissions.canDeleteComment(user, r, site)) { %>
157 <form method="post" action="<%= _base %>/comments/<%= r.id %>/delete" style="display:inline" onsubmit="return confirm('Delete this comment?')">
158 <button type="submit" class="comment-delete-btn">Delete</button>
159 </form>
160 <% } %>
161 </div>
162 </div>
163 </li>
164 <% }); %>
165 </ol>
166 <% } %>
167 </div>
168 </li>
169 <% }); %>
170 </ol>
171 <% } %>
172
173 <!-- Top-level comment form (only for logged-in users for now) -->
174 <% if (user && canMutate) { %>
175 <form method="post" action="<%= _base %>/comments" class="comment-form">
176 <input type="hidden" name="post_slug" value="<%= post.slug %>">
177 <label class="comment-form-label">
178 <span>Add a comment as <strong><%= user.username %></strong></span>
179 <textarea name="content" rows="3" maxlength="4000" placeholder="Share your thoughts…" required></textarea>
180 </label>
181 <button type="submit" class="btn btn-primary">Post comment</button>
182 </form>
183 <% } else if (!user) { %>
184 <p class="comments-login-cta">
185 <a href="/auth/login?next=<%= encodeURIComponent(_base + '/' + post.slug + '#comments') %>" class="btn">Log in to comment</a>
186 </p>
187 <% } else { %>
188 <p class="comments-login-cta" style="color:var(--ink-muted)">👁️ Kijker-modus — reageren is uitgeschakeld.</p>
189 <% } %>
190 </section>
191
192 <!-- Reply form toggle -->
193 <script>
194 (function() {
195 document.querySelectorAll('.comment-reply-btn').forEach(function(btn) {
196 btn.addEventListener('click', function() {
197 var id = btn.dataset.replyTo;
198 var form = document.querySelector('[data-reply-form-for="' + id + '"]');
199 if (form) {
200 form.hidden = !form.hidden;
201 if (!form.hidden) form.querySelector('textarea').focus();
202 }
203 });
204 });
205 document.querySelectorAll('.comment-cancel-reply').forEach(function(btn) {
206 btn.addEventListener('click', function() {
207 btn.closest('.comment-reply-form').hidden = true;
208 });
209 });
210 })();
211 </script>
212
213 <%# ── Related posts (3-card grid) ─────────────────────────────
214 Always shown if at least one related post exists. Selection logic
215 lives server-side: same-tag posts ranked by overlap, falling back
216 to most-recent if there's no tag overlap. %>
217 <% if (relatedPosts && relatedPosts.length > 0) { %>
218 <section class="post-related" aria-labelledby="related-heading">
219 <h2 class="post-related-heading" id="related-heading">Gerelateerde posts</h2>
220 <ul class="post-related-grid">
221 <% relatedPosts.forEach(function(rp) { %>
222 <li class="post-related-card">
223 <a href="<%= rp._urlBase || '' %>/<%= rp.slug %>"<% if (!rp._urlBase) { %>
224 hx-get="/<%= rp.slug %>?partial=1" hx-target="#pcms-main"
225 hx-push-url="/<%= rp.slug %>" hx-indicator="#pcms-loading"<% } %>>
226 <% if (rp.cover_image_url) { %>
227 <span class="post-related-cover"
228 style="background-image: url('<%= rp.cover_image_url %>')"
229 aria-hidden="true"></span>
230 <% } else { %>
231 <span class="post-related-cover post-related-cover--empty" aria-hidden="true"></span>
232 <% } %>
233 <span class="post-related-meta">
234 <span class="post-related-date"><%= formatDate(rp.published_at) %></span>
235 <span class="post-related-title"><%= rp.title %></span>
236 </span>
237 </a>
238 </li>
239 <% }); %>
240 </ul>
241 </section>
242 <% } %>
243
244</article>
245<style>
246.post-page { max-width: 720px; margin: 0.5rem auto 2rem; padding: 0 1rem; }
247.post-cover { margin: 0 0 2rem; border-radius: 8px; overflow: hidden; }
248.post-cover img { width: 100%; height: auto; display: block; }
249.post-header { margin-bottom: 2rem; }
250.post-title { font-family: var(--font-display, serif); font-size: 2.5rem; line-height: 1.1; margin: 0 0 1rem; }
251@media (max-width: 600px) { .post-title { font-size: 1.85rem; } }
252.post-meta { font-size: 0.9rem; color: var(--ink-muted); }
253.author { font-weight: 500; color: var(--ink-soft); text-decoration: none; }
254.author:hover { color: var(--accent); }
255.post-content { font-family: var(--font-body, serif); font-size: 1.1rem; line-height: 1.7; color: var(--ink); }
256.post-content p { margin: 1.2em 0; }
257.post-like-row { margin-top: 1rem; }
258.like-btn {
259 display: inline-flex; align-items: center; gap: 0.45rem;
260 padding: 0.4rem 0.85rem; border: 1px solid var(--rule); border-radius: 999px;
261 background: var(--paper-2); color: var(--ink); font: inherit; font-size: 0.95rem;
262 cursor: pointer; text-decoration: none; transition: border-color 120ms, color 120ms, background 120ms;
263}
264.like-btn:hover { border-color: var(--accent); }
265.like-btn .like-heart { font-size: 1.1rem; line-height: 1; }
266.like-btn.is-liked { border-color: var(--accent); color: var(--accent); }
267.like-btn.is-liked .like-heart { color: var(--accent); }
268.like-btn .like-count { font-variant-numeric: tabular-nums; }
269.post-content h2 { font-family: var(--font-display, serif); font-size: 1.6rem; margin: 2rem 0 1rem; }
270.post-content h3 { font-family: var(--font-display, serif); font-size: 1.3rem; margin: 1.5rem 0 0.75rem; }
271.post-content a { color: var(--accent); }
272.post-content code { background: var(--paper-2); padding: 0.1em 0.4em; border-radius: 3px; font-family: var(--font-mono, monospace); font-size: 0.9em; }
273.post-content pre { background: var(--paper-2); padding: 1rem; border-radius: 6px; overflow-x: auto; }
274.post-content blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; margin: 1.5rem 0; color: var(--ink-soft); font-style: italic; }
275.post-content img { max-width: 100%; height: auto; border-radius: 6px; }
276.post-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 2rem 0; }
277.tag { background: var(--paper-2); color: var(--ink-soft); padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.85rem; text-decoration: none; transition: background 120ms, color 120ms; }
278.tag:hover { background: var(--accent); color: white; }
279.post-actions { display: flex; gap: 0.5rem; margin: 2rem 0; padding: 1rem; background: var(--paper-2); border-radius: 6px; flex-wrap: wrap; }
280
281/* ============================================================
282 Comments
283 ============================================================ */
284.post-comments {
285 margin-top: 3rem;
286 padding-top: 2rem;
287 border-top: 1px solid var(--rule);
288}
289.comments-heading {
290 font-family: var(--font-display, serif);
291 font-size: 1.5rem;
292 margin: 0 0 1.5rem;
293}
294.comments-empty { color: var(--ink-muted, var(--ink-soft)); margin: 0 0 1.5rem; }
295.comments-pending-flash {
296 background: rgba(40, 160, 90, 0.15);
297 color: #2a9d5e;
298 border: 1px solid rgba(40, 160, 90, 0.3);
299 padding: 0.75rem 1rem;
300 border-radius: 6px;
301 margin-bottom: 1rem;
302 font-size: 0.9rem;
303}
304.comments-empty a { color: var(--accent); }
305
306.comments-list, .comment-replies {
307 list-style: none;
308 padding: 0;
309 margin: 0 0 2rem;
310}
311
312.comment {
313 display: flex;
314 gap: 0.85rem;
315 padding: 1rem 0;
316 border-top: 1px solid var(--rule);
317}
318.comments-list > .comment:first-child { border-top: 0; padding-top: 0; }
319
320.comment-avatar {
321 flex-shrink: 0;
322 width: 40px;
323 height: 40px;
324 border-radius: 50%;
325 background: var(--paper-2);
326 border: 1px solid var(--rule);
327 overflow: hidden;
328 display: inline-flex;
329 align-items: center;
330 justify-content: center;
331}
332.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
333.comment-avatar span {
334 font-family: var(--font-display, serif);
335 font-weight: 700;
336 color: var(--accent);
337}
338
339.comment-body { flex: 1; min-width: 0; }
340.comment-meta {
341 display: flex;
342 gap: 0.5rem;
343 align-items: baseline;
344 font-size: 0.85rem;
345 margin-bottom: 0.3rem;
346}
347.comment-author { color: var(--ink); font-weight: 600; text-decoration: none; }
348.comment-author:hover { color: var(--accent); }
349.comment-time { color: var(--ink-muted, var(--ink-soft)); }
350.comment-content {
351 white-space: pre-wrap;
352 word-wrap: break-word;
353 color: var(--ink);
354 line-height: 1.5;
355 font-size: 0.95rem;
356}
357
358.comment-actions {
359 display: flex;
360 gap: 0.5rem;
361 margin-top: 0.4rem;
362}
363.comment-reply-btn, .comment-delete-btn {
364 background: none;
365 border: 0;
366 color: var(--ink-muted, var(--ink-soft));
367 font-size: 0.8rem;
368 cursor: pointer;
369 padding: 0.2rem 0;
370 font-family: inherit;
371 text-transform: uppercase;
372 letter-spacing: 0.04em;
373}
374.comment-reply-btn:hover { color: var(--accent); }
375.comment-delete-btn:hover { color: #c33; }
376
377.comment-replies {
378 margin-top: 1rem;
379 margin-left: 0;
380 border-left: 2px solid var(--rule);
381 padding-left: 1rem;
382}
383.comment-reply { padding: 0.75rem 0; }
384.comment-replies > .comment-reply:first-child { border-top: 0; padding-top: 0; }
385.comment-reply .comment-avatar { width: 32px; height: 32px; }
386.comment-reply .comment-avatar span { font-size: 0.85rem; }
387
388.comment-form, .comment-reply-form {
389 display: flex;
390 flex-direction: column;
391 gap: 0.6rem;
392 background: var(--paper-2);
393 border: 1px solid var(--rule);
394 border-radius: 8px;
395 padding: 1rem;
396 margin-top: 1rem;
397}
398.comment-form-label { display: flex; flex-direction: column; gap: 0.4rem; }
399.comment-form-label > span { font-size: 0.85rem; color: var(--ink-muted, var(--ink-soft)); }
400.comment-form textarea, .comment-reply-form textarea {
401 width: 100%;
402 resize: vertical;
403 min-height: 70px;
404 padding: 0.65rem 0.85rem;
405 border: 1px solid var(--rule);
406 border-radius: 5px;
407 background: var(--paper);
408 color: var(--ink);
409 font-family: inherit;
410 font-size: 0.95rem;
411 line-height: 1.4;
412 box-sizing: border-box;
413}
414.comment-form button { align-self: flex-start; }
415.comment-reply-form-actions { display: flex; gap: 0.5rem; }
416
417.comments-login-cta { margin-top: 1.5rem; text-align: center; }
418
419/* ─── Related posts (3-card grid above pinned-nav) ─────────────── */
420.post-related {
421 margin: 3rem auto 1.5rem;
422 /* Break out of the 720px article column so the cards have room to breathe.
423 Cap at 1100 to match other wide content. */
424 max-width: 1100px;
425 padding: 0 1rem;
426}
427.post-related-heading {
428 font-family: var(--font-ui, system-ui), sans-serif;
429 font-size: 0.75rem;
430 font-weight: 600;
431 text-transform: uppercase;
432 letter-spacing: 0.15em;
433 color: var(--ink-muted, var(--ink-soft));
434 margin: 0 0 1rem;
435}
436.post-related-grid {
437 list-style: none;
438 padding: 0; margin: 0;
439 display: grid;
440 grid-template-columns: repeat(3, minmax(0, 1fr));
441 gap: 1rem;
442}
443@media (max-width: 880px) { .post-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
444@media (max-width: 540px) { .post-related-grid { grid-template-columns: 1fr; } }
445
446.post-related-card {
447 background: var(--paper);
448 border: 1px solid var(--rule);
449 border-radius: 10px;
450 overflow: hidden;
451 transition: border-color 150ms, transform 150ms;
452}
453.post-related-card:hover { border-color: var(--accent); transform: translateY(-2px); }
454.post-related-card a {
455 display: block;
456 color: inherit;
457 text-decoration: none;
458}
459.post-related-cover {
460 display: block;
461 aspect-ratio: 16 / 10;
462 background: var(--paper-2) center/cover no-repeat;
463}
464.post-related-cover--empty {
465 background-image: linear-gradient(135deg,
466 color-mix(in srgb, var(--accent) 12%, var(--paper-2)),
467 var(--paper-2));
468}
469.post-related-meta {
470 display: flex; flex-direction: column; gap: 0.4rem;
471 padding: 0.85rem 1rem 1.1rem;
472}
473.post-related-date {
474 font-size: 0.78rem;
475 color: var(--ink-muted, var(--ink-soft));
476 font-variant-numeric: tabular-nums;
477}
478.post-related-title {
479 font-family: var(--font-display, serif);
480 font-size: 1.1rem;
481 font-weight: 600;
482 color: var(--ink);
483 line-height: 1.25;
484}
485
486/* ─── Pinned navigation cards (v9 style) ───────────────────────── */
487.post-pinned-nav {
488 display: grid;
489 grid-template-columns: 1fr 1fr;
490 gap: 1rem;
491 margin: 1.5rem auto 2rem;
492 max-width: 1100px;
493 padding: 0 1rem;
494}
495@media (max-width: 600px) {
496 .post-pinned-nav { grid-template-columns: 1fr; }
497}
498
499.post-pinned-card {
500 display: flex; align-items: center; gap: 1rem;
501 padding: 1rem 1.25rem;
502 border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
503 background: color-mix(in srgb, var(--accent) 6%, var(--paper));
504 border-radius: 10px;
505 text-decoration: none;
506 color: var(--ink);
507 transition: border-color 150ms, background 150ms, transform 150ms;
508 min-height: 88px;
509}
510.post-pinned-card:hover {
511 border-color: var(--accent);
512 background: color-mix(in srgb, var(--accent) 11%, var(--paper));
513 transform: translateY(-2px);
514}
515.post-pinned-arrow {
516 font-size: 1.6rem;
517 color: var(--accent);
518 flex-shrink: 0;
519 line-height: 1;
520}
521.post-pinned-card--next {
522 /* "Volgende" card aligns text to the right with the arrow on the right
523 side, mirroring v9 — the arrow is on the OPPOSITE end from the body. */
524 flex-direction: row-reverse;
525 text-align: right;
526}
527.post-pinned-body {
528 display: flex; flex-direction: column; gap: 0.25rem;
529 flex: 1; min-width: 0;
530}
531.post-pinned-label {
532 font-family: var(--font-ui, system-ui), sans-serif;
533 font-size: 0.7rem; font-weight: 600;
534 text-transform: uppercase;
535 letter-spacing: 0.1em;
536 color: var(--accent);
537}
538.post-pinned-title {
539 font-family: var(--font-display, serif);
540 font-size: 1.05rem; font-weight: 600;
541 color: var(--ink);
542 line-height: 1.25;
543 overflow: hidden;
544 text-overflow: ellipsis;
545 display: -webkit-box;
546 -webkit-line-clamp: 2;
547 -webkit-box-orient: vertical;
548}
549.post-pinned-cta {
550 font-size: 0.78rem;
551 color: var(--accent);
552 font-weight: 500;
553}
554
555/* Edge-of-stack indicator: dashed border, muted styling. */
556.post-pinned-card--edge {
557 flex-direction: column;
558 align-items: flex-start;
559 justify-content: center;
560 gap: 0.35rem;
561 border-style: dashed;
562 background: transparent;
563 color: var(--ink-muted, var(--ink-soft));
564 cursor: default;
565}
566.post-pinned-card--edge:hover {
567 /* Edge cards aren't clickable — undo the lift effect. */
568 transform: none;
569 border-color: color-mix(in srgb, var(--accent) 50%, transparent);
570 background: transparent;
571}
572.post-pinned-edge-label {
573 font-family: var(--font-ui, system-ui), sans-serif;
574 font-size: 0.72rem;
575 font-weight: 600;
576 text-transform: uppercase;
577 letter-spacing: 0.15em;
578 color: var(--accent);
579}
580.post-pinned-edge-title {
581 font-family: var(--font-display, serif);
582 font-size: 1.05rem;
583 font-weight: 600;
584 color: var(--ink);
585}
586</style>
Note: See TracBrowser for help on using the repository browser.