From 8a355d8a7066b95eeb5356c79957a2df8f160c57 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Thu, 27 Mar 2025 14:14:15 +0800
Subject: feat: distinguish book books and bad books with styles

---
 assets/css/components/_library.scss |  31 +++++++++++++++++++++++++++++--
 layouts/library/section.html        |   2 +-
 static/img/thumbs-down.png          | Bin 0 -> 1600 bytes
 3 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 static/img/thumbs-down.png

diff --git a/assets/css/components/_library.scss b/assets/css/components/_library.scss
index 3b913214..a7b35dae 100644
--- a/assets/css/components/_library.scss
+++ b/assets/css/components/_library.scss
@@ -1,12 +1,39 @@
 #library {
     #library-content {
+        --gap: 1rem;
         display: flex;
         align-items: center;
-        gap: 1rem;
+        gap: var(--gap);
         margin: 1rem 0;
+        flex-wrap: wrap;
 
         .book {
-            width: 25%;
+            width: calc(100% / 6 - var(--gap));
+            position: relative;
+            &.badbook {
+                opacity: 0.5;
+                z-index: 0;
+                &::before {
+                    position: absolute;
+                    z-index: 1;
+                    content: "";
+                    top: 25%;
+                    left: 25%;
+                    height: 50%;
+                    width: 50%;
+
+                    background-image: url('/img/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;
+                }
+            }
         }
     }
 }
diff --git a/layouts/library/section.html b/layouts/library/section.html
index 834717e7..bc55b500 100644
--- a/layouts/library/section.html
+++ b/layouts/library/section.html
@@ -3,7 +3,7 @@
     <article id="library">
       <div id="library-content">
         {{- range .Pages }}
-        <div class="book">
+        <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 src="{{ .Params.cover }}" />
             </a>
diff --git a/static/img/thumbs-down.png b/static/img/thumbs-down.png
new file mode 100644
index 00000000..37fdbafe
Binary files /dev/null and b/static/img/thumbs-down.png differ
-- 
cgit v1.2.3