feat: refactor css style and rm useless style

assets/css/_core/_base.scss

@@ -1,9 +1,9 @@
 html {
-  font-family: $global-font-family;
+  font-family: var(--global-font-family);
-  font-weight: $global-font-weight;
+  font-weight: var(--global-font-weight);
   font-display: swap;
-  font-size: $global-font-size;
+  font-size: var(--global-font-size);
-  line-height: $global-line-height;
+  line-height: var(--global-line-height);
   width:100%;
 
   scroll-behavior: smooth;
@@ -47,15 +47,11 @@ body {
   }
 }
 
-@include ms;
 @include link(true, true);
 
 @import "../_partial/mask";
+@import "../_partial/img";
 @import "../_partial/icon";
 @import "../_partial/details";
 @import "../_partial/fixed-button";
 @import "../_partial/cookieconsent";
-
-img {
-  @include object-fit(contain);
-}

assets/css/_core/_variables.scss

@@ -0,0 +1,6 @@
+:root {
+  --global-font-family: #{$global-font-family};
+  --global-font-size: #{$global-font-size};
+  --global-font-weight: #{$global-font-weight};
+  --global-line-height: #{$global-line-height};
+}

assets/css/_mixin/_compatibility.scss

@@ -97,12 +97,6 @@
   line-break: $value;
 }
 
-@mixin ms {
-  input::-ms-clear {
-    display: none;
-  }
-}
-
 @mixin object-fit($value) {
   -o-object-fit: $value;
   object-fit: $value;

assets/css/_mixin/_link.scss

@@ -2,19 +2,35 @@
   a, a::before, a::after {
     text-decoration: none;
 
-    color: if($light, $global-link-color, $single-link-color);
+    @if $light {
+      color: $global-link-color;
+    } @else {
+      color: $single-link-color;
+    }
 
     [theme=dark] & {
-      color: if($dark, $global-link-color-dark, $single-link-color-dark);
+      @if $dark {
+        color: $global-link-color-dark;
+      } @else {
+        color: $single-link-color-dark;
+      }
     }
   }
 
   a:active,
   a:hover {
-    color: if($light, $global-link-hover-color, $single-link-hover-color);
+    @if $light {
+      color: $global-link-hover-color;
+    } @else {
+      color: $single-link-hover-color;
+    }
 
     [theme=dark] & {
-      color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
+      @if $dark {
+        color: $global-link-hover-color-dark;
+      } @else {
+        color: $single-link-hover-color-dark;
+      }
     }
   }
 }

assets/css/_page/_home.scss

@@ -100,11 +100,10 @@
         height: 100%;
         left: 0;
         top: 0;
-        @include object-fit(none);
-      }
 
-      img.lazyloaded {
+        &.lazyloaded {
-        @include object-fit(cover);
+          @include object-fit(cover);
+        }
       }
 
       &:hover {

assets/css/_page/_single.scss

@@ -237,14 +237,6 @@
       }
     }
 
-    .lazyload, .lazyloading {
-      @include object-fit(scale-down);
-    }
-
-    .lazyloaded {
-      @include object-fit(fill);
-    }
-
     blockquote {
       display: block;
       border-left: .5rem solid $blockquote-color;
@@ -330,10 +322,10 @@
     white-space: pre-wrap;
   }
 
-  --ti-cursor-font-family: $global-font-family;
+  --ti-cursor-font-family: var(--global-font-family);
-  --ti-cursor-font-size: $global-font-size;
+  --ti-cursor-font-size: var(--global-font-size);
-  --ti-cursor-font-weight: $global-font-weight;
+  --ti-cursor-font-weight: var(--global-font-weight);
-  --ti-cursor-line-height: $global-line-height;
+  --ti-cursor-line-height: var(--global-line-height);
   --ti-cursor-color: $global-font-secondary-color;
   --ti-cursor-margin-left: 0;
 

assets/css/_partial/_img.scss

@@ -0,0 +1,9 @@
+img {
+  &.lazyload, &.lazyloading {
+    @include object-fit(scale-down);
+  }
+
+  &.lazyloaded {
+    @include object-fit(contain);
+  }
+}

assets/css/_partial/_single/_code.scss

@@ -67,7 +67,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
       align-items: center;
       box-sizing: border-box;
       width: 100%;
-      font-family: $global-font-family;
+      font-family: var(--global-font-family);
       font-weight: bold;
       color: $code-info-color;
       background: darken($code-background-color, 8%);

assets/css/style.scss

@@ -1,21 +1,21 @@
 @charset "utf-8";
 
+@import "../lib/normalize/normalize";
+
 @import "_variables";
 @import "_override";
+@import "_core/variables";
 
 @import "_mixin/index";
 
-@import "../lib/normalize/normalize";
-
 @import "_core/base";
 @import "_core/layout";
 
 @import "_page/index";
 
-@import "_partial/header";
+@import "_core/header";
-@import "_partial/footer";
+@import "_core/footer";
-@import "_partial/pagination";
+@import "_core/pagination";
-
 @import "_core/media";
 
 @import "_custom";