Fix Prev/Next blog buttons

Author: JesusValeraDev

css/components/dark-mode.css

@@ -557,18 +557,19 @@
 .dark .related-container .link {
   background: var(--color-dark-surface);
   border-color: var(--color-dark-border);
+  color: var(--color-light-text-accent);
 }
 
 .dark .related-container .link:hover {
   border-color: var(--color-light-text-accent);
   background: var(--color-dark-surface-hover);
 }
 
-.dark .related-container .link a {
+.dark .related-container .link .link-title {
   color: var(--color-light-text-accent);
 }
 
-.dark .related-container .link span {
+.dark .related-container .link > span:not(.link-title) {
   color: var(--color-light-text-accent);
 }
 

css/components/layout.css

@@ -188,21 +188,15 @@
 
 /* Modern Page Navigation (Previous/Next) */
 @utility related-container {
-  display: grid;
-  grid-template-columns: 1fr;
+  display: flex;
+  justify-content: space-between;
   gap: var(--space-lg);
   margin: var(--space-2xl) 0;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  transition: none;
+  flex-wrap: wrap;
 }
 
 @media (min-width: 768px) {
   .related-container {
-    grid-template-columns: 1fr 1fr;
     gap: var(--space-xl);
   }
 }
@@ -211,54 +205,33 @@
   display: flex;
   align-items: center;
   gap: var(--space-sm);
-  padding: var(--space-md) var(--space-lg);
+  padding: var(--space-sm) var(--space-md);
   background: var(--color-light-surface);
   border: 1px solid var(--color-light-border);
   border-radius: var(--radius-md);
   transition: all var(--duration-fast) var(--ease-out);
   text-decoration: none;
+  color: var(--color-light-link);
+  font-weight: 600;
 }
 
 .related-container .link:hover {
   border-color: var(--color-light-link);
   background: var(--color-light-surface-hover);
 }
 
-.related-container .link a {
-  color: var(--color-light-link);
-  font-weight: 600;
-  text-decoration: none;
-  flex: 1;
-  pointer-events: none;
-}
-
-.related-container .link a::after {
+.related-container .link::after {
   display: none;
 }
 
-.related-container .link span {
-  font-size: var(--text-2xl);
+.related-container .link .link-title {
+  flex: 1;
   color: var(--color-light-link);
-  transition: transform var(--duration-fast) var(--ease-out);
-  flex-shrink: 0;
-  pointer-events: none;
-}
-
-.related-container .link-previous {
-  justify-content: flex-start;
-}
-
-.related-container .link-previous:hover span {
-  transform: translateX(-4px);
-}
-
-.related-container .link-next {
-  justify-content: flex-end;
-  text-align: right;
 }
 
-.related-container .link-next:hover span {
-  transform: translateX(4px);
+.related-container .link > span:not(.link-title) {
+  color: var(--color-light-link);
+  flex-shrink: 0;
 }
 
 /* Back to Top Button - Modern floating action */

templates/blog-entry.html

@@ -13,18 +13,18 @@ <h1>{{page.title}}</h1>
     {{page.content | safe}}
 
     <div class="related-container">
-      {% if page.earlier %}
-      <div class="link link-previous">
+      {% if page.lower %}
+      <a href="{{ page.lower.permalink }}" class="link link-previous">
         <span>&larr;</span>
-        <a href="{{ page.earlier.permalink }}">{{ page.earlier.title }}</a>
-      </div>
+        <span class="link-title">{{ page.lower.title }}</span>
+      </a>
       {% endif %}
 
-      {% if page.later %}
-      <div class="link link-next">
-        <a href="{{ page.later.permalink }}">{{ page.later.title }}</a>
+      {% if page.higher %}
+      <a href="{{ page.higher.permalink }}" class="link link-next">
+        <span class="link-title">{{ page.higher.title }}</span>
         <span>&rarr;</span>
-      </div>
+      </a>
       {% endif %}
     </div>
   </div>