refactor: replace some utility classes with UnoCSS

Former-commit-id: c476bb450e62fd7cb8bdf22d45c4422f92c1cc8f

5 files changed, 9 insertions, 9 deletions

diff --git a/content/posts/weekly/22.md b/content/posts/weekly/22.md
index bfe7349c..fad88552 100644
--- a/content/posts/weekly/22.md
+++ b/content/posts/weekly/22.md
@@ -89,7 +89,7 @@ Git 是一个版本管理软件，常用于软件开发。Commit 是 Git 的一�
 
 而 Michael Lynch 在《[No Longer My Favorite Git Commit](https://mtlynch.io/no-longer-my-favorite-git-commit/)》中指出事无巨细地描述修改过程并不是好的软件工程，并展示了一个「倒金字塔」模型。
 
-<img src="https://image.guhub.cn//uPic/inverted-pyramid.png" class="invert-if-dark">
+<img src="https://image.guhub.cn//uPic/inverted-pyramid.png" class="dark:invert">
 
 倒金字塔顶端是「所有人都在乎的东西」，其次是「一些人会在乎的东西」，最次是「很少人在乎的东西」。倒金字塔既表示了顺序，也表示了占比。也就是说，所有人都在乎的东西应该放在最前面，且应该是最多的；很少有人在乎的东西应该放在最后，而且应该尽可能言简意赅。
 
diff --git a/content/posts/专家的直觉.md b/content/posts/专家的直觉.md
index d9a3a6f7..2e023f2e 100644
--- a/content/posts/专家的直觉.md
+++ b/content/posts/专家的直觉.md
@@ -42,7 +42,7 @@ draft: false
 久而久之，你就可以抛弃你原来的系统，按照相似的思想和决策方式行事。即使没有直接屏蔽干扰，也没有明确的路径，你仍然能够通过直觉找到方向。
 
 ![](https://image.guhub.cn/uPic/2025/01/IMG_0285.PNG "图片依次展示了「混沌」、「建立秩序」和「再入混沌」三个阶段")
-{.invert-if-dark}
+{.dark:invert}
 
 可以把先前践行的规则和使用的工具当作「引路人」的角色，当这条路走多了，即使引路人离开了你，你依然能在迷宫中找到正确的路径。
 
diff --git a/content/posts/扩张惯性.md b/content/posts/扩张惯性.md
index a73020f5..06a6b402 100644
--- a/content/posts/扩张惯性.md
+++ b/content/posts/扩张惯性.md
@@ -8,7 +8,7 @@ tags:
   - 手写文章
 ---
 
-<div class="invert-if-dark">
+<div class="dark:invert">
 
 ![IMG_0269](https://image.guhub.cn/uPic/2025/01/IMG_0269-removebg-preview-2.png)
 
@@ -16,7 +16,7 @@ tags:
 
 <!--more-->
 
-<div class="invert-if-dark">
+<div class="dark:invert">
 
 ![IMG_0271](https://image.guhub.cn/uPic/2025/01/Unknown.png)
 
@@ -68,4 +68,4 @@ tags:
 
 ---
 
-inspired by [SkyWrite](https://write.skywt.cn)
\ No newline at end of file
+inspired by [SkyWrite](https://write.skywt.cn)
diff --git a/content/posts/明确讨论的范围.md b/content/posts/明确讨论的范围.md
index c1c3ac93..5ffb24d8 100644
--- a/content/posts/明确讨论的范围.md
+++ b/content/posts/明确讨论的范围.md
@@ -76,7 +76,7 @@ featured: true
 允许了第二条「对目的本身的质疑和想法」存在，就允许讨论目的随着讨论的深入而发生改变。比如，人们已开始只是在讨论「怎么给自行车修棚」，当有人提出「为什么不给摩托车修棚？」并针对目的进行讨论之后，讨论的目的就可能变成「怎么给自行车和摩托车修棚」。这时候再严格地在范围内进行讨论，就不容易出错。
 
 ![](https://image.guhub.cn/uPic/2025/03/scope-of-discussion.png)
-{.invert-if-dark}
+{.dark:invert}
 
 ## 讨论中词句的目的
 
diff --git a/content/posts/零JavaScript的博客统计图表.md b/content/posts/零JavaScript的博客统计图表.md
index c6903101..7d36bbe8 100644
--- a/content/posts/零JavaScript的博客统计图表.md
+++ b/content/posts/零JavaScript的博客统计图表.md
@@ -28,7 +28,7 @@ slug: zero-js-chart
 <div class="time-chart-container">
 	<div class="time-chart-wrapper">
 		<div class="time-icon">☀️</div>
-		<div class="time-chart-bar invert-if-dark">
+		<div class="time-chart-bar dark:invert">
 			<!-- for each time segement -->
 			<div class="time-segment"
 				 style="width: {{$percentage}}">
@@ -38,10 +38,10 @@ slug: zero-js-chart
 		</div>
 		<div class="time-icon">🌙</div>
 	</div>
-	
+
 	<div class="time-counts">
 		<!-- for each time segement -->
-		<div class="count-item" 
+		<div class="count-item"
 		 style="width: {{$percentage}}">
 			<span class="count-number">{{$count}}</span>
 		</div>