From c6aa014d290cacb7ec1e16ce8c58e159596c9dcc Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <mail@timmypidashev.dev>
Date: Mon, 21 Apr 2025 13:25:48 -0700
Subject: [PATCH] Fix content typography sizes

---
 src/src/pages/blog/[...slug].astro     |  4 +-
 src/src/pages/projects/[...slug].astro |  2 +-
 src/tailwind.config.cjs                | 73 ++++++++++----------------
 3 files changed, 32 insertions(+), 47 deletions(-)

diff --git a/src/src/pages/blog/[...slug].astro b/src/src/pages/blog/[...slug].astro
index 68b1f59..12f65f2 100644
--- a/src/src/pages/blog/[...slug].astro
+++ b/src/src/pages/blog/[...slug].astro
@@ -63,7 +63,7 @@ const jsonLd = {
 >
   <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
   <div class="relative max-w-8xl mx-auto">
-    <article class="prose prose-lg mx-auto max-w-4xl">
+    <article class="prose prose-invert prose-lg mx-auto max-w-4xl">
       {post.data.image && (
         <div class="-mx-4 sm:mx-0 mb-8">
           <Image
@@ -97,7 +97,7 @@ const jsonLd = {
           </span>
         ))}
       </div>
-      <div class="prose prose-invert max-w-none">
+      <div class="prose prose-invert prose-lg max-w-none">
         <Content />
       </div>
     </article>
diff --git a/src/src/pages/projects/[...slug].astro b/src/src/pages/projects/[...slug].astro
index c9535b6..61c46c0 100644
--- a/src/src/pages/projects/[...slug].astro
+++ b/src/src/pages/projects/[...slug].astro
@@ -59,7 +59,7 @@ const { Content } = await project.render();
       </div>
     </header>
 
-    <div class="prose prose-invert max-w-none">
+    <div class="prose prose-invert prose-lg max-w-none">
       <Content />
     </div>
   </article>
diff --git a/src/tailwind.config.cjs b/src/tailwind.config.cjs
index 2fdb314..8896cde 100644
--- a/src/tailwind.config.cjs
+++ b/src/tailwind.config.cjs
@@ -41,10 +41,15 @@ module.exports = {
         "draw-line": {
           "0%": { "stroke-dashoffset": "100" },
           "100%": { "stroke-dashoffset": "0" }
+        },
+        "fade-in": {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" }
         }
       },
       animation: {
-        "draw-line": "draw-line 0.6s ease-out forwards"
+        "draw-line": "draw-line 0.6s ease-out forwards",
+        "fade-in": "fade-in 0.3s ease-in-out forwards"
       },
       typography: (theme) => ({
         DEFAULT: {
@@ -126,17 +131,28 @@ module.exports = {
               borderRadius: '0.25rem',
               fontFamily: 'Comic Code, monospace',
               fontWeight: '400',
+              fontSize: 'inherit', // Match the parent text size
               '&::before': { content: 'none' },
               '&::after': { content: 'none' },
             },
 
+            'pre': {
+              backgroundColor: '#282828',
+              color: theme("colors.foreground"),
+              borderRadius: '0.5rem',
+              overflow: 'visible', // This allows the copy button to be positioned outside
+              position: 'relative', // For the copy button positioning
+              marginTop: '1.5rem', // Space for the copy button and language label
+              fontSize: 'inherit', // Match the parent font size
+            },
+
             'pre code': {
-              display: 'grid', // This ensures line backgrounds stretch full width
-              minWidth: '100%',
+              display: 'block',
               fontFamily: 'Comic Code, monospace',
-              fontSize: '0.875rem', // text-sm
-              lineHeight: '1.7142857', // leading-6
-              padding: '1rem', // p-4
+              fontSize: '1em', // This will inherit from the prose-lg setting
+              padding: '1.25rem',
+              overflow: 'auto', // Enable horizontal scrolling
+              whiteSpace: 'pre',
               '&::before': { content: 'none' },
               '&::after': { content: 'none' },
             },
@@ -155,44 +171,6 @@ module.exports = {
               borderRadius: '0.25rem',
             },
 
-
-            code: {
-              color: theme("colors.purple.bright"),
-              backgroundColor: "#282828", // A dark gray that works with black
-              padding: "0.2em 0.4em",
-              borderRadius: "0.25rem",
-              fontWeight: "400",
-              "&::before": {
-                content: "\"\"",
-              },
-              "&::after": {
-                content: "\"\"",
-              },
-            },
-
-            // Inline code
-            "code::before": {
-              content: "\"\"",
-            },
-            "code::after": {
-              content: "\"\"",
-            },
-
-            // Pre
-            pre: {
-              backgroundColor: "#282828",
-              color: theme("colors.foreground"),
-              code: {
-                backgroundColor: "transparent",
-                padding: "0",
-                color: "inherit",
-                fontSize: "inherit",
-                fontWeight: "inherit",
-                "&::before": { content: "none" },
-                "&::after": { content: "none" },
-              },
-            },
-
             // Horizontal rules
             hr: {
               borderColor: theme("colors.foreground"),
@@ -226,6 +204,13 @@ module.exports = {
             },
           },
         },
+        lg: {
+          css: {
+            "pre code": {
+              fontSize: "1rem",
+            },
+          },
+        },
       }),
     },
   },