feat: new home page

- new post list structure and style
- move categories page link to postnav, a new navigation component used between homepage and categories page
- search anywhere instruction
- move posts archive page link to top navigation
- some more skeletons!


Former-commit-id: 9b8ac5fe0115f4b7609ca6b990a35077c8221c45

4 files changed, 92 insertions, 79 deletions

diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index db5f83d5..3bc0de1c 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -1,81 +1,3 @@
-/* posts list */
-
-.posts-list {
-    min-height: 600px;
-
-    &
-        > section:nth-child(1)
-        > ul:nth-child(3)
-        > li.first-post
-        > div
-        > div.posts-title.col-xs-9.col-sm-10
-        > div {
-        align-items: flex-start;
-    }
-
-    .posts-year-section {
-        --section-height: 9rem;
-        min-height: var(--section-height);
-        position: relative;
-        margin: 2rem 0;
-
-        .posts-year-title {
-            font-size: 2rem;
-            font-weight: 900;
-            position: absolute;
-            right: 0;
-            color: var(--text-color);
-            opacity: 0.25;
-            font-size: calc(var(--section-height) / 2);
-            margin: 0;
-            line-height: 1;
-            z-index: -1;
-        }
-    }
-
-    ul {
-        list-style-type: none;
-        padding-inline-start: 0;
-        padding: 0;
-
-        .posts-line {
-            font-size: 1.2rem;
-            margin: 12px 0;
-
-            &.featured-post a.posts-title-link {
-                font-weight: 800;
-                display: block;
-            }
-
-            .posts-date {
-                font-family: var(--mono-font-family);
-                color: var(--secondary-text-color);
-            }
-
-            .posts-categories {
-                font-size: 0.8rem;
-                text-align: center;
-            }
-
-            .posts-category {
-                padding: 3px 0;
-                border: var(--border-color) 2px solid;
-                border-radius: 5px;
-                background-color: var(--background-color);
-            }
-        }
-    }
-
-    hr {
-        border: 1px solid var(--border-color);
-        margin: 3rem 0;
-    }
-}
-
-.posts-subtitle {
-    color: var(--secondary-text-color);
-}
-
 /* post series */
 
 #post-series-list {
@@ -243,6 +165,7 @@ section.taxonomy {
     }
 
     .posts-year-archive {
+        width: 100%;
         .posts-year-title {
             border-bottom: 2px solid var(--border-color);
             padding: 0.5rem 0;
diff --git a/assets/css/components/_postlist.scss b/assets/css/components/_postlist.scss
new file mode 100644
index 00000000..27016245
--- /dev/null
+++ b/assets/css/components/_postlist.scss
@@ -0,0 +1,89 @@
+.posts-list {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem 0;
+    .posts-item {
+        width: 100%;
+        border-bottom: 1px solid var(--border-color);
+        margin: 0.5rem 0;
+        header {
+            width: 100%;
+
+            @media screen and (min-width: 768px) {
+                display: flex;
+                justify-content: space-between;
+            }
+
+            .posts-item-meta {
+                time {
+                    color: var(--secondary-text-color);
+                    font-family: var(--mono-font-family);
+                }
+            }
+
+            .posts-item-category {
+                margin: 0.5rem 0;
+                a {
+                    border: 2px solid var(--border-color);
+                    border-radius: 0.2rem;
+                    padding: 0.2rem 0.5rem;
+                    text-decoration: none;
+                    font-size: 0.8rem;
+                    display: inline-block;
+                }
+            }
+        }
+        .posts-item-summary {
+            h1, h2, h3, h4, h5, h6 {
+                display: none;
+            }
+            font-size: 1em;
+        }
+    }
+}
+
+#posts-list-navigation {
+    ul {
+        position: relative;
+        width: 100%;
+        padding-inline-start: 0;
+        display: flex;
+        list-style: none;
+        gap: 0.2rem;
+        li {
+            flex-shrink: 0;
+            flex-grow: 0;
+            &.active {
+                font-weight: bolder
+            }
+            a {
+                background-color: var(--block-background-color);
+                padding: 0.2rem 0.5rem;
+                text-decoration: none;
+                border-radius: 0.2rem;
+                border: 1px solid var(--background-color);
+                transition: border-color 0.3s ease;
+                &:hover, .active & {
+                    border: 1px solid var(--text-color)
+                }
+            }
+        }
+
+        .search-instruction {
+            font-size: 0.9rem;
+            color: var(--secondary-text-color);
+            margin-left: 0.5rem;
+
+        }
+
+        .list-decoration {
+            position: absolute;
+            right: 0;
+            img {
+                opacity: 0.55;
+                height: 2rem;
+                width: 2rem;
+            }
+        }
+    }
+}
diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss
index b27babfc..455fa5b9 100644
--- a/assets/css/components/_variables.scss
+++ b/assets/css/components/_variables.scss
@@ -16,7 +16,7 @@
     --serif-font-family: "Noto Serif", "Noto Serif SC", serif;
     --content-font-size: 20px;
 
-    --page-width: 700px;
+    --page-width: 650px;
     --page-header-top: 5rem;
 
     /* pagefind custom css */
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 80bef56e..90a9cb18 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -3,6 +3,7 @@
 @import "components/markdown";
 @import "components/header";
 @import "components/pages";
+@import "components/postlist";
 @import "components/post";
 @import "components/content";
 @import "components/comment";