blog: support ToC

4 files changed, 78 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;
diff --git a/htdocs/scss/app/common.scss b/htdocs/scss/app/common.scss
index 074c1aa..723c1ff 100644
--- a/htdocs/scss/app/common.scss
+++ b/htdocs/scss/app/common.scss
@@ -34,6 +34,11 @@ body.full-width .base-width {
   margin-left: auto;
   margin-right: auto;
 }
+body.wide .base-width {
+  max-width: $wide_width;
+  margin-left: auto;
+  margin-right: auto;
+}
 
 input[type="text"],
 input[type="password"],
diff --git a/htdocs/scss/app/mobile.scss b/htdocs/scss/app/mobile.scss
index 27d250c..4eae019 100644
--- a/htdocs/scss/app/mobile.scss
+++ b/htdocs/scss/app/mobile.scss
@@ -46,3 +46,6 @@ a.head-item:last-child > span {
 .blog-list.withtags {
   margin-right: 0;
 }
+//.blog-post-toc {
+//  display: none;
+//}
\ No newline at end of file
diff --git a/htdocs/scss/vars.scss b/htdocs/scss/vars.scss
index cc67f04..71a5f3f 100644
--- a/htdocs/scss/vars.scss
+++ b/htdocs/scss/vars.scss
@@ -4,6 +4,7 @@ $ff: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
 $ffMono: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
 
 $base-width: 900px;
+$wide_width: 1240px;
 $side-padding: 25px;
 $base-padding: 18px;
 $footer-height: 64px;