fix: added a slight background to the blog posts to increase readability

in dark mode

Author: Kai-ros

app/assets/main.css

@@ -9,6 +9,7 @@
   /* background colors */
   --bg: oklch(0.145 0 0);
   --bg-subtle: oklch(0.178 0 0);
+  --bg-blog: oklch(0.195 0 0);
   --bg-muted: oklch(0.218 0 0);
   --bg-elevated: oklch(0.252 0 0);
 

app/components/BlogPostWrapper.vue

@@ -22,14 +22,19 @@ const blueskyPostUri = computed(() => blueskyLink.value?.postUri ?? null)
 
 <template>
   <main class="container w-full py-8">
-    <article class="prose dark:prose-invert mx-auto border-b border-border">
+    <article
+      class="max-w-prose mx-auto p-2 border-b border-border"
+      :style="{
+        background: `linear-gradient(to bottom, transparent 0%, var(--bg-blog) 2%, var(--bg-blog) 94%, transparent 100%)`,
+      }"
+    >
       <slot />
     </article>
-    <div v-if="frontmatter.authors" class="mt-12 max-w-prose mx-auto">
+    <article v-if="frontmatter.authors" class="mt-12 max-w-prose mx-auto">
       <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <AuthorList :authors="frontmatter.authors" variant="expanded" />
       </div>
-    </div>
+    </article>
 
     <!--
       - Only renders if Constellation found a Bluesky post linking to this slug
@@ -38,3 +43,9 @@ const blueskyPostUri = computed(() => blueskyLink.value?.postUri ?? null)
     <LazyBlueskyComments v-if="blueskyPostUri" :post-uri="blueskyPostUri" />
   </main>
 </template>
+
+<style scoped>
+:deep(.markdown-body) {
+  @apply prose dark:prose-invert;
+}
+</style>

nuxt.config.ts

@@ -246,6 +246,7 @@ export default defineNuxtConfig({
       Markdown({
         include: [/\.(md|markdown)($|\?)/],
         wrapperComponent: 'BlogPostWrapper',
+        wrapperClasses: 'prose dark:prose-invert mx-auto',
         async markdownItSetup(md) {
           const shiki = await import('@shikijs/markdown-it')
           md.use(