Improve layout with hero, cards, typography, TOC and reading progress

tailwind.config.js

@@ -4,11 +4,61 @@ module.exports = {
   content: [
     "./app/**/*.{ts,tsx}",
     "./components/**/*.{ts,tsx}",
-    "../Blog 文章原稿/**/*.{md,mdx}"
+    "./content/**/*.{md,mdx}"
   ],
   theme: {
-    extend: {},
+    extend: {
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            color: theme('colors.slate.700'),
+            a: {
+              color: theme('colors.blue.600'),
+              '&:hover': {
+                color: theme('colors.blue.700')
+              }
+            },
+            h1: {
+              fontWeight: '700',
+              letterSpacing: '-0.03em'
+            },
+            h2: {
+              fontWeight: '600',
+              letterSpacing: '-0.02em'
+            },
+            blockquote: {
+              fontStyle: 'normal',
+              borderLeftColor: theme('colors.blue.200'),
+              color: theme('colors.slate.700'),
+              backgroundColor: theme('colors.slate.50')
+            },
+            code: {
+              backgroundColor: theme('colors.slate.100'),
+              padding: '0.15rem 0.35rem',
+              borderRadius: '0.25rem'
+            }
+          }
+        },
+        dark: {
+          css: {
+            color: theme('colors.slate.100'),
+            a: {
+              color: theme('colors.blue.400'),
+              '&:hover': {
+                color: theme('colors.blue.300')
+              }
+            },
+            blockquote: {
+              borderLeftColor: theme('colors.blue.500'),
+              backgroundColor: theme('colors.slate.900')
+            },
+            code: {
+              backgroundColor: theme('colors.slate.800')
+            }
+          }
+        }
+      })
+    },
   },
   plugins: [require('@tailwindcss/typography')],
 };
-