style: optimize archive page style

layout/_partial/archive-list.ejs

@@ -4,7 +4,7 @@
         <section class="archive-item">
             <div class="archive-item-header">
                 <span class="archive-year"><%= postYear.year %></span>
-                <span class="archive-year-post-count">[<%= postYear.postList.length %>]</span>
+                <span class="archive-year-post-count">(<%= postYear.postList.length %>)</span>
             </div>
             <ul class="article-list">
                 <% postYear.postList.forEach(post => { %>

source/css/layout/_partial/archive-list.styl

@@ -2,18 +2,21 @@
 
 $archive-year-font-size = 1.8em;
 $archive-year-count-font-size = 1.2em;
-$article-title-font-size = 1.12em;
+$article-title-font-size = 1.2em;
-$article-date-font-size = 0.8em;
+$article-date-font-size = 1em;
 
 .archive-list-container {
+
   .archive-item {
-    margin-bottom: $component-interspace + 10px;
+    margin-bottom: 58px;
 
     &:last-child {
       margin-bottom: 0;
     }
 
     .archive-item-header {
+      margin-bottom: 10px;
+
       .archive-year {
         font-size: $archive-year-font-size;
 
@@ -26,7 +29,6 @@ $article-date-font-size = 0.8em;
         margin-right: 6px;
       }
 
-
       .archive-year-post-count {
         font-size: $archive-year-count-font-size;
 
@@ -43,6 +45,12 @@ $article-date-font-size = 0.8em;
 
     .article-list {
 
+      padding-left: 10px;
+
+      +ils-tablet() {
+        padding-left: 0;
+      }
+
       .article-item {
         margin-top: 18px;
 
@@ -54,11 +62,15 @@ $article-date-font-size = 0.8em;
           margin-top: 14px;
         }
 
+        &:hover {
+          color: var(--primary-color);
+        }
+
         a.article-title {
           color: var(--normal-text-color);
 
           &:hover {
-            color: $primary-color;
+            color: var(--primary-color);
           }
         }
 

source/css/layout/common/variables.styl

@@ -53,7 +53,7 @@ $temp-color = hexo-config('style.primary_color');
 $primary-color = $temp-color ? convert($temp-color):#0066CC;
 $background-color = #fff; // light background color
 $second-background-color = darken($background-color, 2%); // second light background color
-$normal-text-color = #393939; // 通用文本颜色（默认字体颜色）
+$normal-text-color = #3f3f3f; // 通用文本颜色（默认字体颜色）
 $first-text-color = darken($normal-text-color, 10%); // 第一文本颜色
 $second-text-color = darken($normal-text-color, 5%); // 第二文本颜色
 $third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
@@ -90,59 +90,39 @@ $default-font-weight = 400;
 
 
 // ========================================================================
-//  light/dark color
+//  light/dark mode color
 // ========================================================================
-root-light() {
+root-color(mode) {
-  --background-color: $background-color;
+  --background-color: mode == 'light' ? $background-color : $dark-background-color;
-  --second-background-color: $second-background-color;
+  --second-background-color: mode == 'light' ? $second-background-color : $dark-second-background-color;
-  --primary-color: $primary-color;
+  --primary-color: mode == 'light' ? $primary-color : $dark-primary-color;
-  --first-text-color: $first-text-color;
+  --first-text-color: mode == 'light' ? $first-text-color : $dark-first-text-color;
-  --second-text-color: $second-text-color;
+  --second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color;
-  --third-text-color: $third-text-color;
+  --third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color;
-  --fourth-text-color: $fourth-text-color;
+  --fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color;
-  --normal-text-color: $normal-text-color;
+  --normal-text-color: mode == 'light' ? $normal-text-color : $dark-normal-text-color;
-  --border-color: $border-color;
+  --border-color: mode == 'light' ? $border-color : $dark-border-color;
-  --selection-color: $selection-color;
+  --selection-color: mode == 'light' ? $selection-color : $dark-selection-color;
-  --shadow-color: $shadow-color;
+  --shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color;
-  --shadow-hover-color: $shadow-hover-color;
+  --shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color;
-  --scroll-bar-color: $scroll-bar-color;
+  --scroll-bar-color: mode == 'light' ? $scroll-bar-color : $dark-scroll-bar-color;
-}
-
-
-root-dark() {
-  --background-color: $dark-background-color;
-  --second-background-color: $dark-second-background-color;
-  --primary-color: $dark-primary-color;
-  --first-text-color: $dark-first-text-color;
-  --second-text-color: $dark-second-text-color;
-  --third-text-color: $dark-third-text-color;
-  --fourth-text-color: $dark-fourth-text-color;
-  --normal-text-color: $dark-normal-text-color;
-  --border-color: $dark-border-color;
-  --selection-color: $dark-selection-color;
-  --shadow-color: $dark-shadow-color;
-  --shadow-hover-color: $dark-shadow-hover-color;
-  --scroll-bar-color: $dark-scroll-bar-color;
 }
 
 
 :root {
-  root-light();
+  root-color('light');
 }
 
-
 @media (prefers-color-scheme: dark) {
   :root {
-    root-dark();
+    root-color('dark');
   }
 }
 
-
-.dark-mode {
-  root-dark();
-}
-
-
 .light-mode {
-  root-light();
+  root-color('light');
+}
+
+.dark-mode {
+  root-color('dark');
 }