feat(theme): add tocbot for table of content

1 files changed, 21 insertions, 3 deletions

diff --git a/assets/css/index.css b/assets/css/index.css
index 45e6ed79..0eede4a1 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -20,6 +20,8 @@
   --waline-font-size: 20px;
   --waline-border-color: var(--border-color);
   --waline-bg-color: var(--background-color);
+
+  --page-width: 700px;
 }
 
 .dark {
@@ -48,6 +50,7 @@ body {
   margin: 0 20px;
   background-color: var(--background-color);
   color: var(--text-color);
+  position: relative
 }
 
 body::before {
@@ -63,9 +66,8 @@ body::before {
 }
 
 article {
-  max-width: 700px;
-  margin-left: auto;
-  margin-right: auto;
+  width: var(--page-width);
+  margin: 0 auto
 }
 
 a {
@@ -626,6 +628,22 @@ a.blog-link img {
   display: block;
 }
 
+/* toc */
+
+#toc-container {
+    position: absolute;
+    bottom: 0;
+    right: calc(50% + var(--page-width) / 2);
+    left: auto;
+    height: 100%;
+    top: 10rem;
+}
+
+#toc {
+    position: sticky;
+    top: 3rem
+}
+
 /* transition swup */
 
 html.is-changing .transition-fade {