feat: new book page design

4 files changed, 77 insertions, 27 deletions

diff --git a/assets/css/components/_library.scss b/assets/css/components/_library.scss
index 54b75c86..c2132766 100644
--- a/assets/css/components/_library.scss
+++ b/assets/css/components/_library.scss
@@ -50,22 +50,54 @@
         clear: both
     }
 
-    .book-title {
-        margin: 0.1rem 0;
-        a {
-            color: var(--text-color);
-            text-decoration: none;
-        }
+    .book-footer {
+        font-size: 1rem;
+        color: var(--secondary-text-color);
     }
+}
 
-    .book-meta {
-        font-size: 0.9rem;
-        color: var(--secondary-text-color);
+#book-page {
+    --book-cover-width: 10rem;
+    @media screen and (min-width: 768px) {
+        --book-cover-width: 15rem;
     }
 
-    .book-footer {
-        font-size: 1rem;
-        color: var(--secondary-text-color);
+    .book-page-header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        margin-top: var(--page-header-top);
+
+        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%;
+            }
+        }
     }
 }
 
@@ -77,8 +109,7 @@
     }
 
     #library & {
-        border: 0.2rem solid #fff;
-        box-shadow: 0 0.1rem 0.75rem rgba(0,0,0,0.2);
+        @include framed;
 
         transition: transform 0.3s ease;
         transform: rotate(3deg);
@@ -87,7 +118,7 @@
         }
     }
 
-    #book-page &, #post-content & {
+    #post-content & {
         margin: 0 auto;
         max-width: 50%;
         @media screen and (min-width: 768px) {
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index 3c8ca39c..32e57a15 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -53,11 +53,8 @@
 
 #post-page-header.with-banner {
     .title-image-container {
-        background-color: var(--block-background-color);
-        border-radius: 50%;
+        @include roundSticker;
         transform: rotate(7deg);
-        box-shadow: 0 0 0.2rem rgba(0,0,0,.2);
-        padding: 1rem;
 
         position: absolute;
         z-index: 5;
diff --git a/assets/css/utils/_variables.scss b/assets/css/utils/_variables.scss
index f55b5205..85ed3e38 100644
--- a/assets/css/utils/_variables.scss
+++ b/assets/css/utils/_variables.scss
@@ -57,6 +57,11 @@ html[lang="en-US"] {
     border: 1px solid var(--border-color);
 }
 
+@mixin framed {
+    border: 0.2rem solid #fff;
+    box-shadow: 0 0.1rem 0.75rem rgba(0,0,0,0.2);
+}
+
 @mixin postCategoryPill {
     background-color: var(--block-background-color);
     font-size: 0.9rem;
@@ -66,3 +71,10 @@ html[lang="en-US"] {
         text-decoration: none;
     }
 }
+
+@mixin roundSticker {
+    background-color: var(--block-background-color);
+    border-radius: 50%;
+    box-shadow: 0 0 0.2rem rgba(0,0,0,.2);
+    padding: 1rem;
+}
diff --git a/layouts/library/single.html b/layouts/library/single.html
index 4927ad71..26a6f02f 100644
--- a/layouts/library/single.html
+++ b/layouts/library/single.html
@@ -1,23 +1,33 @@
 {{ define "main" }}
     <article id="book-page">
-        {{ partial "header.html" . }}
-        <div class="markdown-body book-body">
+        <div class="book-page-header">
             <div class="book-cover"
                 style="view-transition-name: book-{{ .File.UniqueID }}">
                 <img src="{{ .Params.cover }}" />
             </div>
-            <h3 class="book-title">{{ .Title }}</h3>
-
+            <h1 class="book-title">{{ .Title }}</h1>
             {{- $rating := .Params.rating -}}
             {{- $fullStars := math.Floor $rating -}}
-            <div class="book-meta">
+            <p class="book-author">
+                {{ .Params.author }}
+            </p>
+            <p class="book-rating">
                 {{- range seq $fullStars }}
                 <span class="star">⭐</span>
                 {{- end -}}
-                <span> / </span>
-                <span class="author">{{ .Params.author }}</span>
+            </p>
+            <!-- 导航作用的骷髅头图标 -->
+            <div>
+                <a href="{{ .Site.LanguagePrefix }}/library"
+                    class="title-image-container">
+                    <img src="/header.png" alt="Logo"
+                        class="invert-if-dark title-image"
+                        style="view-transition-name: title-image"
+                    />
+                </a>
             </div>
-
+        </div>
+        <div class="markdown-body book-body">
             <div class="book-content">
                 {{ .Content }}
             </div>