refine ui

assets/app.css

@@ -2,8 +2,7 @@
  * Paper
  * A simple, clean, flexible Hugo theme
  * https://github.com/nanxiaobei/hugo-paper
- * Designed by 南小北 (https://lee.so/)
+ * Designed by 南小北 https://lee.so/
- * Updated in 2022.11.16
  */
 
 @tailwind base;
@@ -24,7 +23,7 @@
     -webkit-tap-highlight-color: transparent;
     background: var(--bg);
 
-    @apply dark:bg-black;
+    @apply dark:bg-black/90;
   }
 }
 

assets/main.css

@@ -2,8 +2,7 @@
  * Paper
  * A simple, clean, flexible Hugo theme
  * https://github.com/nanxiaobei/hugo-paper
- * Designed by 南小北 (https://lee.so/)
+ * Designed by 南小北 https://lee.so/
- * Updated in 2022.11.16
  */
 
 /*
@@ -442,8 +441,7 @@ body {
 }
 
 .dark body {
-  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / 0.9);
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
 *, ::before, ::after {
@@ -1158,12 +1156,22 @@ body {
   margin-bottom: 2.5rem;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.my-2\.5 {
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+
 .-mr-8 {
   margin-right: -2rem;
 }
 
-.-mt-4 {
+.-mt-2 {
-  margin-top: -1rem;
+  margin-top: -0.5rem;
 }
 
 .mb-1 {
@@ -1182,10 +1190,6 @@ body {
   margin-bottom: 6rem;
 }
 
-.mb-3 {
-  margin-bottom: 0.75rem;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1218,14 +1222,6 @@ body {
   margin-right: auto;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
-.mt-1\.5 {
-  margin-top: 0.375rem;
-}
-
 .mt-12 {
   margin-top: 3rem;
 }
@@ -1242,12 +1238,8 @@ body {
   display: flex;
 }
 
-.hidden {
+.aspect-square {
-  display: none;
+  aspect-ratio: 1 / 1;
-}
-
-.h-14 {
-  height: 3.5rem;
 }
 
 .h-6 {
@@ -1274,8 +1266,8 @@ body {
   width: 50%;
 }
 
-.w-14 {
+.w-16 {
-  width: 3.5rem;
+  width: 4rem;
 }
 
 .w-6 {
@@ -1331,10 +1323,6 @@ body {
   flex-wrap: wrap;
 }
 
-.items-start {
-  align-items: flex-start;
-}
-
 .items-center {
   align-items: center;
 }
@@ -1442,8 +1430,8 @@ body {
   padding-bottom: 0.625rem;
 }
 
-.pb-32 {
+.pb-24 {
-  padding-bottom: 8rem;
+  padding-bottom: 6rem;
 }
 
 .pl-3 {
@@ -1454,8 +1442,8 @@ body {
   padding-right: 0.75rem;
 }
 
-.pt-20 {
+.pt-16 {
-  padding-top: 5rem;
+  padding-top: 4rem;
 }
 
 .text-center {
@@ -1516,8 +1504,8 @@ body {
   text-decoration-line: none;
 }
 
-.opacity-60 {
+.opacity-50 {
-  opacity: 0.6;
+  opacity: 0.5;
 }
 
 .shadow-xl {
@@ -1708,6 +1696,10 @@ article blockquote {
   background-position: right;
 }
 
+.dark .dark\:hover\:bg-white\/\[3\%\]:hover {
+  background-color: rgb(255 255 255 / 3%);
+}
+
 @media (min-width: 1024px) {
   .lg\:static {
     position: static;

layouts/_default/baseof.html

@@ -41,7 +41,7 @@
     {{ partial "header.html" . }}
 
     <main
-      class="prose prose-neutral relative mx-auto min-h-[calc(100%-10rem)] max-w-3xl px-8 pt-20 pb-32 dark:prose-invert"
+      class="prose prose-neutral relative mx-auto min-h-[calc(100%-10rem)] max-w-3xl px-8 pt-16 pb-24 dark:prose-invert"
     >
       {{ block "main" . }}{{ end }}
     </main>

layouts/_default/list.html

@@ -20,13 +20,13 @@
 
 {{ $avatar_url := $.Scratch.Get "avatar_url" }}<!---->
 {{ if or $avatar_url site.Params.name }}
-<div class="-mt-4 mb-20 flex items-start">
+<div class="-mt-2 mb-20 flex items-center">
   {{ if $avatar_url }}
   <div
     class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/50 p-3 shadow-xl dark:bg-white/80"
   >
     <img
-      class="my-0 h-14 w-14 rounded-full !bg-black/5 hover:animate-spin dark:!bg-black/80"
+      class="my-0 aspect-square w-16 rounded-full !bg-black/5 hover:animate-spin dark:!bg-black/80"
       src="{{ $avatar_url }}"
       alt="{{ site.Params.name | default site.Title }}"
     />
@@ -34,7 +34,7 @@
   {{ end }}<!---->
   {{ if site.Params.name }}
   <div>
-    <h1 class="mt-1.5 mb-3 text-3xl font-bold">{{ site.Params.name }}</h1>
+    <h1 class="my-2.5 text-3xl font-bold">{{ site.Params.name }}</h1>
     <div class="break-words">
       {{ site.Params.bio | default (print `A personal blog by `
       site.Params.name) }}
@@ -48,7 +48,7 @@
 
 <section class="relative my-10 first-of-type:mt-0 last-of-type:mb-0">
   <h2 class="!my-0 pb-1 !leading-none">{{ .Title }}</h2>
-  <time class="text-sm opacity-60"
+  <time class="text-sm opacity-50"
     >{{ .Date | time.Format ":date_medium" }}</time
   >
   <a class="absolute inset-0 text-[0]" href="{{ .Permalink }}">{{ .Title }}</a>

layouts/_default/single.html

@@ -5,7 +5,7 @@
     <h1 class="!my-0 pb-2.5">{{ .Title }}</h1>
 
     {{ if ne .Type "page" }}
-    <div class="text-sm opacity-60">
+    <div class="text-sm opacity-50">
       {{ if .Date }}
       <time>{{ .Date | time.Format ":date_medium" }}</time>
       {{ end }}<!---->
@@ -40,14 +40,14 @@
   <nav class="mt-24 flex rounded-lg bg-black/[3%] text-lg dark:bg-white/[8%]">
     {{ with $pages.Next . }}
     <a
-      class="flex w-1/2 items-center rounded-l-md p-6 pr-3 no-underline hover:bg-black/[2%]"
+      class="flex w-1/2 items-center rounded-l-md p-6 pr-3 no-underline hover:bg-black/[2%] dark:hover:bg-white/[3%]"
       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 rounded-r-md p-6 pl-3 no-underline hover:bg-black/[2%]"
+      class="ml-auto flex w-1/2 items-center justify-end rounded-r-md p-6 pl-3 no-underline hover:bg-black/[2%] dark:hover:bg-white/[3%]"
       href="{{ .Permalink }}"
       ><span>{{ .Name }}</span><span class="ml-1.5">→</span></a
     >

layouts/partials/footer.html

@@ -1,5 +1,5 @@
 <footer
-  class="opaco mx-auto flex h-[5rem] max-w-3xl items-center px-8 text-[0.9em] opacity-60"
+  class="opaco mx-auto flex h-[5rem] max-w-3xl items-center px-8 text-[0.9em] opacity-50"
 >
   <div class="mr-auto">
     &copy; {{ now.Year }}
@@ -13,6 +13,6 @@
     href="https://github.com/nanxiaobei/hugo-paper"
     rel="noopener"
     target="_blank"
-    >▷ Paper 6</a
+    >Theme Paper</a
   >
 </footer>