feat(style): improve toc style (#167)

assets/css/_core/_base.scss

@@ -1,7 +1,8 @@
 html {
   font-family: $global-font-family;
-  font-size: $global-font-size;
   font-weight: $global-font-weight;
+  font-display: swap;
+  font-size: $global-font-size;
   line-height: $global-line-height;
   width:100%;
 }

assets/css/_core/_media.scss

@@ -1,30 +1,12 @@
-@media only screen and (max-width: 1800px) {
-  .page {
-    max-width: 780px;
-
-    #toc-auto {
-      margin-left: 800px;
-    }
-  }
-}
-
 @media only screen and (max-width: 1440px) {
   .page {
-    max-width: 680px;
-
-    #toc-auto {
-      margin-left: 700px;
-    }
+    max-width: 56%;
   }
 }
 
 @media only screen and (max-width: 1200px) {
   .page {
-    max-width: 560px;
-
-    #toc-auto {
-      margin-left: 580px;
-    }
+    max-width: 52%;
   }
 }
 

assets/css/_page/_archive.scss

@@ -1,7 +1,6 @@
 .archive {
   .single-title {
     text-align: right;
-    padding-bottom: 2rem;
   }
 
   @import "../_partial/_archive/terms";

assets/css/_page/_index.scss

@@ -1,7 +1,7 @@
 .page {
   position: relative;
   width: 100%;
-  max-width: 980px;
+  max-width: 60%;
   margin: 0 auto;
   padding-top: $page-padding-top-desktop;
 }

assets/css/_page/_single.scss

@@ -1,7 +1,7 @@
 /** Single **/
 .single {
   .single-title {
-    margin: 0.8rem 0;
+    margin: 1rem 0 .5rem;
     font-size: 1.6rem;
     line-height: 140%;
   }
@@ -44,7 +44,7 @@
 
     img {
       display: block;
-      max-width: 100%;
+      width: 100%;
       height: auto;
       margin: 0 auto;
       overflow: hidden;

assets/css/_page/_special.scss

@@ -1,6 +1,6 @@
 .special {
   .single-title {
     text-align: right;
-    padding-bottom: 2rem;
+    padding-bottom: 1rem;
   }
 }

assets/css/_partial/_dynamic-to-top.scss

@@ -8,17 +8,16 @@
   right: 2rem;
   top: auto;
   left: auto;
-  font-size: 1.4rem;
-  line-height: 1.8rem;
+  font-size: 1rem;
+  line-height: 1.3rem;
   padding: .6rem .6rem;
   color: $global-font-secondary-color;
   background: $header-background-color;
-  border: 1px solid $global-border-color;
+  border: 1px solid darken($global-border-color, 10%);
   border-radius: 2rem;
 
   &:hover, &:active {
     color: $global-font-color;
-    background: $global-background-color;
     cursor: pointer;
   }
 
@@ -29,11 +28,10 @@
   .dark-theme & {
     color: $global-font-secondary-color-dark;
     background: $header-background-color-dark;
-    border-color: $global-border-color-dark;
+    border-color: darken($global-border-color-dark, 10%);
 
     &:hover, &:active {
       color: $global-font-color-dark;
-      background: $global-background-color-dark;
     }
   }
 }

assets/css/_partial/_single/_toc.scss

@@ -1,14 +1,13 @@
 #toc-auto {
   display: block;
   position: absolute;
-  width: 100%;
-  max-width: 1000px;
-  margin-left: 1000px;
+  width: 1000px;
   padding: 0 .8rem;
   border-left: 1px solid $global-border-color;
   overflow-wrap: break-word;
   box-sizing: border-box;
   top: if($header-normal-mode-desktop, 5rem, 10rem);
+  left: 10000px;
 
   .dark-theme & {
     border-left: 1px solid $global-border-color-dark;

assets/css/_variables.scss

@@ -4,7 +4,7 @@
 
 // ========== Global ========== //
 // Font and Line Height
-$global-font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft Yahei, Segoe UI, Helvetica, Arial, sans-serif, Segoe UI Emoji !default;
+$global-font-family: system, -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", "wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", "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;