Updating table of contents CSS, fixes #12

assets/css/screen.css

@@ -1,6 +1,5 @@
 @import "@tryghost/shared-theme-assets/assets/css/v1/screen.css";
 @import "fonts.css";
-@import "tocbot.css";
 
 :root {
     --font-sans: Wanted Sans, Century Gothic, Frutiger, Futura, Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;

assets/css/tocbot.css

@@ -1,65 +1,30 @@
 /* Style from Tocbot */
 .toc {
-    overflow-y: auto
+    overflow-y: auto;
-}
-
-.toc>.toc-list {
-    overflow: hidden;
-    position: relative
-}
-
-.toc>.toc-list li {
-    list-style: none
-}
-
-.toc-list {
-    margin: 0;
-    padding-left: 10px
 }
 
 a.toc-link {
     color: currentColor;
-    height: 100%
+    height: 100%;
 }
 
 .is-collapsible {
     max-height: 1000px;
     overflow: hidden;
-    transition: all 300ms ease-in-out
+    transition: all 300ms ease-in-out;
 }
 
 .is-collapsed {
-    max-height: 0
+    max-height: 0;
 }
 
 .is-position-fixed {
     position: fixed !important;
-    top: 0
+    top: 0;
 }
 
-.is-active-link {
+.is-active-li {
-    font-weight: 700
+    list-style: disc;
-}
-
-.toc-link::before {
-    background-color: #EEE;
-    content: ' ';
-    display: inline-block;
-    height: inherit;
-    left: 0;
-    margin-top: -1px;
-    position: absolute;
-    width: 2px
-}
-
-@media (prefers-color-scheme: dark) {
-    .toc-link::before {
-        background-color: #EEE;
-    }
-}
-
-.is-active-link::before {
-    background-color: #54BC4B
 }
 
 /* Style from Ghost Foundation */
@@ -69,6 +34,7 @@ a.toc-link {
 
 .gh-toc > .toc-list {
     position: relative;
+    padding-left: 15.3667px;
 }
 
 .toc-list {
@@ -96,10 +62,15 @@ a.toc-link {
 
 a.toc-link {
     text-decoration: none;
+    color: var(--color-secondary-text);
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    font-weight: 700;
 }
 
-.gh-toc .is-active-link::before {
+a.is-active-link {
-    background-color: var(--ghost-accent-color); /* Defines TOC accent color based on Accent color set in Ghost Admin */
+    color: var(--color-primary-text);
 }
 
 /* Additional style information from Jean interspersed */

default.hbs

@@ -68,7 +68,7 @@
 <script src="{{asset "built/main.min.js"}}"></script>
 
 {{! Tocbot is used for the table of contents }}
-<script src="{{asset "built/tocbot.min.js"}}"></script>
+<script src="{{asset "js/lib/tocbot.min.js"}}"></script>
 <script>
     tocbot.init({
         // Where to render the table of contents.