From d9ae38197ce3efe40fef89acd7aa3b7896085553 Mon Sep 17 00:00:00 2001
From: ClovertaTheTrilobita <cloverta@petalmail.com>
Date: Sat, 18 Apr 2026 21:46:01 +0300
Subject: [PATCH] update post nav format

---
 src/components/Posts/PostNav.astro | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/Posts/PostNav.astro b/src/components/Posts/PostNav.astro
index 6a323eb..0e37186 100644
--- a/src/components/Posts/PostNav.astro
+++ b/src/components/Posts/PostNav.astro
@@ -43,7 +43,7 @@ const nextSlug = nextPost ? getSlugFromId(nextPost.id) : null;
 ---
 
 <nav class="post-nav" aria-label="Post navigation">
-    <div class="post-nav-item post-nav-next">
+    <div class="post-nav-item post-nav-prev">
         {
             nextPost && nextSlug && (
                 <a href={`/${lang}/posts/${nextSlug}/`}>
@@ -56,7 +56,7 @@ const nextSlug = nextPost ? getSlugFromId(nextPost.id) : null;
         }
     </div>
 
-    <div class="post-nav-item post-nav-prev">
+    <div class="post-nav-item post-nav-next">
         {
             prevPost && prevSlug && (
                 <a href={`/${lang}/posts/${prevSlug}/`}>
@@ -77,21 +77,23 @@ const nextSlug = nextPost ? getSlugFromId(nextPost.id) : null;
         gap: 1rem;
         margin-top: 3rem;
         padding-top: 1.5rem;
+        padding-bottom: 1.5rem;
         border-top: 1px dashed rgba(128, 128, 128, 0.5);
+        border-bottom: 1px dashed rgba(128, 128, 128, 0.5);
     }
 
     .post-nav-item {
         min-width: 0;
     }
 
-    .post-nav-prev {
+    .post-nav-next {
         text-align: right;
     }
 
     .post-nav a {
         display: block;
         text-decoration: none;
-        color: inherit;
+        /* color: inherit; */
     }
 
     .post-nav-label {
@@ -99,6 +101,7 @@ const nextSlug = nextPost ? getSlugFromId(nextPost.id) : null;
         font-size: 0.9rem;
         opacity: 0.65;
         margin-bottom: 0.35rem;
+        color: black;
     }
 
     .post-nav-title {
@@ -106,4 +109,14 @@ const nextSlug = nextPost ? getSlugFromId(nextPost.id) : null;
         font-size: 1rem;
         line-height: 1.5;
     }
+
+    @media (max-width: 768px) {
+        .post-nav {
+            grid-template-columns: 1fr;
+        }
+
+        .post-nav-next {
+            text-align: right;
+        }
+    }
 </style>