feat: typography, toc

src/components/TableOfContents.astro

@@ -27,17 +27,17 @@ function buildToc(headings: Heading[]) {
 }
 ---
 
-<details open class="rounded-lg border">
-  <summary>Table of Contents</summary>
+<details open class="block xl:hidden rounded-lg border p-3 mb-8">
+  <summary class="text-xl font-semibold">Table of Contents</summary>
   <nav>
     <ul class="py-3">
       {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
     </ul>
   </nav>
 </details>
-
-<style>
-  summary {
-    @apply cursor-pointer rounded-t-lg px-3 py-1.5 font-medium transition-colors;
-  }
-</style>
+<nav class="sticky top-16 hidden xl:block h-0 w-[calc(50vw-50%-4rem)] overflow-wrap-break-word text-xs leading-4 translate-x-[calc(-100%-2em)]">
+  <h2 class="text-xl font-semibold mb-4">Table of Contents</h2>
+  <ul class="space-y-2">
+    {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
+  </ul>
+</nav>