From ec41236bc88a0762656413c38044ffa256bd93cb Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Thu, 17 Jul 2025 11:25:10 +0800
Subject: refactor: avoid using straight value in UnoCSS

---
 content/linkroll.md                             |  4 +-
 layouts/_partials/components/global-search.html |  2 +-
 layouts/_partials/footer.html                   | 10 ++--
 layouts/_partials/header.html                   | 10 ++--
 layouts/_partials/home/home-nav.html            |  2 +-
 layouts/_partials/home/latest-cards.html        |  4 +-
 layouts/_partials/items/book.html               |  2 +-
 layouts/_partials/items/card.html               |  4 +-
 layouts/_partials/items/post-small.html         |  4 +-
 layouts/_partials/items/post.html               |  4 +-
 layouts/_partials/posts/comment.html            |  2 +-
 layouts/_partials/posts/endnotes.html           |  2 +-
 layouts/_partials/posts/now-read-this.html      |  4 +-
 layouts/_partials/taxonomy/tag-pill.html        |  4 +-
 layouts/_shortcodes/callout.html                |  4 +-
 layouts/_shortcodes/link.html                   |  2 +-
 layouts/_shortcodes/quotecard.html              |  6 +--
 layouts/cards/section.html                      |  4 +-
 layouts/cards/single.html                       |  6 +--
 layouts/fictions/section.html                   | 17 ++++---
 layouts/library/page.html                       | 10 ++--
 layouts/library/section.html                    |  4 +-
 layouts/library/yearlist.html                   |  2 +-
 layouts/page.html                               |  2 +-
 layouts/posts/page.html                         |  8 +--
 layouts/section.html                            |  8 +--
 layouts/term.html                               |  2 +-
 uno.config.js                                   | 67 +++++++++----------------
 28 files changed, 94 insertions(+), 106 deletions(-)

diff --git a/content/linkroll.md b/content/linkroll.md
index 59e0bd37..609a12b3 100644
--- a/content/linkroll.md
+++ b/content/linkroll.md
@@ -11,7 +11,7 @@ aliases:
 
 ## 我常读的中文博客
 
-<div class="flex flex-wrap gap-[1rem]">
+<div class="flex flex-wrap gap-4">
 {{< link link="https://www.velasx.com/" title="Velas 电波站" >}}
 {{< link link="https://brocalife.com/" title="白洛嘉" >}}
 {{< link link="https://onojyun.com/" title="莫比乌斯" >}}
@@ -33,7 +33,7 @@ aliases:
 
 ## 我常听的中文播客
 
-<div class="flex flex-wrap gap-[1rem]">
+<div class="flex flex-wrap gap-4">
 {{< link type="podcast" title="独树不成林" link="https://podcasts.apple.com/cn/podcast/%E7%8B%AC%E6%A0%91%E4%B8%8D%E6%88%90%E6%9E%97/id1711052890" image="https://image.guhub.cn/uPic/2025/06/Fp3PROfjHhWN5OjBQf6Y8lUh3KkB.png@small.png" >}}
 {{< link type="podcast" title="碳基生物生存指南" link="https://podcasts.apple.com/cn/podcast/%E7%A2%B3%E5%9F%BA%E7%94%9F%E7%89%A9%E7%94%9F%E5%AD%98%E6%8C%87%E5%8D%97/id1707385930" image="https://image.guhub.cn/uPic/2025/06/Fj8-4YU1LHRuvPF76MLRlxPjzOON.png@small.png" >}}
 {{< link type="podcast" title="没理想编辑部" link="https://podcasts.apple.com/cn/podcast/%E6%B2%A1%E7%90%86%E6%83%B3%E7%BC%96%E8%BE%91%E9%83%A8/id1494093522" image="https://image.guhub.cn/uPic/2025/06/aHR0cHM6Ly9jZG4udmlzdG9waWEuY29tLmNuL2ltZy9wb2RjYXN0LW1seGZtLXYxLmpwZw==.jpg@small.jpeg" >}}
