make toc look better

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>
               );

src/styles/global.scss

@@ -124,5 +124,6 @@ pre > code {
 
   .flex-wrapper > main.pad {
     padding-left: 30px;
+    padding-right: 30px;
   }
 }

src/styles/post.scss

@@ -182,6 +182,7 @@
 @media screen and (min-width: variables.$breakpoint) {
   .post-container {
     padding-left: 30px;
+    padding-right: 30px;
   }
 }
 

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;
     }
   }
 }