Fine tune table of contents

crafty.config.js

@@ -35,23 +35,28 @@ module.exports = {
     css: {
         theme_blue: {
             source: "src/css/theme_daux/theme-blue.scss",
-            destination: "themes/daux/css/theme-blue.min.css"
+            destination: "themes/daux/css/theme-blue.min.css",
+            watch: ["src/css/**/*.scss"]
         },
         theme_green: {
             source: "src/css/theme_daux/theme-green.scss",
-            destination: "themes/daux/css/theme-green.min.css"
+            destination: "themes/daux/css/theme-green.min.css",
+            watch: ["src/css/**/*.scss"]
         },
         theme_navy: {
             source: "src/css/theme_daux/theme-navy.scss",
-            destination: "themes/daux/css/theme-navy.min.css"
+            destination: "themes/daux/css/theme-navy.min.css",
+            watch: ["src/css/**/*.scss"]
         },
         theme_red: {
             source: "src/css/theme_daux/theme-red.scss",
-            destination: "themes/daux/css/theme-red.min.css"
+            destination: "themes/daux/css/theme-red.min.css",
+            watch: ["src/css/**/*.scss"]
         },
         daux_singlepage: {
             source: "src/css/theme_daux_singlepage/main.scss",
-            destination: "themes/daux_singlepage/css/main.min.css"
+            destination: "themes/daux_singlepage/css/main.min.css",
+            watch: ["src/css/**/*.scss"]
         }
     }
 };

src/css/theme_daux/_components.scss

@@ -297,21 +297,24 @@ Components
     padding-left: 1em;
 
     &__title {
-        border-bottom: 4px solid #efefef;
         margin-bottom: 0 !important;
     }
 
-    &__content > .TableOfContents {
+    &__content {
-        margin-top: 0;
+        border: 1px solid #efefef;
-        border-right: 2px solid #efefef;
+        border-width: 4px 2px 2px 6px;
+    }
+
+    &__content > .TableOfContents > li + li {
+        border-top: 1px solid #ddd;
     }
 }
 
 ul.TableOfContents {
-    float: none;
+    font-size: 1rem;
-    font-size: 16px;
+    padding-left: 0;
-    padding-left: 1.5em;
+    margin: 0;
-    border-left: 6px solid #efefef;
+    list-style-type: none;
 
     p {
         margin-bottom: 0;
@@ -320,32 +323,12 @@ ul.TableOfContents {
     a {
         text-decoration: none;
         display: block;
-        border-bottom: 1px solid #ddd;
+        padding: 0.2em 0 0.2em 0.75em;
-        padding: 0.2em 0;
     }
 
     .TableOfContents {
-        border-left-width: 0;
-        list-style-type: none;
-        padding-left: 0;
-    }
-
-    li a {
         padding-left: 0.75em;
     }
-
-    li li a {
-        padding-left: 1.5em;
-    }
-
-    li li li a {
-        padding-left: 2.25em;
-    }
-
-    // stylelint-disable-next-line selector-max-compound-selectors
-    li li li li a {
-        padding-left: 3em;
-    }
 }
 
 .Pager {

src/css/theme_daux/_typography.scss

@@ -216,7 +216,7 @@ h6 {
         overflow: auto;
         border: none;
         border-radius: 0;
-        padding: 0.75em 2em;
+        padding: 0.75em 20px;
         margin: 0 -20px 20px -20px;
 
         code {