diff --git a/layouts/_partials/components/global-search.html b/layouts/_partials/components/global-search.html
index a4b82122..aa654306 100644
--- a/layouts/_partials/components/global-search.html
+++ b/layouts/_partials/components/global-search.html
@@ -18,7 +18,7 @@
 <div id="global-search-container">
     <div id="global-search"
         class="fixed -z-10 hidden top-0 left-0 right-0 bottom-0 items-center justify-center">
-        <div id="global-search-close" class="absolute top-0 right-0 px-4 text-[3rem] cursor-pointer">×</div>
+        <div id="global-search-close" class="absolute top-0 right-0 px-4 text-12 cursor-pointer">×</div>
         <!-- Pagefind Search -->
         <div id="pagefind" class="max-h-[90vh] overflow-y-auto w-full m-4 md:w-[600px]"></div>
         <script>
diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html
index 6f9a9126..776e12a9 100644
--- a/layouts/_partials/footer.html
+++ b/layouts/_partials/footer.html
@@ -1,4 +1,4 @@
-<footer class="my-[2rem] mx-auto font-mono
+<footer class="my-8 mx-auto font-mono
     md:w-[var(--page-width)] md:flex md:justify-between">
     <!-- copyright -->
     <section>
@@ -8,10 +8,10 @@
     <!-- links -->
     <section class="flex flex-col md:items-end">
         <!-- Internal Links -->
-        <ul class="list-none flex gap-[0.25rem] ps-0 my-[0.5rem] mx-0 md:justify-end">
+        <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-[0.25rem]">/</li>
+            <li class="font-secondary last:hidden ml-1">/</li>
             {{ end }}
             <li class="inline-flex items-center">
                 {{ if eq .Site.Language.Lang "en" }}
@@ -25,10 +25,10 @@
         </ul>
 
         <!-- External Links -->
-        <ul class="list-style-none flex gap-[0.5rem] ps-0 my-[0.5rem] mx-0 md:justify-end">
+        <ul class="list-style-none flex gap-2 ps-0 my-2 mx-0 md:justify-end">
             {{ range .Site.Params.footerExternalLinks }}
             <li class="inline-flex items-center"><a href="{{ .link }}" title="{{ .name }}" target="_blank">
-                <img class="h-[1rem] w-auto inline-block rounded-full grayscale dark:invert" src="{{ .icon }}" />
+                <img class="h-4 w-auto inline-block rounded-full grayscale dark:invert" src="{{ .icon }}" />
             </a></li>
             {{ end }}
         </ul>
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 04ea6695..f379711c 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,18 +1,18 @@
 <header id="site-header">
   <!-- Header Title -->
-  <div class="flex flex-col items-center gap-[0.5rem]">
+  <div class="flex flex-col items-center gap-2">
     {{ partial "components/logo" (dict "imageClass" "w-[10rem]") }}
-    <a class="text-[2rem] font-900 text-center tracking-[.15rem]
+    <a class="text-8 font-900 text-center tracking-widest
         xerox underline-offset-10 underline-3"
         href="{{ .Site.LanguagePrefix }}/"
       >{{ .Site.Title }}</a
     >
   </div>
   <!-- Navigation -->
-  <div class="flex justify-center items-center gap-[0.75rem] pl-[1rem]">
-      <nav class="my-[1rem] flex justify-center items-center w-fit rounded-[1rem] overflow-hidden">
+  <div class="flex justify-center items-center gap-3 pl-4">
+      <nav class="my-4 flex justify-center items-center w-fit rounded-4 overflow-hidden">
         {{ range .Site.Params.nav }}
-        <a class="inline-block py-[0.25rem] px-[0.5rem] first:pl-[0.75rem] last:pr-[0.75rem]
+        <a class="inline-block py-1 px-2 first:pl-3 last:pr-3
             block hover:no-underline
             {{ if strings.Contains $.Page.RelPermalink .link }}
             text-[var(--text-color)] bg-[var(--block-background-color)]
diff --git a/layouts/_partials/home/home-nav.html b/layouts/_partials/home/home-nav.html
index 34ea9a8a..69e48615 100644
--- a/layouts/_partials/home/home-nav.html
+++ b/layouts/_partials/home/home-nav.html
@@ -19,7 +19,7 @@
                     (strings.HasPrefix $.Page.RelPermalink "/tags/"))
             ) }}
         {{ end }}
