feat: dedicated typography file, remove tailwind-typography

src/styles/global.css

@@ -1,5 +1,5 @@
+@import 'https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css';
 @import 'tailwindcss';
-@plugin '@tailwindcss/typography';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -53,13 +53,8 @@
 }
 
 :root {
-  --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
   --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
@@ -76,10 +71,6 @@
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.205 0 0);
   --secondary: oklch(0.269 0 0);
@@ -120,32 +111,3 @@
     @apply transition-none!;
   }
 }
-
-@layer components {
-  article {
-    @apply prose-headings:scroll-mt-20 prose-headings:break-words [&>section]:first:prose-headings:mt-0!;
-    @apply prose-headings:font-medium! prose-code:font-medium!;
-    @apply prose-p:break-words;
-    @apply prose-a:break-words! prose-a:decoration-muted-foreground! prose-a:underline-offset-[3px] prose-a:transition-colors prose-a:hover:decoration-foreground!;
-    @apply prose-pre:px-0! prose-img:mx-auto;
-
-    .katex-display {
-      @apply overflow-x-auto overflow-y-hidden py-4;
-    }
-
-    /* Removes background from <mark> elements */
-    mark {
-      @apply bg-transparent;
-    }
-
-    /* Adjacent expressive-code blocks */
-    div.expressive-code:has(+ div.expressive-code) {
-      @apply mb-4;
-    }
-
-    /* Inline code */
-    :not(pre) > code {
-      @apply bg-muted/50 relative rounded-sm px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium before:content-none! after:content-none!;
-    }
-  }
-}

src/styles/katex.css

@@ -1 +0,0 @@
-@import 'https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css';

src/styles/typography.css

@@ -0,0 +1,120 @@
+@reference './global.css';
+
+@layer components {
+  .prose {
+    @apply text-foreground text-base leading-8 [&>*]:first:mt-0 [&>*]:last:mb-0;
+
+    p {
+      @apply text-foreground/80 my-5 leading-7 [&:not(:first-child)]:mt-5;
+    }
+
+    h1 {
+      @apply text-foreground mt-0 mb-6 scroll-m-20 text-4xl leading-tight font-medium;
+    }
+
+    h2 {
+      @apply text-foreground mt-8 mb-4 scroll-m-20 text-2xl leading-tight font-medium;
+    }
+
+    h3 {
+      @apply text-foreground mt-6 mb-4 scroll-m-20 text-xl leading-snug font-medium;
+    }
+
+    h4 {
+      @apply text-foreground mt-6 mb-3 scroll-m-20 text-lg leading-normal font-medium;
+    }
+
+    h5 {
+      @apply text-foreground mt-5 mb-3 scroll-m-20 leading-normal font-medium;
+    }
+
+    h6 {
+      @apply text-foreground mt-5 mb-3 scroll-m-20 leading-normal font-medium;
+    }
+
+    a {
+      @apply text-foreground decoration-muted-foreground hover:decoration-foreground font-medium break-words underline underline-offset-[3px] transition-colors;
+    }
+
+    strong {
+      @apply text-foreground font-medium;
+    }
+
+    ul {
+      @apply marker:text-foreground/30 my-5 ml-6 list-disc [&>li]:mt-4;
+    }
+
+    ol {
+      @apply marker:text-foreground/30 my-5 ml-6 list-decimal [&>li]:mt-4;
+      @apply [&[type='A']]:list-[upper-alpha] [&[type='I']]:list-[upper-roman] [&[type='a']]:list-[lower-alpha] [&[type='i']]:list-[lower-roman];
+    }
+
+    li {
+      @apply text-foreground/80 pl-2 leading-7 [&>p]:my-0;
+    }
+
+    ul ul,
+    ol ol,
+    ul ol,
+    ol ul {
+      @apply marker:text-foreground/30 my-2 ml-6;
+    }
+
+    code {
+      @apply bg-muted/50 text-foreground relative rounded-sm px-[0.3rem] py-[0.2rem] text-sm font-medium;
+    }
+
+    .expressive-code {
+      @apply my-6;
+    }
+
+    blockquote {
+      @apply my-6 border-l-2 pl-6 text-sm;
+    }
+
+    hr {
+      @apply border-border my-8 border-t;
+    }
+
+    table {
+      @apply my-8 w-full text-sm;
+    }
+
+    thead {
+      @apply border-muted-foreground/30 border-b;
+    }
+
+    th {
+      @apply border px-4 py-2 text-left font-medium [&[align=center]]:text-center [&[align=right]]:text-right;
+    }
+
+    tbody tr {
+      @apply border-muted-foreground/20 even:bg-muted/50 border-b;
+    }
+
+    td {
+      @apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
+    }
+
+    img,
+    video {
+      @apply my-8;
+    }
+
+    figure {
+      @apply my-8;
+    }
+
+    figcaption {
+      @apply text-muted-foreground mt-3 text-sm;
+    }
+
+    kbd {
+      @apply text-foreground bg-muted border-border rounded-md border px-2 py-1 text-xs font-medium shadow-sm;
+    }
+
+    .katex-display {
+      @apply my-6 overflow-x-auto overflow-y-hidden;
+    }
+  }
+}