feat: Better inline code highlight & bullet point style (#57)

riceball-tw · May 25, 2024 · 4ce7f59 · 4ce7f59
1 parent de1d55b
commit 4ce7f59
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 17 deletions.
diff --git a/src/components/short/ShortsList.astro b/src/components/short/ShortsList.astro
@@ -34,7 +34,7 @@ const { shorts, currentSlug } = Astro.props
 
           {/* Content */}
           {
-            isActiveShort ? <div class="prose md:prose-2xl"><slot /></div> : ''
+            isActiveShort ? <div class="prose dark:prose-invert md:prose-2xl"><slot /></div> : ''
           }
           {/* Social */}
           {short.data?.social ? <div class={`pt-4 ${(isActiveShort) ? '' : 'hidden'}`}>

diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro
@@ -51,7 +51,7 @@ const tagHrefs = tags.map((tag) => `/post/tags/${tag}/`);
     <article
       data-pagefind-body
       data-article
-      class="article-grid lg:px-auto prose mb-16 block w-full max-w-none px-8 dark:prose-invert dark:prose-dark md:prose-xl lg:grid"
+      class="article-grid lg:px-auto prose mb-16 block w-full max-w-none px-8 dark:prose-invert md:prose-xl lg:grid"
     >
       <header class="not-prose col-start-2 mb-16">
         {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -65,6 +65,7 @@ export default {
       typography: ({ theme }: PluginUtils) => ({
         DEFAULT: {
           css: {
+            // Light Mode
             '--tw-prose-body': theme('colors.surface.inverse'),
             '--tw-prose-headings': theme('colors.surface.inverse'),
             '--tw-prose-lead': theme('colors.surface.inverse'),
@@ -82,13 +83,14 @@ export default {
             '--tw-prose-th-borders': theme('colors.primary[300] / 1'),
             '--tw-prose-td-borders': theme('colors.primary[200] / 1'),
 
+            // Dark Mode
             '--tw-prose-invert-body': theme('colors.surface.inverse'),
             '--tw-prose-invert-headings': 'white',
             '--tw-prose-invert-lead': theme('colors.surface.inverse'),
             '--tw-prose-invert-links': theme('colors.surface.inverse'),
-            '--tw-prose-invert-bold': theme('colors.surface.inverse'),
+            '--tw-prose-invert-bold': theme('colors.highlight'),
             '--tw-prose-invert-counters': theme('colors.surface.inverse'),
-            '--tw-prose-invert-bullets': theme('colors.surface.inverse'),
+            '--tw-prose-invert-bullets': theme('colors.primary[600] / 1'),
             '--tw-prose-invert-hr': theme('colors.surface.inverse'),
             '--tw-prose-invert-quotes': theme('colors.surface.inverse'),
             '--tw-prose-invert-quote-borders': theme('colors.surface.inverse'),
@@ -128,20 +130,9 @@ export default {
               borderRadius: theme('borderRadius.lg'),
               scrollbarWidth: 'thin',
             },
-
-            ':not(pre) > code': {
-              padding: theme('spacing.1'),
-              '@apply bg-primary-200 bg-opacity-60 border border-primary-300': {},
-            },
-          },
-        },
-        dark: {
-          css: {
-            figcaption: {
-              '@apply border-primary-600': {},
-            },
             ':not(pre) > code': {
-              '@apply bg-primary-800 bg-opacity-60 border border-primary-700': {},
+              '@apply p-1 bg-primary-200 dark:bg-primary-800 bg-opacity-60 border border-primary-300 dark:border-primary-700 hover:bg-primary-200 hover:border-primary-400 dark:hover:bg-primary-700 dark:hover:border-primary-600 transition-colors':
+                {},
             },
           },
         },