Add table of contents

Add table of contents

See #64

5 files changed, 99 insertions, 4 deletions

diff --git a/assets/scss/tale.scss b/assets/scss/tale.scss
index 9d1c12f..53f9dec 100644
--- a/assets/scss/tale.scss
+++ b/assets/scss/tale.scss
@@ -4,6 +4,7 @@
 @import 'tale/post';
 @import 'tale/syntax';
 @import 'tale/layout';
+@import 'tale/toc';
 @import 'tale/pagination';
 @import 'tale/catalogue';
 @import 'tale/disqus';
diff --git a/assets/scss/tale/_code.scss b/assets/scss/tale/_code.scss
index 8d3db57..11f1c53 100644
--- a/assets/scss/tale/_code.scss
+++ b/assets/scss/tale/_code.scss
@@ -4,7 +4,7 @@ code {
 }
 
 code {
-  background-color: $grey-3;
+  background-color: $grey-4;
   border-radius: 3px;
   color: $code-color;
   font-size: 85%;
@@ -24,7 +24,7 @@ pre code {
 }
 
 .highlight {
-  background-color: $grey-3;
+  background-color: $grey-4;
   border-radius: 3px;
   line-height: 1.4;
   margin: 0 0 1rem;
diff --git a/assets/scss/tale/_layout.scss b/assets/scss/tale/_layout.scss
index ba4a7b0..8d56834 100644
--- a/assets/scss/tale/_layout.scss
+++ b/assets/scss/tale/_layout.scss
@@ -4,7 +4,11 @@
   width: 80%;
 }
 
-main,
+// Carve out an exception from the 80% narrowing of the viewport for the table
+// of contents. This is ugly, but there isn't a better way, since the table of
+// contents must be a child of the "main" element so that it its scrolling
+// behavior is intuitive.
+main > *,
 footer,
 .nav-container {
   display: block;
diff --git a/assets/scss/tale/_toc.scss b/assets/scss/tale/_toc.scss
new file mode 100644
index 0000000..6492ba7
--- /dev/null
+++ b/assets/scss/tale/_toc.scss
@@ -0,0 +1,89 @@
+aside.toc {
+    position: sticky;
+    top: 0;
+    max-width: 30%;
+
+    // We want the table of contents to be on the left (horizontally), to be
+    // positioned at a specific point (vertically), stick to the top on scroll
+    // and it should not affect the layout of other elements.
+    // "float: left" accomplishes the horizontal positioning, position in the
+    // element tree the vertical positioning and "position: sticky" does the
+    // stickiness. "height: 0" makes sure that the flow of other elements is not
+    // affected.
+    //
+    // There does not seem to be a better way to do this unless one is willing
+    // to implement scrolling in JS: "position" must be set to sticky so neither
+    // fixed, nor absolute, nor relative positioning can be used.
+    float: left;
+    height: 0;
+    overflow: display;
+}
+
+#tocTitle {
+    // This is so that we can measure it in JS
+    width: fit-content;
+}
+
+#tocContainer:hover {
+    width: calc(2rem + var(--measured-expanded-width));
+}
+
+#tocContainer:hover div#tocCollapsible {
+    height: var(--measured-height);
+    width: var(--measured-expanded-width);
+}
+
+#tocContainer {
+    background: $grey-3;
+    border-radius: 1rem;
+    margin: 2rem;
+    padding: 1rem;
+
+    // This makes the gap between the two contained divs vanish. Why that gap
+    // exists, no clue.
+    display: flex;
+    flex-direction: column;
+
+    // We want to hide the table of contents before revealing it on hover
+    overflow: hidden;
+
+    // In addition to the measured width of the title, we need to add the two
+    // rems for the border (we are using box-sizing: border-box). Also add a
+    // reasonable default value to minimize visual changes while the page is
+    // loading.
+    width: calc(2rem + var(--measured-title-width));
+    --measured-title-width: 2.4rem;
+
+    @include transition(all .1s ease-out);
+}
+
+#tocContainer > div {
+    border-left: 0.4rem solid black;
+    padding-left: 1rem;
+}
+
+#tocContainer div#tocCollapsible {
+    // Collapsed by default
+    height: 0;
+
+    // If we did not force this element to a given width, it would keep
+    // re-wrapping during the opening/closing transition.
+    width: var(--measured-expanded-width);
+
+    // No transition on width so that there is no re-wrapping during the
+    // opening/closing transition
+    @include transition(height .1s ease-out);
+}
+
+nav#TableOfContents ul {
+    list-style-type: none;
+    padding-inline-start: 1rem;
+}
+
+nav#TableOfContents > ul {
+    padding-inline-start: 0;
+}
+
+nav#TableOfContents li {
+    margin-top: 0.4rem;
+}
diff --git a/assets/scss/tale/_variables.scss b/assets/scss/tale/_variables.scss
index 8a064f3..92d1114 100644
--- a/assets/scss/tale/_variables.scss
+++ b/assets/scss/tale/_variables.scss
@@ -4,7 +4,8 @@ $default-shade: #353535;
 $default-tint: #aaa;
 $grey-1: #979797;
 $grey-2: #e5e5e5;
-$grey-3: #f9f9f9;
+$grey-3: #f0f0f0;
+$grey-4: #f9f9f9;
 $white: #fff;
 $blue: #4a9ae1;
 $shadow-color: rgba(0, 0, 0, .2);