fix: make prev-next navigation responsive on mobile

Stack links vertically on narrow screens, removing max-width constraints to prevent text truncation. Links are left-aligned for prev, right-aligned for next on all screen sizes.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

2 files changed, 16 insertions, 7 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 163505f..7f86f08 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -586,7 +586,7 @@ html.theme-light picture img[src="/images/default_thumbnail_dark.png"] {
   }
 
   .article-nav-links {
-    @apply flex justify-between items-center font-mono text-sm;
+    @apply flex flex-col md:flex-row md:justify-between md:items-center gap-4 md:gap-0 font-mono text-sm;
   }
 
   .article-nav-link {
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 96f7ab4..64be81a 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -1663,13 +1663,22 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
 
 .article-nav-links {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 1rem;
   font-family: JetBrains Mono, monospace;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
+@media (min-width: 768px) {
+  .article-nav-links {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0px;
+  }
+}
+
 .article-nav-link {
   color: var(--text);
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
@@ -2043,10 +2052,6 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg {
   max-width: 80rem;
 }
 
-.max-w-\[45\%\] {
-  max-width: 45%;
-}
-
 .max-w-lg {
   max-width: 32rem;
 }
@@ -3954,6 +3959,10 @@ article.toast.border-border\/30.rounded-lg.overflow-hidden.group.bg-bg {
     width: 12rem;
   }
 
+  .md\:max-w-\[45\%\] {
+    max-width: 45%;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }