fix: skull logo styles gets messed up in some pages

Former-commit-id: 5185f251c3a88525de33c659d35c0ce57f2c0119

2 files changed, 54 insertions, 52 deletions

diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 59c58dd5..c099e535 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -80,3 +80,57 @@
       text-decoration: none;
     }
 }
+
+/* skull logo */
+
+#post-page-header {
+    margin: 0 auto;
+    margin-bottom: 2rem;
+    max-width: var(--page-width);
+
+    .title-image {
+        width: 10rem;
+    }
+}
+
+#post-page-header.with-banner {
+    .title-image-container {
+        @include roundSticker;
+        transform: rotate(7deg);
+
+        position: absolute;
+        z-index: 5;
+        right: 0.25rem;
+        top: 0.25rem;
+        width: 3rem;
+        padding: 0.5rem;
+
+        @media screen and (min-width: 640px) {
+            right: 0.5rem;
+            top: 0.5rem;
+            width: 4rem;
+            padding: 1rem;
+        }
+
+        @media screen and (min-width: 768px) {
+            width: 6rem;
+            left: calc(50vw + var(--page-width) / 2 - 7rem);
+            top: calc(var(--page-margin-y) - 2rem);
+        }
+
+        @media screen and (min-width: 768px) {
+            width: 6rem;
+            left: calc(50vw + var(--page-width) / 2 - 7rem);
+            top: calc(var(--page-margin-y) - 2rem);
+        }
+
+        @media screen and (min-width: 1200px) {
+            width: 8rem;
+            left: calc(50vw + var(--page-width) / 2 - 5rem);
+        }
+
+        .title-image {
+            width: 100%;
+        }
+    }
+}
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index d6f8ab3a..e93f9b77 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -42,58 +42,6 @@
   line-height: 2
 }
 
-#post-page-header {
-    margin: 0 auto;
-    margin-bottom: 2rem;
-    max-width: var(--page-width);
-
-    .title-image {
-        width: 10rem;
-    }
-}
-
-#post-page-header.with-banner {
-    .title-image-container {
-        @include roundSticker;
-        transform: rotate(7deg);
-
-        position: absolute;
-        z-index: 5;
-        right: 0.25rem;
-        top: 0.25rem;
-        width: 3rem;
-        padding: 0.5rem;
-
-        @media screen and (min-width: 640px) {
-            right: 0.5rem;
-            top: 0.5rem;
-            width: 4rem;
-            padding: 1rem;
-        }
-
-        @media screen and (min-width: 768px) {
-            width: 6rem;
-            left: calc(50vw + var(--page-width) / 2 - 7rem);
-            top: calc(var(--page-margin-y) - 2rem);
-        }
-
-        @media screen and (min-width: 768px) {
-            width: 6rem;
-            left: calc(50vw + var(--page-width) / 2 - 7rem);
-            top: calc(var(--page-margin-y) - 2rem);
-        }
-
-        @media screen and (min-width: 1200px) {
-            width: 8rem;
-            left: calc(50vw + var(--page-width) / 2 - 5rem);
-        }
-
-        .title-image {
-            width: 100%;
-        }
-    }
-}
-
 /* related posts */
 
 .nrt {