feat(toc): add custom TOC font size

assets/css/_partial/_single/_toc.scss

@@ -83,7 +83,6 @@
         display: block;
         display: flex;
         justify-content: space-between;
-        font-size: 1.2em;
         font-weight: bold;
         line-height: 2em;
         padding: 0 .625rem;
@@ -133,6 +132,14 @@
 }
 
 .toc {
+  .toc-title {
+    font-size: $toc-title-font-size;
+  }
+
+  .toc-content {
+    font-size: $toc-content-font-size;
+  }
+
   ruby {
     background: $code-background-color;
 

assets/css/_variables.scss

@@ -71,6 +71,10 @@ $header-hover-color-dark: #fff !default;
 // ========== Header ========== //
 
 // ========== Single Content ========== //
+// Font size of the TOC
+$toc-title-font-size: 1.2rem !default;
+$toc-content-font-size: 0.9rem !default;
+
 // Color of the single link
 $single-link-color: #2d96bd !default;
 $single-link-color-dark: #eee !default;

src/js/theme.js

@@ -119,7 +119,7 @@
                 }
                 const toc = document.getElementById('toc-auto');
                 const page = document.getElementsByClassName('page')[0];
-                toc.style.maxWidth = `${page.getBoundingClientRect().left - 40}px`;
+                toc.style.maxWidth = `${page.getBoundingClientRect().left - 20}px`;
                 this._tocLinks = this._tocLinks || tocCore.getElementsByTagName('a');
                 this._tocLis = this._tocLis || tocCore.getElementsByTagName('li');
                 this._headerLinks = this._headerLinks || document.getElementsByClassName('headerLink') || [];