Change all page layout

pages/posts/[...slug].vue

@@ -1,29 +1,12 @@
 <template>
-    <!-- <div class="page">
-        <div>
-            <img class="aspect-video w-full h-full object-cover rounded-[calc(var(--ui-radius)*1.5)] mb-12" :alt="post?.title" :src="post?.coverImage">
-            <ContentHeading :data="post"/>
-        </div>
-        <div>
-            <div class="flex not-md:flex-col-reverse gap-2">
-                <article class="prose prose-zinc dark:prose-invert w-full max-w-[48rem]">
-                    <ContentRenderer v-if="post" :value="post"/>
-                    {{ post ? post : 'wtf' }}
-                </article>
-                <div class="flex h-fit md:sticky top-16">
-                    <BlogToC :toc="post?.body?.toc?.links"/>
-                </div>
-            </div>
-        </div>
-    </div> -->
     <main>
         <article class="article">
-            <section class="web-hero relative web-hero-bg bg-cover " :style="`background-image: url('${baseUrl + '/portal/f/assets/' + post?.coverImage}');`" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-hero-post web-hero-bg relative bg-cover bg-center" :style="`background-image: url('${baseUrl + '/portal/f/assets/' + post?.coverImage}');`" aria-labelledby="hero" aria-describedby="hero-desc">
                 <div class="absolute inset-0 bg-(--color-deep-semidark)/80"></div>
                 <h1 id="hero" class="font-hero z-[1]">{{ post?.title }}</h1>
                 <p id="hero-desc" class="font-hero-desc z-[1]">{{ post?.description }}</p>
             </section>
-            <section class="web-section" aria-labelledby="post-content" aria-describedby="post-content-desc">
+            <section class="web-section web-section-narrow" aria-labelledby="post-content" aria-describedby="post-content-desc">
                 <div class="prose">
                     <ContentRenderer v-if="post" :value="post"/>
                     {{ post ? '' : 'Loading...' }}
@@ -55,4 +38,13 @@ useHead({
     { name: 'twitter:description', content: post.value?.description || 'A blog post with no description provided.' }
   ]
 })
-</script>
+</script>
+
+<style>
+.katex-html {
+  display: none;
+}
+.katex-mathml {
+  font-size: 1.2em;
+}
+</style>

pages/posts/index.vue

@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
                 <h1 id="hero" class="font-hero">Posts</h1>
                 <p id="hero-desc" class="font-hero-desc">This is where I post my thoughts, articles, and updates.</p>
             </section>