-        <li id="search-instruction" class="text-[0.9rem] font-secondary ml-2">
+        <li id="search-instruction" class="text-size-sm font-secondary ml-2">
             <span>{{ T "searchInstruction" }}</span>
         </li>
         <li class="absolute right-0 invert-if-dark">
diff --git a/layouts/_partials/home/latest-cards.html b/layouts/_partials/home/latest-cards.html
index 28a3a2f9..220a0d94 100644
--- a/layouts/_partials/home/latest-cards.html
+++ b/layouts/_partials/home/latest-cards.html
@@ -1,7 +1,7 @@
 {{ if eq .Site.Language.Lang "zh" }}
 <!-- Latest Cards -->
-<section class="my-[1rem]">
-    <div class="p-[5px] flex w-full overflow-x-auto gap-[1rem] items-stretch">
+<section class="my-4">
+    <div class="p-[5px] flex w-full overflow-x-auto gap-4 items-stretch">
         {{- $cards := .Site.GetPage "section" "cards" }}  <!-- 获取 "cards" 部分的内容 -->
         {{- $paginator := .Paginate $cards.Pages 4 }}  <!-- 对该部分内容进行分页 -->
         {{- range $paginator.Pages }}
diff --git a/layouts/_partials/items/book.html b/layouts/_partials/items/book.html
index ff5dbe99..dca2961b 100644
--- a/layouts/_partials/items/book.html
+++ b/layouts/_partials/items/book.html
@@ -1,7 +1,7 @@
 <div{{ if eq .Params.rating 1 }} class="opacity-50 z-0"{{ end }}
   style="view-transition-name: book-{{ .File.UniqueID }}">
   <a href="{{ .Permalink }}" style="view-transition-name: book-{{ .Title }}"
-      class="border-[0.2rem] border-solid rotate-[3deg] shadow-md block
+      class="border-3 border-solid rotate-3 shadow-md block
       hover:rotate-0 hover:-translate-y-2 hover:scale-110 transition
 
       {{ if eq .Params.rating 1 }} relative
diff --git a/layouts/_partials/items/card.html b/layouts/_partials/items/card.html
index b66bf676..d0ab6f00 100644
--- a/layouts/_partials/items/card.html
+++ b/layouts/_partials/items/card.html
@@ -1,6 +1,6 @@
 {{ $ctx := .context }}
 {{ $showSummary := .summary }}
-<div class="relative p-[1.5rem] bg-white dark:bg-neutral-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700"
+<div class="relative p-6 bg-white dark:bg-neutral-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700"
     style="view-transition-name: card-{{ $ctx.File.UniqueID }}">
     <div class="card-header">
         <h3 class="text-xl font-extrabold m-0 text-gray-900 dark:text-gray-100"
@@ -12,7 +12,7 @@
         </h3>
         <div class="text-base m-0">{{ partial "components/tags" $ctx }}</div>
     </div>
-    <div class="text-lg mt-2 markdown-body">
+    <div class="text-lg mt-2 leading-loose markdown-body">
         {{ if $showSummary }}{{ $ctx.Summary }}{{ else }}{{ $ctx.Content }}{{ end }}
     </div>
 </div>
diff --git a/layouts/_partials/items/post-small.html b/layouts/_partials/items/post-small.html
index 39d6ae5c..30cbf60f 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-[1.1rem]">
+<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>
         {{ end }}
     </a>
-    <time class="text-[0.9rem] font-mono font-secondary flex-shrink-0">
+    <time class="text-size-sm font-mono font-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 10471180..1adf86af 100644
--- a/layouts/_partials/items/post.html
+++ b/layouts/_partials/items/post.html
@@ -21,7 +21,7 @@
                     {{ end }}
                 </a>
                 {{ if eq .ctx.Section "fictions" }}
