Add Table of Contents. (Experimental)

8 files changed, 100 insertions, 119 deletions

diff --git a/assets/scss/journal.scss b/assets/scss/journal.scss
index 192be20..749352d 100644
--- a/assets/scss/journal.scss
+++ b/assets/scss/journal.scss
@@ -9,7 +9,7 @@ $sans-preferred-font-list: "Montserrat", "Roboto", "Source Sans Pro",
   "Helvetica", "Arial", $default-font-list;
 
 $side-container-width: 25%; //280px;
-$extra-container-width: 180px;
+$extra-container-width: 25%;
 $extra-container-pagination-width: 64px;
 $stream-container-max-width: 1620px;
 
@@ -73,6 +73,7 @@ body {
   color: $deep-dark-accent;
   line-height: 1.7em;
   word-wrap: break-word;
+  box-sizing: border-box;
 }
 
 h1, h2, h3{
@@ -460,7 +461,7 @@ a {
   position: fixed;
   top: 0;
   right: 0;
-  height: 100vh;
+  
   width: $extra-container-width;
   /*text-align: right;*/
   font-family: $sans-preferred-font-list;
@@ -471,7 +472,8 @@ a {
   justify-content: flex-end;
   /*padding: 50px 0;*/
   .pagination {
-
+    position: fixed;
+    bottom: 0;
     display: flex;
     flex-direction: column;
     > :not(:last-child) {
@@ -543,9 +545,8 @@ a {
   padding-left: $side-container-width;
   padding-right: $extra-container-width;
   width: 100%;
+  
   min-height: 100vh;
-  max-width: $stream-container-max-width;
-
   @media screen and (max-width: $single-column-max-width) {
     padding: 0;
     min-height: unset;
@@ -839,31 +840,9 @@ a {
         @media screen and (max-width: $single-column-max-width) {
           font-size: $single-column-post-body-size;
         }
-        .toc {
-          float: right;
-          border-radius: 5px;
-          background: rgba($color-accent, 0.05);
-          padding: 30px;
-          margin-left: 30px;
-          margin-bottom: 30px;
-          &,
-          * {
-            font-size: $toc-size;
-          }
-          ul {
-            list-style: decimal;
-            padding: 0 0 0 20px;
-            margin: 0;
-          }
-          @media screen and (max-width: $single-column-max-width) {
-            &,
-            * {
-              font-size: $single-column-toc-size;
-            }
-          }
-        }
-
-        
+        /*
+        Table of Contents
+        */
       }
     }
 
@@ -970,4 +949,38 @@ a {
       font-family: $sans-preferred-font-list;
       padding: 40px 20px 40px 20px;
     }
+}
+
+.toc {
+  float: right;
+  border-radius: 5px;
+  border: 30px, 30px, 30px, 30px;
+  margin: 20px;
+  background: rgba($color-accent, 0.05);
+  &,
+  * {
+    font-size: $toc-size;
+  }
+  ul {
+    list-style: none;
+    padding: 0 0 0 20px;
+    margin: 0;
+    line-height: 1.7em;
+  }
+  .toc-content{
+    padding: 20px;
+  }
+  @media screen and (max-width: $single-column-max-width) {
+    float: none;
+    margin-top: 30px;
+    margin-left: 0;
+    margin-right: 0;
+    &,
+    * {
+      /*font-size: $single-column-toc-size;*/
+    }
+    .toc-content{
+      padding: 10px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.content b/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.content
index ffc743c..9aecc4c 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.content
+++ b/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.content
@@ -1 +1 @@
-::-webkit-scrollbar{display:none}::selection{background:rgba(25,118,210,.4)}body{background:#fcfcfc;padding:0;margin:0;font-family:lora,noto serif sc,serif;text-shadow:1px 1px 1px rgba(0,0,0,.004);text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important;color:#000}*{color:#000;line-height:1.7em;word-wrap:break-word}h1,h2,h3{font-weight:700}h1{font-size:30px;margin:20px auto}h2{font-size:24px;margin:20px auto}h3{font-size:21px;margin:20px auto}h4{font-size:21px;padding:20px auto}h5{font-size:20px;padding:10px auto}h6{font-size:19px;padding:10px auto}textarea,select,input,button{outline:none!important}button{cursor:hand;cursor:pointer}code{color:#145ca4;background:rgba(25,118,210,.07)!important;padding:2px 5px;border-radius:3px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}pre{background:#2e2e2e!important;color:#fff;padding:12px 15px;border-radius:5px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}pre *{background:0 0!important;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace!important}pre code{padding:0}blockquote{padding:10px 20px;border-left:3px solid rgba(25,118,210,.7);color:#145ca4;background:rgba(25,118,210,.05)}blockquote p{margin-bottom:0}blockquote *{color:#145ca4}a{color:#1976d2}a:hover{color:#145ca4;text-underline-position:under}@media screen and (max-width:1020px){a:hover{text-decoration:none!important}}.a-block{display:block;text-decoration:none!important}.a-block:hover{text-decoration:none!important}.no-margin{margin:0}.no-padding{padding:0}.no-overflow{overflow:hidden!important}.animated-visibility{transition:visibility 0s,opacity .5s linear;visibility:visible;opacity:1}.invisible{visibility:hidden;opacity:0}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}#lv-container{padding:0 30px}@media screen and (max-width:1020px){#lv-container{padding:0 15px}}.single-column-nav-container{display:none!important}@media screen and (max-width:1020px){.single-column-nav-container{display:block!important;padding:0}.single-column-nav-container *{font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;transition:opacity .5s ease-in-out}.single-column-nav-container button{padding:0}.single-column-nav-container .nav-content{padding:12px 20px;justify-content:flex-start;max-width:unset!important}.single-column-nav-container .navbar-brand{opacity:0;text-align:left;padding-left:24px!important}.single-column-nav-container .nav-dropdown-toggle{display:flex;align-content:center;align-items:center;justify-items:center;justify-content:center;background:0 0!important;border:none;padding-top:1px}.single-column-nav-container .nav-dropdown-toggle:hover{color:#3f587d!important}.single-column-nav-container .nav-icon-group{z-index:5;padding-right:5px}.single-column-nav-container .nav-icon-group ul{list-style:none;margin:0;padding:0}.single-column-nav-container .nav-icon-group li{display:inline;margin:0;padding:0}.single-column-nav-container .nav-icon{padding:8px}.single-column-nav-container .nav-background{opacity:0;z-index:-1;left:0;position:absolute;width:100%;height:100%;background:#fff;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2)}}.single-column-header-container{display:none!important}@media screen and (max-width:1020px){.single-column-header-container{display:block!important;padding:50px 20px 80px;transition:padding .5s ease-in-out,margin .5s ease-in-out;text-align:center}.single-column-header-container *{font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;color:#000}.single-column-header-container .single-column-header-title{font-size:28px}.single-column-header-container .single-column-header-subtitle{font-size:20px}}.single-column-drawer-container{display:none!important}@media screen and (max-width:1020px){.single-column-drawer-container{display:block!important;position:fixed;top:0;left:-260px;width:260px;height:100vh;z-index:1800;transition:all .3s ease-in-out}.single-column-drawer-container .drawer-content{background:#fff;height:100%;width:100%;padding:50px 0 80px;display:flex}.single-column-drawer-container .drawer-content .drawer-menu{flex-grow:1;display:flex;justify-items:center;justify-content:center;flex-direction:column}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item{font-size:18px;margin-bottom:10px;border-right:2px solid transparent;padding:8px 30px;cursor:hand;cursor:pointer;transition:all .2s linear;color:#000}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.1);color:#092949}}.single-column-drawer-mask{display:none!important}@media screen and (max-width:1020px){.single-column-drawer-mask{display:block!important;position:fixed;top:0;bottom:0;right:0;left:0;background:rgba(0,0,0,.8);z-index:1600;transition:all .3s ease-in-out}}.single-column-drawer-container-active{left:0;box-shadow:0 0 8px rgba(0,0,0,.2)}.side-container{position:fixed;top:0;height:100vh;width:25%;text-align:right;font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;padding:20px 0 50px;overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:column;justify-content:space-between}.side-container .nav-head{padding:30px 28px 30px 20px;cursor:hand;cursor:pointer;margin-bottom:10px;transition:all .2s linear;color:#000;border-right:2px solid transparent}.side-container .nav-head .nav-title{font-size:30px;line-height:42px}.side-container .nav-head .nav-subtitle{margin-top:8px;font-size:18px}.side-container .nav-head:hover{border-right:2px solid rgba(25,118,210,.6);background:rgba(25,118,210,.02);color:#092949}.side-container .nav-head.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.03);color:#0e4377}.side-container .nav-link-list{flex-grow:1}.side-container .nav-link-list .nav-link-item{font-size:20px;margin-bottom:10px;border-right:2px solid transparent;padding:8px 28px 8px 30px;cursor:hand;cursor:pointer;transition:all .2s linear;color:#000}.side-container .nav-link-list .nav-link-item:hover{border-right:2px solid rgba(25,118,210,.6);background:rgba(25,118,210,.02);color:#092949}.side-container .nav-link-list .nav-link-item.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.03);color:#0e4377}.side-container .nav-footer{padding:20px 30px 0 20px;font-size:12px}@media screen and (max-width:1020px){.side-container{display:none}}.extra-container{position:fixed;top:0;right:0;height:100vh;width:180px;font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:column;justify-content:flex-end}.extra-container .pagination{display:flex;flex-direction:column}.extra-container .pagination .pagination-indicator{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:180px;padding:15px 0;font-size:12px;width:64px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.extra-container .pagination .pagination-action{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:64px;cursor:hand;cursor:pointer;padding:15px 0}.extra-container .pagination .pagination-action :not(.pagination-action-icon){transition:all .2s linear;font-size:13px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.extra-container .pagination .pagination-action *{transition:all .3s linear}.extra-container .pagination .pagination-action:hover{text-decoration:none}.extra-container .pagination .pagination-action:hover *{color:#145ca4}@media screen and (max-width:1020px){.extra-container{display:none}}.pagination-bar-container{position:fixed;top:0;right:0;height:100vh;width:25%;text-align:right;font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;padding:20px 0;overflow:scroll;display:flex;flex-direction:column}.stream-container{padding-left:25%;padding-right:180px;width:100%;min-height:100vh;max-width:1620px}@media screen and (max-width:1020px){.stream-container{padding:0;min-height:unset}}.stream-container .post-list-container{width:100%;min-height:100vh;padding:20px 0;background:#fff;box-shadow:0 0 16px rgba(0,0,0,.12)}@media screen and (max-width:1020px){.stream-container .post-list-container{min-height:unset;padding:0;box-shadow:0 0 0 rgba(0,0,0,.2)}}.stream-container .post-list-container .post-item-wrapper,.stream-container .post-list-container>* .post-item-wrapper{cursor:hand;cursor:pointer;transition:all .2s linear}.stream-container .post-list-container .post-item-wrapper .post-item,.stream-container .post-list-container>* .post-item-wrapper .post-item{margin:0 28px 0 35px;padding:30px 0;display:flex;flex-direction:row;align-items:center}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item,.stream-container .post-list-container>* .post-item-wrapper .post-item{flex-direction:column-reverse;margin:0 0 15px;padding:0;box-shadow:0 0 8px rgba(0,0,0,.1);background:#fff}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper{flex-grow:1}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper{width:100%;padding:15px 20px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title{font-size:30px;font-weight:600;font-style:normal;margin-bottom:10px;line-height:1.5em}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title{font-size:22px;margin-bottom:5px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small{font-size:22px;margin-bottom:0}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small{font-size:14px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary{font-size:16px;line-height:1.5em;margin-bottom:10px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary{font-size:16px;margin-bottom:5px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta{font-size:16px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta{font-size:14px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper{margin-left:20px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper{width:100%;margin-left:0}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image{width:230px;height:120px;background:no-repeat 50%;background-size:cover;border-radius:5px;overflow:hidden}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image{width:100%;height:180px;border-radius:0}}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item-no-divider,.stream-container .post-list-container>* .post-item-wrapper .post-item-no-divider{border-bottom:none!important}.stream-container .post-list-container .post-item-wrapper .post-item-no-gaps,.stream-container .post-list-container>* .post-item-wrapper .post-item-no-gaps{margin:0;box-shadow:none}}.stream-container .post-list-container .post-item-wrapper *,.stream-container .post-list-container>* .post-item-wrapper *{transition:all .2s linear}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover{text-decoration:none;background:rgba(0,0,0,.03)}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title{text-decoration:underline;text-decoration-style:2px solid #1976d2;text-underline-position:under}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *{color:#145ca4}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title{text-decoration:none!important}}.stream-container .post-list-container .post-item-wrapper-no-hover,.stream-container .post-list-container>* .post-item-wrapper-no-hover{cursor:unset}.stream-container .post-list-container:not(:last-child) .post-item,.stream-container .post-list-container>*:not(:last-child) .post-item{border-bottom:1px solid rgba(128,128,128,.12)}@media screen and (max-width:1020px){.stream-container .post-list-container-no-background{background:0 0}}@media screen and (max-width:1020px){.stream-container .post-list-container-shadow{box-shadow:0 0 8px rgba(0,0,0,.1)}}.stream-container .post-list-footer{text-align:center;width:100%;opacity:.3;color:#000;font-family:lora,noto serif sc,serif;font-size:13px;padding:15px}.stream-container .post{padding:0 0 20px}.stream-container .post .post-head-wrapper{margin-top:-20px;background:no-repeat 50%;background-size:cover;position:relative;padding-top:140px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper{padding-top:120px}}.stream-container .post .post-head-wrapper *{color:#fff}.stream-container .post .post-head-wrapper .post-title{padding:80px 35px 30px;font-size:30px;font-weight:600;font-style:normal;line-height:1.5em;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#c6000000',GradientType=0)}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper .post-title{font-size:22px;padding:80px 20px 30px}}.stream-container .post .post-head-wrapper .post-title .post-meta{margin:0}.stream-container .post .post-head-wrapper .post-title .post-meta,.stream-container .post .post-head-wrapper .post-title .post-meta *{font-size:16px}.stream-container .post .post-head-wrapper .post-title .post-meta .material-icons{vertical-align:middle;margin-bottom:3px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper .post-title .post-meta,.stream-container .post .post-head-wrapper .post-title .post-meta *{font-size:14px}}.stream-container .post .post-head-wrapper-text-only{padding:30px 35px 0}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only{padding:30px 20px 0}}.stream-container .post .post-head-wrapper-text-only .post-title{font-size:30px;font-weight:600;font-style:normal;line-height:1.5em}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta{margin:0}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta,.stream-container .post .post-head-wrapper-text-only .post-title .post-meta *{font-size:16px}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta .material-icons{vertical-align:middle;margin-bottom:3px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only .post-title .post-meta,.stream-container .post .post-head-wrapper-text-only .post-title .post-meta *{font-size:14px}}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only .post-title{font-size:22px}}.stream-container .post .post-body-wrapper{padding:30px 35px 35px}@media screen and (max-width:1020px){.stream-container .post .post-body-wrapper{padding:20px 20px 35px}}.stream-container .post .post-body-wrapper .post-body{font-size:16px;line-height:1.5em}.stream-container .post .post-body-wrapper .post-body *{word-wrap:break-word}.stream-container .post .post-body-wrapper .post-body img{max-width:100%;border-radius:5px;overflow:hidden}@media screen and (max-width:1020px){.stream-container .post .post-body-wrapper .post-body{font-size:16px}}.stream-container .post .post-body-wrapper .post-body .toc{float:right;border-radius:5px;background:rgba(25,118,210,.05);padding:30px;margin-left:30px;margin-bottom:30px}.stream-container .post .post-body-wrapper .post-body .toc,.stream-container .post .post-body-wrapper .post-body .toc *{font-size:16px}.stream-container .post .post-body-wrapper .post-body .toc ul{list-style:decimal;padding:0 0 0 20px;margin:0}@media screen and (max-width:1020px){.stream-container .post .post-body-wrapper .post-body .toc,.stream-container .post .post-body-wrapper .post-body .toc *{font-size:14px}}.stream-container .post .post-pagination{padding:20px 35px;width:100%;display:flex;justify-content:space-between}.stream-container .post .post-pagination .newer-posts{padding-right:5px;text-align:left;width:50%}.stream-container .post .post-pagination .older-posts{padding-left:5px;text-align:right;width:50%}@media screen and (max-width:1020px){.stream-container .post .post-pagination{padding:20px}}.stream-container .post .post-comment-wrapper{padding:20px 35px}.stream-container .post .post-comment-wrapper iframe{overflow:hidden!important}@media screen and (max-width:1020px){.stream-container .post .post-comment-wrapper{padding:20px}}.stream-container .pagination{display:none}@media screen and (max-width:1020px){.stream-container .pagination{display:flex!important;flex-direction:row;justify-content:space-between}.stream-container .pagination:not(.index-page){margin-top:15px}.stream-container .pagination .pagination-indicator{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:180px;padding:15px 0;font-size:12px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.stream-container .pagination .pagination-action{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:64px;cursor:hand;cursor:pointer;padding:15px 0}.stream-container .pagination .pagination-action :not(.pagination-action-icon){transition:all .2s linear;font-size:13px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.stream-container .pagination .pagination-action *{transition:all .3s linear}.stream-container .pagination .pagination-action:hover{text-decoration:none}.stream-container .pagination .pagination-action:hover *{color:#145ca4}}#single-column-footer{display:none}@media screen and (max-width:1020px){#single-column-footer{display:block!important;text-align:center;font-size:13px;font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;padding:40px 20px}}
\ No newline at end of file
+::-webkit-scrollbar{display:none}::selection{background:rgba(25,118,210,.4)}body{background:#fcfcfc;padding:0;margin:0;font-family:lora,noto serif sc,serif;text-shadow:1px 1px 1px rgba(0,0,0,.004);text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important;color:#000}*{color:#000;line-height:1.7em;word-wrap:break-word;box-sizing:border-box}h1,h2,h3{font-weight:700}h1{font-size:30px;margin:20px auto}h2{font-size:24px;margin:20px auto}h3{font-size:21px;margin:20px auto}h4{font-size:21px;padding:20px auto}h5{font-size:20px;padding:10px auto}h6{font-size:19px;padding:10px auto}textarea,select,input,button{outline:none!important}button{cursor:hand;cursor:pointer}code{color:#145ca4;background:rgba(25,118,210,.07)!important;padding:2px 5px;border-radius:3px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}pre{background:#2e2e2e!important;color:#fff;padding:12px 15px;border-radius:5px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}pre *{background:0 0!important;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace!important}pre code{padding:0}blockquote{padding:10px 20px;border-left:3px solid rgba(25,118,210,.7);color:#145ca4;background:rgba(25,118,210,.05)}blockquote p{margin-bottom:0}blockquote *{color:#145ca4}a{color:#1976d2}a:hover{color:#145ca4;text-underline-position:under}@media screen and (max-width:1020px){a:hover{text-decoration:none!important}}.a-block{display:block;text-decoration:none!important}.a-block:hover{text-decoration:none!important}.no-margin{margin:0}.no-padding{padding:0}.no-overflow{overflow:hidden!important}.animated-visibility{transition:visibility 0s,opacity .5s linear;visibility:visible;opacity:1}.invisible{visibility:hidden;opacity:0}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}#lv-container{padding:0 30px}@media screen and (max-width:1020px){#lv-container{padding:0 15px}}.single-column-nav-container{display:none!important}@media screen and (max-width:1020px){.single-column-nav-container{display:block!important;padding:0}.single-column-nav-container *{font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;transition:opacity .5s ease-in-out}.single-column-nav-container button{padding:0}.single-column-nav-container .nav-content{padding:12px 20px;justify-content:flex-start;max-width:unset!important}.single-column-nav-container .navbar-brand{opacity:0;text-align:left;padding-left:24px!important}.single-column-nav-container .nav-dropdown-toggle{display:flex;align-content:center;align-items:center;justify-items:center;justify-content:center;background:0 0!important;border:none;padding-top:1px}.single-column-nav-container .nav-dropdown-toggle:hover{color:#3f587d!important}.single-column-nav-container .nav-icon-group{z-index:5;padding-right:5px}.single-column-nav-container .nav-icon-group ul{list-style:none;margin:0;padding:0}.single-column-nav-container .nav-icon-group li{display:inline;margin:0;padding:0}.single-column-nav-container .nav-icon{padding:8px}.single-column-nav-container .nav-background{opacity:0;z-index:-1;left:0;position:absolute;width:100%;height:100%;background:#fff;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2)}}.single-column-header-container{display:none!important}@media screen and (max-width:1020px){.single-column-header-container{display:block!important;padding:50px 20px 80px;transition:padding .5s ease-in-out,margin .5s ease-in-out;text-align:center}.single-column-header-container *{font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;color:#000}.single-column-header-container .single-column-header-title{font-size:28px}.single-column-header-container .single-column-header-subtitle{font-size:20px}}.single-column-drawer-container{display:none!important}@media screen and (max-width:1020px){.single-column-drawer-container{display:block!important;position:fixed;top:0;left:-260px;width:260px;height:100vh;z-index:1800;transition:all .3s ease-in-out}.single-column-drawer-container .drawer-content{background:#fff;height:100%;width:100%;padding:50px 0 80px;display:flex}.single-column-drawer-container .drawer-content .drawer-menu{flex-grow:1;display:flex;justify-items:center;justify-content:center;flex-direction:column}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item{font-size:18px;margin-bottom:10px;border-right:2px solid transparent;padding:8px 30px;cursor:hand;cursor:pointer;transition:all .2s linear;color:#000}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.1);color:#092949}}.single-column-drawer-mask{display:none!important}@media screen and (max-width:1020px){.single-column-drawer-mask{display:block!important;position:fixed;top:0;bottom:0;right:0;left:0;background:rgba(0,0,0,.8);z-index:1600;transition:all .3s ease-in-out}}.single-column-drawer-container-active{left:0;box-shadow:0 0 8px rgba(0,0,0,.2)}.side-container{position:fixed;top:0;height:100vh;width:25%;text-align:right;font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;padding:20px 0 50px;overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:column;justify-content:space-between}.side-container .nav-head{padding:30px 28px 30px 20px;cursor:hand;cursor:pointer;margin-bottom:10px;transition:all .2s linear;color:#000;border-right:2px solid transparent}.side-container .nav-head .nav-title{font-size:30px;line-height:42px}.side-container .nav-head .nav-subtitle{margin-top:8px;font-size:18px}.side-container .nav-head:hover{border-right:2px solid rgba(25,118,210,.6);background:rgba(25,118,210,.02);color:#092949}.side-container .nav-head.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.03);color:#0e4377}.side-container .nav-link-list{flex-grow:1}.side-container .nav-link-list .nav-link-item{font-size:20px;margin-bottom:10px;border-right:2px solid transparent;padding:8px 28px 8px 30px;cursor:hand;cursor:pointer;transition:all .2s linear;color:#000}.side-container .nav-link-list .nav-link-item:hover{border-right:2px solid rgba(25,118,210,.6);background:rgba(25,118,210,.02);color:#092949}.side-container .nav-link-list .nav-link-item.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.03);color:#0e4377}.side-container .nav-footer{padding:20px 30px 0 20px;font-size:12px}@media screen and (max-width:1020px){.side-container{display:none}}.extra-container{position:fixed;top:0;right:0;width:25%;font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:column;justify-content:flex-end}.extra-container .pagination{position:fixed;bottom:0;display:flex;flex-direction:column}.extra-container .pagination .pagination-indicator{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:25%;padding:15px 0;font-size:12px;width:64px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.extra-container .pagination .pagination-action{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:64px;cursor:hand;cursor:pointer;padding:15px 0}.extra-container .pagination .pagination-action :not(.pagination-action-icon){transition:all .2s linear;font-size:13px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.extra-container .pagination .pagination-action *{transition:all .3s linear}.extra-container .pagination .pagination-action:hover{text-decoration:none}.extra-container .pagination .pagination-action:hover *{color:#145ca4}@media screen and (max-width:1020px){.extra-container{display:none}}.pagination-bar-container{position:fixed;top:0;right:0;height:100vh;width:25%;text-align:right;font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;padding:20px 0;overflow:scroll;display:flex;flex-direction:column}.stream-container{padding-left:25%;padding-right:25%;width:100%;min-height:100vh}@media screen and (max-width:1020px){.stream-container{padding:0;min-height:unset}}.stream-container .post-list-container{width:100%;min-height:100vh;padding:20px 0;background:#fff;box-shadow:0 0 16px rgba(0,0,0,.12)}@media screen and (max-width:1020px){.stream-container .post-list-container{min-height:unset;padding:0;box-shadow:0 0 0 rgba(0,0,0,.2)}}.stream-container .post-list-container .post-item-wrapper,.stream-container .post-list-container>* .post-item-wrapper{cursor:hand;cursor:pointer;transition:all .2s linear}.stream-container .post-list-container .post-item-wrapper .post-item,.stream-container .post-list-container>* .post-item-wrapper .post-item{margin:0 28px 0 35px;padding:30px 0;display:flex;flex-direction:row;align-items:center}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item,.stream-container .post-list-container>* .post-item-wrapper .post-item{flex-direction:column-reverse;margin:0 0 15px;padding:0;box-shadow:0 0 8px rgba(0,0,0,.1);background:#fff}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper{flex-grow:1}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper{width:100%;padding:15px 20px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title{font-size:30px;font-weight:600;font-style:normal;margin-bottom:10px;line-height:1.5em}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title{font-size:22px;margin-bottom:5px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small{font-size:22px;margin-bottom:0}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small{font-size:14px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary{font-size:16px;line-height:1.5em;margin-bottom:10px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary{font-size:16px;margin-bottom:5px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta{font-size:16px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta{font-size:14px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper{margin-left:20px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper{width:100%;margin-left:0}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image{width:230px;height:120px;background:no-repeat 50%;background-size:cover;border-radius:5px;overflow:hidden}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image{width:100%;height:180px;border-radius:0}}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item-no-divider,.stream-container .post-list-container>* .post-item-wrapper .post-item-no-divider{border-bottom:none!important}.stream-container .post-list-container .post-item-wrapper .post-item-no-gaps,.stream-container .post-list-container>* .post-item-wrapper .post-item-no-gaps{margin:0;box-shadow:none}}.stream-container .post-list-container .post-item-wrapper *,.stream-container .post-list-container>* .post-item-wrapper *{transition:all .2s linear}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover{text-decoration:none;background:rgba(0,0,0,.03)}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title{text-decoration:underline;text-decoration-style:2px solid #1976d2;text-underline-position:under}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *{color:#145ca4}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title{text-decoration:none!important}}.stream-container .post-list-container .post-item-wrapper-no-hover,.stream-container .post-list-container>* .post-item-wrapper-no-hover{cursor:unset}.stream-container .post-list-container:not(:last-child) .post-item,.stream-container .post-list-container>*:not(:last-child) .post-item{border-bottom:1px solid rgba(128,128,128,.12)}@media screen and (max-width:1020px){.stream-container .post-list-container-no-background{background:0 0}}@media screen and (max-width:1020px){.stream-container .post-list-container-shadow{box-shadow:0 0 8px rgba(0,0,0,.1)}}.stream-container .post-list-footer{text-align:center;width:100%;opacity:.3;color:#000;font-family:lora,noto serif sc,serif;font-size:13px;padding:15px}.stream-container .post{padding:0 0 20px}.stream-container .post .post-head-wrapper{margin-top:-20px;background:no-repeat 50%;background-size:cover;position:relative;padding-top:140px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper{padding-top:120px}}.stream-container .post .post-head-wrapper *{color:#fff}.stream-container .post .post-head-wrapper .post-title{padding:80px 35px 30px;font-size:30px;font-weight:600;font-style:normal;line-height:1.5em;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#c6000000',GradientType=0)}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper .post-title{font-size:22px;padding:80px 20px 30px}}.stream-container .post .post-head-wrapper .post-title .post-meta{margin:0}.stream-container .post .post-head-wrapper .post-title .post-meta,.stream-container .post .post-head-wrapper .post-title .post-meta *{font-size:16px}.stream-container .post .post-head-wrapper .post-title .post-meta .material-icons{vertical-align:middle;margin-bottom:3px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper .post-title .post-meta,.stream-container .post .post-head-wrapper .post-title .post-meta *{font-size:14px}}.stream-container .post .post-head-wrapper-text-only{padding:30px 35px 0}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only{padding:30px 20px 0}}.stream-container .post .post-head-wrapper-text-only .post-title{font-size:30px;font-weight:600;font-style:normal;line-height:1.5em}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta{margin:0}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta,.stream-container .post .post-head-wrapper-text-only .post-title .post-meta *{font-size:16px}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta .material-icons{vertical-align:middle;margin-bottom:3px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only .post-title .post-meta,.stream-container .post .post-head-wrapper-text-only .post-title .post-meta *{font-size:14px}}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only .post-title{font-size:22px}}.stream-container .post .post-body-wrapper{padding:30px 35px 35px}@media screen and (max-width:1020px){.stream-container .post .post-body-wrapper{padding:20px 20px 35px}}.stream-container .post .post-body-wrapper .post-body{font-size:16px;line-height:1.5em}.stream-container .post .post-body-wrapper .post-body *{word-wrap:break-word}.stream-container .post .post-body-wrapper .post-body img{max-width:100%;border-radius:5px;overflow:hidden}@media screen and (max-width:1020px){.stream-container .post .post-body-wrapper .post-body{font-size:16px}}.stream-container .post .post-pagination{padding:20px 35px;width:100%;display:flex;justify-content:space-between}.stream-container .post .post-pagination .newer-posts{padding-right:5px;text-align:left;width:50%}.stream-container .post .post-pagination .older-posts{padding-left:5px;text-align:right;width:50%}@media screen and (max-width:1020px){.stream-container .post .post-pagination{padding:20px}}.stream-container .post .post-comment-wrapper{padding:20px 35px}.stream-container .post .post-comment-wrapper iframe{overflow:hidden!important}@media screen and (max-width:1020px){.stream-container .post .post-comment-wrapper{padding:20px}}.stream-container .pagination{display:none}@media screen and (max-width:1020px){.stream-container .pagination{display:flex!important;flex-direction:row;justify-content:space-between}.stream-container .pagination:not(.index-page){margin-top:15px}.stream-container .pagination .pagination-indicator{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:25%;padding:15px 0;font-size:12px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.stream-container .pagination .pagination-action{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:64px;cursor:hand;cursor:pointer;padding:15px 0}.stream-container .pagination .pagination-action :not(.pagination-action-icon){transition:all .2s linear;font-size:13px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.stream-container .pagination .pagination-action *{transition:all .3s linear}.stream-container .pagination .pagination-action:hover{text-decoration:none}.stream-container .pagination .pagination-action:hover *{color:#145ca4}}#single-column-footer{display:none}@media screen and (max-width:1020px){#single-column-footer{display:block!important;text-align:center;font-size:13px;font-family:montserrat,roboto,source sans pro,helvetica,arial,lora,noto serif sc,serif;padding:40px 20px}}.toc{float:right;border-radius:5px;border:30px,30px,30px,30px;margin:20px;background:rgba(25,118,210,.05)}.toc,.toc *{font-size:16px}.toc ul{list-style:none;padding:0 0 0 20px;margin:0;line-height:1.7em}.toc .toc-content{padding:20px}@media screen and (max-width:1020px){.toc{float:none;margin-top:30px;margin-left:0;margin-right:0}.toc,.toc *{}.toc .toc-content{padding:10px}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.json b/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.json
index 596d691..6f97702 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.json
+++ b/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.json
@@ -1 +1 @@
-{"Target":"scss/journal.min.c9d8d7104e35224d533639f6936f8462be5363606cbb8f2bac9cb129149615fd.css","MediaType":"text/css","Data":{"Integrity":"sha256-ydjXEE41Ik1TNjn2k2+EYr5TY2Bsu48rrJyxKRSWFf0="}}
\ No newline at end of file
+{"Target":"scss/journal.min.13cfad470023a554301be63b9395a1ea8219ad097e4dc22171963dbe99ac80ac.css","MediaType":"text/css","Data":{"Integrity":"sha256-E8+tRwAjpVQwG+Y7k5Wh6oIZrQl+TcIhcZY9vpmsgKw="}}
\ No newline at end of file
diff --git a/layouts/partials/extrabar.html b/layouts/partials/extrabar.html
index 68653b6..0b37d40 100644
--- a/layouts/partials/extrabar.html
+++ b/layouts/partials/extrabar.html
@@ -1,9 +1,9 @@
 <div ref="extraContainer" class="extra-container">
-    <!--
-    <div class="tableOfContents">
-        {{ .TableOfContents }}
+    {{ if and (.Site.Params.toc) (.IsPage) }}
+    <div class="toc animated-visibility" :class="{ invisible: scrollY <= 140 }">
+        {{- partial "toc.html" . -}}
     </div>
-    -->
+    {{ end }}
     <div class="pagination">
         <a id="globalBackToTop" class="pagination-action animated-visibility" href="#top" :class="{ invisible: scrollY == 0 }">
             <i class="material-icons pagination-action-icon">
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 924acb2..539153d 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -33,7 +33,7 @@
 <script>
     loadCSS("https://fonts.googleapis.com/css?family=Lora|Montserrat|Fira+Mono|Noto+Serif+SC|Material+Icons");
 </script>
-{{ if .Site.Params.enableGitalk }}
+{{ if and (.Site.Params.enableGitalk) (.IsPage) }}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
 <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
 <script src="{{"/vendor/js/md5.min.js" | relLangURL}}"></script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
deleted file mode 100644
index 3c96494..0000000
--- a/layouts/partials/header.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<div class="single-column-drawer-container" ref="drawer"
-     v-bind:class="{ 'single-column-drawer-container-active': isDrawerOpen }">
-    <div class="drawer-content">
-        <div class="drawer-menu">
-            {{ $current := .Permalink}}
-            {{range $taxonomyname, $taxonomy := .Site.Taxonomies}}
-                
-                {{ with $.Site.GetPage (printf "/%s" $taxonomyname) }}
-
-                {{$actived := "false"}}
-                    {{if eq $current .Permalink}}
-                        {{$actived = "active"}}
-                        
-                    {{end}}
-                    <a class="a-block drawer-menu-item {{$actived}}" href="{{.Permalink}}">
-                        {{.Title}}
-                    </a>
-                {{ end }}
-            {{ end }}
-            <!--
-            <a class="a-block drawer-menu-item <%= is_home() && 'active' %>" href="<%= config.url %>">
-                <%= __('Home') %>
-            </a>
-            <% if (theme.archives) { %>
-            <a class="a-block drawer-menu-item <%= is_current('archives') && 'active' %>" href="<%= config.root + "archives" %>">
-                <%= __('Archive') %>
-            </a>
-            <% } %>
-
-            <% if(site.pages){ %>
-            <% site.pages.each(function (page){ %>
-            <a class="a-block drawer-menu-item <%= is_current(page.path) && 'active' %>" href="<%= config.root + page.path %>">
-                <%= page.title %>
-            </a>
-            <% });} %>
-
-            <% if (theme.rss) { %>
-            <a class="a-block drawer-menu-item" href="<%= config.root + theme.rss %>">
-                <%= __('RSS') %>
-            </a>
-            <% } %>
-        -->
-        </div>
-    </div>
-</div>
-<transition name="fade">
-    <div v-bind:class="{ 'single-column-drawer-mask': mounted }" v-if="isDrawerOpen" v-on:click="toggleDrawer"></div>
-</transition>
-<nav ref="navBar" class="navbar sticky-top navbar-light single-column-nav-container">
-    <div ref="navBackground" class="nav-background"></div>
-    <div class="container container-narrow nav-content">
-        <button id="nav_dropdown_btn" class="nav-dropdown-toggle" type="button" v-on:click="toggleDrawer">
-            <i class="material-icons">
-                menu
-            </i>
-        </button>
-        <a ref="navTitle" class="navbar-brand" href="{{.Site.BaseURL}}">
-            {{.Site.Title}}
-        </a>
-    </div>
-</nav>
-<div class="single-column-header-container" ref="pageHead"
-     v-bind:style="{ transform: 'translateZ(0px) translateY('+.3*scrollY+'px)', opacity: 1-navOpacity }">
-    <a href="{{.Site.BaseURL}}">
-        <div class="single-column-header-title">{{.Site.Title}}</div>
-        {{ with .Site.Params.subtitle }}
-        <div class="single-column-header-subtitle">{{.}}</div>
-        {{ end }}
-
-    </a>
-</div>
\ No newline at end of file
diff --git a/layouts/partials/mobile-header.html b/layouts/partials/mobile-header.html
index 6acc476..598707d 100644
--- a/layouts/partials/mobile-header.html
+++ b/layouts/partials/mobile-header.html
@@ -2,17 +2,22 @@
      v-bind:class="{ 'single-column-drawer-container-active': isDrawerOpen }">
     <div class="drawer-content">
         <div class="drawer-menu">
-        {{ $current := .Permalink | absLangURL }}
-        {{ range .Site.Menus.main }}
-            {{$actived := "false"}}
-                <!-- A problem caused by slash: if you use "eq" directly, you will get a result of "/tags/" and "/tags" -->
-                {{if hasPrefix  $current (.URL|absLangURL)}}
-                    {{$actived = "active"}}
-                {{end}}
-                <a class="a-block drawer-menu-item {{$actived}}" href="{{ .URL }}">
-                    {{ .Name }}
-                </a>
-        {{ end }}
+            {{ $current := .Permalink | absLangURL }}
+            {{ range .Site.Menus.main }}
+                {{$actived := "false"}}
+                    <!-- A problem caused by slash: if you use "eq" directly, you will get a result of "/tags/" and "/tags" -->
+                    {{if hasPrefix  $current (.URL|absLangURL)}}
+                        {{$actived = "active"}}
+                    {{end}}
+                    <a class="a-block drawer-menu-item {{$actived}}" href="{{ .URL }}">
+                        {{ .Name }}
+                    </a>
+            {{ end }}
+            {{ if and (.Site.Params.toc) (.IsPage) }}
+            <div class="toc">
+                {{- partial "toc.html" . -}}
+            </div>
+            {{ end }}
         </div>
     </div>
 </div>
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
new file mode 100644
index 0000000..c69f96e
--- /dev/null
+++ b/layouts/partials/toc.html
@@ -0,0 +1,34 @@
+{{ if not .Params.toc }}
+<div class="toc-content" href="#top">
+<!--  class="animated-visibility" href="#top" :class="{ invisible: scrollY == 0 }" -->
+	<!-- ignore empty links with + -->
+	{{ $headers := findRE "<h[1-4].*?>(.|\n])+?</h[1-2]>" .Content }}
+	<!-- at least one header to link to -->
+	{{ if ge (len $headers) 1 }}
+		{{ $h1_n := len (findRE "(.|\n])+?" .Content) }}
+		{{ $re := (cond (eq $h1_n 0) "<h[2-4]" "<h[1-4]") }}
+		{{ $renum := (cond (eq $h1_n 0) "[2-4]" "[1-4]") }}
+		<center>- CATALOG -</center>
+			{{ range $headers }}
+				{{ $header := . }}
+				{{ range first 1 (findRE $re $header 1) }}
+					{{ range findRE $renum . 1 }}
+						{{ $next_heading := (cond (eq $h1_n 0) (sub (int .) 1 ) (int . ) ) }}
+						{{ range seq $next_heading }}
+							<ul>
+						{{ end }}
+						{{ $anchorId :=  (replaceRE ".* id=\"(.*?)\".*" "$1" $header ) }}
+								<li>
+				 					<a href="#{{ $anchorId }}">
+										 {{ $header | plainify | htmlUnescape }}
+									</a>
+								</li>
+						{{ range seq $next_heading }}
+							</ul>
+						{{ end }}
+					{{ end }}
+				{{ end }}
+			{{ end }}
+	{{ end }}
+</div>
+{{- end -}}
\ No newline at end of file