refactor: replace some utility classes with UnoCSS

14 files changed, 23 insertions, 23 deletions

diff --git a/layouts/_partials/components/logo.html b/layouts/_partials/components/logo.html
index 1bb967a0..63f500c5 100644
--- a/layouts/_partials/components/logo.html
+++ b/layouts/_partials/components/logo.html
@@ -7,6 +7,6 @@
 <a href="{{ .Site.LanguagePrefix }}/{{ $link }}"
     class="title-image-container {{ $class }}">
     <img src="{{ $src }}" alt="Logo"
-        class="invert-if-dark title-image {{ $imageClass }}"
+        class="dark:invert title-image {{ $imageClass }}"
         style="view-transition-name: title-image" />
 </a>
diff --git a/layouts/_partials/components/tags.html b/layouts/_partials/components/tags.html
index b08230d9..78d87f5b 100644
--- a/layouts/_partials/components/tags.html
+++ b/layouts/_partials/components/tags.html
@@ -1,3 +1,3 @@
 {{ range .Params.tags }}
-<a class="tag font-secondary no-underline!" href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">#{{ . }}</a>
+<a class="tag text-secondary no-underline!" href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">#{{ . }}</a>
 {{ end }}
diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html
index baf79c06..38bedc12 100644
--- a/layouts/_partials/footer.html
+++ b/layouts/_partials/footer.html
@@ -11,7 +11,7 @@
         <ul class="list-none flex gap-1 ps-0 my-2 mx-0 md:justify-end">
             {{ range .Site.Params.footerInternalLinks }}
             <li><a href="{{ .link }}" title="{{ .name }}">{{ .name }}</a></li>
-            <li class="font-secondary last:hidden ml-1">/</li>
+            <li class="text-secondary last:hidden ml-1">/</li>
             {{ end }}
             <li class="inline-flex items-center">
                 {{ if eq .Site.Language.Lang "en" }}
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 554b1f58..754bbf2d 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -28,7 +28,7 @@
       {{- $entry := index $switch $lang -}}
       <a href="{{ $entry.url }}" data-umami-event="🌍 Switch Language"
           class="no-swup" title="{{ $entry.label }}">
-        <img src="/img/globe.svg" class="invert-if-dark block w-[1.2em] h-[1.2em]">
+        <img src="/img/globe.svg" class="dark:invert block w-[1.2em] h-[1.2em]">
       </a>
   </div>
 </header>
diff --git a/layouts/_partials/home/home-nav.html b/layouts/_partials/home/home-nav.html
index 4dea2222..2d8e539d 100644
--- a/layouts/_partials/home/home-nav.html
+++ b/layouts/_partials/home/home-nav.html
@@ -19,10 +19,10 @@
                     (strings.HasPrefix $.Page.RelPermalink "/tags/"))
             ) }}
         {{ end }}
-        <li id="search-instruction" class="text-size-sm font-secondary ml-2">
+        <li id="search-instruction" class="text-size-sm text-secondary ml-2">
             <span>{{ T "searchInstruction" }}</span>
         </li>
-        <li class="absolute right-0 invert-if-dark">
+        <li class="absolute right-0 dark:invert">
             <a href="{{ .Site.LanguagePrefix }}/stats"
                 class="opacity-50 transition-opacity duration-300 hover:opacity-100
                 {{ if eq "/stats/" $.Page.RelPermalink }} opacity-100 font-bolder{{ end }}"
diff --git a/layouts/_partials/items/post-small.html b/layouts/_partials/items/post-small.html
index 30cbf60f..644cb106 100644
--- a/layouts/_partials/items/post-small.html
+++ b/layouts/_partials/items/post-small.html
@@ -1,9 +1,9 @@
 <li class="flex justify-between text-size-lg">
     <a href="{{ .RelPermalink }}" data-umami-event="🗃️ Click Post Link from Category Page">
-        {{ .Title }}{{ with .Params.subtitle }}：<span class="font-secondary">{{. }}</span>
+        {{ .Title }}{{ with .Params.subtitle }}：<span class="text-secondary">{{. }}</span>
         {{ end }}
     </a>
