feat(toc): add custom TOC font size

pogor-dev · Mar 9, 2020 · 1894403 · 1894403
1 parent 2b0e598
commit 1894403
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 5 deletions.
diff --git a/assets/css/_partial/_single/_toc.scss b/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;
 

diff --git a/assets/css/_variables.scss b/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;

diff --git a/assets/js/theme.min.js b/assets/js/theme.min.js
diff --git a/assets/js/theme.min.js.map b/assets/js/theme.min.js.map
diff --git a/resources/_gen/assets/scss/css/style.template.scss_b8ba9a60a151126bfcde1421dc0b972d.content b/resources/_gen/assets/scss/css/style.template.scss_b8ba9a60a151126bfcde1421dc0b972d.content
diff --git a/src/js/theme.js b/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') || [];