style: change post styles

Author: ragibasif

astro.config.mjs

@@ -13,12 +13,15 @@ export default defineConfig({
 
   markdown: {
     shikiConfig: {
-      theme: "catppuccin-mocha",
+      themes: {
+        light: "catppuccin-latte",
+        dark: "catppuccin-mocha",
+      },
       wrap: true,
     },
   },
 
   vite: {
     plugins: [tailwindcss()],
   },
-});
+});

package-lock.json

@@ -14,24 +14,19 @@ const { title, description, pubDate, updatedDate } = Astro.props;
       <div class="title">
         <h1>{title}</h1>
         <div class="date">
+          <em>
           Published on <FormattedDate date={pubDate} />
           {
             updatedDate && (
               <div class="last-updated-on">
                 Last updated on <FormattedDate date={updatedDate} />
               </div>
             )
-          }
+          }</em>
         </div>
         <hr />
       </div>
       <slot />
     </div>
   </article>
 </Base>
-
-<style>
-  .date {
-    font-style: italic;
-  }
-</style>

src/layouts/Post.astro

@@ -0,0 +1,115 @@
+/* ============================================================================ */
+/* CATPPUCCIN COLORS */
+/* CATPPUCCIN LATTE - LIGHT MODE */
+/* CATPPUCCIN MOCHA - DARK MODE */
+/* ============================================================================ */
+
+/* ---------------- Color Variables ---------------- */
+:root {
+    /* Light Mode (Latte) */
+    --rosewater: #dc8a78;
+    --flamingo: #dd7878;
+    --pink: #ea76cb;
+    --mauve: #8839ef;
+    --red: #d20f39;
+    --maroon: #e64553;
+    --peach: #fe640b;
+    --yellow: #df8e1d;
+    --green: #40a02b;
+    --teal: #179299;
+    --sky: #04a5e5;
+    --sapphire: #209fb5;
+    --blue: #1e66f5;
+    --lavender: #7287fd;
+
+    --text: #4c4f69;
+    --subtext1: #5c5f77;
+    --subtext0: #6c6f85;
+    --overlay2: #7c7f93;
+    --overlay1: #8c8fa1;
+    --overlay0: #9ca0b0;
+    --surface2: #acb0be;
+    --surface1: #bcc0cc;
+    --surface0: #ccd0da;
+    --base: #eff1f5;
+    --mantle: #e6e9ef;
+    --crust: #dce0e8;
+
+    /* Semantic Variables */
+    --bg: var(--base);
+    --mantle-bg: var(--mantle);
+    --crust-bg: var(--crust);
+    --surface0-bg: var(--surface0);
+    --surface1-bg: var(--surface1);
+    --surface2-bg: var(--surface2);
+    --overlay0-color: var(--overlay0);
+    --overlay1-color: var(--overlay1);
+    --overlay2-color: var(--overlay2);
+
+    --text-primary: var(--text);
+    --text-secondary: var(--subtext0);
+    --text-tertiary: var(--subtext1);
+
+    --accent: var(--blue);
+    --highlight: var(--peach);
+    --success: var(--green);
+    --error: var(--red);
+    --warning: var(--yellow);
+    --info: var(--sky);
+    --muted: var(--overlay1);
+}
+
+/* Dark Mode (Mocha) */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --rosewater: #f5e0dc;
+        --flamingo: #f2cdcd;
+        --pink: #f5c2e7;
+        --mauve: #cba6f7;
+        --red: #f38ba8;
+        --maroon: #eba0ac;
+        --peach: #fab387;
+        --yellow: #f9e2af;
+        --green: #a6e3a1;
+        --teal: #94e2d5;
+        --sky: #89dceb;
+        --sapphire: #74c7ec;
+        --blue: #89b4fa;
+        --lavender: #b4befe;
+
+        --text: #cdd6f4;
+        --subtext1: #bac2de;
+        --subtext0: #a6adc8;
+        --overlay2: #9399b2;
+        --overlay1: #7f849c;
+        --overlay0: #6c7086;
+        --surface2: #585b70;
+        --surface1: #45475a;
+        --surface0: #313244;
+        --base: #1e1e2e;
+        --mantle: #181825;
+        --crust: #11111b;
+
+        --bg: var(--base);
+        --mantle-bg: var(--mantle);
+        --crust-bg: var(--crust);
+        --surface0-bg: var(--surface0);
+        --surface1-bg: var(--surface1);
+        --surface2-bg: var(--surface2);
+        --overlay0-color: var(--overlay0);
+        --overlay1-color: var(--overlay1);
+        --overlay2-color: var(--overlay2);
+
+        --text-primary: var(--text);
+        --text-secondary: var(--subtext0);
+        --text-tertiary: var(--subtext1);
+
+        --accent: var(--blue);
+        --highlight: var(--peach);
+        --success: var(--green);
+        --error: var(--red);
+        --warning: var(--yellow);
+        --info: var(--sky);
+        --muted: var(--overlay1);
+    }
+}