feat: adjust some styles

static/app.css

@@ -70,4 +70,24 @@
   .blur-header {
     @apply bg-black/10 backdrop-blur dark:bg-white/10;
   }
+
+  .block-bg {
+    @apply bg-black/[3%] dark:bg-white/[8%];
+  }
+
+  .block-hover {
+    @apply hover:bg-black/[5%] dark:hover:bg-white/[11%];
+  }
+
+  .block-hover-mask {
+    @apply hover:bg-black/[2%] dark:hover:bg-white/[3%];
+  }
+
+  .primary-link {
+    @apply text-black no-underline hover:opacity-80 dark:text-white;
+  }
+
+  .secondary-link {
+    @apply text-[var(--tw-prose-body)] no-underline hover:text-black dark:hover:text-white;
+  }
 }

static/main.css

@@ -1238,6 +1238,10 @@ body {
   margin-right: auto;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-12 {
   margin-top: 3rem;
 }
@@ -1254,6 +1258,10 @@ body {
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
@@ -1278,10 +1286,6 @@ body {
   min-height: 12rem;
 }
 
-.min-h-\[18rem\] {
-  min-height: 18rem;
-}
-
 .min-h-\[3\.5rem\] {
   min-height: 3.5rem;
 }
@@ -1322,10 +1326,6 @@ body {
   max-width: 56rem;
 }
 
-.flex-auto {
-  flex: 1 1 auto;
-}
-
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1338,6 +1338,10 @@ body {
   cursor: pointer;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1354,10 +1358,6 @@ body {
   align-items: center;
 }
 
-.items-stretch {
-  align-items: stretch;
-}
-
 .justify-start {
   justify-content: flex-start;
 }
@@ -1382,6 +1382,10 @@ body {
   gap: 0.625rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -1447,10 +1451,6 @@ body {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-black\/\[3\%\] {
-  background-color: rgb(0 0 0 / 3%);
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1460,10 +1460,6 @@ body {
   background-color: rgb(255 255 255 / 0.5);
 }
 
-.bg-white\/80 {
-  background-color: rgb(255 255 255 / 0.8);
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -1750,6 +1746,60 @@ article {
   background-color: rgb(255 255 255 / 0.1);
 }
 
+.block-bg {
+  background-color: rgb(0 0 0 / 3%);
+}
+
+:is(.dark .block-bg) {
+  background-color: rgb(255 255 255 / 8%);
+}
+
+.block-hover:hover {
+  background-color: rgb(0 0 0 / 5%);
+}
+
+:is(.dark .block-hover:hover) {
+  background-color: rgb(255 255 255 / 11%);
+}
+
+.block-hover-mask:hover {
+  background-color: rgb(0 0 0 / 2%);
+}
+
+:is(.dark .block-hover-mask:hover) {
+  background-color: rgb(255 255 255 / 3%);
+}
+
+.primary-link {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+  text-decoration-line: none;
+}
+
+.primary-link:hover {
+  opacity: 0.8;
+}
+
+:is(.dark .primary-link) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.secondary-link {
+  color: var(--tw-prose-body);
+  text-decoration-line: none;
+}
+
+.secondary-link:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+:is(.dark .secondary-link:hover) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .\[background\:url\(\.\/icons\/theme\.svg\)_left_center\/cover_no-repeat\] {
   background: url(./icons/theme.svg) left center/cover no-repeat;
 }
@@ -1801,10 +1851,6 @@ article {
   animation: spin 1s linear infinite;
 }
 
-.hover\:bg-black\/\[2\%\]:hover {
-  background-color: rgb(0 0 0 / 2%);
-}
-
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
@@ -1823,10 +1869,6 @@ article {
   background-color: rgb(255 255 255 / 15%);
 }
 
-:is(.dark .dark\:bg-white\/\[8\%\]) {
-  background-color: rgb(255 255 255 / 8%);
-}
-
 :is(.dark .dark\:text-black) {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1846,13 +1888,13 @@ article {
   background-position: right;
 }
 
-:is(.dark .dark\:hover\:bg-white\/\[3\%\]:hover) {
-  background-color: rgb(255 255 255 / 3%);
-}
-
 @media (min-width: 768px) {
-  .md\:w-1\/2 {
+  .md\:min-h-\[18rem\] {
-    width: 50%;
+    min-height: 18rem;
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 

templates/archive.html

@@ -13,7 +13,7 @@
     {% for post in posts %}
     <li>
       <div class="my-2 flex items-center justify-between">
-        <a class="no-underline" href="{{ post.permalink }}">{{ post.title }}</a>
+        <a class="secondary-link" href="{{ post.permalink }}">{{ post.title }}</a>
         <time class="font-mono text-sm opacity-60">{{ post.date | date(format="%m-%d") }}</time>
       </div>
     </li>

templates/index.html

@@ -36,7 +36,7 @@
           <nav class="flex justify-start space-x-3 dark:invert">
             {% for social in config.extra.profile.social %}
             <a
-              class="h-8 w-8 text-[0] [background:var(--url)_center_center/cover_no-repeat]"
+              class="primary-link h-8 w-8 text-[0] [background:var(--url)_center_center/cover_no-repeat]"
               style="--url: url(./icons/{{ social.name }}.svg)"
               href="{{ social.url }}"
               target="_blank"

templates/page.html

@@ -7,7 +7,7 @@
   </header>
 
   {% if page.toc %}
-  <div class="mb-12 flex rounded-lg bg-black/[3%] p-2 text-lg dark:bg-white/[8%]">
+  <div class="block-bg mb-12 flex rounded-lg p-2 text-lg">
     <details>
       <summary class="cursor-pointer py-1 pl-4">
         <span>Table of Contents</span>
@@ -51,12 +51,10 @@
     {% endfor %}<!---->
     {% for term_name in term_names | sort %}<!---->
     <div class="mb-2 flex flex-wrap">
-      <span class="mb-1.5 mr-1.5 rounded-lg bg-black/[3%] px-5 py-1.5 dark:bg-white/[8%]"
+      <span class="block-bg mb-1.5 mr-1.5 rounded-lg px-5 py-1.5">{{ term_name | title }} </span>
-        >{{ term_name | title }}
-      </span>
       {% for term in page.taxonomies[term_name] %}<!---->
       <a
-        class="mb-1.5 mr-1.5 rounded-lg bg-black/[3%] px-5 py-1.5 no-underline dark:bg-white/[8%]"
+        class="block-bg block-hover mb-1.5 mr-1.5 rounded-lg px-5 py-1.5 no-underline"
         href="{{ get_taxonomy_url(kind=term_name, name=term) | safe }}"
         >{{ term }}</a
       >
@@ -69,17 +67,17 @@
   <!-- Post Nav -->
   {% if not config.extra.disable_post_navigation %}<!---->
   {% if page.lower or page.higher %}
-  <nav class="mt-12 flex rounded-lg bg-black/[3%] text-lg dark:bg-white/[8%]">
+  <nav class="block-bg mt-12 flex rounded-lg text-lg">
     {% if page.higher %}
     <a
-      class="flex w-1/2 items-center rounded-l-md p-6 pr-3 font-semibold no-underline hover:bg-black/[2%] dark:hover:bg-white/[3%]"
+      class="block-hover-mask flex w-1/2 items-center rounded-l-md p-6 pr-3 font-semibold no-underline"
       href="{{ page.higher.permalink }}"
       ><span class="mr-1.5">←</span><span>{{ page.higher.title }}</span></a
     >
     {% endif %}<!---->
     {% if page.lower %}
     <a
-      class="ml-auto flex w-1/2 items-center justify-end rounded-r-md p-6 pl-3 font-semibold no-underline hover:bg-black/[2%] dark:hover:bg-white/[3%]"
+      class="block-hover-mask ml-auto flex w-1/2 items-center justify-end rounded-r-md p-6 pl-3 font-semibold no-underline"
       href="{{ page.lower.permalink }}"
       ><span>{{ page.lower.title }}</span><span class="ml-1.5">→</span></a
     >

templates/partials/header.html

@@ -66,7 +66,7 @@
         {% for menu in config.extra.menu %}
         <li>
           <a
-            class="block py-2 text-center text-lg font-medium text-black dark:text-white lg:px-3 lg:py-0"
+            class="primary-link block py-2 text-center text-lg font-medium lg:px-3 lg:py-0"
             href="{{ menu.url }}"
             >{{ menu.name }}</a
           >

templates/partials/page_list.html

@@ -10,7 +10,7 @@
 
 {% for page in pages %}
 <section
-  class="relative mb-4 rounded-lg bg-white/80 p-4 first-of-type:mt-0 last-of-type:mb-0 active:scale-95 dark:bg-white/[8%] lg:mb-6 lg:p-6"
+  class="block-bg relative mb-4 rounded-lg p-4 first-of-type:mt-0 last-of-type:mb-0 active:scale-95 lg:mb-6 lg:p-6"
 >
   <h2 class="!my-0 pb-1 font-bold !leading-none">{{ page.title }}</h2>
 

templates/projects.html

@@ -7,7 +7,7 @@
 
 {% for project in data.project %}
 <div class="not-prose min-h-[12rem] w-full py-2">
-  <div class="flex h-full w-full flex-col rounded-lg bg-black/[3%] px-5 py-1.5 dark:bg-white/[8%]">
+  <div class="block-bg flex h-full w-full flex-col rounded-lg px-5 py-1.5">
     <h3 class="my-2 text-xl font-bold text-black dark:text-white">{{ project.name }}</h3>
     <p>{{ project.desc }}</p>
     <div class="my-2 flex items-center justify-between">

templates/taxonomy_list.html

@@ -3,27 +3,25 @@
 <!-- Taxonomy Title -->
 <h1 class="mb-16">{{ taxonomy.name | title }}</h1>
 
-<div class="not-prose flex flex-auto flex-wrap">
+<div class="not-prose grid grid-cols-1 gap-4 md:grid-cols-2">
   {% for term in terms %}
-  <div class="min-h-[18rem] w-full items-stretch p-2 md:w-1/2">
+  <div class="block-bg flex h-full flex-col rounded-lg px-5 pb-2 md:min-h-[18rem]">
-    <div class="flex h-full flex-col rounded-lg bg-black/[3%] px-5 py-1.5 dark:bg-white/[8%]">
     <h3 class="my-4 text-xl font-bold text-black dark:text-white">
-        <a class="no-underline" href="{{ term.permalink }}">
+      <a class="primary-link" href="{{ term.permalink }}">
         #{{ term.name }} - {{ term.page_count }}
       </a>
     </h3>
 
     {%for page in term.pages | slice(end=5) %}
-      <a class="my-0.5 no-underline" href="{{ page.permalink }}">{{ page.title }}</a>
+    <a class="secondary-link my-0.5" href="{{ page.permalink }}">{{ page.title }}</a>
     {% endfor %}<!---->
 
     {% if term.pages | length > 5 %}
     <span class="flex justify-end">
-        <a class="my-1 pr-2 no-underline" href="{{ term.permalink }}">More >></a>
+      <a class="secondary-link mt-1 pr-2" href="{{ term.permalink }}">More >></a>
     </span>
     {% endif %}<!---->
   </div>
-  </div>
   {% endfor %}<!---->
 </div>