feat: adjust some styles

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%]"
-        >{{ term_name | title }}
-      </span>
+      <span class="block-bg mb-1.5 mr-1.5 rounded-lg px-5 py-1.5">{{ 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,26 +3,24 @@
 <!-- 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="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 }}">
-          #{{ term.name }} - {{ term.page_count }}
-        </a>
-      </h3>
+  <div class="block-bg flex h-full flex-col rounded-lg px-5 pb-2 md:min-h-[18rem]">
+    <h3 class="my-4 text-xl font-bold text-black dark:text-white">
+      <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>
-      {% endfor %}<!---->
+    {%for page in term.pages | slice(end=5) %}
+    <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>
-      </span>
-      {% endif %}<!---->
-    </div>
+    {% if term.pages | length > 5 %}
+    <span class="flex justify-end">
+      <a class="secondary-link mt-1 pr-2" href="{{ term.permalink }}">More >></a>
+    </span>
+    {% endif %}<!---->
   </div>
   {% endfor %}<!---->
 </div>