-                <span class="font-normal text-[1rem] text-[var(--secondary-text-color)]">小说</span>
+                <span class="font-normal text-4 text-[var(--secondary-text-color)]">小说</span>
                 {{ end }}
             </h2>
         </div>
@@ -34,7 +34,7 @@
         {{ end }}
     </header>
     {{ if $showSummary }}
-        <div class="markdown-body text-[1.1rem]"
+        <div class="markdown-body text-size-lg!"
             style="view-transition-name: post-content-{{ .File.UniqueID }}">
             {{ .ctx.Summary }}
         </div>
diff --git a/layouts/_partials/posts/comment.html b/layouts/_partials/posts/comment.html
index 18bc479a..2a0f1027 100644
--- a/layouts/_partials/posts/comment.html
+++ b/layouts/_partials/posts/comment.html
@@ -12,7 +12,7 @@
                 <div>
                     {{ .content | safeHTML }}
                 </div>
-                <div class="text-[1rem] text-right font-secondary">
+                <div class="text-4 text-right font-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 43c8fe74..83004f0f 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-[1rem]">
+<div id="post-endnotes" class="font-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 2c894f27..8a9be489 100644
--- a/layouts/_partials/posts/now-read-this.html
+++ b/layouts/_partials/posts/now-read-this.html
@@ -1,6 +1,6 @@
 {{ with site.RegularPages.Related . | first 1 }}
-<div class="mt-8 pb-8 relative leading-[2]">
-  <h4 class="absolute -z-1 bottom-0 right-0 text-[2rem] m-0 opacity-25 font-italic">{{ T "nowReadThis" }}</h4>
+<div class="mt-8 pb-8 relative leading-loose">
+  <h4 class="absolute -z-1 bottom-0 right-0 text-8 m-0 opacity-25 font-italic">{{ T "nowReadThis" }}</h4>
   {{ range . }}
   <div class="flex justify-between">
       <a class="font-800" href="{{ .RelPermalink }}" data-umami-event="🤔 Click Related Post">
diff --git a/layouts/_partials/taxonomy/tag-pill.html b/layouts/_partials/taxonomy/tag-pill.html
index 3eb8d695..ad13c62e 100644
--- a/layouts/_partials/taxonomy/tag-pill.html
+++ b/layouts/_partials/taxonomy/tag-pill.html
@@ -1,5 +1,5 @@
 <a href="{{ .Page.RelPermalink }}"
-    class="inline-flex items-center gap-2 text-[0.9rem] px-2 py-1
+    class="inline-flex items-center gap-2 text-size-sm px-2 py-1
     transition-colors duration-300 rounded-md hover:no-underline
 
     {{ if lt .Count 4 }}
@@ -20,5 +20,5 @@
         {{ end }}
     {{ end }}
     <span>{{ if not .Page.Params.icon }}#{{ end }}{{ .Page.LinkTitle }}</span>
-    <span class="text-[0.8rem] text-[var(--secondary-text-color)]">{{ .Count }}</span>
+    <span class="text-size-xs text-[var(--secondary-text-color)]">{{ .Count }}</span>
 </a>
diff --git a/layouts/_shortcodes/callout.html b/layouts/_shortcodes/callout.html
index a432cd4d..760b32c9 100644
--- a/layouts/_shortcodes/callout.html
+++ b/layouts/_shortcodes/callout.html
@@ -1,5 +1,5 @@
-<div class="rounded-[0.25rem] leading-[1.75] py-[1rem] px-[1.25rem]
-    flex gap-[0.75rem] my-[0.5rem]"
+<div class="rounded-1 leading-[1.75] py-4 px-5
+    flex gap-3 my-2"
     style="background-color: rgba(var(--block-background-color-rgb), 0.5)">
     <div class="callout-icon">{{ index .Params 1 }}</div>
     <div class="callout-text">
diff --git a/layouts/_shortcodes/link.html b/layouts/_shortcodes/link.html
index abd1b1aa..9f7ea3e5 100644
--- a/layouts/_shortcodes/link.html
+++ b/layouts/_shortcodes/link.html
@@ -7,7 +7,7 @@
 </a>
 {{ else }}
 <a href="{{ .Get "link" }}" target="_blank"