-    <time class="text-size-sm font-mono font-secondary flex-shrink-0">
+    <time class="text-size-sm font-mono text-secondary flex-shrink-0">
         {{ .Date.Format "2006-1-2" }}
     </time>
 </li>
diff --git a/layouts/_partials/items/post.html b/layouts/_partials/items/post.html
index 8bbd68a8..3e426c56 100644
--- a/layouts/_partials/items/post.html
+++ b/layouts/_partials/items/post.html
@@ -4,7 +4,7 @@
     style="view-transition-name: post-{{ .ctx.File.UniqueID }}">
     <header class="w-full md:flex md:justify-between">
         <div>
-            <p class="font-mono font-secondary">
+            <p class="font-mono text-secondary">
                 <time>{{ .ctx.Date.Format "January 2" }},</time>
                 <span>in <a href="/{{ .Section }}/">{{ .ctx.Section }}</a></span>
             </p>
diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index c1d4cd55..1bd639e9 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -2,7 +2,7 @@
   <!-- 操作按钮组 -->
   <div class="flex justify-between items-center mb-6">
     <div class="flex gap-2">
-      <button class="invert-if-dark flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" id="comments-toggle" title="评论">
+      <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" id="comments-toggle" title="评论">
         <img src="/img/comments.svg" width="20" height="20" alt="评论" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
         <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="comment-count">...</span>
         <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">评论</div>
@@ -10,7 +10,7 @@
 
       <!-- 点赞按钮 -->
       <div class="relative" id="like-container-{{ .File.UniqueID | urlize }}">
-        <button class="invert-if-dark flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
+        <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
                 onclick="sendLike('{{ .File.UniqueID | urlize }}')"
                 id="like-btn-{{ .File.UniqueID | urlize }}"
                 title="为这篇文章献上心脏"
@@ -23,11 +23,11 @@
     </div>
 
     <div class="flex gap-1">
-      <a href="https://t.me/teaparty418" target="_blank" class="invert-if-dark flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs">
+      <a href="https://t.me/teaparty418" target="_blank" class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs">
         <img src="/img/paper-plane.svg" width="16" height="16" alt="Telegram" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
         <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">Telegram 群组</div>
       </a>
-      <a href="/sponsor" class="invert-if-dark flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs">
+      <a href="/sponsor" class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs">
         <img src="/img/coffee.svg" width="16" height="16" alt="赞助" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
         <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">赞助作者</div>
       </a>
diff --git a/layouts/_partials/posts/comment.html b/layouts/_partials/posts/comment.html
index 2a0f1027..49638618 100644
--- a/layouts/_partials/posts/comment.html
+++ b/layouts/_partials/posts/comment.html
@@ -2,17 +2,17 @@
     {{ with .Params.comments }}
     <!-- Static Comments -->
     <div class="my-8">
-        <p class="font-secondary">{{ T "postPage.staticCommentsSectionHeader" }}</p>
+        <p class="text-secondary">{{ T "postPage.staticCommentsSectionHeader" }}</p>
         {{ range . }}
             <div class="text-xl border-b border-solid border-[#ccc] py-4 px-1">
                 <div class="mb-4 flex justify-between">
                     <span class="font-bold">{{ .name }}</span>
-                    <span class="font-secondary">{{ .date }}</span>
+                    <span class="text-secondary">{{ .date }}</span>
                 </div>
                 <div>
                     {{ .content | safeHTML }}
                 </div>
-                <div class="text-4 text-right font-secondary">
+                <div class="text-4 text-right text-secondary">
                     {{ with .source }}
                     <p class="font-mono">{{ T "postPage.originallyPostedOn" . }}</p>
                     {{ end }}
diff --git a/layouts/_partials/posts/endnotes.html b/layouts/_partials/posts/endnotes.html
index 83004f0f..364becab 100644
--- a/layouts/_partials/posts/endnotes.html
+++ b/layouts/_partials/posts/endnotes.html
@@ -1,6 +1,6 @@
 {{ if .Params.endnotes }}
 <hr>
