fix: font family style

9 files changed, 58 insertions, 36 deletions

diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
index c36e430e..12117cd4 100644
--- a/assets/css/_core/_base.scss
+++ b/assets/css/_core/_base.scss
@@ -9,7 +9,7 @@ html {
   scroll-behavior: smooth;
 
   main [id] {
-    scroll-margin-top: $header-height + .5rem;
+    scroll-margin-top: calc(var(--header-height) + .5rem);
   }
 }
 
diff --git a/assets/css/_core/_header.scss b/assets/css/_core/_header.scss
index c4955cab..b17aa940 100644
--- a/assets/css/_core/_header.scss
+++ b/assets/css/_core/_header.scss
@@ -36,7 +36,7 @@ header {
 }
 
 .header-title {
-  font-family: $header-title-font-family;
+  font-family: var(--header-title-font-family);
   font-weight: bold;
   margin-right: .5rem;
   min-width: 10%;
@@ -148,8 +148,8 @@ header {
 #header-desktop {
   display: block;
   position: fixed;
-  height: $header-height;
-  line-height: $header-height;
+  height: var(--header-height);
+  line-height: var(--header-height);
 
   [data-header-desktop=normal] & {
     position: static;
@@ -159,7 +159,7 @@ header {
     padding: 0 2rem 0 10vh;
 
     .header-title {
-      font-size: $header-title-font-size;
+      font-size: var(--header-title-font-size);
     }
 
     .menu {
@@ -213,8 +213,8 @@ header {
 #header-mobile {
   display: none;
   position: fixed;
-  height: $header-height;
-  line-height: $header-height;
+  height: var(--header-height);
+  line-height: var(--header-height);
 
   [data-header-mobile=normal] & {
     position: static;
@@ -230,7 +230,7 @@ header {
       @include transition(margin-top 0.3s ease);
 
       .header-title {
-        font-size: $header-title-font-size;
+        font-size: var(--header-title-font-size);
         max-width: 80%;
       }
 
@@ -289,7 +289,7 @@ header {
         justify-content: space-between;
         align-items: center;
         box-sizing: border-box;
-        padding: ($header-height - 2.5rem) / 2 1rem;
+        padding: calc((var(--header-height) - 2.5rem) / 2) 1rem;
         line-height: 2.5rem;
       }
 
@@ -328,7 +328,7 @@ header {
 
   &.open {
     .header-wrapper {
-      margin-top: -$header-height;
+      margin-top: -var(--header-height);
     }
 
     .menu {
@@ -349,7 +349,7 @@ header {
 .search-dropdown {
   position: fixed;
   z-index: 200;
-  top: $header-height;
+  top: var(--header-height);
   @include box-shadow(0 .125rem .25rem rgba(0, 0, 0, .1));
 
   &.desktop {
@@ -372,7 +372,7 @@ header {
 
     .suggestions {
       overflow-y: auto;
-      max-height: calc(100vh - #{$header-height});
+      max-height: calc(100vh - var(--header-height));
 
       .suggestion {
         padding: .75rem 1rem;
diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
index f4c7f51f..f90315dc 100644
--- a/assets/css/_core/_media.scss
+++ b/assets/css/_core/_media.scss
@@ -53,7 +53,7 @@
     width: 100%;
 
     [data-header-mobile] & {
-      padding-top: $header-height;
+      padding-top: var(--header-height);
     }
 
     [data-header-mobile=normal] & {
diff --git a/assets/css/_core/_variables.scss b/assets/css/_core/_variables.scss
index c1df7fc5..ae693fc3 100644
--- a/assets/css/_core/_variables.scss
+++ b/assets/css/_core/_variables.scss
@@ -1,6 +1,30 @@
 :root {
-  --global-font-family: #{$global-font-family};
+  // ========== Global ========== //
+  // Font and Line Height
+  --global-font-family: #{inspect($global-font-family)};
   --global-font-size: #{$global-font-size};
   --global-font-weight: #{$global-font-weight};
   --global-line-height: #{$global-line-height};
+  // ========== Global ========== //
+
+  // ========== Header ========== //
+  // Height of the header
+  --header-height: #{$header-height};
+
+  // Font family and size of the header title
+  --header-title-font-family: #{inspect($header-title-font-family)};
+  --header-title-font-size: #{$header-title-font-size};
+  // ========== Header ========== //
+
+  // ========== Single Content ========== //
+  // Font size of the TOC
+  --toc-title-font-size: #{$toc-title-font-size};
+  --toc-content-font-size: #{$toc-content-font-size};
+  // ========== Single Content ========== //
+
+  // ========== Code ========== //
+  // Font family and size of the code
+  --code-font-family: #{inspect($code-font-family)};
+  --code-font-size: #{$code-font-size};
+  // ========== Code ========== //
 }
diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss
index b715e95b..98437a8f 100644
--- a/assets/css/_page/_index.scss
+++ b/assets/css/_page/_index.scss
@@ -5,7 +5,7 @@
   margin: 0 auto;
 
   [data-header-desktop] & {
-    padding-top: $header-height;
+    padding-top: var(--header-height);
   }
 
   [data-header-desktop=normal] & {
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index 573ec55e..dd5c2b0f 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -290,7 +290,7 @@
       @include border-radius(3px);
       @include box-shadow(inset 0 -1px 0 $global-border-color);
       font-size: .8rem;
-      font-family: $code-font-family;
+      font-family: var(--code-font-family);
       color: $code-color;
 
       [theme=dark] & {
@@ -316,7 +316,7 @@
   .highlight {
     padding: .375rem;
     font-size: .875rem;
-    font-family: $code-font-family;
+    font-family: var(--code-font-family);
     font-weight: bold;
     word-break: break-all;
     white-space: pre-wrap;
diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss
index 49c3bbc9..7086e4f8 100644
--- a/assets/css/_partial/_single/_code.scss
+++ b/assets/css/_partial/_single/_code.scss
@@ -4,8 +4,8 @@ code {
   padding: 0 .4rem;
   @include overflow-wrap(break-word);
   @include line-break(anywhere);
-  font-size: $code-font-size;
-  font-family: $code-font-family;
+  font-size: var(--code-font-size);
+  font-family: var(--code-font-family);
   color: $code-color;
 
   [theme=dark] & {
@@ -38,8 +38,8 @@ code, pre, .highlight table, .highlight tr, .highlight td {
 }
 
 .highlight {
-  font-family: $code-font-family;
-  font-size: $code-font-size;
+  font-family: var(--code-font-family);
+  font-size: var(--code-font-size);
   line-height: 1.4em;
   margin: .5rem 0;
 
@@ -210,8 +210,8 @@ code, pre, .highlight table, .highlight tr, .highlight td {
 }
 
 .gist {
-  font-family: $code-font-family;
-  font-size: $code-font-size;
+  font-family: var(--code-font-family);
+  font-size: var(--code-font-size);
 
   .table-wrapper {
     > table,
diff --git a/assets/css/_partial/_single/_toc.scss b/assets/css/_partial/_single/_toc.scss
index aef9a09c..bc88463c 100644
--- a/assets/css/_partial/_single/_toc.scss
+++ b/assets/css/_partial/_single/_toc.scss
@@ -1,12 +1,12 @@
 .toc {
   .toc-title {
-    font-size: $toc-title-font-size;
+    font-size: var(--toc-title-font-size);
     font-weight: bold;
     text-transform: uppercase;
   }
 
   .toc-content {
-    font-size: $toc-content-font-size;
+    font-size: var(--toc-content-font-size);
 
     ul {
       text-indent: -0.85rem;
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index 6ed827b6..11a3fb9c 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -4,7 +4,7 @@
 
 // ========== Global ========== //
 // 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-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;
@@ -52,14 +52,14 @@ $selection-color-dark: rgba(50, 112, 194, 0.4) !default;
 // Height of the header
 $header-height: 3.5rem !default;
 
+// Font family and size of the header title
+$header-title-font-family: $global-font-family !default;
+$header-title-font-size: 1.5rem !default;
+
 // Color of the header background
 $header-background-color: #f8f8f8 !default;
 $header-background-color-dark: #252627 !default;
 
-// Font style of the header title
-$header-title-font-family: $global-font-family !default;
-$header-title-font-size: 1.5rem !default;
-
 // Color of the hover header item
 $header-hover-color: #161209 !default;
 $header-hover-color-dark: #fff !default;
@@ -106,6 +106,10 @@ $pagination-link-hover-color-dark: #fff !default;
 // ========== Pagination ========== //
 
 // ========== Code ========== //
+// Font family and size of the code
+$code-font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace, $global-font-family !default;
+$code-font-size: .875rem !default;
+
 // Color of the code
 $code-color: #E74C3C !default;
 $code-color-dark: #E5BF78 !default;
@@ -117,12 +121,6 @@ $code-background-color-dark: #272C34 !default;
 $code-info-color: #9c9c9c !default;
 $code-info-color-dark: #b1b0b0 !default;
 
-// Font size of the code
-$code-font-size: .875rem !default;
-
-// Font family of the code
-$code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, $global-font-family !default;
-
 // Code type map
 $code-type-map: (
   // Custom code type