-    class="block w-[calc(50%_-_1rem)] rounded-[1rem] box-border px-[1.5rem]"
+    class="block w-[calc(50%_-_1rem)] rounded-4 box-border px-6"
     style="background-color: var(--block-background-color);
         color: var(--text-color);text-decoration: none;">
     <h3>{{ .Get "title" }}</h3>
diff --git a/layouts/_shortcodes/quotecard.html b/layouts/_shortcodes/quotecard.html
index 34696da2..941280ce 100644
--- a/layouts/_shortcodes/quotecard.html
+++ b/layouts/_shortcodes/quotecard.html
@@ -1,6 +1,6 @@
-<div class="text-[1.2rem] md:text-[1.5rem] font-italic text-center
-    my-[3rem] md:my-[5rem] mx-[1rem] md:mx-[3rem] p-[1rem]
-    border border-solid border-gray-300 rounded-[1rem] shadow-lg
+<div class="text-5 md:text-6 font-italic text-center
+    my-12 md:my-20 mx-4 md:mx-12 p-4
+    border border-solid border-gray-300 rounded-4 shadow-lg
     rotate-[3deg] bg-[rgba(255,255,255,0.35)] backdrop-blur-md"
     style="background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)),
       repeating-radial-gradient(rgba(255,255,255,0.25) 0 0.0001%, rgba(255,255,255,0.04) 0 0.0002%) 50% 0 / 2500px 2500px,
diff --git a/layouts/cards/section.html b/layouts/cards/section.html
index 58ae859c..17025698 100644
--- a/layouts/cards/section.html
+++ b/layouts/cards/section.html
@@ -6,13 +6,13 @@
     {{- $pages := $cards.Pages }}
     {{- $featured := first 6 $pages }}
     {{- $rest := after 6 $pages }}
-    <div class="grid! md:grid-cols-2 gap-[1rem] outbox small">
+    <div class="grid! md:grid-cols-2 gap-4 outbox small">
         {{- range $featured }}
             {{ partial "items/card" (dict "context" . "summary" true) }}
         {{- end }}
     </div>
 
-    <ul class="flex gap-[1rem] flex-wrap justify-around list-none text-[1.2rem]">
+    <ul class="flex gap-4 flex-wrap justify-around list-none text-5">
         {{- range $rest }}
             <li>
                 <a href="{{ .RelPermalink }}">{{ .Title }}</a>
diff --git a/layouts/cards/single.html b/layouts/cards/single.html
index 3ff2c5eb..551b69de 100644
--- a/layouts/cards/single.html
+++ b/layouts/cards/single.html
@@ -2,7 +2,7 @@
     <article class="relative">
         {{ partial "components/logo" (dict
             "link" "cards"
-            "class" "round-sticker absolute top-[-1rem] right-[-1rem] w-[4rem] h-[4rem] z-1 rotate-[-5deg]"
+            "class" "round-sticker absolute -top-4 -right-4 w-16 h-16 z-1 -rotate-5"
             "imageClass" "w-full"
         ) }}
         {{ partial "items/card" (dict "context" .) }}
@@ -20,8 +20,8 @@
         {{- /* 如果有文章引用这个卡片，就显示它们 */ -}}
         {{ if gt (len $referencedBy) 0 }}
         <section class="related-posts post-content my-5">
-            <h2 class="text-[1.2rem] font-secondary m-0">引用了本卡片的文章</h2>
-            <ul class="m-0">
+            <h2 class="text-5 font-secondary m-0">引用了本卡片的文章</h2>
+            <ul class="my-4">
                 {{- range $referencedBy }}
                     <li>
                         <a href="{{ .Permalink }}">{{ .Title }}</a>
diff --git a/layouts/fictions/section.html b/layouts/fictions/section.html
index f97268cd..d4b68581 100644
--- a/layouts/fictions/section.html
+++ b/layouts/fictions/section.html
@@ -2,18 +2,23 @@
     <article class="fiction-list-page">
         {{ partial "header.html" . }}
         <div id="fiction-section">
