enable toc

layout/_partial/article.ejs

@@ -17,7 +17,7 @@
 	<%- partial('categories',{post:post}) %>
 	</section>
 	<% if(post.toc!==false){ %>
-		<!-- <section class="toc-wrapper"><%- toc(post.content, {list_number: false}) %></section> -->
+		<section class="toc-wrapper"><%- toc(post.content, {list_number: false}) %></section>
 	<% } %>
 
 	<section class="article typo">

source/less/_toc.less

@@ -10,10 +10,9 @@
         &:extend(.z-depth-main-raised);
     }
     &:active {
-    // box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
     }
-  // prevent toc is too heigh.
+
     overflow: auto;
     max-height: ~"calc(100% - @{header-height} - 2 * @{gap})";
     @media(max-width: @container-width){
@@ -34,27 +33,38 @@
     width: @side-width;
     z-index:3;
     &:extend(.z-depth-2);
-  padding: @gap;
+    padding: @gap 0;
     background: white;
     a {
+        padding-left: 8px;
+        border-left: 0px solid @primary-color;
         color: fade(@text-color, 60%);
         font-size: @small-font-size;
         display: inline-block;
         &:hover,&:active,&.active{
             color: darken(@text-color-theme, 00%);
             font-weight: bold;
+            border-left-width: 3px;
+        }
+        &:active,&.active{
+        border-left: 3px solid @primary-color;
+        background:darken(white, 5%);
         }
     }
     ol{
-    &.toc-child{
-      padding-left: @gap;
+        &.toc-child a{
+            padding-left: 2*@gap;
+            width: 100%;
         }
         li{
+            a{
+                padding-left: @gap;
+                width: 100%;
+            }
             list-style: none;
             width: auto;
             &:extend(.txt-ellipsis);
         }
-
     }
     &:empty{
         display:none;