feat: new book page design

3 files changed, 59 insertions, 19 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;
+}