source: Klonkt/src/views/pages/post.ejs@ 5280532

main
Last change on this file since 5280532 was 0db68bd, checked in by roboburr <roboburr@…>, 5 weeks ago

De post-pagina uit inline script naar een module (shaer-bqr, stap 3a)

Het remote-reply-veld ("beantwoorden vanaf je eigen server"). Kwam je op een post
via een link BINNEN de site, dan werd dat script geweigerd en deed de knop niets
-- precies op de plek waar de meeste bezoekers binnenkomen.

Kon ONGEWIJZIGD mee: alles al gedelegeerd op document, geen enkel pagina-element
vastgehouden, en er stond al een slot op. Dat is geen toeval -- het is geschreven
voor een popover die een htmx-swap moet overleven. Waar dat al zo is, is de
verhuizing puur verplaatsen.

Suite 556/556.
  • Property mode set to 100644
File size: 25.1 KB
Line 
1<%
2// In hub mode the site is accessible under /user/<slug>; all site-scoped links
3// (tag, edit, delete, comments) must carry that prefix otherwise they fall back
4// to the primary site → 404 / wrong site. In solo mode _base = ''.
5const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
6%>
7<article class="container post-page<%= post.nsfw ? ' nsfw-gate' : '' %>">
8
9 <%# Navigation across ALL posts — ABOVE the post (shared partial). %>
10 <%- include('../partials/post-nav', { newerPost: newerPost, olderPost: olderPost }) %>
11
12 <% if (post.nsfw) { %>
13 <div class="nsfw-banner">
14 <span class="nsfw-banner-icon">🔞</span>
15 <span class="nsfw-banner-text"><%= post.content_warning || t('post.nsfw_warning') %></span>
16 <button type="button" class="nsfw-banner-btn nsfw-reveal"><%= t('post.nsfw_show') %></button>
17 </div>
18 <% } %>
19
20 <% if (post.cover_image_url) { %>
21 <figure class="post-cover">
22 <img src="<%= post.cover_image_url %>" alt="<%= post.cover_alt || '' %>"<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>>
23 </figure>
24 <% } else if (post.cover_video_url) { %>
25 <figure class="post-cover">
26 <video src="<%= post.cover_video_url %>" poster="<%= thumb(post.cover_video_url, 1280) %>" controls loop muted playsinline preload="metadata"></video>
27 </figure>
28 <% } %>
29
30 <header class="post-header">
31 <h1 class="post-title"><%= post.title %></h1>
32 <div class="post-meta">
33 <a class="author" href="/users/<%= encodeURIComponent(post.author_username) %>"
34 hx-get="/users/<%= encodeURIComponent(post.author_username) %>?partial=1"
35 hx-target="#pcms-main" hx-swap="innerHTML"
36 hx-push-url="/users/<%= encodeURIComponent(post.author_username) %>"
37 hx-indicator="#pcms-loading"><%= post.author_username %></a>
38 <span class="meta-sep">·</span>
39 <time datetime="<%= post.published_at || post.created_at %>"><%= formatDate(post.published_at || post.created_at) %></time>
40 <% if (post.status !== 'published') { %>
41 <span class="meta-sep">·</span>
42 <span class="status-badge status-<%= post.status %>"><%= post.status %></span>
43 <% } %>
44 </div>
45 </header>
46
47 <div class="post-content">
48 <%- post.content_html %>
49 </div>
50
51 <% if (typeof poll !== 'undefined' && poll) { %>
52 <section class="poll" aria-label="<%= t('poll.aria') %>">
53 <% poll.options.forEach(function(o){ var _lead = poll.total > 0 && o.count === Math.max.apply(null, poll.options.map(function(x){return x.count;})); %>
54 <div class="poll-opt<%= _lead ? ' is-lead' : '' %>">
55 <div class="poll-bar" style="width:<%= o.pct %>%"></div>
56 <span class="poll-name"><%= o.name %></span>
57 <span class="poll-pct"><%= o.pct %>%</span>
58 </div>
59 <% }); %>
60 <div class="poll-meta">
61 <span><%= poll.voters %> <%= poll.voters === 1 ? t('poll.voter_one') : t('poll.voter_many') %></span>
62 <span aria-hidden="true">·</span>
63 <% if (poll.closed) { %>
64 <span><%= t('poll.closed') %></span>
65 <% } else if (poll.endTime) { %>
66 <span><%= t('poll.closes') %> <%= new Date(poll.endTime).toLocaleString() %></span>
67 <% } %>
68 <% if (poll.multiple) { %><span aria-hidden="true">·</span><span><%= t('poll.multiple') %></span><% } %>
69 </div>
70 <p class="poll-note"><%= t('poll.fedi_only') %></p>
71 </section>
72 <% } %>
73
74 <% if (post.tags && post.tags.length > 0) { %>
75 <div class="post-tags">
76 <% post.tags.forEach(t => { %>
77 <a class="tag" href="<%= _base %>/tag/<%= encodeURIComponent(t) %>"
78 hx-get="<%= _base %>/tag/<%= encodeURIComponent(t) %>?partial=1"
79 hx-target="#pcms-main" hx-swap="innerHTML"
80 hx-push-url="<%= _base %>/tag/<%= encodeURIComponent(t) %>"
81 hx-indicator="#pcms-loading">#<%= t %></a>
82 <% }); %>
83 </div>
84 <% } %>
85
86 <div class="post-share" style="margin:1.25rem 0;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap">
87 <button type="button" class="btn post-share-btn" data-share data-share-title="<%= post.title %>">🔗 <%= t('post.share') %></button>
88 <%# Interact via the fediverse — for VISITORS (reply/like/boost from their own
89 server). Same flow as the CTA in the fediverse section; hidden for the
90 owner/admin (their own post) and when AP is off. %>
91 <% if (post.status === 'published' && (typeof apEnabled === 'undefined' || apEnabled) && (typeof canManageSite === 'undefined' || !canManageSite)) { %>
92 <% var _shareAbsUrl = (typeof ogOrigin !== 'undefined' && ogOrigin ? ogOrigin : '') + (typeof _base !== 'undefined' && _base ? _base : '') + '/' + post.slug; %>
93 <button type="button" class="btn fedi-remote-reply-btn" data-fedi-uri="<%= _shareAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>">
94 <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="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
95 <%= t('fedi.remote_interact') %>
96 </button>
97 <% } %>
98 <span class="post-share-feedback" id="post-share-feedback" style="color:var(--accent);font-size:.85rem" hidden><%= t('post.share_copied') %></span>
99 </div>
100
101 <!-- Inline admin actions: only visible if user has permission -->
102 <% if (user && (permissions.canEditPost(user, post, site) || permissions.canDeletePost(user, post, site))) { %>
103 <aside class="post-actions">
104 <% if (permissions.canEditPost(user, post, site)) { %>
105 <a href="<%= _base %>/posts/<%= post.slug %>/edit" class="btn"
106 hx-get="<%= _base %>/posts/<%= post.slug %>/edit?partial=1" hx-target="#pcms-main"
107 hx-push-url="<%= _base %>/posts/<%= post.slug %>/edit" hx-indicator="#pcms-loading">
108 ✏️ Edit
109 </a>
110 <% } %>
111 <% if (permissions.canDeletePost(user, post, site)) { %>
112 <form method="post" action="<%= _base %>/posts/<%= post.slug %>/delete" style="display:inline" data-confirm="Delete this post?">
113 <button type="submit" class="btn btn-danger">🗑 Delete</button>
114 </form>
115 <% } %>
116 </aside>
117 <% } %>
118
119 <!-- Fediverse interactions — single place: ⭐ like (clickable) + 🔁/💬 counts + reply -->
120 <% var _fedi = (typeof fediverse !== 'undefined' && fediverse) ? fediverse : { thread: [], likeCount: 0, announceCount: 0 }; %>
121 <% if (post.status === 'published' && (typeof apEnabled === 'undefined' || apEnabled)) { %>
122 <section class="post-fediverse post-comments" id="fediverse">
123 <h2 class="comments-heading"><%= t('fedi.heading') %></h2>
124 <div class="fedi-stats">
125 <span class="fedi-stat" title="<%= t('fedi.likes') %>">
126 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
127 <span><%= _fedi.likeCount %></span>
128 </span>
129 <span class="fedi-stat" title="<%= t('fedi.boosts') %>">
130 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
131 <span><%= _fedi.announceCount %></span>
132 </span>
133 <span class="fedi-stat" title="<%= t('fedi.replies') %>">
134 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
135 <span><%= (_fedi.thread || []).length %></span>
136 </span>
137 </div>
138 <% if (_fedi.thread && _fedi.thread.length) { %>
139 <ol class="comments-list">
140 <% _fedi.thread.forEach(function(n){ %>
141 <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, postSlug: post.slug }) %></li>
142 <% }); %>
143 </ol>
144 <% } %>
145 <%# The "Interact via the fediverse" button for visitors now lives next to
146 the Share button at the top of the post (single, prominent place). %>
147 </section>
148 <% } %>
149 <%# Het remote-reply-veld zit in assets/js/mod/post.js. Inline script hier wordt
150 door de CSP geweigerd zodra je deze pagina via een link binnen de site opent
151 -- zie shaer-0i6. %>
152
153
154 <%# ── Related posts (3-card grid) ─────────────────────────────
155 Always shown if at least one related post exists. Selection logic
156 lives server-side: same-tag posts ranked by overlap, falling back
157 to most-recent if there's no tag overlap. %>
158 <% if (relatedPosts && relatedPosts.length > 0) { %>
159 <section class="post-related" aria-labelledby="related-heading">
160 <h2 class="post-related-heading" id="related-heading"><%= t('related.title') %></h2>
161 <ul class="post-related-grid">
162 <% relatedPosts.forEach(function(rp) { %>
163 <li class="post-related-card">
164 <a href="<%= rp._urlBase || '' %>/<%= rp.slug %>"<% if (!rp._urlBase) { %>
165 hx-get="/<%= rp.slug %>?partial=1" hx-target="#pcms-main"
166 hx-push-url="/<%= rp.slug %>" hx-indicator="#pcms-loading"<% } %>>
167 <% if (rp.cover_image_url) { %>
168 <span class="post-related-cover<%= rp.nsfw ? ' nsfw-media' : '' %>" aria-hidden="true"><img class="post-related-img" src="<%= rp.cover_image_url %>" alt="" loading="lazy" decoding="async"<% if (rp.cover_video_url) { %> data-ios-mp4="<%= rp.cover_video_url %>"<% } %>><% if (rp.nsfw) { %><span class="nsfw-veil"><%- include('../partials/nsfw-veil', { cw: rp.content_warning }) %></span><% } %></span>
169 <% } else { %>
170 <span class="post-related-cover post-related-cover--empty<%= rp.nsfw ? ' nsfw-media' : '' %>" aria-hidden="true"><% if (rp.nsfw) { %><span class="nsfw-veil"><%- include('../partials/nsfw-veil', { cw: rp.content_warning }) %></span><% } %></span>
171 <% } %>
172 <span class="post-related-meta">
173 <span class="post-related-date"><%= formatDate(rp.published_at) %></span>
174 <span class="post-related-title"><%= rp.title %></span>
175 </span>
176 </a>
177 </li>
178 <% }); %>
179 </ul>
180 </section>
181 <% } %>
182
183</article>
184<style>
185.post-page { max-width: 720px; margin: 0.5rem auto 2rem; padding: 0 1rem; }
186.post-cover { margin: 0 0 2rem; border-radius: 8px; overflow: hidden; }
187.post-cover img, .post-cover video { width: 100%; height: auto; display: block; }
188.post-header { margin-bottom: 2rem; }
189.post-title { font-family: var(--font-display, serif); font-size: 2.5rem; line-height: 1.1; margin: 0 0 1rem; }
190@media (max-width: 600px) { .post-title { font-size: 1.85rem; } }
191.post-meta { font-size: 0.9rem; color: var(--ink-muted); }
192.author { font-weight: 500; color: var(--ink-soft); text-decoration: none; }
193.author:hover { color: var(--accent); }
194.post-content { font-family: var(--font-body, serif); font-size: 1.1rem; line-height: 1.7; color: var(--ink); }
195.post-content p { margin: 1.2em 0; }
196/* Poll (a hosted AS2 Question) — display-only; voting happens from the fediverse. */
197.poll { margin: 1.75rem 0; display: flex; flex-direction: column; gap: .5rem; }
198.poll-opt { position: relative; display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid var(--line, rgba(128,128,128,.25)); border-radius: 8px; overflow: hidden; font-size: .98rem; }
199.poll-bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 18%, transparent); z-index: 0; transition: width .3s ease; }
200.poll-opt.is-lead .poll-bar { background: color-mix(in srgb, var(--accent) 30%, transparent); }
201.poll-name { position: relative; z-index: 1; flex: 1; color: var(--ink); }
202.poll-opt.is-lead .poll-name { font-weight: 600; }
203.poll-pct { position: relative; z-index: 1; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
204.poll-meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--ink-muted); }
205.poll-note { font-size: .8rem; color: var(--ink-muted); margin: .1rem 0 0; }
206.like-btn {
207 display: inline-flex; align-items: center; gap: 0.45rem;
208 padding: 0.4rem 0.85rem; border: 1px solid var(--rule); border-radius: 999px;
209 background: var(--paper-2); color: var(--ink); font: inherit; font-size: 0.95rem;
210 cursor: pointer; text-decoration: none; transition: border-color 120ms, color 120ms, background 120ms;
211}
212.like-btn:hover { border-color: var(--accent); }
213.like-btn .like-heart { font-size: 1.1rem; line-height: 1; }
214.like-btn.is-liked { border-color: var(--accent); color: var(--accent); }
215.like-btn.is-liked .like-heart { color: var(--accent); }
216.like-btn .like-count { font-variant-numeric: tabular-nums; }
217.post-content h2 { font-family: var(--font-display, serif); font-size: 1.6rem; margin: 2rem 0 1rem; }
218.post-content h3 { font-family: var(--font-display, serif); font-size: 1.3rem; margin: 1.5rem 0 0.75rem; }
219.post-content a { color: var(--accent); }
220.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; }
221.post-content pre { background: var(--paper-2); padding: 1rem; border-radius: 6px; overflow-x: auto; }
222.post-content blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; margin: 1.5rem 0; color: var(--ink-soft); font-style: italic; }
223.post-content img { max-width: 100%; height: auto; border-radius: 6px; }
224.post-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 2rem 0; }
225.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; }
226.tag:hover { background: var(--accent); color: white; }
227.post-actions { display: flex; gap: 0.5rem; margin: 2rem 0; padding: 1rem; background: var(--paper-2); border-radius: 6px; flex-wrap: wrap; }
228
229/* ============================================================
230 Comments
231 ============================================================ */
232.post-comments {
233 margin-top: 3rem;
234 padding-top: 2rem;
235 border-top: 1px solid var(--rule);
236}
237.comments-heading {
238 font-family: var(--font-display, serif);
239 font-size: 1.5rem;
240 margin: 0 0 1.5rem;
241}
242.comments-empty { color: var(--ink-muted, var(--ink-soft)); margin: 0 0 1.5rem; }
243.comments-pending-flash {
244 background: rgba(40, 160, 90, 0.15);
245 color: #2a9d5e;
246 border: 1px solid rgba(40, 160, 90, 0.3);
247 padding: 0.75rem 1rem;
248 border-radius: 6px;
249 margin-bottom: 1rem;
250 font-size: 0.9rem;
251}
252.comments-empty a { color: var(--accent); }
253
254.comments-list, .comment-replies {
255 list-style: none;
256 padding: 0;
257 margin: 0 0 2rem;
258}
259
260.comment {
261 display: flex;
262 gap: 0.85rem;
263 padding: 1rem 0;
264 border-top: 1px solid var(--rule);
265}
266.comments-list > .comment:first-child { border-top: 0; padding-top: 0; }
267
268.comment-avatar {
269 flex-shrink: 0;
270 width: 40px;
271 height: 40px;
272 border-radius: 50%;
273 background: var(--paper-2);
274 border: 1px solid var(--rule);
275 overflow: hidden;
276 display: inline-flex;
277 align-items: center;
278 justify-content: center;
279}
280.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
281.comment-avatar span {
282 font-family: var(--font-display, serif);
283 font-weight: 700;
284 color: var(--accent);
285}
286
287.comment-body { flex: 1; min-width: 0; }
288.comment-meta {
289 display: flex;
290 gap: 0.5rem;
291 align-items: baseline;
292 flex-wrap: wrap;
293 row-gap: 0.1rem;
294 font-size: 0.85rem;
295 margin-bottom: 0.3rem;
296}
297.comment-author { color: var(--ink); font-weight: 600; text-decoration: none; }
298.comment-author:hover { color: var(--accent); }
299.comment-time { color: var(--ink-muted, var(--ink-soft)); }
300.comment-meta .fedi-handle { overflow-wrap: anywhere; }
301@media (max-width: 560px) {
302 .comment-meta .comment-time { flex-basis: 100%; font-size: 0.78rem; color: var(--ink-faint, var(--ink-muted)); }
303}
304.comment-content {
305 white-space: pre-wrap;
306 word-wrap: break-word;
307 color: var(--ink);
308 line-height: 1.5;
309 font-size: 0.95rem;
310}
311
312.comment-actions {
313 display: flex;
314 gap: 0.5rem;
315 margin-top: 0.4rem;
316 flex-wrap: wrap;
317 align-items: center;
318}
319.fedi-owner-react { display: inline; }
320.fedi-owner-reply { display: inline-block; }
321.fedi-owner-reply[open] { flex-basis: 100%; }
322.comment-reply-btn, .comment-delete-btn {
323 background: none;
324 border: 0;
325 color: var(--ink-muted, var(--ink-soft));
326 font-size: 0.8rem;
327 cursor: pointer;
328 padding: 0.2rem 0;
329 font-family: inherit;
330 text-transform: uppercase;
331 letter-spacing: 0.04em;
332}
333.comment-reply-btn:hover { color: var(--accent); }
334.comment-delete-btn:hover { color: #c33; }
335
336/* Owner comment-action icons — same visual language as the News feed, compact (30px). */
337.fedi-cact { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; padding: 0; box-sizing: border-box;
338 display: inline-flex; align-items: center; justify-content: center; list-style: none;
339 border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent);
340 background: color-mix(in srgb, var(--ink, #000) 3%, transparent);
341 color: var(--ink-soft, #888); cursor: pointer; -webkit-tap-highlight-color: transparent;
342 transition: background .12s, border-color .12s, transform .1s; }
343.fedi-cact::-webkit-details-marker { display: none; }
344.fedi-cact svg { width: 15px; height: 15px; display: block; }
345.fedi-cact:active { transform: scale(.9); }
346.fedi-cact-like svg { color: #e8b04b; }
347.fedi-cact-like:hover { background: color-mix(in srgb, #e8b04b 15%, transparent); border-color: color-mix(in srgb, #e8b04b 50%, transparent); }
348.fedi-cact-like.is-on { background: color-mix(in srgb, #e8b04b 18%, transparent); border-color: color-mix(in srgb, #e8b04b 60%, transparent); }
349.fedi-cact-boost svg { color: #2fa85a; }
350.fedi-cact-boost:hover { background: color-mix(in srgb, #2fa85a 15%, transparent); border-color: color-mix(in srgb, #2fa85a 50%, transparent); }
351.fedi-cact-boost.is-on { background: color-mix(in srgb, #2fa85a 18%, transparent); border-color: color-mix(in srgb, #2fa85a 60%, transparent); }
352.fedi-cact-reply svg { color: var(--accent, #06c); }
353.fedi-cact-reply:hover { background: color-mix(in srgb, var(--accent, #888) 14%, transparent); border-color: color-mix(in srgb, var(--accent, #888) 50%, transparent); }
354
355.comment-replies {
356 margin-top: 1rem;
357 margin-left: 0;
358 border-left: 2px solid var(--rule);
359 padding-left: 1rem;
360}
361.comment-reply { padding: 0.75rem 0; }
362.comment-replies > .comment-reply:first-child { border-top: 0; padding-top: 0; }
363.comment-reply .comment-avatar { width: 32px; height: 32px; }
364.comment-reply .comment-avatar span { font-size: 0.85rem; }
365
366.comment-form, .comment-reply-form {
367 display: flex;
368 flex-direction: column;
369 gap: 0.6rem;
370 background: var(--paper-2);
371 border: 1px solid var(--rule);
372 border-radius: 8px;
373 padding: 1rem;
374 margin-top: 1rem;
375}
376.comment-form-label { display: flex; flex-direction: column; gap: 0.4rem; }
377.comment-form-label > span { font-size: 0.85rem; color: var(--ink-muted, var(--ink-soft)); }
378.comment-form textarea, .comment-reply-form textarea {
379 width: 100%;
380 resize: vertical;
381 min-height: 70px;
382 max-height: 200px;
383 padding: 0.65rem 0.85rem;
384 border: 1px solid var(--rule);
385 border-radius: 5px;
386 background: var(--paper);
387 color: var(--ink);
388 font-family: inherit;
389 font-size: 0.95rem;
390 line-height: 1.4;
391 box-sizing: border-box;
392}
393.comment-form button { align-self: flex-start; }
394.comment-reply-form-actions { display: flex; gap: 0.5rem; }
395/* Show the reply form only AFTER clicking REPLY. The display:flex above would
396 otherwise override the [hidden] attribute → form was always open. */
397.comment-reply-form[hidden] { display: none; }
398.fedi-owner-reply summary { list-style: none; cursor: pointer; }
399.fedi-owner-reply summary::-webkit-details-marker { display: none; }
400.fedi-owner-reply[open] summary { margin-bottom: .45rem; }
401/* DELETE button is inside a <form>; display:contents makes it a direct flex-sibling
402 of REPLY → pixel-perfect alignment + equal gap. */
403.comment-actions form { display: contents; }
404
405.comments-login-cta { margin-top: 1.5rem; text-align: center; }
406
407/* ─── Related posts (3-card grid above pinned-nav) ─────────────── */
408.post-related {
409 margin: 3rem auto 1.5rem;
410 /* Break out of the 720px article column so the cards have room to breathe.
411 Cap at 1100 to match other wide content. */
412 max-width: 1100px;
413 padding: 0 1rem;
414}
415.post-related-heading {
416 font-family: var(--font-ui, system-ui), sans-serif;
417 font-size: 0.75rem;
418 font-weight: 600;
419 text-transform: uppercase;
420 letter-spacing: 0.15em;
421 color: var(--ink-muted, var(--ink-soft));
422 margin: 0 0 1rem;
423}
424.post-related-grid {
425 list-style: none;
426 padding: 0; margin: 0;
427 display: grid;
428 grid-template-columns: repeat(3, minmax(0, 1fr));
429 gap: 1rem;
430}
431@media (max-width: 880px) { .post-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
432@media (max-width: 540px) { .post-related-grid { grid-template-columns: 1fr; } }
433
434.post-related-card {
435 background: var(--paper);
436 border: 1px solid var(--rule);
437 border-radius: 10px;
438 overflow: hidden;
439 transition: border-color 150ms, transform 150ms;
440}
441.post-related-card:hover { border-color: var(--accent); transform: translateY(-2px); }
442.post-related-card a {
443 display: block;
444 color: inherit;
445 text-decoration: none;
446}
447.post-related-cover {
448 display: block;
449 position: relative;
450 overflow: hidden;
451 aspect-ratio: 16 / 10;
452 background: var(--paper-2) center/cover no-repeat;
453}
454.post-related-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
455.post-related-cover--empty {
456 background-image: linear-gradient(135deg,
457 color-mix(in srgb, var(--accent) 12%, var(--paper-2)),
458 var(--paper-2));
459}
460.post-related-meta {
461 display: flex; flex-direction: column; gap: 0.4rem;
462 padding: 0.85rem 1rem 1.1rem;
463}
464.post-related-date {
465 font-size: 0.78rem;
466 color: var(--ink-muted, var(--ink-soft));
467 font-variant-numeric: tabular-nums;
468}
469.post-related-title {
470 font-family: var(--font-display, serif);
471 font-size: 1.1rem;
472 font-weight: 600;
473 color: var(--ink);
474 line-height: 1.25;
475}
476
477/* ─── Pinned navigation cards (v9 style) ───────────────────────── */
478.post-pinned-nav {
479 display: grid;
480 grid-template-columns: 1fr 1fr;
481 gap: 1rem;
482 margin: 1.5rem auto 2rem;
483 max-width: 1100px;
484 padding: 0 1rem;
485}
486@media (max-width: 600px) {
487 .post-pinned-nav { grid-template-columns: 1fr; }
488}
489
490.post-pinned-card {
491 display: flex; align-items: center; gap: 1rem;
492 padding: 1rem 1.25rem;
493 border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
494 background: color-mix(in srgb, var(--accent) 6%, var(--paper));
495 border-radius: 10px;
496 text-decoration: none;
497 color: var(--ink);
498 transition: border-color 150ms, background 150ms, transform 150ms;
499 min-height: 88px;
500}
501.post-pinned-card:hover {
502 border-color: var(--accent);
503 background: color-mix(in srgb, var(--accent) 11%, var(--paper));
504 transform: translateY(-2px);
505}
506.post-pinned-arrow {
507 font-size: 1.6rem;
508 color: var(--accent);
509 flex-shrink: 0;
510 line-height: 1;
511}
512.post-pinned-card--next {
513 /* "Volgende" card aligns text to the right with the arrow on the right
514 side, mirroring v9 — the arrow is on the OPPOSITE end from the body. */
515 flex-direction: row-reverse;
516 text-align: right;
517}
518.post-pinned-body {
519 display: flex; flex-direction: column; gap: 0.25rem;
520 flex: 1; min-width: 0;
521}
522.post-pinned-label {
523 font-family: var(--font-ui, system-ui), sans-serif;
524 font-size: 0.7rem; font-weight: 600;
525 text-transform: uppercase;
526 letter-spacing: 0.1em;
527 color: var(--accent);
528}
529.post-pinned-title {
530 font-family: var(--font-display, serif);
531 font-size: 1.05rem; font-weight: 600;
532 color: var(--ink);
533 line-height: 1.25;
534 overflow: hidden;
535 text-overflow: ellipsis;
536 display: -webkit-box;
537 -webkit-line-clamp: 2;
538 -webkit-box-orient: vertical;
539}
540.post-pinned-cta {
541 font-size: 0.78rem;
542 color: var(--accent);
543 font-weight: 500;
544}
545
546/* Edge-of-stack indicator: dashed border, muted styling. */
547.post-pinned-card--edge {
548 flex-direction: column;
549 align-items: flex-start;
550 justify-content: center;
551 gap: 0.35rem;
552 border-style: dashed;
553 background: transparent;
554 color: var(--ink-muted, var(--ink-soft));
555 cursor: default;
556}
557.post-pinned-card--edge:hover {
558 /* Edge cards aren't clickable — undo the lift effect. */
559 transform: none;
560 border-color: color-mix(in srgb, var(--accent) 50%, transparent);
561 background: transparent;
562}
563.post-pinned-edge-label {
564 font-family: var(--font-ui, system-ui), sans-serif;
565 font-size: 0.72rem;
566 font-weight: 600;
567 text-transform: uppercase;
568 letter-spacing: 0.15em;
569 color: var(--accent);
570}
571.post-pinned-edge-title {
572 font-family: var(--font-display, serif);
573 font-size: 1.05rem;
574 font-weight: 600;
575 color: var(--ink);
576}
577</style>
Note: See TracBrowser for help on using the repository browser.