refactor: replace _footer.scss and _shortcode.scss with UnoCSS

13 files changed, 108 insertions, 333 deletions

diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
deleted file mode 100644
index d4996ab7..00000000
--- a/assets/css/components/_footer.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-#footer {
-    margin: 2rem auto;
-    font-family: var(--mono-font-family);
-
-    @media screen and (min-width: 768px) {
-        width: var(--page-width);
-        display: flex;
-        justify-content: space-between;
-    }
-
-    #footer-copyright {
-        .word-count {
-            font-family: var(--serif-font-family);
-            font-size: .9rem;
-            color: var(--secondary-text-color)
-        }
-    }
-
-    #footer-links {
-        display: flex;
-        flex-direction: column;
-
-        @media screen and (min-width: 768px) {
-            align-items: flex-end;
-        }
-
-        ul.footer-navigation {
-            list-style: none;
-            display: flex;
-            gap: 0.5rem;
-            padding-inline-start: 0;
-            margin: .5rem 0;
-
-            @media screen and (min-width: 768px) {
-                justify-content: flex-end;
-            }
-
-            li {
-                display: inline-flex;
-                align-items: center;
-                img, svg {
-                    height: 1rem;
-                    width: auto;
-                    display: inline-block;
-                    border-radius: 100%;
-                    filter: grayscale(1);
-                    @media (prefers-color-scheme: dark) {
-                        filter: grayscale(1) invert(1);
-                    }
-                }
-            }
-
-            /* internal links */
-            &.footer-navigation-internal {
-                gap: 0.25rem;
-                li:not(:last-child)::after {
-                    color: var(--secondary-text-color);
-                    content: '/';
-                    margin-left: 0.25rem;
-                }
-            }
-        }
-    }
-}
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index e93f9b77..10c7900d 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -97,3 +97,59 @@
         }
     }
 }
