refactor(theme): better scss structure

5 files changed, 163 insertions, 164 deletions

diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index 89adf253..aebf7c39 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -1,69 +1,71 @@
 /* posts list */
 
 #posts-list {
-  min-height: 600px;
-}
-
-#posts-list ul {
-  list-style-type: none;
-  padding-inline-start: 1em;
-}
-
-.featured-post a.posts-title-link {
-  font-weight: 800;
-  display: block;
-}
+    min-height: 600px;
 
-.posts-line {
-  font-size: 1.2rem;
-  margin: 12px 0;
-}
-
-#posts-list > 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;
-}
+    & > 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-categories {
-  font-size: 0.8rem;
-  text-align: center;
-}
+    .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-category {
-  padding: 3px 0;
-  border: var(--border-color) 2px solid;
-  border-radius: 5px;
-  background-color: var(--background-color);
-}
+            .posts-date {
+              font-family: var(--mono-font-family);
+              color: var(--secondary-text-color)
+            }
 
-.posts-date {
-  font-family: var(--mono-font-family);
-  color: var(--secondary-text-color)
-}
+            .posts-categories {
+              font-size: 0.8rem;
+              text-align: center;
+            }
 
-.posts-year-section {
-  --section-height: 9rem;
-  min-height: var(--section-height);
-  position: relative;
-  margin: 2rem 0;
-}
+            .posts-category {
+              padding: 3px 0;
+              border: var(--border-color) 2px solid;
+              border-radius: 5px;
+              background-color: var(--background-color);
+            }
+          }
+      }
+    }
 
-.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;
+    hr {
+      border: 1px solid var(--border-color);
+      margin: 3rem 0;
+    }
 }
 
-#posts-list hr {
-  border: 1px solid var(--border-color);
-  margin: 3rem 0;
-}
 
 .posts-subtitle {
   color: var(--secondary-text-color)
@@ -131,93 +133,49 @@
     }
 }
 
-
-
-/* post */
-
-.post-header {
-  margin-bottom: 2rem;
-}
-
-.post-title {
-  font-size: 2rem;
-  font-weight: 900;
-}
-
-.post-subtitle {
-  display: block;
-  color: var(--secondary-text-color);
-  font-style: italic;
-  font-size: 1.2rem;
-}
-
-.post-tags a {
-  display: inline-block;
-  color: var(--secondary-text-color);
-  font-size: var(--content-font-size);
-}
-
-.post-date {
-  color: var(--secondary-text-color)
-}
-
-.post-author {
-  float: right;
-  font-weight: 600;
-}
-
-.page-content {
-  min-height: 60%;
-}
-
-.post-content {
-  margin-bottom: 50px;
-  line-height: 2
-}
-
 /* termlist */
 
-.termlist-title {
-  font-size: 2rem;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  background-color: var(--block-background-color);
-  padding: 0.5rem 1rem;
-  border-radius: 1rem;
-  width: fit-content;
-  margin: 2rem auto;
-  margin-bottom: 0;
-}
-
-.termlist-title::before,
-.termlist-title::after {
-  margin: 0.5rem 0;
-  color: var(--secondary-text-color);
-  font-size: 0.75em
-}
-
-.termlist-title::before {
-  content: "《";
-}
-
-.termlist-title::after {
-  content: "》";
-}
-
-.termlist-subscribe {
-    text-align: center;
-    font-size: .9rem
-}
-
-.termlist-subscribe a {
-    color: var(--secondary-text-color)
-}
+.termlist-page {
+    .termlist-title {
+      font-size: 2rem;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      background-color: var(--block-background-color);
+      padding: 0.5rem 1rem;
+      border-radius: 1rem;
+      width: fit-content;
+      margin: 2rem auto;
+      margin-bottom: 0;
+
+      &::before,
+      &::after {
+        margin: 0.5rem 0;
+        color: var(--secondary-text-color);
+        font-size: 0.75em
+      }
+
+      &::before {
+        content: "《";
+      }
+
+      &::after {
+        content: "》";
+      }
+    }
 
-.termlist-subscribe a:hover {
-    text-decoration: none
+    .termlist-subscribe {
+        text-align: center;
+        font-size: .9rem;
+        a {
+            color: var(--secondary-text-color);
+            &:hover {
+                text-decoration: none
+            }
+        }
+    }
 }
 
 /* category page */
@@ -229,29 +187,29 @@ section.taxonomy {
 .taxonomy-tags {
     display: flex;
     flex-wrap: wrap;
-    gap: .5rem
-}
-
-.taxonomy-tags-item {
-    display: inline-flex;
-    align-items: center;
-    gap: .3rem;
-
-    padding: .25rem .75rem;
-    background-color: var(--block-background-color);
-    transition: color, background .3s;
-    border-radius: .3rem;
-}
-
-.taxonomy-tags-item:hover {
-    text-decoration: none;
-    background-color: var(--text-color);
-    color: var(--block-background-color);
-}
+    gap: .5rem;
+
+    .taxonomy-tags-item {
+        display: inline-flex;
+        align-items: center;
+        gap: .3rem;
+
+        padding: .25rem .75rem;
+        background-color: var(--block-background-color);
+        transition: color, background .3s;
+        border-radius: .3rem;
+
+        &:hover {
+            text-decoration: none;
+            background-color: var(--text-color);
+            color: var(--block-background-color);
+        }
 
-.taxonomy-tags-item .tag-count {
-    font-size: .8rem;
-    color: var(--secondary-text-color);
+        .tag-count {
+            font-size: .8rem;
+            color: var(--secondary-text-color);
+        }
+    }
 }
 
 @media screen and (max-width: 600px) {
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
new file mode 100644
index 00000000..bd7c77e1
--- /dev/null
+++ b/assets/css/components/_post.scss
@@ -0,0 +1,42 @@
+
+/* post */
+
+.post-header {
+  margin-bottom: 2rem;
+}
+
+.post-title {
+  font-size: 2rem;
+  font-weight: 900;
+}
+
+.post-subtitle {
+  display: block;
+  color: var(--secondary-text-color);
+  font-style: italic;
+  font-size: 1.2rem;
+}
+
+.post-tags a {
+  display: inline-block;
+  color: var(--secondary-text-color);
+  font-size: var(--content-font-size);
+}
+
+.post-date {
+  color: var(--secondary-text-color)
+}
+
+.post-author {
+  float: right;
+  font-weight: 600;
+}
+
+.page-content {
+  min-height: 60%;
+}
+
+.post-content {
+  margin-bottom: 50px;
+  line-height: 2
+}
diff --git a/assets/css/index.scss b/assets/css/index.scss
index d946addc..de0fb97e 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/post';
 @import 'components/content';
 @import 'components/shortcodes';
 @import 'components/footer';
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index 1bfebfa8..8c69edbf 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -1,5 +1,5 @@
 {{ partial "snippets/document-start.html" . }}
-    <article class="posts">
+    <article class="posts termlist-page">
       {{ partial "header.html" . }}
       <h1 class="termlist-title">{{.Data.Term}}</h1>
       <p class="termlist-subscribe">
diff --git a/layouts/index.html b/layouts/index.html
index 4484694d..d6a41bed 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,8 +1,6 @@
 {{ partial "snippets/document-start.html" . }}
     <article class="posts">
       {{ partial "header.html" . }}
-
-
       <header id="posts-header">
           <div id="post-series">
               <h1>专栏</h1>