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;

layouts/_default/baseof.html

@@ -56,7 +56,7 @@
 
         {{- /* Dynamic to top button */ -}}
         <a href="#" class="dynamic-to-top animated faster" id="dynamic-to-top">
-            <i class="fas fa-chevron-up fa-fw"></i>
+            <i class="fas fa-arrow-up fa-fw"></i>
         </a>
 
         {{- /* Load JavaScript scripts and CSS */ -}}

src/js/theme.js

@@ -132,15 +132,19 @@
                     const footerTop = document.getElementById('post-footer').offsetTop;
                     const maxTocTop = footerTop - toc.getBoundingClientRect().height;
                     const maxScrollTop = maxTocTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
+                    const rect = page.getBoundingClientRect();
                     if (this.newScrollTop < minScrollTop) {
                         toc.style.position = 'absolute';
                         toc.style.top = `${minTocTop}px`;
+                        toc.style.left = `${rect.width + 20}px`;
                     } else if (this.newScrollTop > maxScrollTop) {
                         toc.style.position = 'absolute';
                         toc.style.top = `${maxTocTop}px`;
+                        toc.style.left = `${rect.width + 20}px`;
                     } else {
                         toc.style.position = 'fixed';
                         toc.style.top = `${TOP_SPACING}px`;
+                        toc.style.left = `${rect.left + rect.width + 20}px`;
                     }
 
                     this.util.forEach(this._tocLinks, (link) => { link.classList.remove('active'); });
@@ -245,7 +249,7 @@
                 header.classList.add('faster');
             });
             const toTopButton = document.getElementById('dynamic-to-top');
-            const MIN_SCROLL = 20;
+            const MIN_SCROLL = 10;
             window.addEventListener('scroll', () => {
                 this.newScrollTop = this.util.getScrollTop();
                 const scroll = this.newScrollTop - this.oldScrollTop;
@@ -260,12 +264,12 @@
                 });
                 if (this.newScrollTop > 200) {
                     if (scroll > MIN_SCROLL) {
-                        toTopButton.classList.remove('fadeInUp');
-                        toTopButton.classList.add('fadeOutDown');
+                        toTopButton.classList.remove('fadeIn');
+                        toTopButton.classList.add('fadeOut');
                     } else if (scroll < - MIN_SCROLL) {
                         toTopButton.style.display = 'block';
-                        toTopButton.classList.remove('fadeOutDown');
-                        toTopButton.classList.add('fadeInUp');
+                        toTopButton.classList.remove('fadeOut');
+                        toTopButton.classList.add('fadeIn');
                     }
                 } else {
                     toTopButton.style.display = 'none';