update ui

assets/app.css

@@ -64,6 +64,10 @@
     @apply top-0;
   }
 
+  article {
+    @apply text-lg leading-[1.9] text-black dark:text-white;
+  }
+
   article pre {
     @apply -mx-8 !p-8 shadow-lg;
   }

assets/main.css

@@ -1361,14 +1361,18 @@ body {
   margin-right: 1.25rem;
 }
 
-.mt-1 {
+.mt-1\.5 {
-  margin-top: 0.25rem;
+  margin-top: 0.375rem;
 }
 
 .mb-3 {
   margin-bottom: 0.75rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-24 {
   margin-top: 6rem;
 }
@@ -1425,8 +1429,8 @@ body {
   display: flex;
 }
 
-.h-20 {
+.h-14 {
-  height: 5rem;
+  height: 3.5rem;
 }
 
 .h-\[5rem\] {
@@ -1449,8 +1453,8 @@ body {
   min-height: calc(100% - 10rem);
 }
 
-.w-20 {
+.w-14 {
-  width: 5rem;
+  width: 3.5rem;
 }
 
 .w-1\/2 {
@@ -1511,6 +1515,10 @@ body {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1537,6 +1545,10 @@ body {
   margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.break-words {
+  overflow-wrap: break-word;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1545,8 +1557,8 @@ body {
   border-radius: 0.5rem;
 }
 
-.border {
+.border-\[0\.5px\] {
-  border-width: 1px;
+  border-width: 0.5px;
 }
 
 .border-black\/10 {
@@ -1557,6 +1569,10 @@ body {
   background-color: rgb(255 255 255 / 0.8);
 }
 
+.\!bg-black\/5 {
+  background-color: rgb(0 0 0 / 0.05) !important;
+}
+
 .bg-black\/\[3\%\] {
   background-color: rgb(0 0 0 / 3%);
 }
@@ -1574,9 +1590,9 @@ body {
   padding-right: 2rem;
 }
 
-.px-4 {
+.px-5 {
-  padding-left: 1rem;
+  padding-left: 1.25rem;
-  padding-right: 1rem;
+  padding-right: 1.25rem;
 }
 
 .py-2 {
@@ -1596,6 +1612,10 @@ body {
   padding-bottom: 0.25rem;
 }
 
+.pb-2\.5 {
+  padding-bottom: 0.625rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1631,15 +1651,15 @@ body {
   line-height: 2.25rem;
 }
 
-.text-\[0\.9em\] {
-  font-size: 0.9em;
-}
-
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
 
+.text-\[0\.9em\] {
+  font-size: 0.9em;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1667,10 +1687,6 @@ body {
           text-decoration-line: none;
 }
 
-.opacity-70 {
-  opacity: 0.7;
-}
-
 .opacity-60 {
   opacity: 0.6;
 }
@@ -1681,6 +1697,12 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -1737,6 +1759,19 @@ body {
   top: 0px;
 }
 
+article {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  line-height: 1.9;
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.dark article {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 article pre {
   margin-left: -2rem;
   margin-right: -2rem;
@@ -1813,6 +1848,10 @@ article blockquote {
   --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
 }
 
+.dark .dark\:\!bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8) !important;
+}
+
 .dark .dark\:bg-white\/\[8\%\] {
   background-color: rgb(255 255 255 / 8%);
 }

layouts/_default/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 
-<!-- Main Title -->
+<!-- Tag Title -->
-{{ if .Title }}
+{{ if and .Title (eq .Type "tags") }}
 <h1 class="mb-24">{{ .Title }}</h1>
 {{ end }}
 
@@ -19,16 +19,21 @@
 
 {{ $avatar_url := $.Scratch.Get `avatar_url` }}<!---->
 {{ if or $avatar_url site.Params.name }}
-<div class="-mt-4 mb-20 flex">
+<div class="-mt-4 mb-20 flex items-start">
   {{ if $avatar_url }}
-  <div class="mr-5 h-20 w-20 rounded-full border border-black/10 bg-white/80 p-3 shadow-xl">
+  <div class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/80 p-3 shadow-xl">
-    <img class="my-0 rounded-full hover:animate-spin" src="{{ $avatar_url }}" alt="avatar" />
+    <img
+      class="my-0 h-14 w-14 rounded-full !bg-black/5 hover:animate-spin dark:!bg-black/80"
+      src="{{ $avatar_url }}"
+    />
   </div>
   {{ end }}<!---->
   {{ if site.Params.name }}
   <div>
-    <h1 class="mt-1 mb-3 text-3xl font-bold">{{ site.Params.name }}</h1>
+    <h1 class="mt-1.5 mb-3 text-3xl font-bold">{{ site.Params.name }}</h1>
-    <div class="">{{ site.Params.bio | default (print "Personal blog by " site.Params.name) }}</div>
+    <div class="break-words">
+      {{ site.Params.bio | default (print "Personal blog by " site.Params.name) }}
+    </div>
   </div>
   {{ end }}
 </div>
@@ -36,11 +41,11 @@
 
 {{ end }}
 
-<article class="relative my-10 first-of-type:mt-0 last-of-type:mb-0">
+<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-70">{{ .Date | time.Format ":date_medium" }}</time>
+  <time class="text-sm opacity-60">{{ .Date | time.Format ":date_medium" }}</time>
   <a class="absolute inset-0" href="{{ .Permalink }}"></a>
-</article>
+</section>
 {{ end }}
 
 <!-- Main Nav -->

layouts/_default/single.html

@@ -2,10 +2,10 @@
 
 <article>
   <header class="mb-20">
-    <h1 class="!my-0 pb-2">{{ .Title }}</h1>
+    <h1 class="!my-0 pb-2.5">{{ .Title }}</h1>
 
     {{ if ne .Type "page" }}
-    <div class="text-[0.9em] opacity-70">
+    <div class="text-sm opacity-60">
       {{ if .Date }}
       <time>{{ .Date | time.Format ":date_medium" }}</time>
       {{ end }}<!---->
@@ -24,7 +24,7 @@
   <footer class="mt-12 flex flex-wrap">
     {{ range .Params.tags }} {{ $href := print (absURL "tags/") (urlize .) }}
     <a
-      class="mr-1.5 mb-1.5 rounded-lg bg-black/[3%] px-4 py-2 no-underline dark:bg-white/[8%]"
+      class="mr-1.5 mb-1.5 rounded-lg bg-black/[3%] px-5 py-2 no-underline dark:bg-white/[8%]"
       href="{{ $href }}"
       >{{ . }}</a
     >
@@ -37,13 +37,13 @@
   {{ if and (gt (len $pages) 1) (in $pages . ) }}
   <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 p-6 pr-3 font-bold no-underline" href="{{ .Permalink }}"
+    <a class="flex w-1/2 items-center p-6 pr-3 no-underline" 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 font-bold no-underline"
+      class="ml-auto flex w-1/2 items-center justify-end p-6 pl-3 no-underline"
       href="{{ .Permalink }}"
       ><span>{{ .Name }}</span><span class="ml-1.5">→</span></a
     >