Changeset 5c27e8e in Klonkt

Timestamp:

06/19/2026 09:16:29 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

1080d14

Parents:

90259da

Message:

ui(post): consistent Newer/Older navigation on every post

When a newer or older post is missing, the nav now shows a greyed-out
placeholder ("Newest post" / "Oldest post") instead of an empty spot —
so every post has the same two-card structure (like a middle post).

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

Files:

• CHANGELOG.md (modified) (1 diff)
• src/views/pages/post.ejs (modified) (3 diffs)

CHANGELOG.md

@@ -14 +14 @@
 ## [Unreleased]
 
-_Nog niets in voorbereiding._
+### Gewijzigd
+- Post-navigatie (Newer/Older) houdt nu op elke post dezelfde twee-kaarten-structuur:
+  ontbreekt er een nieuwere/oudere post, dan staat er een subtiele uitgegrijsde
+  placeholder ("Nieuwste post" / "Oudste post") i.p.v. een lege plek.
 
 ## [1.0.0-beta.2] — 2026-06-19

src/views/pages/post.ejs

@@ -17 +17 @@
           <span class="post-nav-title"><%= newerPost.title %></span>
         </a>
-      <% } else { %><span></span><% } %>
+      <% } else { %>
+        <div class="post-nav-prev is-empty" aria-hidden="true">
+          <span class="post-nav-label">← Newer</span>
+          <span class="post-nav-title">Nieuwste post</span>
+        </div>
+      <% } %>
       <% if (olderPost) { %>
         <a class="post-nav-next" href="<%= olderPost._urlBase || '' %>/<%= olderPost.slug %>"<% if (!olderPost._urlBase) { %>
@@ -25 +30 @@
           <span class="post-nav-title"><%= olderPost.title %></span>
         </a>
+      <% } else { %>
+        <div class="post-nav-next is-empty" aria-hidden="true">
+          <span class="post-nav-label">Older →</span>
+          <span class="post-nav-title">Oudste post</span>
+        </div>
       <% } %>
     </nav>
@@ -284 +294 @@
 .post-nav--top { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
 .post-nav-prev, .post-nav-next { display: flex; flex-direction: column; padding: 1rem; background: var(--paper-2); border-radius: 6px; text-decoration: none; color: var(--ink); }
+/* Lege plek (geen nieuwere/oudere post): zelfde kaart, uitgegrijsd + niet klikbaar,
+   zodat elke post dezelfde twee-kaarten-structuur houdt. */
+.post-nav-prev.is-empty, .post-nav-next.is-empty { opacity: 0.4; cursor: default; }
+.post-nav-prev.is-empty .post-nav-title, .post-nav-next.is-empty .post-nav-title { font-weight: 400; font-style: italic; color: var(--ink-muted); }
 .post-nav-next { text-align: right; align-items: flex-end; }
 .post-nav-label { font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 0.25rem; }