Merge pull request #18 from Track3/feature-toc

Add support for Table of Contents

2 files changed, 75 insertions, 4 deletions

diff --git a/assets/js/main.js b/assets/js/main.js
index ed98d94..9ba2939 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -65,12 +65,18 @@ const showContent = () => {
   document.getElementById('bg-img').classList.remove('show-bg-img');
 }
 
+// Toggle TOC
+//
+const toggleToc = () => {
+  document.getElementById('toc').classList.toggle('show-toc');
+}
+
 if (haveHeader == true) {
   document.getElementById('menu-btn').addEventListener('click', mobileMenuToggle);
-  
+
   window.addEventListener('scroll', throttle(() => {
     autoHideHeader();
-    
+
     if (mobileMenuVisible == true) {
       mobileMenuToggle();
     }
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 49a1dc1..6606273 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -145,6 +145,10 @@ table {
   height: 1em;
 }
 
+.desktop-only, .desktop-only-ib {
+  display: none;
+}
+
 // Accessibility
 //
 .screen-reader-text {
@@ -234,6 +238,7 @@ table {
   border: none;
   background: none;
   padding: 0;
+  margin-left: .4em;
   cursor: pointer;
 }
 
@@ -587,6 +592,43 @@ hr.post-end {
   }
 }
 
+#toc {
+  position: fixed;
+  left: 50%;
+  top: 0;
+  display: none;
+}
+
+.toc-title {
+  margin-left: 1em;
+  margin-bottom: .5em;
+  font-size: .8em;
+  font-weight: bold;
+}
+
+#TableOfContents {
+  font-size: .8em;
+  @include dimmed;
+
+  ul {
+    padding-left: 1em;
+    margin: 0;
+  }
+
+  &>ul {
+    list-style-type: none;
+
+    ul ul {
+      font-size: .9em;
+    }
+  }
+
+  a:hover {
+    border-bottom: $theme 1px solid;
+  }
+}
+
+
 .post-nav {
   display: flex;
   justify-content: space-between;
@@ -619,6 +661,9 @@ hr.post-end {
   text-align: center;
 }
 
+// Media Queries
+//
+
 @media (min-width: 800px) {
   .site-main {
     margin-top: 3em;
@@ -640,6 +685,15 @@ hr.post-end {
     margin-top: 8em;
   }
 
+  .desktop-only,
+  #toc.show-toc {
+    display: block;
+  }
+
+  .desktop-only-ib {
+    display: inline-block;
+  }
+
   figure.left {
     margin-left: -240px;
     p {
@@ -662,6 +716,12 @@ hr.post-end {
   hr.post-end {
     width: 30%;
   }
+
+  #toc {
+    top: 13em;
+    margin-left: 370px;
+    max-width: 220px;
+  }
 }
 
 @media (min-width: 1800px) {
@@ -695,6 +755,12 @@ hr.post-end {
   hr.post-end {
     width: 30%;
   }
+
+  #toc {
+    top: 15em;
+    margin-left: 490px;
+    max-width: 300px;
+  }
 }
 
 @media (max-width: 760px) {
@@ -704,8 +770,7 @@ hr.post-end {
     display: none;
   }
 
-  #menu-btn,
-  #search-btn {
+  #menu-btn {
     display: inline-block;
   }