toc level option added, menu highlight, some ui change

assets/sass/layout/_navbar.scss

@@ -80,7 +80,7 @@
       & > a {
         width: 100%;
         font-size: 18px;
-        padding: 0.5rem;
+        padding: 0.5rem 1rem;
         
         @include themify($themes) {
           color: themed('body-color');

assets/sass/pages/_single.scss

@@ -23,8 +23,7 @@
     font-family: $title-font;
     line-height: 3rem;
     overflow-wrap: break-word;
-    padding: 1rem;
-    margin: 1rem 0;
+    margin: 1.5rem 1rem 0.5rem;
 
     @include themify($themes) {
       color: themed("single-header-title-color");
@@ -34,6 +33,7 @@
   &__meta {
     font-size: 0.8rem;
     margin-bottom: 1.5rem;
+    padding:0 1rem;
 
     @include flexbox();
     @include align-items(center);
@@ -393,7 +393,7 @@ pre:not(.chroma) {
 }
 
 .highlight > .chroma {
-  margin: 1em 0;
+  margin-bottom: 1.5rem;
   z-index: z('content');
   overflow-x: auto;  
 
@@ -504,6 +504,7 @@ li .highlight > .chroma {
 }
 
 table:not(.lntable) {
+  margin: 0 1rem;
   td {
     code {
       padding: 2px 7px !important;

layouts/partials/head/scripts.html

@@ -147,11 +147,20 @@
     var tableOfContentsElem = tocElem ? tocElem.querySelector('#TableOfContents') : null;
     var singleContentsElem = document.querySelector('.single__contents');
 
+    {{ $tocLevels := ($.Param "tocLevels") }}
+    var tocLevels = JSON.parse({{ $tocLevels | jsonify }});
+
+    if (tocLevels) {
+      tocLevels = tocLevels.toString();
+    } else {
+      tocLevels = "h1, h2, h3, h4, h5, h6";
+    }
+
     window.onscroll = function () {
       var st = window.pageYOffset || document.documentElement.scrollTop;
       if (st > lastScrollTop) { // scroll down
         singleContentsElem ? 
-        singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function(elem) {
+        singleContentsElem.querySelectorAll(tocLevels.toString()).forEach(function(elem) {
           if (document.documentElement.scrollTop >= elem.offsetTop) {
             if (tableOfContentsElem) {
               var id = elem.getAttribute('id');
@@ -165,7 +174,7 @@
         }) : null;
       } else { // scroll up
         singleContentsElem ? 
-        singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function(elem) {
+        singleContentsElem.querySelectorAll(tocLevels.toString()).forEach(function(elem) {
           if (document.documentElement.scrollTop >= elem.offsetTop) {
             if (tableOfContentsElem) {
               var id = elem.getAttribute('id');

layouts/partials/main/sections/list-main.html

@@ -1,5 +1,8 @@
 <div class="single" data-display="block">
   {{ if eq .Type "blog" }}
+    <div class="single__title">
+      {{ .Title }}
+    </div>
     <div class="single__meta">
       {{ partial "main/component/article-meta.html" . }}
     </div>

layouts/partials/main/sections/single-menu.html

@@ -30,8 +30,8 @@
       {{ else }}
         {{ $lastUrlElement1 := index (last 1 (split (delimit (split .Permalink "/") "," "") ",")) 0 }}
         {{ $lastUrlElement2 := index (last 1 (split (delimit (split $currentURL "/") "," "") ",")) 0 }}
-        <li class="{{ if and (in $lastUrlElement1 $lastUrlElement2) (eq $sectionName1 $sectionName2) }}active{{ end }}">
-          <a href="{{ .Permalink }}" class="menu__title {{ if and (in $lastUrlElement1 $lastUrlElement2) (eq $sectionName1 $sectionName2) }}active{{ end }}">{{ .Title }}</a>
+        <li>
+          <a href="{{ .Permalink }}" class="menu__title {{ if in $lastUrlElement1 $lastUrlElement2 }}active{{ end }}">{{ .Title }}</a>
         </li>
       {{ end }}
     {{ end }}