From e3ded78ba3992049ea3809d0f4d0152051ba7390 Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Fri, 1 Sep 2023 19:30:15 -0500
Subject: [PATCH] make toc look better

---
 src/components/TocWrapper.astro | 3 ++-
 src/styles/global.scss          | 1 +
 src/styles/post.scss            | 1 +
 src/styles/toc.scss             | 3 ++-
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/TocWrapper.astro b/src/components/TocWrapper.astro
index fa292c0..9f7c9a0 100644
--- a/src/components/TocWrapper.astro
+++ b/src/components/TocWrapper.astro
@@ -8,6 +8,7 @@ interface Props {
 }
 
 const { toc, headings } = Astro.props;
+const minDepth = Math.min(...headings.map((heading) => heading.depth));
 ---
 
 {
@@ -20,7 +21,7 @@ const { toc, headings } = Astro.props;
           <ul>
             {headings.map((heading) => {
               return (
-                <li>
+                <li style={`padding-left: ${(heading.depth - minDepth) * 10}px;`}>
                   <a href={`#${heading.slug}`}>{heading.text}</a>
                 </li>
               );
diff --git a/src/styles/global.scss b/src/styles/global.scss
index a920f5f..0985a19 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -124,5 +124,6 @@ pre > code {
 
   .flex-wrapper > main.pad {
     padding-left: 30px;
+    padding-right: 30px;
   }
 }
diff --git a/src/styles/post.scss b/src/styles/post.scss
index 19e7f6b..b6b3ecd 100644
--- a/src/styles/post.scss
+++ b/src/styles/post.scss
@@ -182,6 +182,7 @@
 @media screen and (min-width: variables.$breakpoint) {
   .post-container {
     padding-left: 30px;
+    padding-right: 30px;
   }
 }
 
diff --git a/src/styles/toc.scss b/src/styles/toc.scss
index 3e8fbde..c1c7197 100644
--- a/src/styles/toc.scss
+++ b/src/styles/toc.scss
@@ -1,5 +1,5 @@
 @use "variables";
-$tocWidth: 180px;
+$tocWidth: 240px;
 $tocBreakpoint: variables.$breakpoint + $tocWidth;
 
 .toc-wrapper {
@@ -16,6 +16,7 @@ $tocBreakpoint: variables.$breakpoint + $tocWidth;
 
     li {
       font-size: 14px;
+      margin: 6px;
     }
   }
 }