fix(site): increase blog body text to 18px for readability (#1146)

Co-authored-by: Claude <noreply@anthropic.com>

site/src/components/typography/H4.astro

@@ -14,11 +14,10 @@ const { as: Tag = 'h4', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx("mt-8 mb-4 text-p2 font-bold", maxWidth && "mx-auto max-w-3xl"),
+    clsx("mt-8 mb-4 text-p15 font-bold", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}
-  style={{ fontSize: "1.125rem" }}
 >
   <slot />
 </Tag>

site/src/components/typography/H5.astro

@@ -14,7 +14,7 @@ const { as: Tag = 'h5', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx("my-4 text-p2 italic", maxWidth && "mx-auto max-w-3xl"),
+    clsx("my-4 italic", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}

site/src/components/typography/Td.astro

@@ -10,6 +10,6 @@ type Props<Tag extends HTMLTag = 'td'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'td', class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge("px-4 py-2 text-p2", className)} {...props}>
+<Tag class={twMerge("px-4 py-2", className)} {...props}>
   <slot />
 </Tag>

site/src/components/typography/Th.astro

@@ -10,9 +10,6 @@ type Props<Tag extends HTMLTag = 'th'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'th', class: className, ...props } = Astro.props;
 ---
 
-<Tag
-  class={twMerge("px-4 py-2 text-left text-p3 font-bold", className)}
-  {...props}
->
+<Tag class={twMerge("px-4 py-2 text-left font-bold", className)} {...props}>
   <slot />
 </Tag>

site/src/components/typography/styles.ts

@@ -11,7 +11,7 @@ export const shared = {
   codeBlock: 'font-mono text-code text-manila-light',
   pre: 'shiki astro-code',
   em: 'italic',
-  li: 'text-p2',
+  li: '',
   ol: 'list-decimal list-outside pl-4 space-y-1',
   strong: 'font-bold',
   ul: 'list-disc list-outside pl-4 space-y-1',

site/src/layouts/Markdown.astro

@@ -17,14 +17,16 @@ const { title, subtitle, description } = Astro.props;
   <slot name="head" slot="head" />
   <NavBar />
   <main class="mt-10 px-6 pb-24 md:mt-20 md:px-10">
-    <article class="@container">
-      <header class="border-light-40 mx-auto mb-10 max-w-3xl border-b pb-10">
+    <article class="@container text-p2 sm:text-p15">
+      <header
+        class="mx-auto mb-10 max-w-3xl border-y border-faded-black py-10 dark:border-manila-light"
+      >
         <h1
-          class="mb-2 font-display text-h2 leading-tight uppercase @lg:text-h25"
+          class="mb-2 font-display text-h2 leading-tight uppercase sm:text-h15"
         >
           {title}
         </h1>
-        <p class="">{description}</p>
+        <p>{description}</p>
       </header>
       <slot />
     </article>

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

@@ -55,7 +55,7 @@ const jsonLdSchema = createBlogPostingSchema({
 >
   <JsonLd slot="head" schema={jsonLdSchema} />
   <article
-    class="@container"
+    class="@container text-p2 sm:text-p15"
     data-search-content
     data-llms-content
     data-llms-description={post.data.description}

site/src/styles/globals.css

@@ -151,6 +151,11 @@
   --text-p1--letter-spacing: var(--tracking-tight);
   --text-p1--font-weight: var(--font-weight-normal);
 
+  --text-p15: 1.125rem; /* 18px */
+  --text-p15--line-height: 1.5;
+  --text-p15--letter-spacing: var(--tracking-normal);
+  --text-p15--font-weight: var(--font-weight-normal);
+
   --text-p2: 1rem; /* 16px */
   --text-p2--line-height: 1.5;
   --text-p2--letter-spacing: var(--tracking-normal);