+
+/* gallery shortcode */
+
+.gallery {
+  display: flex;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  gap: 0.5rem;
+  white-space: nowrap;
+
+  & > figure, & > a:has(> figure) {
+    margin: 0;
+    flex-shrink: 0;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    box-shadow: inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1);
+    img {
+      height: 20rem;
+      display: block;
+      border-radius: 4px;
+      margin: 0;
+    }
+    figcaption {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        padding: 0.35rem;
+        h4 {
+            font-size: 0.8rem;
+            margin: 0;
+            text-align: left;
+            width: fit-content;
+            color: var(--text-color);
+            background-color: rgba(var(--block-background-color-rgb), 0.75);
+            backdrop-filter: blur(0.5rem);
+            padding: 0.2rem 0.35rem;
+            border-radius: 3px;
+            line-height: 1.2;
+        }
+    }
+  }
+  & > p { display: none }
+
+  &.center {
+      justify-content: center;
+  }
+  &.full-width {
+      & > figure {
+          flex-shrink: unset;
+          img {
+              width: 100%;
+          }
+      }
+  }
+}
diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss
deleted file mode 100644
index 5c4e893a..00000000
--- a/assets/css/components/_shortcodes.scss
+++ /dev/null
@@ -1,226 +0,0 @@
-/* callouts */
-
-.callout {
-  background-color: rgba(var(--block-background-color-rgb), 0.5);
-  border-radius: .25rem;
-  padding: 1rem 1.25rem;
-  line-height: 1.75;
-
-  display: flex;
-  gap: .75rem;
-
-  margin: 0.5rem 0;
-}
-
-.callout .callout-content p {
-  margin: 0;
-}
-
-/* quote shortcode */
-
-.quote-card {
-  --card-bg: rgba(255,255,255,0.25);
-  --card-bg-lighter: rgba(255,255,255,0.1);
-  --card-noise: rgba(255,255,255,0.04);
-
-  font-size: 1.5rem;
-  font-style: italic;
-  text-align: center;
-  margin: 5rem 3rem;
-  padding: 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
-  box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
-  transform: rotate(3deg);
-  background-color: rgba(255,255,255,0.35);
-
-  background: linear-gradient(var(--card-bg-lighter), var(--card-bg-lighter)),
-    repeating-radial-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 50% 0 / 2500px 2500px,
-    repeating-conic-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 60% 60% / 2500px 2500px;
-  background-blend-mode: normal, difference;
-}
-
-@media screen and (max-width: 768px) {
-  .quote-card {
-    font-size: 1.2rem;
-    margin: 3rem 1rem;
-  }
-}
-
-/* book showcase shortcode */
-
-.book-showcase {
-    display: flex;
-    gap: 2rem;
-    line-height: 1.5;
-    margin: 2rem 0
-}
-
-.book-showcase .book-cover {
-    width: 25%;
-    flex-shrink: 0;
-}
-
-.book-description-header .book-title {
-    margin: 0
-}
-
-.book-description-header p {
-    font-size: 1rem;
-    margin: 0.1rem
-}
-
-/* gallery shortcode */
-
-.gallery {
-  display: flex;
-  overflow-x: auto;
-  scroll-behavior: smooth;
-  gap: 0.5rem;
-  white-space: nowrap;
-
-  & > figure, & > a:has(> figure) {
-    margin: 0;
-    flex-shrink: 0;
-    display: inline-block;
-    max-width: 100%;
-    position: relative;
-    box-shadow: inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1);
-    img {
-      height: 20rem;
-      display: block;
-      border-radius: 4px;
-      margin: 0;
-    }
-    figcaption {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        padding: 0.35rem;
-        h4 {
-            font-size: 0.8rem;
-            margin: 0;
-            text-align: left;
-            width: fit-content;
-            color: var(--text-color);
-            background-color: rgba(var(--block-background-color-rgb), 0.75);
-            backdrop-filter: blur(0.5rem);
-            padding: 0.2rem 0.35rem;
-            border-radius: 3px;
-            line-height: 1.2;
-        }
-    }
-  }
-  & > p { display: none }
-
-  &.center {
-      justify-content: center;
-  }
-  &.full-width {
-      & > figure {
-          flex-shrink: unset;
-          img {
-              width: 100%;
-          }
-      }
-  }
-}
-
-/* sidenote shortcode */
-
-@media screen and (max-width: 1199px) {
-    .sidenote {
-        border: 1px solid var(--block-background-color);
-        padding: .75rem 1rem;
-        border-radius: 0.5rem;
-        line-height: 1.5;
-    }
-    .sidenote-title {
-        font-size: 1rem;
-        text-align: right;
-        font-style: italic
-    }
-}
-
-@media screen and (min-width: 1200px) {
-    .sidenote {
-        position: absolute;
-        left: calc(50% + var(--page-width) / 2);
-        margin-left: 2rem;
-        max-width: 20rem
-    }
-}
-
-.sidenote-title {
-    margin: 0.5rem 0
-}
-
-.sidenote-content {
-    font-size: 1rem
-}
-
-/* blog links */
-
-.linkroll {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-a.blog-link {
-  position: relative;
-  background-color: var(--block-background-color);
-  text-decoration: none;
-  color: var(--text-color);
-  padding: 1rem 2rem;
-  padding-right: 4rem;
-  border-radius: 1rem;
-  width: calc(50% - 2rem);
-  box-sizing: border-box;
-  overflow: hidden;
-
-  h4, p {
-    margin: 0;
-    font-size: 1.2rem;
-  }
-
-  p {
-    line-height: 1.5;
-  }
-
-  .link-content {
-    z-index: 10;
-  }
-
-  img {
-    --size: 5rem;
-    display: block;
-    position: absolute;
-    right: -1rem;
-    bottom: -1rem;
-    width: var(--size);
-    height: var(--size);
-    border-radius: 100%;
-    z-index: 0;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  a.blog-link {
-    font-size: 1.2rem;
-    padding: 0.5rem 1rem;
-    padding-right: 2rem;
-    width: 100%;
-  }
-}
-
-a.podcast-link {
-    text-decoration: none;
-    color: inherit;
-    width: calc(25% - 1rem);
-    .link-image {
-        overflow: hidden;
-        border-radius: 5px;
-        img { margin: 0 }
-    }
-}
diff --git a/assets/css/global.scss b/assets/css/global.scss
index 51261ee8..2cfdb01f 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -8,7 +8,5 @@
 @import "components/pages";
 @import "components/taxonomy";
 @import "components/postlist";
-@import "components/shortcodes";
 @import "components/card";
-@import "components/footer";
 @import "components/global-search";
diff --git a/content/linkroll.md b/content/linkroll.md
index f87cc821..59e0bd37 100644
--- a/content/linkroll.md
+++ b/content/linkroll.md
@@ -11,7 +11,7 @@ aliases:
 
 ## 我常读的中文博客
 
-<div class="linkroll">
+<div class="flex flex-wrap gap-[1rem]">
 {{< 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="linkroll">
+<div class="flex flex-wrap gap-[1rem]">
 {{< 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/content/posts/不会说书烂的读者不是好读者.md b/content/posts/不会说书烂的读者不是好读者.md
index 29c19504..9b85d5bf 100644
--- a/content/posts/不会说书烂的读者不是好读者.md
+++ b/content/posts/不会说书烂的读者不是好读者.md
@@ -3,7 +3,7 @@ title: 不会说书烂的读者不是好读者
 date: 2024-12-18 22:07:00
 draft: false
 toc: true
-tags: 
+tags:
   - 阅读
 ---
 
@@ -21,10 +21,10 @@ tags:
 
 读书很容易变成一件[为了做而做](/posts/为了做而做的问题在哪/)的事情，绝大多数读书人，也都是从「为了读书而读书」这个阶段开始的。毕竟在没读过书之前，人当然说不出读书有什么好；被「读点书吧」的思想鼓励之后，真的读了不少书，才有可能对「为什么读书？」这个问题有些思考。
 
-{{% sidenote "摇晃尸体的凶手如是说" "> 就我观察到的，现代的短视频、书本、各种文章，都反映了当今文化中，一种「二极管」式的思想——人们的生活被拆成了「工作学习」和「娱乐消遣」两部分，并且大家都习以为常。" %}}
-
 这里要给「读书」下个定义。不少人会把读书分为「为了学业而读书」和「读闲书」，这一思想和我在《[摇晃尸体的凶手如是说](/posts/摇晃尸体的凶手如是说/)》里讨论的「工作学习」和「娱乐消遣」二分法很类似。
 
+> 就我观察到的，现代的短视频、书本、各种文章，都反映了当今文化中，一种「二极管」式的思想——人们的生活被拆成了「工作学习」和「娱乐消遣」两部分，并且大家都习以为常。
+
 有趣的就来了，一个学文学的读《尤利西斯》，和一个学工程学的读《尤利西斯》，两者的行为相同但不同质，尽管他们读的是同一本书。
 
 可见「读书」作为一种行为，在表现上是没有多少不同的，最多有一些读书方法上的差异。「什么是读书？」其实就是在问「为了什么读书？」
@@ -57,8 +57,6 @@ tags:
 
 ## 为什么说书烂？
 
-{{% sidenote "[ONO](https://onojyun.com/) 说：" "看完《认知觉醒》有点被气到，然后自己做了一份认知束缚的PPT，跟助理「上课」实验理解和类比，把结构拎出来做了一个重新的整合，我舒服多了哈哈哈。很少有书可以把我气到我想要重新写一次。" %}}
-
 说一本书烂有很多原因，但大致上可以分为两种：一是觉得作者在放屁，观点不合；二是觉得作者屁话太多，结构混乱。这两种也可以简单地表述为一句话：这书我读起来不爽了。
 
 说书烂，一方面显示读者敢于挑战某种意义上的权威，或者说不把书本视作权威，这是态度上的；另一方面，也证明了读者自身的思辨能力，能够看破书本看似高大上的包装和其他人的赞美之词，表达自己的独到见解。
diff --git a/content/posts/什么也不做的艺术.md b/content/posts/什么也不做的艺术.md
index 1d9bc6ae..82222d87 100644
--- a/content/posts/什么也不做的艺术.md
+++ b/content/posts/什么也不做的艺术.md
@@ -19,9 +19,7 @@ toc: true
 
 最近水星在白羊座逆行，做事其实会有些急躁。在结束 [Heart Hunter](https://eltrac.itch.io/heart-hunter) 的开发之后，我很快就有了新的游戏想法。由于这个新想法体量很小，需求也相对明确，所以我想要很快地就做出一个可以玩的原型出来。大概也是因为想起了之前和 [Zeee](https://www.velasx.com) 发邮件时，他引用的另一句印在我脑子里的话。[^1]
 
-因为之前遇到怎么也修不好的 bug，绝望之中下载了 AI 驱动的代码编辑器 Cursor，居然只用了五分钟就解决了困扰我三天的问题；之后还用 Cursor 实现了一些较小且明确的需求，非常丝滑。抱着「AI 可不会水逆！」的心态，我下载了免费的 Trae，试图在一天内*用人类语言编程*做出一个可玩的原型。
-
-{{< sidenote "🫤" "我不喜欢这样，我感觉我被 AI 剥夺了编程的乐趣，而且这是我自己导致的。" >}}
+因为之前遇到怎么也修不好的 bug，绝望之中下载了 AI 驱动的代码编辑器 Cursor，居然只用了五分钟就解决了困扰我三天的问题；之后还用 Cursor 实现了一些较小且明确的需求，非常丝滑。抱着「AI 可不会水逆！」的心态，我下载了免费的 Trae，试图在一天内*用人类语言编程*做出一个可玩的原型。[^4]
 
 不过，因为我的急躁，在调教 AI 的时候，我完全静不下心来写清晰的提示词，也不想仔细审查 AI 生成的代码。只要发现代码行为与预期不一致，我就描述给 AI 让它分析原因并改进。更坏的是，由于我完全不熟悉 AI 编写的代码，等我真的想要自己动手写的时候，发现完全无从下手，而且，我还在 AI 生成的代码中发现了很多冗余和不合理的地方，我也不知道从哪里改起。
 
@@ -69,4 +67,5 @@ toc: true
 
 [^1]: “你做的前十个游戏都是垃圾，所以赶紧做掉吧！”
 [^2]: 兴许是害怕自己不能做出点值得被记住的东西而引发的死亡焦虑吧
-[^3]: 好吧，或许也没那么容易，需要一些社交技巧和人际交往的经验才行
\ No newline at end of file
+[^3]: 好吧，或许也没那么容易，需要一些社交技巧和人际交往的经验才行
+[^4]: 我不喜欢这样，我感觉我被 AI 剥夺了编程的乐趣，而且这是我自己导致的。
diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html
index a4fbd231..6f9a9126 100644
--- a/layouts/_partials/footer.html
+++ b/layouts/_partials/footer.html
@@ -1,15 +1,19 @@
-<footer id="footer">
-    <section id="footer-copyright">
+<footer class="my-[2rem] mx-auto font-mono
+    md:w-[var(--page-width)] md:flex md:justify-between">
+    <!-- copyright -->
+    <section>
         <p class="copyright">&copy; 2022-{{ now | dateFormat "2006" }} <a href="https://www.guhub.cn/" target="_blank">Eltrac</a></p>
         <p class="license">{{ T "footer.licenseStatement" (printf "<a href=\"https://creativecommons.org/licenses/by-sa/4.0/\" target=\"_blank\">CC BY-SA 4.0</a>") | safeHTML }}</p>
     </section>
-    <section id="footer-links">
+    <!-- links -->
+    <section class="flex flex-col md:items-end">
         <!-- Internal Links -->
-        <ul class="footer-navigation footer-navigation-internal">
+        <ul class="list-none flex gap-[0.25rem] ps-0 my-[0.5rem] 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>
             {{ end }}
-            <li>
+            <li class="inline-flex items-center">
                 {{ if eq .Site.Language.Lang "en" }}
                 <a href="/en/posts/index.xml" title="RSS (English)" target="_blank">
                 {{ else if eq .Site.Language.Lang "zh" }}
@@ -21,10 +25,10 @@
         </ul>
 
         <!-- External Links -->
-        <ul class="footer-navigation">
+        <ul class="list-style-none flex gap-[0.5rem] ps-0 my-[0.5rem] mx-0 md:justify-end">
             {{ range .Site.Params.footerExternalLinks }}
-            <li><a href="{{ .link }}" title="{{ .name }}" target="_blank">
-                <img src="{{ .icon }}" />
+            <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 }}" />
             </a></li>
             {{ end }}
         </ul>
diff --git a/layouts/_shortcodes/callout.html b/layouts/_shortcodes/callout.html
index 62112390..a432cd4d 100644
--- a/layouts/_shortcodes/callout.html
+++ b/layouts/_shortcodes/callout.html
@@ -1,6 +1,8 @@
-<div class="callout">
+<div class="rounded-[0.25rem] leading-[1.75] py-[1rem] px-[1.25rem]
+    flex gap-[0.75rem] my-[0.5rem]"
+    style="background-color: rgba(var(--block-background-color-rgb), 0.5)">
     <div class="callout-icon">{{ index .Params 1 }}</div>
     <div class="callout-text">
         {{ index .Params 0 | markdownify }}
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/layouts/_shortcodes/link.html b/layouts/_shortcodes/link.html
index 1b9c4f79..abd1b1aa 100644
--- a/layouts/_shortcodes/link.html
+++ b/layouts/_shortcodes/link.html
@@ -1,14 +1,15 @@
-<a href="{{.Get "link" }}" target="_blank"
-    class="{{ if (.Get "type") }}{{ .Get "type" }}-link{{ else }}blog-link{{ end }}">
-    {{ if and (isset .Params "image") .Params.image }}
-    <div class="link-image">
-        <img src="{{ .Params.image }}" class="no-fancybox" alt="{{ .Params.title }}" />
-    </div>
-    {{ end }}
-    {{ if ne (.Get "type") "podcast" }}
-    <div class="link-content">
-        <h4>{{.Get "title" }}</h4>
-        <p>{{.Get "description" }}</p>
-    </div>
-    {{ end }}
+{{ if eq (.Get "type") "podcast" }}
+<a href="{{ .Get "link" }}" target="_blank" title="{{ .Get "title" }}"
+    class="block w-[calc(25%_-_1rem)] rounded-md overflow-hidden box-border p-0"
+    style="background-color: var(--block-background-color);
+        color: var(--text-color);text-decoration: none;">
+    <img src="{{ .Get "image" }}" class="block m-0!" alt="{{ .Get "title" }}">
 </a>
+{{ else }}
+<a href="{{ .Get "link" }}" target="_blank"
+    class="block w-[calc(50%_-_1rem)] rounded-[1rem] box-border px-[1.5rem]"
+    style="background-color: var(--block-background-color);
+        color: var(--text-color);text-decoration: none;">
+    <h3>{{ .Get "title" }}</h3>
+</a>
+{{ end }}
diff --git a/layouts/_shortcodes/quotecard.html b/layouts/_shortcodes/quotecard.html
index dfaf04e2..f4b4621a 100644
--- a/layouts/_shortcodes/quotecard.html
+++ b/layouts/_shortcodes/quotecard.html
@@ -1,3 +1,11 @@
-<div class="quote-card" {{ with .Get "rotate" }}style="transform: rotate({{. }}deg)"{{ end }}>
+<div class="text-[1.2rem] md:text-[1.5rem] text-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
+    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,
+      repeating-conic-gradient(rgba(255,255,255,0.25) 0 0.0001%, rgba(255,255,255,0.04) 0 0.0002%) 60% 60% / 2500px 2500px;
+    background-blend-mode: normal, difference;"
+    {{ with .Get "rotate" }}style="transform: rotate({{. }}deg)"{{ end }}>
     {{ .Inner | markdownify }}
-</div>
\ No newline at end of file
+</div>
diff --git a/layouts/_shortcodes/sidenote.html b/layouts/_shortcodes/sidenote.html
deleted file mode 100644
index bf2a87d3..00000000
--- a/layouts/_shortcodes/sidenote.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div class="sidenote">
-    <h4 class="sidenote-title">{{ index .Params 0 | markdownify }}</h4>
-    <div class="sidenote-content">{{ index .Params 1 | markdownify }}</div>
-</div>
diff --git a/uno.config.js b/uno.config.js
index aad12277..c3c6362c 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -30,7 +30,10 @@ export default defineConfig({
       'absolute',
       'w-[5rem]',
       'h-[5rem]',
-      'top-[2rem]'
+      'top-[2rem]',
+      'w-[calc(25%_-_1rem)]',
+      'w-[calc(50%_-_2rem)]',
+      'sm:w-full',
     ],
   content: {
     filesystem: ['./**/*.{html,md,js}'],