blog: support ToC

1 files changed, 69 insertions, 1 deletions

diff --git a/htdocs/scss/app/blog.scss b/htdocs/scss/app/blog.scss
index da640f9..30540ef 100644
--- a/htdocs/scss/app/blog.scss
+++ b/htdocs/scss/app/blog.scss
@@ -91,6 +91,74 @@
   margin-top: 3px;
 }
 
+.blog-post-wrap2 {
+  display: table;
+  table-layout: fixed;
+  border: none;
+  border-collapse: collapse;
+}
+.blog-post-wrap1 {
+  display: table-row;
+}
+.blog-post {
+  display: table-cell;
+  vertical-align: top;
+}
+.blog-post-toc {
+  display: table-cell;
+  vertical-align: top;
+  font-size: $fs - 2px;
+
+  &-wrap {
+    position: sticky;
+    top: 0;
+    padding: 10px 0 0 20px;
+    overflow-y: auto;
+    max-height: 100vh;
+    box-sizing: border-box;
+  }
+
+  &-inner-wrap {
+    border-left: 1px $border-color solid;
+    padding-left: 20px;
+    margin-bottom: 10px;
+
+    ul {
+      list-style-type: none;
+      margin: 5px 0;
+      padding-left: 18px;
+    }
+    > ul {
+      padding-left: 0 !important;
+    }
+
+    li {
+      margin: 2px 0;
+      line-height: 150%;
+      > a {
+        display: inline-block;
+      }
+    }
+  }
+
+  &-title {
+    font-weight: bold;
+    padding: 6px 0;
+  }
+}
+body.wide .blog-post {
+  width: $base_width;
+}
+
+@media screen and (max-width: 1150px) {
+  .blog-post-toc {
+    display: none;
+  }
+  body.wide .blog-post {
+    width: auto;
+  }
+}
+
 .blog-post-title {
   margin: 0 0 16px;
 }
@@ -174,7 +242,7 @@
   }
 
   blockquote {
-    border-left: 3px #e0e0e0 solid;
+    border-left: 3px $border-color solid;
     margin-left: 0;
     padding: 5px 0 5px 12px;
     color: $grey;