feat: refactor css style and rm useless style

12 files changed, 54 insertions, 42 deletions

diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
index 4be316d8..c36e430e 100644
--- a/assets/css/_core/_base.scss
+++ b/assets/css/_core/_base.scss
@@ -1,9 +1,9 @@
 html {
-  font-family: $global-font-family;
-  font-weight: $global-font-weight;
+  font-family: var(--global-font-family);
+  font-weight: var(--global-font-weight);
   font-display: swap;
-  font-size: $global-font-size;
-  line-height: $global-line-height;
+  font-size: var(--global-font-size);
+  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);
-}
diff --git a/assets/css/_partial/_footer.scss b/assets/css/_core/_footer.scss
index 21a89e8c..21a89e8c 100644
--- a/assets/css/_partial/_footer.scss
+++ b/assets/css/_core/_footer.scss
diff --git a/assets/css/_partial/_header.scss b/assets/css/_core/_header.scss
index c4955cab..c4955cab 100644
--- a/assets/css/_partial/_header.scss
+++ b/assets/css/_core/_header.scss
diff --git a/assets/css/_partial/_pagination.scss b/assets/css/_core/_pagination.scss
index 10d24b77..10d24b77 100644
--- a/assets/css/_partial/_pagination.scss
+++ b/assets/css/_core/_pagination.scss
diff --git a/assets/css/_core/_variables.scss b/assets/css/_core/_variables.scss
new file mode 100644
index 00000000..c1df7fc5
--- /dev/null
+++ b/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};
+}
diff --git a/assets/css/_mixin/_compatibility.scss b/assets/css/_mixin/_compatibility.scss
index b4cb2d0f..be3a4913 100644
--- a/assets/css/_mixin/_compatibility.scss
+++ b/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;
diff --git a/assets/css/_mixin/_link.scss b/assets/css/_mixin/_link.scss
index 351d8d5e..f12ac22c 100644
--- a/assets/css/_mixin/_link.scss
+++ b/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;
+      }
     }
   }
 }
diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss
index 4ca6eb81..ae7988a7 100644
--- a/assets/css/_page/_home.scss
+++ b/assets/css/_page/_home.scss
@@ -100,11 +100,10 @@
         height: 100%;
         left: 0;
         top: 0;
-        @include object-fit(none);
-      }
 
-      img.lazyloaded {
-        @include object-fit(cover);
+        &.lazyloaded {
+          @include object-fit(cover);
+        }
       }
 
       &:hover {
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index 17f53654..573ec55e 100644
--- a/assets/css/_page/_single.scss
+++ b/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-size: $global-font-size;
-  --ti-cursor-font-weight: $global-font-weight;
-  --ti-cursor-line-height: $global-line-height;
+  --ti-cursor-font-family: var(--global-font-family);
+  --ti-cursor-font-size: var(--global-font-size);
+  --ti-cursor-font-weight: var(--global-font-weight);
+  --ti-cursor-line-height: var(--global-line-height);
   --ti-cursor-color: $global-font-secondary-color;
   --ti-cursor-margin-left: 0;
 
diff --git a/assets/css/_partial/_img.scss b/assets/css/_partial/_img.scss
new file mode 100644
index 00000000..2ebc9662
--- /dev/null
+++ b/assets/css/_partial/_img.scss
@@ -0,0 +1,9 @@
+img {
+  &.lazyload, &.lazyloading {
+    @include object-fit(scale-down);
+  }
+
+  &.lazyloaded {
+    @include object-fit(contain);
+  }
+}
diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss
index 7061d8b7..49c3bbc9 100644
--- a/assets/css/_partial/_single/_code.scss
+++ b/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%);
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 512a46f0..f2768bac 100644
--- a/assets/css/style.scss
+++ b/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 "_partial/footer";
-@import "_partial/pagination";
-
+@import "_core/header";
+@import "_core/footer";
+@import "_core/pagination";
 @import "_core/media";
 
 @import "_custom";