-            <div class="my-[2rem] markdown-body">
+            <div class="my-8 markdown-body">
             {{ with .Content }}{{ . }}{{ end }}
             </div>
-            <div class="flex flex-wrap justify-around gap-[2rem]">
+            <div class="flex flex-wrap justify-around gap-8">
                 {{- $fictions := .Site.GetPage "section" "fictions" }}
                 {{- range $fictions.Pages }}
 
-                {{ $rotationDeg := add (math.Floor (mul (math.Rand) 7)) -4 }}  {{/* -4 to +4 */}}
-                {{ $opacity := add (div (math.Floor (mul (math.Rand) 5)) 10) 0.6 }}  {{/* 0.6 to 1.0 */}}
+                {{ $rotationDeg := add (math.Floor (mul (math.Rand) 7)) -4 }}
+                {{- $deg := int $rotationDeg -}}
+                {{- $rotateClass := cond (ge $deg 0)
+                    (printf "rotate-%d" $deg)
+                    (printf "-rotate-%d" (mul -1 $deg))
+                -}}
 
-                {{ $rotateClass := printf "rotate-[%.1fdeg]" $rotationDeg }}
-                {{ $opacityClass := printf "opacity-[%.1f]" $opacity }}
+                {{ $steps := slice 60 70 80 90 100 }}
+                {{ $opacity := index $steps (int (math.Floor (mul (math.Rand) 5))) }}
+                {{ $opacityClass := printf "opacity-%d" $opacity }}
 
                 <div class="xerox text-center text-2xl font-extrabold {{ $rotateClass }} {{ $opacityClass }}"
                     style="view-transition-name: post-{{ .File.UniqueID }}">
diff --git a/layouts/library/page.html b/layouts/library/page.html
index 6ad02bcb..7c125eb6 100644
--- a/layouts/library/page.html
+++ b/layouts/library/page.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
     <article>
-        <header class="flex flex-col items-center gap-[0.5rem]">
-            <div class="relative border-[0.2rem] border-solid border-white shadow-lg w-[10rem] md:w-[15rem]"
+        <header class="flex flex-col items-center gap-2">
+            <div class="relative border-3 border-solid border-white shadow-lg w-[10rem] md:w-[15rem]"
                 style="view-transition-name: book-{{ .File.UniqueID }}">
                 <img
                     class="lazy block w-full h-auto" loading="lazy"
@@ -11,7 +11,7 @@
                 {{ partial "components/logo"
                 (dict
                     "link" "library"
-                    "class" "round-sticker absolute w-[2rem] h-[2rem] md:w-[5rem] md:h-[5rem] top-[2rem] right-[-2rem] md:right-[-3rem]"
+                    "class" "round-sticker absolute w-8 h-8 md:w-20 md:h-20 top-8 -right-8 md:-right-12"
                     "imageClass" "w-full") }}
             </div>
             <h1 class="xerox" data-pagefind-meta="title">{{ .Title }}</h1>
@@ -27,12 +27,12 @@
             </p>
         </header>
         <div class="markdown-body">
-            <div class="leading-[2]">
+            <div class="leading-loose">
                 {{ .Content }}
             </div>
             <!-- Endnotes -->
             {{ partial "posts/endnotes" . }}
-            <div class="text-[1rem] font-secondary">
+            <div class="text-size-base font-secondary">
                 <p>于 {{ partial "components/date" . }} 读完</p>
             </div>
         </div>
diff --git a/layouts/library/section.html b/layouts/library/section.html
index 82b12b40..21107382 100644
--- a/layouts/library/section.html
+++ b/layouts/library/section.html
@@ -3,7 +3,7 @@
   <article id="library">
     <div id="library-content">
         <h2>{{ now.Year }} 年读的书</h2>
-        <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-[1rem] my-[1rem]">
+        <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-4 my-4">
           {{ range where .Site.RegularPages "Section" "library" }}
             {{ if eq .Date.Year now.Year }}
             {{ partial "items/book" . }}
@@ -29,7 +29,7 @@
         </div>
 
         <h2>推荐好书</h2>
