diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2539f1cf..d32da1b4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ All notable changes to this project will be documented in this file.
 - :bug: Fix: remove the leading and trailing whitespace of the code string ([#205](https://github.com/hugo-fixit/FixIt/issues/205))
 - :bento: Fix: update webfonts for fontawesome 6.2.0 (@NicoDreamzZ[#228](https://github.com/hugo-fixit/FixIt/pull/228))
 - :bug: Fix: image shortcode/plugin lose the support for svg type files ([#210](https://github.com/hugo-fixit/FixIt/issues/210))
+- :lipstick: Style: refactor css style
 - :lipstick: Style: update home page stylesheet
 - :wrench: Chore(deps-dev):
   - Bump @babel/cli from 7.18.10 to 7.19.3
diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
index f132a3b8..68705fa5 100644
--- a/assets/css/_core/_base.scss
+++ b/assets/css/_core/_base.scss
@@ -52,11 +52,6 @@ body {
   }
 }
 
-img {
-  @include object-fit(contain);
-  @include border-radius($global-border-radius/2);
-}
-
 iframe {
   border: 0;
   @include border-radius($global-border-radius);
@@ -75,10 +70,10 @@ abbr[title] {
   text-decoration-skip-ink: none;
 }
 
-@include ms;
 @include link(true, true);
 
 @import '../_partials/mask';
+@import '../_partials/img';
 @import '../_partials/icon';
 @import '../_partials/details';
 @import '../_partials/widgets';
diff --git a/assets/css/_partials/_footer.scss b/assets/css/_core/_footer.scss
similarity index 100%
rename from assets/css/_partials/_footer.scss
rename to assets/css/_core/_footer.scss
diff --git a/assets/css/_partials/_header.scss b/assets/css/_core/_header.scss
similarity index 100%
rename from assets/css/_partials/_header.scss
rename to assets/css/_core/_header.scss
diff --git a/assets/css/_core/_layout.scss b/assets/css/_core/_layout.scss
index 757124b2..69e3441d 100644
--- a/assets/css/_core/_layout.scss
+++ b/assets/css/_core/_layout.scss
@@ -29,3 +29,7 @@
     }
   }
 }
+
+@import "_core/header";
+@import "_core/footer";
+@import "_core/pagination";
diff --git a/assets/css/_partials/_pagination.scss b/assets/css/_core/_pagination.scss
similarity index 100%
rename from assets/css/_partials/_pagination.scss
rename to assets/css/_core/_pagination.scss
diff --git a/assets/css/_mixin/_compatibility.scss b/assets/css/_mixin/_compatibility.scss
index 1332ff9a..9ab2bffe 100644
--- a/assets/css/_mixin/_compatibility.scss
+++ b/assets/css/_mixin/_compatibility.scss
@@ -18,7 +18,6 @@
 
 @mixin transform($value) {
   -webkit-transform: $value;
-  -moz-transform: $value;
   -ms-transform: $value;
   -o-transform: $value;
   transform: $value;
@@ -26,8 +25,6 @@
 
 @mixin filter($value) {
   -webkit-filter: $value;
-  -moz-filter: $value;
-  -ms-filter: $value;
   filter: $value;
 }
 
@@ -97,12 +94,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 9532badf..784db121 100644
--- a/assets/css/_mixin/_link.scss
+++ b/assets/css/_mixin/_link.scss
@@ -4,19 +4,43 @@
   a::after {
     text-decoration: none;
 
-    color: if($light, $global-link-color, $single-link-color);
+    @if $light {
+      color: $global-link-color;
+    }
 
-    [data-theme='dark'] & {
-      color: if($dark, $global-link-color-dark, $single-link-color-dark);
+    @else {
+      color: $single-link-color;
+    }
+
+    [theme=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;
+    }
 
-    [data-theme='dark'] & {
-      color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
+    @else {
+      color: $single-link-hover-color;
+    }
+
+    [theme=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 d8eb19ed..99f26f3b 100644
--- a/assets/css/_page/_home.scss
+++ b/assets/css/_page/_home.scss
@@ -101,11 +101,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 fb2bb894..7da8245e 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -308,15 +308,6 @@
       }
     }
 
-    .lazyload,
-    .lazyloading {
-      @include object-fit(none);
-    }
-
-    .lazyloaded {
-      @include object-fit(fill);
-    }
-
     blockquote {
       display: block;
       border-left: 0.25em solid $global-border-color;
diff --git a/assets/css/_partials/_img.scss b/assets/css/_partials/_img.scss
new file mode 100644
index 00000000..267f204d
--- /dev/null
+++ b/assets/css/_partials/_img.scss
@@ -0,0 +1,12 @@
+img {
+  @include border-radius($global-border-radius/2);
+
+  &.lazyload,
+  &.lazyloading {
+    @include object-fit(scale-down);
+  }
+
+  &.lazyloaded {
+    @include object-fit(contain);
+  }
+}
diff --git a/assets/css/_partials/_maps/_admonition.scss b/assets/css/_partials/_maps/_admonition.scss
index 2371149f..5c79eeb1 100644
--- a/assets/css/_partials/_maps/_admonition.scss
+++ b/assets/css/_partials/_maps/_admonition.scss
@@ -1,31 +1,15 @@
-// Color map of the admonition
-$admonition-color-map: (
-  'note': #448aff,
-  'abstract': #00b0ff,
-  'info': #00b8d4,
-  'tip': #00bfa5,
-  'success': #00c853,
-  'question': #64dd17,
-  'warning': #ff9100,
-  'failure': #ff5252,
-  'danger': #ff1744,
-  'bug': #f50057,
-  'example': #651fff,
-  'quote': #9e9e9e
-) !default;
-
-// Color map of the admonition background
-$admonition-background-color-map: (
-  'note': rgba(68, 138, 255, 0.1),
-  'abstract': rgba(0, 176, 255, 0.1),
-  'info': rgba(0, 184, 212, 0.1),
-  'tip': rgba(0, 191, 165, 0.1),
-  'success': rgba(0, 200, 83, 0.1),
-  'question': rgba(100, 221, 23, 0.1),
-  'warning': rgba(255, 145, 0, 0.1),
-  'failure': rgba(255, 82, 82, 0.1),
-  'danger': rgba(255, 23, 68, 0.1),
-  'bug': rgba(245, 0, 87, 0.1),
-  'example': rgba(101, 31, 255, 0.1),
-  'quote': rgba(159, 159, 159, 0.1)
-) !default;
+// Color map of admonition [$type $color $background-color, ... ]
+$admonition-color-map:
+  'note' #448aff rgba(68, 138, 255, 0.1),
+  'abstract' #00b0ff rgba(0, 176, 255, 0.1),
+  'info' #00b8d4 rgba(0, 184, 212, 0.1),
+  'tip' #00bfa5 rgba(0, 191, 165, 0.1),
+  'success' #00c853 rgba(0, 200, 83, 0.1),
+  'question' #64dd17 rgba(100, 221, 23, 0.1),
+  'warning' #ff9100 rgba(255, 145, 0, 0.1),
+  'failure' #ff5252 rgba(255, 82, 82, 0.1),
+  'danger' #ff1744 rgba(255, 23, 68, 0.1),
+  'bug' #f50057 rgba(245, 0, 87, 0.1),
+  'example' #651fff rgba(101, 31, 255, 0.1),
+  'quote' #9e9e9e rgba(159, 159, 159, 0.1)
+  !default;
diff --git a/assets/css/_shortcodes/_admonition.scss b/assets/css/_shortcodes/_admonition.scss
index d555e25c..e896b3f8 100644
--- a/assets/css/_shortcodes/_admonition.scss
+++ b/assets/css/_shortcodes/_admonition.scss
@@ -2,8 +2,7 @@
   position: relative;
   margin: 1rem 0;
   padding: 0 0.75rem;
-  background-color: map-get($admonition-background-color-map, 'note');
-  border-left: 0.25rem solid map-get($admonition-color-map, 'note');
+  border-left: .25rem solid;
   overflow: auto;
   @include border-radius($global-border-radius);
 
@@ -11,22 +10,16 @@
     font-weight: bold;
     margin: 0 -0.75rem;
     padding: 0.25rem 1.8rem;
-    border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
-    background-color: opacify(map-get($admonition-background-color-map, 'note'), 0.15);
+    border-bottom: 1px solid;
     @include border-radius(0);
   }
 
-  &.open .admonition-title {
-    background-color: map-get($admonition-background-color-map, 'note');
-  }
-
   .admonition-content {
     padding: 0.5rem 0;
   }
 
   i.icon {
     font-size: 0.85rem;
-    color: map-get($admonition-color-map, 'note');
     position: absolute;
     top: 0.6rem;
     left: 0.4rem;
@@ -38,27 +31,42 @@
     right: 0.3rem;
   }
 
-  @each $type, $color in $admonition-color-map {
-    &.#{$type} {
+  @each $type, $color, $background-color in $admonition-color-map {
+    @if $type == 'note' {
+      background-color: $background-color;
       border-left-color: $color;
 
+      .admonition-title {
+        border-bottom-color: $background-color;
+        background-color: opacify($background-color, 0.15);
+      }
+
+      &.open .admonition-title {
+        background-color: $background-color;
+      }
+
       i.icon {
         color: $color;
       }
     }
-  }
+    
+    @else {
+      &.#{$type} {
+        background-color: $background-color;
+        border-left-color: $color;
 
-  @each $type, $color in $admonition-background-color-map {
-    &.#{$type} {
-      background-color: $color;
+        .admonition-title {
+          border-bottom-color: $background-color;
+          background-color: opacify($background-color, 0.15);
+        }
 
-      .admonition-title {
-        border-bottom-color: $color;
-        background-color: opacify($color, 0.15);
-      }
+        &.open .admonition-title {
+          background-color: $background-color;
+        }
 
-      &.open .admonition-title {
-        background-color: $color;
+        i.icon {
+          color: $color;
+        }
       }
     }
   }
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index 1a276d31..4d8b3de8 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -8,9 +8,9 @@ $prefix: fi- !default;
 
 // Font and Line Height
 $global-font-family: system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif !default;
-$global-font-size: 16px;
-$global-font-weight: 400;
-$global-line-height: 1.5rem;
+$global-font-size: 16px !default;
+$global-font-weight: 400 !default;
+$global-line-height: 1.5rem !default;
 
 // Radius of the border
 $global-border-radius: 5px !default;
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 10c399e0..f3d9f6d0 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -8,8 +8,5 @@
 @import "_core/layout";
 @import "_core/common";
 @import "_page";
-@import "_partials/header";
-@import "_partials/footer";
-@import "_partials/pagination";
 @import "_core/media";
 @import "_custom";