feat(toc): first version

.editorconfig

@@ -1,3 +1,7 @@
 [*.html]
 indent_style = "space"
+indent_size = 4
+
+[*.scss]
+indent_style = "space"
 indent_size = 4

assets/sass/researcher.scss

@@ -1,6 +1,7 @@
 // Sizes
 $max-width: {{ .Param "style.pageWidth" | default "750px;" }};
 $avatar-size: {{ .Param "style.avatarSize" | default "90px;" }};
+$toc-width: {{ .Param "style.tocWidth" | default "350px;" }};
 
 // Colors
 $black: {{ .Param "style.colorBlack" | default "#222222" }};
@@ -48,9 +49,94 @@ $y-medium: 1.0rem;
     font-family: $font-family;
     line-height: 1.2;
 }
+.root {
+    display: flex;
+    flex-direction: column;
+
+    @media(max-width: $toc-width + $max-width) {
+        margin-right: auto;
+        margin-left: auto;
+        width: 100%;
+        max-width: $max-width;
+    }
+}
+.table-of-contents {
+    order: 0;
+    @media(max-width: $toc-width + $max-width) {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    ul {
+        padding-left: 1.0rem !important;
+        & > li {
+            margin-left: 0.3em !important;
+        }
+    }
+    @media(max-width: 578px) {
+        align-self: center;
+    }
+}
 .container {
     max-width: $max-width;
+    order: 1
 }
+#title-large-screen {
+    display: none;
+}
+#title-small-screen {
+    margin-left: 15px !important;
+
+    @media(max-width: 578px) {
+        align-self: center;
+    }
+}
+
+@media (min-width: $toc-width * 1.5 + $max-width) {
+    .root {
+        margin-left: calc((100vw - 750px) / 2);
+    }
+    .content {
+        margin: 0;
+    }
+}
+
+@media(min-width: $toc-width + $max-width + 25px) {
+    .root {
+        flex-direction: row;
+    }
+
+    .table-of-contents {
+        width: $toc-width;
+        order: 2;
+        position: sticky;
+        top: 0px;
+        padding: 1em;
+        align-self: start;
+        scrollbar-width: thin;
+        // flex-grow: 1;
+
+        .table-of-contents-text {
+            overflow-x: hidden;
+            overflow-y: auto;
+            max-height: calc(100vh - 155px);
+
+
+        }
+    }
+
+    .content {
+        // flex-grow: 1;
+    }
+
+    #title-small-screen {
+        display: none;
+    }
+    #title-large-screen {
+        display: block;
+    }
+}
+
 .navbar-brand {
     @extend %link-dark;
     font-size: 2rem;

layouts/_default/single.html

@@ -1,6 +1,15 @@
 {{ define "main" }}
-<div class="container">
+<div class="root">
-    <h1>{{ .Title }}</h1>
+    <h1 id="title-small-screen">{{ .Title }}</h1>
-    {{ .Content }}
+    <div class="container content">
+        <h1 id="title-large-screen">{{ .Title }}</h1>
+        {{ .Content }}
+    </div>
+    <div class="table-of-contents">
+        <div class="table-of-contents-text">
+            <b><a href="#">Table of Contents</a></b>
+            {{ .TableOfContents }}
+        </div>
+    </div>
 </div>
 {{ end }}