-        <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-[1rem] my-[1rem]">
+        <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-4 my-4">
         {{ range where (where .Site.RegularPages "Section" "library") ".Params.rating" "==" 5 }}
         {{ partial "items/book" . }}
         {{ end }}
diff --git a/layouts/library/yearlist.html b/layouts/library/yearlist.html
index 0ad72da0..d80fe56e 100644
--- a/layouts/library/yearlist.html
+++ b/layouts/library/yearlist.html
@@ -3,7 +3,7 @@
     <article id="library">
       <div id="library-content">
           <h2>{{ .Title }}</h2>  <!-- 显示年份 -->
-          <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-[1rem] my-[1rem]">
+          <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-4 my-4">
             {{ $year := .Title }}
             {{ range where .Site.RegularPages "Section" "library" }}
               {{ if eq (printf "%d" .Date.Year) $year }}
diff --git a/layouts/page.html b/layouts/page.html
index 661cf1ff..b0da162b 100644
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
     {{ partial "header.html" . }}
     <article class="page" id="article">
-      <div id="post-content" class="post-content markdown-body leading-[2]"
+      <div id="post-content" class="post-content markdown-body leading-loose"
           style="view-transition-name: post-content-{{ .File.UniqueID }}">
         {{ .Content }}
       </div>
diff --git a/layouts/posts/page.html b/layouts/posts/page.html
index 4a6ad8d3..d5506f01 100644
--- a/layouts/posts/page.html
+++ b/layouts/posts/page.html
@@ -7,7 +7,7 @@
       >
         {{ if .Params.banner }}
             {{ partial "components/logo" (dict
-                "class" "block round-sticker w-[5rem] h-[5rem] md:w-[7rem] md:h-[7rem] right-[-3rem] md:right-[-5rem] top-[1rem] absolute rotate-[3.0deg]"
+                "class" "block round-sticker w-14 h-14 lg:w-28 lg:h-28 right-2 lg:-right-20 top-2 lg:top-4 absolute rotate-[3.0deg]"
                 "imageClass" "block w-full"
             ) }}
         {{ else }}
@@ -19,10 +19,10 @@
 
         {{ partial "posts/banner" . }}
         <!-- Title and Subtitle -->
-        <h1 class="text-[2rem] font-900 xerox">
+        <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-[1.2rem]">{{ . }}</small>
+            <small class="block font-secondary font-italic text-size-xl">{{ . }}</small>
           {{ end }}
         </h1>
         <!-- Post Meta -->
@@ -35,7 +35,7 @@
       </header>
 
       <!-- Post Content -->
-      <div class="min-h-[60%] leading-[2] mb-8 markdown-body"
+      <div class="min-h-[60%] leading-loose mb-8 markdown-body"
           style="view-transition-name: post-content-{{ .File.UniqueID }}">
         <!-- TOC -->
         {{ partial "posts/toc" . }}
diff --git a/layouts/section.html b/layouts/section.html
index b1602e6b..8d5f6c9b 100644
--- a/layouts/section.html
+++ b/layouts/section.html
@@ -7,19 +7,19 @@
         {{ range (where site.RegularPages "Type" "eq" "posts").GroupByDate "2006" -}}
           <section class="w-full">
             <h1 class="border-b-2 border-b-solid border-[var(--border-color)]
-                py-2 text-[1.5rem] sticky top-0 bg-[var(--background-color)] z-1
+                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-[0.8rem]">{{ T "archivePage.postCountAnnual" (len .Pages) }}</small>
+                <small class="font-mono font-secondary text-3">{{ T "archivePage.postCountAnnual" (len .Pages) }}</small>
             </h1>
 
             {{ range .Pages.GroupByDate "January" }}
             <details class="posts-month-archive"{{ if gt $remainingMonthsToOpen 0 }} open{{ end }}>
                 <summary class="flex items-center border-b border-b-dashed border-[var(--border-color)] py-2 px-1">
-                    <h2 class="text-[1.1rem] inline-block w-full m-0
+                    <h2 class="text-size-lg inline-block w-full m-0
                         flex justify-between items-center">
                         {{ .Key }}
