refacotr(css): Refactor css for easy maintenance

1. Refactored CSS for robustness
2. Add dark-mode choose
3. Add sans and serif

source/css/base/_base.scss

@@ -0,0 +1,150 @@
+@import "variables";
+
+// 滚动条
+html {
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    height: 40px;
+    border-radius: 16px;
+    // 浅色
+    background-color: rgba(0, 0, 0, 0.249);
+
+    @include darkmode {
+      // 深色
+      background-color: blue;
+    }
+  }
+
+  ::-webkit-scrollbar-thumb {
+    &:hover {
+      // 浅色
+      background-color: rgba(0, 0, 0, 0.249);
+
+      @include darkmode {
+        // 深色
+        background-color: blue;
+      }
+    }
+  }
+}
+
+// body
+body {
+  // 浅色
+  background-color: #f7f7f7;
+  color: #333333;
+
+  // 深色
+  @include darkmode {
+    background-color: #3d3d3d;
+    color: #a3a3a3;
+  }
+}
+
+// container
+.container {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  align-items: center;
+}
+
+// main
+main {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  align-items: center;
+  width: 52rem;
+  margin-top: 4rem;
+  padding-bottom: 3rem;
+  // 浅色
+  background: #ffffff;
+  box-shadow: 0 0.375rem 1rem -0.5rem rgb(0, 0, 0,0.17);
+
+  // 深色
+  @include darkmode {
+    background: #292929;
+    box-shadow: 0 0.375rem 1rem -0.5rem rgb(0, 0, 0,0.34);
+  }
+}
+
+// pages
+main > .index,
+main > .archives,
+main > .categories,
+main > .category,
+main > .links,
+main > .post,
+main > .tag,
+main > .journals {
+  width: 45rem;
+  padding: 1rem 0.1rem 1rem 0.1rem;
+}
+
+.menu{
+    position: fixed;
+    right: 0.5rem;
+    bottom: 10rem;
+}
+
+.close {
+  display: none;
+}
+
+/*animation starts*/
+
+@-webkit-keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(-3px);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+    }
+}
+
+@-moz-keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        -moz-transform: translateY(-3px);
+    }
+
+    100% {
+        opacity: 1;
+        -moz-transform: translateY(0);
+    }
+}
+
+@-o-keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        -o-transform: translateY(-3px);
+    }
+
+    100% {
+        opacity: 1;
+        -o-transform: translateY(0);
+    }
+}
+
+@keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        transform: translateY(-3px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+
+/*animation ends*/

source/css/base/_font.scss

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+
+body {
+    font-size: 16px;
+    font-variant-numeric: tabular-nums;
+    -webkit-font-smoothing: antialiased;
+}
+
+[data-font="serif"]{
+    font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+        'Noto Sans', serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        'Noto Color Emoji';
+    font-weight: 500;
+}
+[data-font="sans"]{
+    font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+    font-weight: 400;
+}

source/css/base/_variables.scss

@@ -0,0 +1,56 @@
+$darkmode: manual !default; // true | false | 'manual'
+$manualmode-auto-selector: '[data-darkmode="auto"] &' !default;
+$manualmode-dark-selector: '[data-darkmode="dark"] &' !default;
+
+
+
+
+
+@mixin darkmode($darkmode: $darkmode, $dark-selector: $manualmode-dark-selector, $auto-selector: $manualmode-auto-selector) {
+    // darkmode = ture  : 跟随系统
+    // darkmode = false : 不跟随系统
+    // darkmode = manual : 手动模式
+    @if $darkmode=='manual' {
+        #{$dark-selector} {
+            @content;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            #{$auto-selector} {
+                @content;
+            }
+        }
+    }
+
+    @else if $darkmode {
+        @media (prefers-color-scheme: dark) {
+            @content;
+        }
+    }
+}
+
+
+
+// 超小屏幕（手机，小于 768px）
+// @media (max-width: 768px) { ... }
+ 
+// 小屏幕（平板，大于等于 768px）
+// @media (min-width: 768px) and (max-width: 768px) { ... }
+ 
+// 中等屏幕（桌面显示器，大于等于 992px）
+// @media (min-width: 992px) and (max-width: 992px) { ... }
+ 
+// 大屏幕（大桌面显示器，大于等于 1200px）
+// @media (min-width: 1200px) { ... }
+
+
+
+
+
+
+
+
+
+
+
+