almost done

src/pages/blog/[...slug].astro

@@ -11,9 +11,25 @@ export async function getStaticPaths() {
 }
 
 const post = Astro.props
-const { Content } = await post.render()
+const { Content, headings, remarkPluginFrontmatter } = await post.render()
 ---
 
-<BlogPost {...post.data}>
+<BlogPost {...post.data} {headings} readingTime={remarkPluginFrontmatter.readingTime}>
   <Content />
 </BlogPost>
+
+<style>
+  :global(p) {
+    margin: 1rem 0;
+  }
+
+  :global(h2, h3, h4, h5, h6) {
+    --width: 0.125rem;
+    --offset: 0.25rem;
+    margin: 2rem 0 1rem;
+    margin: 3em 0 0;
+    border-left: var(--width) solid var(--clr-primary);
+    padding-left: var(--offset);
+    margin-left: calc((var(--width) + var(--offset)) * -1);
+  }
+</style>

src/pages/tag/[...tag].astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content'
 import PostList from '../../components/PostList.astro'
-import Root from '../../layouts/Root.astro'
+import PageWithTitle from '../../layouts/PageWithTitle.astro'
 
 export async function getStaticPaths() {
   const posts = await getCollection('blog')
@@ -22,7 +22,6 @@ const params = Astro.params
 const { posts } = Astro.props
 ---
 
-<Root>
-  <h1>{params.tag}</h1>
+<PageWithTitle title={params.tag}>
   <PostList posts={posts} />
-</Root>
+</PageWithTitle>