feat: new header image

Former-commit-id: 3ec5395679f838c40152a7971f1974cc5996beb2

1 files changed, 36 insertions, 0 deletions

diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index bd7c77e1..e782f854 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -40,3 +40,39 @@
   margin-bottom: 50px;
   line-height: 2
 }
+
+#post-page-header {
+    margin: var(--page-header-top) auto;
+    margin-bottom: 2rem;
+    max-width: var(--page-width);
+
+    .title-image {
+        width: 10rem;
+    }
+}
+
+#post-page-header.with-banner {
+    .title-image-container {
+        background-color: var(--block-background-color);
+        border-radius: 50%;
+        transform: rotate(7deg);
+        box-shadow: 0 0 0.2rem rgba(0,0,0,.2);
+        padding: 1rem;
+
+        position: absolute;
+        z-index: 5;
+        right: 1rem;
+        top: 1rem;
+        width: 5rem;
+
+        .title-image {
+            width: 100%;
+        }
+
+        @media screen and (min-width: 768px) {
+            width: 8rem;
+            left: calc(50vw + var(--page-width) / 2 - 5rem);
+            top: calc(var(--page-header-top) - 2rem);
+        }
+    }
+}