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 <redacted>

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 163505f8a0ced8f4c3b3decb97de00f5c3a05cc3..7f86f0887e5d205e671d5552d665977ba6173f00 100644 (file)
--- 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 96f7ab4b0aa20c1f502c59a591f70c744c88f018..64be81a4dfbe0945f41e86871f89ef9d494e09df 100644 (file)
--- 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));
   }

diff --git a/themes/danix-xyz-hacker/layouts/partials/article-nav.html b/themes/danix-xyz-hacker/layouts/partials/article-nav.html
index d7f8ca37a15026034f03f73203746194912a4113..8a118b3024cbb7e5fd0fe4f29ffce4b12573c3ec 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/partials/article-nav.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-nav.html
@@ -18,13 +18,13 @@
     {{/* ---- Previous (left side) ---- */}}
     {{ if $prev }}
       <a href="{{ $prev.Permalink }}"
-         class="article-nav-link truncate max-w-[45%]"
+         class="article-nav-link truncate md:max-w-[45%] text-left"
          rel="prev"
          title="{{ $prev.Title }}">
         ◄ {{ $prev.Title }}
       </a>
     {{ else }}
-      <span class="article-nav-placeholder" aria-label="Beginning of articles">
+      <span class="article-nav-placeholder text-left" aria-label="Beginning of articles">
         ◄ (beginning)
       </span>
     {{ end }}
@@ -32,7 +32,7 @@
     {{/* ---- Next (right side) ---- */}}
     {{ if $next }}
       <a href="{{ $next.Permalink }}"
-         class="article-nav-link truncate max-w-[45%] text-right"
+         class="article-nav-link truncate md:max-w-[45%] text-right"
          rel="next"
          title="{{ $next.Title }}">
         {{ $next.Title }} ►