assets/css/style.css

@@ -22,6 +22,10 @@
   src: url(../fonts/WorkSans-SemiBold.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-SemiBold.woff) format("woff"), url(../fonts/WorkSans-SemiBold.ttf) format("truetype"), url(../fonts/WorkSans-SemiBold.svg) format("svg")
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   line-height: 1.5;
   font-family: var(--font-family), sans-serif;
@@ -50,27 +54,27 @@ h6 {
 
 h1,
 .h1 {
-  font-size: 45px;
+  font-size: 32px;
 }
 
 h2,
 .h2 {
-  font-size: 32px;
+  font-size: 26px;
 }
 
 h3,
 .h3 {
-  font-size: 26px;
+  font-size: 20px;
 }
 
 h4,
 .h4 {
-  font-size: 20px;
+  font-size: 18px;
 }
 
 h5,
 .h5 {
-  font-size: 18px;
+  font-size: 16px;
 }
 
 h6,
@@ -226,8 +230,17 @@ select:focus {
   }
 }
 
+.main-title {
+  font-size: 45px;
+}
+
 .section-title {
   margin-bottom: 40px;
+  font-size: 32px;
+}
+
+.section-item {
+  font-size: 26px;
 }
 
 .bg-cover {
@@ -606,6 +619,38 @@ textarea.form-control {
   top: 8px;
 }
 
+#TableOfContents ul li,
+#TableOfContents ul li ul {
+  margin-bottom: 0;
+}
+
+#TableOfContents ul li a:hover,
+#TableOfContents ul li ul a:hover {
+  text-decoration: underline;
+}
+
+/* this is so that the header does not overlap the section title */
+.content h2:before,
+.content h3:before,
+.content h4:before {
+  display: block;
+  content: "";
+  height: 75px;
+  margin: -75px 0 0;
+}
+
+.content .title-link {
+  opacity: 0;
+  transition: 0.3s;
+  margin-left: 10px;
+}
+
+.content h2:hover .title-link,
+.content h3:hover .title-link,
+.content h4:hover .title-link {
+  opacity: 1;
+}
+
 .list-styled li {
   position: relative;
 }

assets/js/script.js

@@ -128,6 +128,14 @@
   })
 
 
+  // table of contents
+  $('h2, h3, h4', '.content').each(function () {
+    if ($('#TableOfContents', '.content').length) {
+      $(this).append('<a class="title-link" href="#' + $(this).attr('id') + '">#</a>');
+    }
+  });
+
+
   // Download page to pdf format
   window.onload = function() {
       var generatePDF = document.getElementById('generatePDF');

layouts/index.html

@@ -22,7 +22,7 @@
               {{ with .Params.icon}}
                 <i class="{{.}} icon text-primary d-block mb-4"></i>
               {{end}}
-              <h3 class="mb-3 mt-0">{{ .Title }}</h3>
+              <h3 class="mb-3 mt-0 section-item">{{ .Title }}</h3>
               {{with .Params.description}}
                 <p class="mb-0">{{. | markdownify}}</p>
               {{end}}

layouts/partials/banner.html

@@ -2,7 +2,7 @@
 <div class="container section">
   <div class="row">
     <div class="col-lg-8 text-center mx-auto">
-      <h1 class="text-white mb-3">
+      <h1 class="text-white mb-3 main-title">
         {{ .Site.Params.banner.title | markdownify }}
       </h1>
       <p class="text-white mb-4">

layouts/partials/default.html

@@ -30,7 +30,7 @@
       </div>
       <div class="col-lg-8">
         <div class="p-lg-5 p-4 bg-white" id="content">
-          <h2 class="mb-5" id="title">{{ partial "title.html" . }}</h2>
+          <h1 class="mb-5" id="title">{{ partial "title.html" . }}</h1>
           {{ if .Content }}
             <div class="content">
               {{ if isset .Params "status" }}
@@ -50,6 +50,14 @@
                     </tr>
                   </tbody>
                 </table>
+                {{ if .Params.toc }}
+                  <details>
+                    <summary>Table of Contents</summary>
+                    <aside>
+                      {{ .TableOfContents }}
+                    </aside>
+                  </details>
+                {{ end }}
               {{ end }}
               {{.Content}}
             </div>