From e985258cc6769080d657e13f76b86928b1f47a97 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

Former-commit-id: 8a355d8a7066b95eeb5356c79957a2df8f160c57
---
 assets/css/components/_library.scss | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

(limited to 'assets/css')

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;
+                }
+            }
         }
     }
 }
-- 
cgit v1.2.3