diff options
| author | Eltrac <hi@guhub.cn> | 2025-03-27 14:14:15 +0800 |
|---|---|---|
| committer | Eltrac <hi@guhub.cn> | 2025-03-27 14:14:15 +0800 |
| commit | e985258cc6769080d657e13f76b86928b1f47a97 (patch) | |
| tree | 2308a154a9d34194c448802ec6580ecbc79f1873 | |
| parent | 56f5db6749ff32eea2db51df7225017a31c21e6a (diff) | |
feat: distinguish book books and bad books with styles
Former-commit-id: 8a355d8a7066b95eeb5356c79957a2df8f160c57
| -rw-r--r-- | assets/css/components/_library.scss | 31 | ||||
| -rw-r--r-- | layouts/library/section.html | 2 | ||||
| -rw-r--r-- | static/img/thumbs-down.png | bin | 0 -> 1600 bytes |
3 files changed, 30 insertions, 3 deletions
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 Binary files differnew file mode 100644 index 00000000..37fdbafe --- /dev/null +++ b/static/img/thumbs-down.png |
