TOC padding

viperML · Jul 8, 2024 · 5fa5ce6 · 5fa5ce6
1 parent 7a5f311
commit 5fa5ce6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 16 deletions.
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
@@ -44,7 +44,7 @@ const { class: className } = Astro.props;
     border-bottom: 2px solid rgb(233, 233, 233);
 
     :is(.dark &) {
-      background-color: rgba(0, 0, 0, 0.6);
+      background-color: rgba(18, 18, 18, 0.6);
       border-bottom: 2px solid rgba(0, 0, 0, 0.3);
     }
   }

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -27,18 +27,47 @@ const file = `src/content/${entry.collection}/${entry.id}`;
 
   <div id="container">
     <div id="sidebar">
+      <h3>Contents</h3>
       <ul>
-        <li><a href={`#${entry.slug}`}>{entry.data.title}</a></li>
+        <li class="depth-1"><a href={`#${entry.slug}`}>{entry.data.title}</a></li>
         {
           headings.map((heading) => {
             return (
-              <li>
+              <li class=`depth-${heading.depth}`>
                 <a href={`#${heading.slug}`}>{heading.text}</a>
               </li>
             );
           })
         }
       </ul>
+
+      <style>
+        h3 {
+          padding-bottom: 0.5rem;
+        }
+
+        /* Eyeballing distances */
+
+        li {
+          padding: 0.2rem 0;
+          border-left: 1px solid var(--elem-neutral);
+          padding-left: 2.5rem;
+        }
+
+        li.depth-1 {
+          padding-left: 1rem;
+        }
+
+        li.depth-2 {
+          padding-left: 1.8rem;
+        }
+
+
+        ul > ul {
+          margin-left: 10px;
+        }
+
+      </style>
     </div>
 
     <div id="content-wrapper" class="flex flex-col items-center">
@@ -109,21 +138,9 @@ const file = `src/content/${entry.collection}/${entry.id}`;
         display: block;
       }
 
-      li {
-        padding: 0.2rem 0;
-        border-left: 1px solid var(--elem-neutral);
-        padding-left: 1rem;
-      }
-
-      ul > ul {
-        margin-left: 10px;
-      }
-
       // :is(ul, ol) {
       //   margin-left: 1.5rem;
       // }
-
-
     }
 
     #sidebar a {

diff --git a/src/styles/color.less b/src/styles/color.less
@@ -17,7 +17,7 @@ body {
     background-color: rgb(242, 242, 242);
 
     :is(.dark &) {
-        background-color: rgb(21, 21, 21);
+        background-color: rgb(10, 10, 10);
     }
 }