-<div id="post-endnotes" class="font-secondary text-4">
+<div id="post-endnotes" class="text-secondary text-4">
     <ul class="list-none">
       {{ range .Params.endnotes }}
       <li class="flex gap-4 pl-4"><span>→</span> {{ . | markdownify }}</li>
diff --git a/layouts/_partials/posts/now-read-this.html b/layouts/_partials/posts/now-read-this.html
index 8a9be489..dae3aca0 100644
--- a/layouts/_partials/posts/now-read-this.html
+++ b/layouts/_partials/posts/now-read-this.html
@@ -6,10 +6,10 @@
       <a class="font-800" href="{{ .RelPermalink }}" data-umami-event="🤔 Click Related Post">
           {{ .LinkTitle }}
           {{ with .Params.subtitle }}
-              <span class="font-secondary font-normal">：{{ . }}</span>
+              <span class="text-secondary font-normal">：{{ . }}</span>
           {{ end }}
       </a>
-      <span class="font-secondary">⏱️ {{ .ReadingTime }}min </span>
+      <span class="text-secondary">⏱️ {{ .ReadingTime }}min </span>
   </div>
   <div class="font-light">
       <p>{{ .Summary | plainify }}</p>
diff --git a/layouts/_partials/stats/external-link-rank.html b/layouts/_partials/stats/external-link-rank.html
index 0bf32c5a..70286b30 100644
--- a/layouts/_partials/stats/external-link-rank.html
+++ b/layouts/_partials/stats/external-link-rank.html
@@ -20,7 +20,7 @@
                         class="w-4 h-4"/>
                     {{ $label }}
                 </a>
-                <span class="font-secondary font-mono">{{ $count }}</span>
+                <span class="text-secondary font-mono">{{ $count }}</span>
             </div>
             <div class="bg-gray-200 absolute top-0 left-0 right-0 bottom-0 -z-1" style="width:{{ $percent }}%"></div>
         </li>
diff --git a/layouts/_partials/stats/publish-time-chart.html b/layouts/_partials/stats/publish-time-chart.html
index 795ecf25..3fa35078 100644
--- a/layouts/_partials/stats/publish-time-chart.html
+++ b/layouts/_partials/stats/publish-time-chart.html
@@ -41,7 +41,7 @@
 <div class="w-full max-w-[700px] my-4">
     <div class="flex items-center gap-4 mb-4">
         <div class="text-size-2xl flex-shrink-0">☀️</div>
-        <div class="flex gap-2 w-full h-6 invert-if-dark">
+        <div class="flex gap-2 w-full h-6 dark:invert">
             {{ range $fuzzyTimes }}
                 {{ $count := index $timeCounts .label }}
                 {{ if gt $total 0 }}
@@ -68,7 +68,7 @@
             {{ if gt $count 0 }}
                 {{ $percentage := div (mul $count 100.0) $total }}
                 <div class="flex flex-col items-center text-size-xs
-                    font-secondary font-mono"
+                    text-secondary font-mono"
                     style="width: {{ printf "%.1f" $percentage }}%;">
                     <span class="font-600 text-[var(--primary-text-color)]">{{ $count }}</span>
                 </div>
diff --git a/layouts/_partials/stats/word-count-chart.html b/layouts/_partials/stats/word-count-chart.html
index ad7347db..835ecbda 100644
--- a/layouts/_partials/stats/word-count-chart.html
+++ b/layouts/_partials/stats/word-count-chart.html
@@ -35,7 +35,7 @@
             w-4 gap-1 h-[200px] relative">
           <div class="text-size-[0.65rem]"
               style="writing-mode: vertical-rl;">{{ $val }}</div>
-          <div class="w-full bg-gray-900 flex-shrink-0 transition invert-if-dark"
+          <div class="w-full bg-gray-900 flex-shrink-0 transition dark:invert"
                style="height: {{ printf "%.1f" $height }}%;
                       background-color: rgba(20,20,20,{{ printf "%.2f" $opacity }});"></div>
         </div>