feat(theme): new header in index page

3 files changed, 90 insertions, 5 deletions

diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index 61a88aae..ab49a877 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -69,6 +69,60 @@
   color: var(--secondary-text-color)
 }
 
+/* post series */
+
+#posts-header {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+
+    #post-series {
+        #post-series-list {
+            display: flex;
+            gap: 1rem;
+            margin: 1rem;
+            .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)
+                }
+            }
+        }
+    }
+
+    #posts-recommendation {
+        #posts-recommendation-links {
+            display: flex;
+            flex-direction: column;
+            gap: .5rem
+        }
+    }
+}
+
+
+
 /* post */
 
 .post-header {
diff --git a/assets/css/components/_reset.scss b/assets/css/components/_reset.scss
index 8d29ea32..1e694bd8 100644
--- a/assets/css/components/_reset.scss
+++ b/assets/css/components/_reset.scss
@@ -30,3 +30,30 @@ a:hover {
 ul {
   list-style-type: square;
 }
+
+button {
+    border: none;
+    outline: none;
+    color: var(--text-color);
+    font-size: 1rem;
+    font-family: var(--serif-font-family);
+    cursor: pointer
+}
+
+.button {
+    display: block;
+    background-color: var(--block-background-color);
+    width: 100%;
+    padding: .5rem;
+    font-size: 1rem;
+    text-align: center;
+    box-sizing: border-box;
+    @include bordered;
+
+    &a {
+        text-decoration: none;
+        &:hover {
+            text-decoration: none;
+        }
+    }
+}
diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss
index 11eded55..bf7fe601 100644
--- a/assets/css/components/_variables.scss
+++ b/assets/css/components/_variables.scss
@@ -15,11 +15,6 @@
   --serif-font-family:  "Noto Serif SC", serif;
   --content-font-size: 20px;
 
-  /* waline */
-  --waline-font-size: 20px;
-  --waline-border-color: var(--border-color);
-  --waline-bg-color: var(--background-color);
-
   --page-width: 700px;
 }
 
@@ -42,3 +37,12 @@
     --link-color: #277BD9;
   }
 }
+
+@mixin bordered {
+    border-radius: .5rem;
+    border: 1px solid var(--border-color);
+}
+
+@mixin shadowed {
+
+}