From 44128f7320b6c2c932ca6584c602526504076c77 Mon Sep 17 00:00:00 2001
From: nanxiaobei <nanxiaobei@gmail.com>
Date: Tue, 27 Dec 2022 03:19:25 +0800
Subject: [PATCH] refine single nav ux

---
 assets/main.css              | 16 ++++++++++++++++
 layouts/_default/single.html |  8 +++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index ecc249c..0342bf3 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -1369,6 +1369,10 @@ body {
   border-radius: 0.5rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border-\[0\.5px\] {
   border-width: 0.5px;
 }
@@ -1397,6 +1401,14 @@ body {
   padding: 1.5rem;
 }
 
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -1632,6 +1644,10 @@ article blockquote {
   animation: spin 1s linear infinite;
 }
 
+.hover\:bg-black\/\[2\%\]:hover {
+  background-color: rgb(0 0 0 / 2%);
+}
+
 .dark .dark\:bg-white\/80 {
   background-color: rgb(255 255 255 / 0.8);
 }
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 173effb..9095e91 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -35,17 +35,19 @@
   <!-- Post Nav -->
   {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}<!---->
   {{ if and (gt (len $pages) 1) (in $pages . ) }}
-  <nav class="mt-24 flex rounded-lg bg-black/[3%] text-lg dark:bg-white/[8%]">
+  <nav
+    class="mt-24 flex rounded-lg bg-black/[3%] p-1.5 text-lg dark:bg-white/[8%]"
+  >
     {{ with $pages.Next . }}
     <a
-      class="flex w-1/2 items-center p-6 pr-3 no-underline"
+      class="flex w-1/2 items-center rounded-md p-6 pr-3 no-underline hover:bg-black/[2%]"
       href="{{ .Permalink }}"
       ><span class="mr-1.5">←</span><span>{{ .Name }}</span></a
     >
     {{ end }}<!---->
     {{ with $pages.Prev . }}
     <a
-      class="ml-auto flex w-1/2 items-center justify-end p-6 pl-3 no-underline"
+      class="ml-auto flex w-1/2 items-center justify-end rounded-md p-6 pl-3 no-underline hover:bg-black/[2%]"
       href="{{ .Permalink }}"
       ><span>{{ .Name }}</span><span class="ml-1.5">→</span></a
     >