refactor: replace _library.scss with unocss

Former-commit-id: c831c88a8622c743799195074777c4ca3f5408f9

11 files changed, 57 insertions, 187 deletions

diff --git a/assets/css/components/_library.scss b/assets/css/components/_library.scss
deleted file mode 100644
index 8aa1ea03..00000000
--- a/assets/css/components/_library.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-.book-group {
-    --gap: 1rem;
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    margin: 1rem 0;
-    flex-wrap: wrap;
-
-    .book {
-        --number-in-line: 4;
-        @media screen and (min-width: 768px) {
-            --number-in-line: 6;
-        }
-
-        width: calc(100% / var(--number-in-line) - var(--gap));
-        &.badbook {
-            opacity: 0.5;
-            z-index: 0;
-            a { position: relative; }
-            a::before {
-                position: absolute;
-                z-index: 1;
-                content: "";
-                top: 25%;
-                left: 25%;
-                height: 50%;
-                width: 50%;
-                background-image: url('https://image.guhub.cn/uPic/2025/05/thumbs-down.png');
-                background-size: 100%;
-                background-position: center;
-                background-repeat: no-repeat;
-            }
-        }
-        &.goodbook {
-            .book-cover {
-                border-color: gold;
-                box-shadow: 0 0.1rem 0.75rem goldenrod;
-            }
-        }
-    }
-}
-
-.book-body {
-    line-height: 2;
-
-    hr {
-        clear: both
-    }
-
-    .book-footer {
-        font-size: 1rem;
-        color: var(--secondary-text-color);
-    }
-}
-
-#book-page {
-    --book-cover-width: 10rem;
-    @media screen and (min-width: 768px) {
-        --book-cover-width: 15rem;
-    }
-
-    .book-page-header {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.5rem;
-
-        p {
-            margin: 0;
-        }
-
-        .book-cover {
-            @include framed;
-            img {
-                width: var(--book-cover-width);
-            }
-        }
-
-        .book-title {
-            filter: url(#x)
-        }
-
-        position: relative;
-        .title-image-container {
-            --size: 5rem;
-            position: absolute;
-            top: 2rem;
-            right: calc(50% - var(--book-cover-width) / 2 - var(--size));
-            @include roundSticker;
-            width: var(--size);
-            height: var(--size);
-
-            .title-image {
-                width: 100%;
-            }
-        }
-    }
-}
-
-.book-cover {
-    display: block;
-    img {
-        display: block;
-        width: 100%;
-    }
-
-    #library &, .termlist-page & {
-        @include framed;
-
-        transition: transform 0.3s ease;
-        transform: rotate(3deg);
-        &:hover {
-            transform: rotate(0) translateY(-0.5rem) scale(1.1)
-        }
-    }
-
-    #post-content & {
-        margin: 0 auto;
-        max-width: 50%;
-        @media screen and (min-width: 768px) {
-            display: inxwline-block;
-            float: left;
-            width: 12rem;
-            margin: 0 2rem 1.2rem 0;
-        }
-    }
-}
diff --git a/assets/css/global.scss b/assets/css/global.scss
index c16fc056..51261ee8 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -10,6 +10,5 @@
 @import "components/postlist";
 @import "components/shortcodes";
 @import "components/card";
-@import "components/library";
 @import "components/footer";
 @import "components/global-search";
diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss
index 53cd3642..7a3b4a8a 100644
--- a/assets/css/utils/_utility.scss
+++ b/assets/css/utils/_utility.scss
@@ -60,3 +60,7 @@ figure {
 .xerox {
     filter: url(#x);
 }
+
+.round-sticker {
+    @include roundSticker;
+}
diff --git a/layouts/_partials/components/logo.html b/layouts/_partials/components/logo.html
index 36040768..79da48e8 100644
--- a/layouts/_partials/components/logo.html
+++ b/layouts/_partials/components/logo.html
@@ -1,10 +1,11 @@
 {{ $default := "https://image.guhub.cn/uPic/2025/05/header.png" }}
 {{ $link := .link | default "" }}
 {{ $src := .src | default $default }}
+{{ $class := .class | default "" }}
 
 <a href="{{ .Site.LanguagePrefix }}/{{ $link }}"
-    class="title-image-container">
+    class="title-image-container {{ $class }}">
     <img src="{{ $src }}" alt="Logo"
-        class="invert-if-dark title-image"
+        class="invert-if-dark title-image w-full"
         style="view-transition-name: title-image" />
 </a>
diff --git a/layouts/_partials/items/book.html b/layouts/_partials/items/book.html
new file mode 100644
index 00000000..ff5dbe99
--- /dev/null
+++ b/layouts/_partials/items/book.html
@@ -0,0 +1,19 @@
+<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
+      hover:rotate-0 hover:-translate-y-2 hover:scale-110 transition
+
+      {{ if eq .Params.rating 1 }} relative
+      {{ else if eq .Params.rating 5 }} border-amber-200 shadow-amber-100
+      {{ else }} border-white{{ end }}">
+    <img class="lazy w-full block" src="{{ .Params.cover }}!small" />
+    {{ if eq .Params.rating 1 }}
+    <div class="absolute z-1 top-[25%] left-[25%] h-[50%] w-[50%]"
+        style="background-image: url('https://image.guhub.cn/uPic/2025/05/thumbs-down.png');
+        background-size: 100%;
+        background-position: center;
+        background-repeat: no-repeat;"></div>
+    {{ end }}
+  </a>
+</div>
diff --git a/layouts/_shortcodes/bookcard.html b/layouts/_shortcodes/bookcard.html
index 27d96001..d0fe3a4a 100644
--- a/layouts/_shortcodes/bookcard.html
+++ b/layouts/_shortcodes/bookcard.html
@@ -2,9 +2,9 @@
 {{- $book := index (where $books "File.BaseFileName" (.Get 0)) 0 -}}
 
 {{- if $book }}
-    <div class="markdown-body book-body">
-        <div class="book-cover">
-            <img class="no-fancybox" src="{{ $book.Params.cover }}" />
+    <div class="markdown-body">
+        <div class="mx-auto max-w-[50%] ">
+            <img class="no-fancybox block w-full" src="{{ $book.Params.cover }}" />
         </div>
         <h3 class="book-title">
             <a href="{{ $book.Permalink }}">{{ $book.Title }}</a>
diff --git a/layouts/library/page.html b/layouts/library/page.html
index d5d2ea59..fa7cee46 100644
--- a/layouts/library/page.html
+++ b/layouts/library/page.html
@@ -1,37 +1,37 @@
 {{ define "main" }}
     <article id="book-page">
-        <div class="book-page-header">
-            <div class="book-cover"
+        <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]"
                 style="view-transition-name: book-{{ .File.UniqueID }}">
                 <img
-                    class="lazy" loading="lazy"
+                    class="lazy block w-full h-auto" loading="lazy"
                     data-pagefind-meta="image[src]"
                     src="{{ .Params.cover }}"
                 />
+                {{ 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]") }}
             </div>
-            <h1 class="book-title" data-pagefind-meta="title">{{ .Title }}</h1>
+            <h1 class="xerox" data-pagefind-meta="title">{{ .Title }}</h1>
             {{- $rating := .Params.rating -}}
             {{- $fullStars := math.Floor $rating -}}
-            <p class="book-author">
+            <p class="m-0">
                 {{ .Params.author }}
             </p>
-            <p class="book-rating">
+            <p class="m-0">
                 {{- range seq $fullStars }}
                 <span class="star">⭐</span>
                 {{- end -}}
             </p>
-            <!-- 导航作用的骷髅头图标 -->
-            <div>
-                {{ partial "components/logo" (dict "link" "library") }}
-            </div>
-        </div>
-        <div class="markdown-body book-body">
+        </header>
+        <div class="markdown-body">
             <div class="book-content">
                 {{ .Content }}
             </div>
             <!-- Endnotes -->
             {{ partial "posts/endnotes" . }}
-            <div class="book-footer">
+            <div class="text-[1rem] font-secondary">
                 <p>于 {{ partial "components/date" . }} 读完</p>
             </div>
         </div>
diff --git a/layouts/library/section.html b/layouts/library/section.html
index 217936d8..82b12b40 100644
--- a/layouts/library/section.html
+++ b/layouts/library/section.html
@@ -2,17 +2,11 @@
   {{ partial "header.html" . }}
   <article id="library">
     <div id="library-content">
-
         <h2>{{ now.Year }} 年读的书</h2>
-        <div class="book-group">
+        <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-[1rem] my-[1rem]">
           {{ range where .Site.RegularPages "Section" "library" }}
             {{ if eq .Date.Year now.Year }}
-              <div class="book{{ if eq .Params.rating 1 }} badbook{{ end }}{{ if eq .Params.rating 5 }} goodbook{{ end }}"
-                style="view-transition-name: book-{{ .File.UniqueID }}">
-                <a href="{{ .Permalink }}" class="book-cover" style="view-transition-name: book-{{ .Title }}">
-                  <img class="lazy" src="{{ .Params.cover }}!small" />
-                </a>
-              </div>
+            {{ partial "items/book" . }}
             {{ end }}
           {{ end }}
         </div>
@@ -35,15 +29,9 @@
         </div>
 
         <h2>推荐好书</h2>
-        <div class="book-group">
+        <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-[1rem] my-[1rem]">
         {{ range where (where .Site.RegularPages "Section" "library") ".Params.rating" "==" 5 }}
-            <div class="book">
-            <a href="{{ .Permalink }}" class="book-cover" style="view-transition-name: book-{{ .Title }}">
-                <img
-                    class="lazy" src="{{ .Params.cover }}"
-                    style="view-transition-name: book-{{ .File.UniqueID }}" />
-            </a>
-            </div>
+        {{ partial "items/book" . }}
         {{ end }}
         </div>
     </div>
diff --git a/layouts/library/yearlist.html b/layouts/library/yearlist.html
index c5d46bee..0ad72da0 100644
--- a/layouts/library/yearlist.html
+++ b/layouts/library/yearlist.html
@@ -3,17 +3,11 @@
     <article id="library">
       <div id="library-content">
           <h2>{{ .Title }}</h2>  <!-- 显示年份 -->
-          <div class="book-group">
+          <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-[1rem] my-[1rem]">
             {{ $year := .Title }}
             {{ range where .Site.RegularPages "Section" "library" }}
               {{ if eq (printf "%d" .Date.Year) $year }}
-              <div class="book{{ if eq .Params.rating 1 }} badbook{{ end }}{{ if eq .Params.rating 5 }} goodbook{{ end }}">
-                  <a href="{{ .Permalink }}" class="book-cover" style="view-transition-name: book-{{ .Title }}">
-                      <img
-                          class="lazy" src="{{ .Params.cover }}"
-                          style="view-transition-name: book-{{ .File.UniqueID }}" />
-                  </a>
-              </div>
+              {{ partial "items/book" . }}
               {{ end }}
             {{ end }}
           </div>
diff --git a/layouts/term.html b/layouts/term.html
index 90fb48b9..0dfdc429 100644
--- a/layouts/term.html
+++ b/layouts/term.html
@@ -34,16 +34,9 @@
             {{ $cards := where .Pages "Section" "eq" "cards" }}
             {{ if gt (len $cards) 0 }}
             <h2>{{ T "termPage.cards" }}</h2>
-            <div class="term-list-cards cards-section outbox small">
+            <div class="grid grid-cols-2 gap-x-[1rem]">
                 {{ range $cards }}
-                <div class="card">
-                    <h3>
-                        <a href="{{ .RelPermalink }}" data-umami-event="🗃️ Click Card Link from Category Page">
-                            {{ .Title }}
-                        </a>
-                    </h3>
-                    <p>{{ .Summary }}</p>
-                </div>
+                {{ partial "items/card" (dict "context" . "summary" true) }}
                 {{ end }}
             </div>
             {{ end }}
@@ -52,15 +45,9 @@
             {{ $books := where .Pages "Section" "eq" "library" }}
             {{ if gt (len $books) 0 }}
             <h2>{{ T "termPage.books" }}</h2>
-            <div class="book-group">
+            <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-[1rem] my-[1rem]">
                 {{ range $books }}
-                <div class="book{{ if eq .Params.rating 1 }} badbook{{ end }}{{ if eq .Params.rating 5 }} goodbook{{ end }}">
-                    <a href="{{ .Permalink }}" class="book-cover" style="view-transition-name: book-{{ .Title }}">
-                        <img
-                            class="lazy" src="{{ .Params.cover }}"
-                            style="view-transition-name: book-{{ .File.UniqueID }}" />
-                    </a>
-                </div>
+                {{ partial "items/book" . }}
                 {{ end }}
             </div>
             {{ end }}
diff --git a/uno.config.js b/uno.config.js
index b4ac2e97..aad12277 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -26,6 +26,11 @@ export default defineConfig({
       'opacity-[0.8]',
       'opacity-[0.9]',
       'opacity-[1.0]',
+
+      'absolute',
+      'w-[5rem]',
+      'h-[5rem]',
+      'top-[2rem]'
     ],
   content: {
     filesystem: ['./**/*.{html,md,js}'],