refactor: replace some utility classes with UnoCSS

Former-commit-id: c476bb450e62fd7cb8bdf22d45c4422f92c1cc8f

19 files changed, 30 insertions, 30 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>
diff --git a/layouts/cards/page.html b/layouts/cards/page.html
index 551b69de..232c9593 100644
--- a/layouts/cards/page.html
+++ b/layouts/cards/page.html
@@ -20,7 +20,7 @@
         {{- /* 如果有文章引用这个卡片，就显示它们 */ -}}
         {{ if gt (len $referencedBy) 0 }}
         <section class="related-posts post-content my-5">
-            <h2 class="text-5 font-secondary m-0">引用了本卡片的文章</h2>
+            <h2 class="text-5 text-secondary m-0">引用了本卡片的文章</h2>
             <ul class="my-4">
                 {{- range $referencedBy }}
                     <li>
diff --git a/layouts/fictions/page.html b/layouts/fictions/page.html
index d7724f89..dda4e884 100644
--- a/layouts/fictions/page.html
+++ b/layouts/fictions/page.html
@@ -12,7 +12,7 @@
             class="xerox text-4xl font-900"
             data-pagefind-meta="title"
         ><span style="view-transition-name: post-{{ .File.UniqueID }}">{{ .Title }}</span></h1>
-        <div class="font-secondary">{{ partial "components/date" . }}</div>
+        <div class="text-secondary">{{ partial "components/date" . }}</div>
       </header>
 
       <!-- Post Content -->
diff --git a/layouts/library/page.html b/layouts/library/page.html
index 7c125eb6..57007f04 100644
--- a/layouts/library/page.html
+++ b/layouts/library/page.html
@@ -32,7 +32,7 @@
             </div>
             <!-- Endnotes -->
             {{ partial "posts/endnotes" . }}
-            <div class="text-size-base font-secondary">
+            <div class="text-size-base text-secondary">
                 <p>于 {{ partial "components/date" . }} 读完</p>
             </div>
         </div>
diff --git a/layouts/posts/page.html b/layouts/posts/page.html
index f965f0bb..470a00c1 100644
--- a/layouts/posts/page.html
+++ b/layouts/posts/page.html
@@ -22,12 +22,12 @@
         <h1 class="text-size-3xl font-900 xerox">
           <span data-pagefind-meta="title">{{ .Title }}</span>
           {{ with .Params.subtitle }}
-            <small class="block font-secondary font-italic text-size-xl">{{ . }}</small>
+            <small class="block text-secondary font-italic text-size-xl">{{ . }}</small>
           {{ end }}
         </h1>
         <!-- Post Meta -->
         <div class="flex flex-wrap items-center gap-2">
-            <span class="font-secondary">{{ partial "components/date" . }}</span>
+            <span class="text-secondary">{{ partial "components/date" . }}</span>
             {{ if or .Params.categories .Params.tags }}<span>·</span>{{ end }}
             {{ partial "components/category-pill" . }}
             {{ partial "components/tags" . }}
diff --git a/layouts/section.html b/layouts/section.html
index 47ece146..7cb4681a 100644
--- a/layouts/section.html
+++ b/layouts/section.html
@@ -10,7 +10,7 @@
                 py-2 text-6 sticky top-0 bg-[var(--background-color)] z-1
                 flex justify-between items-center">
                 {{ .Key }}
-                <small class="font-mono font-secondary text-3">{{ T "archivePage.postCountAnnual" (len .Pages) }}</small>
+                <small class="font-mono text-secondary text-3">{{ T "archivePage.postCountAnnual" (len .Pages) }}</small>
             </h1>
 
             {{ range .Pages.GroupByDate "January" }}
@@ -19,7 +19,7 @@
                     <h2 class="text-size-lg inline-block w-full m-0
                         flex justify-between items-center">
                         {{ .Key }}
-                        <small class="font-mono font-secondary text-3">{{ T "archivePage.postCountMonthly" (len .Pages) }}</small>
+                        <small class="font-mono text-secondary text-3">{{ T "archivePage.postCountMonthly" (len .Pages) }}</small>
                     </h2>
                 </summary>
                 <ul class="ps-0 flex flex-col gap-2 list-none leading-relaxed">