feat(theme): put category banner in category page

3 files changed, 34 insertions, 53 deletions

diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss
index 0476ea90..d6e57da1 100644
--- a/assets/css/components/_markdown.scss
+++ b/assets/css/components/_markdown.scss
@@ -74,11 +74,6 @@ $em-text-color: #889E73;
     color: $em-text-color;
   }
 
-  hr {
-    margin: 2.5rem auto;
-    border: 0.05rem solid var(--border-color);
-  }
-
   img {
     max-width: 100%;
     display: block;
diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index fc94c1b2..a818ab52 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -73,63 +73,44 @@
 
 /* post series */
 
-#posts-header {
+#post-series-list {
+    display: flex;
+    justify-content: center;
+    gap: .5rem;
+
     @media screen and (min-width: 768px) {
-        display: grid;
-        grid-template-columns: 2fr 1fr;
+        margin: 1rem;
+        gap: 1rem;
     }
 
-    #post-series {
-        #post-series-list {
-            display: flex;
-            gap: .5rem;
+    .post-series-item {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        transition: .3s;
+        cursor: pointer;
 
-            @media screen and (min-width: 768px) {
-                margin: 1rem;
-                gap: 1rem;
-            }
+        @include bordered;
 
-            .post-series-item {
-                display: flex;
-                flex-direction: column;
-                overflow: hidden;
-                transition: .3s;
-                cursor: pointer;
-
-                @include bordered;
-
-                .post-series-cover {
-                    img {
-                        display: block;
-                        width: 8rem;
-                    }
-                }
-                .post-series-text {
-                    background-color: var(--block-background-color);
-                    h3 {
-                        margin: 0;
-                        text-align: center;
-                    }
-                }
-
-                &:hover {
-                    text-decoration: none;
-                    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2);
-                    transform: translateY(-.5rem)
-                }
+        .post-series-cover {
+            img {
+                display: block;
+                width: 8rem;
             }
         }
-    }
-
-    #posts-recommendation {
-        #posts-recommendation-links {
-            display: flex;
-            flex-direction: row;
-            gap: .5rem;
-            @media screen and (min-width: 768px) {
-                flex-direction: column;
+        .post-series-text {
+            background-color: var(--block-background-color);
+            h3 {
+                margin: 0;
+                text-align: center;
             }
         }
+
+        &:hover {
+            text-decoration: none;
+            box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2);
+            transform: translateY(-.5rem)
+        }
     }
 }
 
diff --git a/assets/css/components/_reset.scss b/assets/css/components/_reset.scss
index 83e20eca..3512e553 100644
--- a/assets/css/components/_reset.scss
+++ b/assets/css/components/_reset.scss
@@ -68,3 +68,8 @@ button {
         }
     }
 }
+
+hr {
+  margin: 2.5rem auto;
+  border: 0.05rem solid var(--border-color);
+}