fix: maybe dark mode will work this time

Author: HigherOrderLogic

app/components/navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="block flex px-4 py-2">
+  <header class="block flex px-4 py-2 prose-neutral dark:prose-invert">
     <nuxt-link to="/">
       <img
         src="https://github.com/HigherOrderLogic.png"

app/layouts/default.vue

@@ -1,10 +1,13 @@
 <template>
-  <div class="font-normal font-[Inter_Variable] prose-neutral dark:prose-invert">
+  <div class="font-normal font-[Inter_Variable]">
     <div>
       <navbar />
-      <div class="mx-a lt-md:px-4 md:prose" :class="[$style.linkUnderline, $style.noHeaderUnderline]">
+      <div
+        class="mx-a prose prose-neutral md:max-w-65ch lt-md:px-4 dark:prose-invert"
+        :class="[$style.linkUnderline, $style.noHeaderUnderline]"
+      >
         <slot />
-        <div class="h-8" />
+        <div class="mb-8" />
         <cd />
       </div>
     </div>
@@ -14,7 +17,7 @@
 <style lang="scss" module>
 .linkUnderline {
   a {
-    --at-apply: 'underline-dotted underline-offset-3';
+    --at-apply: 'underline hover:underline-dashed underline-offset-2';
   }
 }
 

app/pages/blogs/[...slugs].vue

@@ -40,9 +40,11 @@ if (blog.value) {
 <template>
   <div>
     <template v-if="blog">
-      <div class="pb-4">
-        <h1>{{ blog.title }}</h1>
-        <p class="op-70 divide-x *:pr-2 not-first:*:pl-2">
+      <div class="mb-8">
+        <h1 class="mb-0">
+          {{ blog.title }}
+        </h1>
+        <p class="mt-2 op-70 divide-x *:pr-2 not-first:*:pl-2">
           <span>{{ useDateFormat(blog.date, 'ddd, DD MMMM YYYY') }}</span>
           <span>{{ getWordCount(blog.body.value) }} words</span>
         </p>

uno.config.ts

@@ -11,12 +11,7 @@ export default defineConfig({
   presets: [
     presetIcons(),
     presetTypography(),
-    presetWind3({
-      dark: {
-        dark: '.dark-mode',
-        light: '.light-mode',
-      },
-    }),
+    presetWind3(),
   ],
   transformers: [
     transformerDirectives(),