-                        <small class="font-mono font-secondary text-[0.8rem]">{{ T "archivePage.postCountMonthly" (len .Pages) }}</small>
+                        <small class="font-mono font-secondary text-3">{{ T "archivePage.postCountMonthly" (len .Pages) }}</small>
                     </h2>
                 </summary>
                 <ul class="ps-0 flex flex-col gap-2 list-none leading-relaxed">
diff --git a/layouts/term.html b/layouts/term.html
index b237e143..fc0d9b43 100644
--- a/layouts/term.html
+++ b/layouts/term.html
@@ -39,7 +39,7 @@
             {{ $books := where .Pages "Section" "eq" "library" }}
             {{ if gt (len $books) 0 }}
             <h2>{{ T "termPage.books" }}</h2>
-            <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-[1rem] my-[1rem]">
+            <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-4 my-4">
                 {{ range $books }}
                 {{ partial "items/book" . }}
                 {{ end }}
diff --git a/uno.config.js b/uno.config.js
index 8c4f6c74..26bd5ac3 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -1,48 +1,14 @@
 import { defineConfig, presetWind3, presetAttributify } from 'unocss'
 
-export default defineConfig({
-  safelist: [
-      'text-sm',
-      'text-md',
-      'text-lg',
-      'text-xl',
-      'text-2xl',
-      'text-3xl',
-      'text-4xl',
-      'text-5xl',
+const range = (n, fn) => Array.from({ length: n }, (_, i) => fn(i));
 
-      // rotate -4 to +4 deg
-      'rotate-[-3.0deg]',
-      'rotate-[-2.0deg]',
-      'rotate-[-1.0deg]',
-      'rotate-[0.0deg]',
-      'rotate-[1.0deg]',
-      'rotate-[2.0deg]',
-      'rotate-[3.0deg]',
+function rangeWithPrefixes(n, base, prefixes = ['']) {
+  return prefixes.flatMap(prefix =>
+    range(n, i => `${prefix}${base}-${i}`)
+  );
+}
 
-      // opacity from 0.6 to 1.0
-      'opacity-[0.6]',
-      'opacity-[0.7]',
-      'opacity-[0.8]',
-      'opacity-[0.9]',
-      'opacity-[1.0]',
-
-      'absolute',
-      'right-0',
-      'w-[5rem]',
-      'h-[5rem]',
-      'top-[2rem]',
-      'w-[calc(25%_-_1rem)]',
-      'w-[calc(50%_-_2rem)]',
-      'w-[10rem]',
-      'sm:w-full',
-      'right-[-3rem]',
-      'top-[1rem]',
-      'md:w-[7rem]',
-      'md:h-[7rem]',
-      'md:right-[-5rem]',
-      'top-[-1rem]', 'right-[-1rem]', 'w-[4rem]', 'h-[4rem]', 'z-1', 'rotate-[-5deg]'
-    ],
+export default defineConfig({
   content: {
     filesystem: ['./**/*.{html,md,js}'],
   },
@@ -62,5 +28,22 @@ export default defineConfig({
   shortcuts: {
     'small-button': 'bg-blockBg px-2 py-1 no-underline hover:no-underline rounded border border-solid border-bg hover:border-textColor transition',
     'round-sticker': 'bg-blockBg rounded-full shadow-sm p-4'
-  }
+  },
+  safelist: [
+    'text-sm', 'text-md', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl',
+
+    ...range(10, i => `opacity-${i * 10}`),
+    ...rangeWithPrefixes(5, 'rotate', ['', '-']),
+    ...rangeWithPrefixes(30, 'w', ['', 'md:', 'lg:']),
+    ...rangeWithPrefixes(30, 'h', ['', 'md:']),
+    ...rangeWithPrefixes(30, 'right', ['', 'md:', '-', 'md:-']),
+    ...rangeWithPrefixes(30, 'top', ['', '-']),
+
+    // special cases
+    'absolute',
+    'w-[calc(25%_-_1rem)]',
+    'w-[calc(50%_-_2rem)]',
+    'w-[10rem]',
+    'sm:w-full',
+  ]
 })
-- 
cgit v1.2.3