refactor: separate css utilities and apply button style to more link

7 files changed, 26 insertions, 13 deletions

diff --git a/assets/css/components/_postlist.scss b/assets/css/components/_postlist.scss
index 87a68026..31e99cd6 100644
--- a/assets/css/components/_postlist.scss
+++ b/assets/css/components/_postlist.scss
@@ -4,6 +4,14 @@
     font-weight: normal;
 }
 
+.index-section-morelink {
+    @include small-button;
+
+    &::after {
+        content: " »";
+    }
+}
+
 /* Post List Styles */
 
 .posts-list {
@@ -57,15 +65,7 @@
                 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)
-                }
+                @include small-button;
             }
         }
 
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 90a9cb18..081b6c3a 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -1,5 +1,8 @@
-@import "components/variables";
-@import "components/reset";
+@import "utils/variables";
+@import "utils/mixins";
+@import "utils/reset";
+@import "utils/utility";
+
 @import "components/markdown";
 @import "components/header";
 @import "components/pages";
@@ -12,7 +15,6 @@
 @import "components/library";
 @import "components/footer";
 @import "components/animation";
-@import "components/utility";
 
 @import "libraries/littlefoot";
 @import "libraries/fancybox";
diff --git a/assets/css/utils/_mixins.scss b/assets/css/utils/_mixins.scss
new file mode 100644
index 00000000..d7a5d03d
--- /dev/null
+++ b/assets/css/utils/_mixins.scss
@@ -0,0 +1,11 @@
+@mixin small-button {
+    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)
+    }
+}
diff --git a/assets/css/components/_reset.scss b/assets/css/utils/_reset.scss
index 8d548646..8d548646 100644
--- a/assets/css/components/_reset.scss
+++ b/assets/css/utils/_reset.scss
diff --git a/assets/css/components/_utility.scss b/assets/css/utils/_utility.scss
index a9907339..a9907339 100644
--- a/assets/css/components/_utility.scss
+++ b/assets/css/utils/_utility.scss
diff --git a/assets/css/components/_variables.scss b/assets/css/utils/_variables.scss
index 455fa5b9..455fa5b9 100644
--- a/assets/css/components/_variables.scss
+++ b/assets/css/utils/_variables.scss
diff --git a/layouts/index.html b/layouts/index.html
index 3a7a29ba..ff721ab7 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -38,7 +38,7 @@
               </div>
               {{ end }}
           </div>
-          <a href="/posts">查看所有</a>
+          <a href="/posts" class="index-section-morelink">查看所有</a>
       </section>
 
       {{ if eq .Site.Language.Lang "zh" }}