Update code style; add selection style

src/astro.config.mjs

@@ -4,7 +4,6 @@ import react from "@astrojs/react";
 import mdx from "@astrojs/mdx";
 import rehypePrettyCode from "rehype-pretty-code";
 import rehypeSlug from "rehype-slug";
-
 import sitemap from "@astrojs/sitemap";
 
 // https://astro.build/config
@@ -35,7 +34,7 @@ export default defineConfig({
           rehypePrettyCode,
           {
             theme: {
-              "name": "Custom Gruvbox Dark",
+              "name": "Darkbox",
               "type": "dark",
               "colors": {
                 "editor.background": "#000000",
@@ -163,6 +162,7 @@ export default defineConfig({
                 }
               ],
             },
+            keepBackground: true,
           },
         ],
       ],

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

@@ -77,16 +77,28 @@ const jsonLd = {
       )}
       <h1 class="text-3xl pt-4">{post.data.title}</h1>
       <p class="lg:text-2xl sm:text-lg">{post.data.description}</p>
-      <p class="text-lg">{post.data.author} | {post.data.date}</p>
+      <div class="mt-4 md:mt-6">
-      <div class="flex flex-wrap gap-2 pb-4">
+        <div class="flex flex-wrap items-center gap-2 md:gap-3 text-sm md:text-base text-foreground/80">
+          <span class="text-orange">{post.data.author}</span>
+          <span class="text-foreground/50">•</span>
+          <time dateTime={post.data.date} class="text-blue">
+            {post.data.date}
+          </time>
+        </div>
+      </div>
+      <div class="flex flex-wrap gap-2 mt-4 md:mt-6">
         {post.data.tags.map((tag) => (
-          <span class="text-sm px-2 py-1 bg-muted rounded-full">
+          <span 
+            class="text-xs md:text-base text-aqua hover:text-aqua-bright transition-colors duration-200"
+            onclick={`window.location.href='/blog/tag/${tag}'`}
+          >
             #{tag}
           </span>
         ))}
       </div>
-      <hr class="bg-orange" />
+      <div class="prose prose-invert max-w-none">
-      <Content />
+        <Content />
+      </div>
     </article>
   </div>
 </ContentLayout>

src/src/style/globals.css

@@ -7,6 +7,15 @@
   display: none;
 }
 
+/ * Selection style */
+::selection {
+  background-color: rgba(177, 98, 134, 0.5);
+}
+
+::-moz-selection {
+  background-color: rgba(177, 98, 134, 0.5);
+}
+
 /* Regular */
 @font-face {
     font-family: "ComicRegular";

src/tailwind.config.cjs

@@ -2,6 +2,9 @@ module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
+      fontFamily: {
+        "comic-code": ["Comic Code", "monospace"],
+      },
       colors: {
         background: "#000000",
         foreground: "#ebdbb2",
@@ -116,6 +119,43 @@ module.exports = {
             },
 
             // Code
+            'code:not([data-language])': {
+              color: theme('colors.purple.bright'),
+              backgroundColor: '#282828',
+              padding: '0.2em 0.4em',
+              borderRadius: '0.25rem',
+              fontFamily: 'Comic Code, monospace',
+              fontWeight: '400',
+              '&::before': { content: 'none' },
+              '&::after': { content: 'none' },
+            },
+
+            'pre code': {
+              display: 'grid', // This ensures line backgrounds stretch full width
+              minWidth: '100%',
+              fontFamily: 'Comic Code, monospace',
+              fontSize: '0.875rem', // text-sm
+              lineHeight: '1.7142857', // leading-6
+              padding: '1rem', // p-4
+              '&::before': { content: 'none' },
+              '&::after': { content: 'none' },
+            },
+
+            '.highlighted': {
+              backgroundColor: theme('colors.foreground/5'),
+              paddingLeft: '1rem',
+              paddingRight: '1rem',
+              marginLeft: '-1rem',
+              marginRight: '-1rem',
+            },
+
+            '.word': {
+              backgroundColor: theme('colors.foreground/20'),
+              padding: '0.2em',
+              borderRadius: '0.25rem',
+            },
+
+
             code: {
               color: theme("colors.purple.bright"),
               backgroundColor: "#282828", // A dark gray that works with black