From e5b2da53b4864da061e6ccc8748612d25c475603 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Thu, 25 Jul 2024 15:23:48 +0200
Subject: [PATCH] feat: :lipstick: Increase text font size

---
 components/Code.tsx             |  2 +-
 components/MobileNavigation.tsx |  2 +-
 components/mdx.tsx              |  2 +-
 typography.ts                   | 33 ++++++++++++++++++---------------
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/components/Code.tsx b/components/Code.tsx
index 2bfbef0..a84f2c5 100644
--- a/components/Code.tsx
+++ b/components/Code.tsx
@@ -162,7 +162,7 @@ function CodePanel({
         <div className="group dark:bg-white/2.5">
             <CodePanelHeader tag={tag} label={label} />
             <div className="relative">
-                <pre className="overflow-x-auto p-4 text-xs text-white [&>code>pre]:!bg-transparent">
+                <pre className="overflow-x-auto p-4 text-sm text-white [&>code>pre]:!bg-transparent">
                     {children}
                 </pre>
                 <CopyButton code={code} />
diff --git a/components/MobileNavigation.tsx b/components/MobileNavigation.tsx
index 73c43f0..5a79cca 100644
--- a/components/MobileNavigation.tsx
+++ b/components/MobileNavigation.tsx
@@ -130,7 +130,7 @@ function MobileNavigationDialog({
                     >
                         <motion.div
                             layoutScroll={true}
-                            className="fixed bottom-0 left-0 top-14 w-full overflow-y-auto bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 ring-zinc-900/7.5 min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-900 dark:ring-zinc-800"
+                            className="fixed bottom-0 left-0 max-w-[100vw] top-14 w-full overflow-y-auto bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 ring-zinc-900/7.5 min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-900 dark:ring-zinc-800"
                         >
                             <Navigation />
                         </motion.div>
diff --git a/components/mdx.tsx b/components/mdx.tsx
index 6a7cd0b..0ceb89f 100644
--- a/components/mdx.tsx
+++ b/components/mdx.tsx
@@ -13,7 +13,7 @@ export { CodeGroup, Code as code, Pre as pre } from "./Code";
 
 export function wrapper({ children }: { children: ReactNode }) {
     return (
-        <article className="flex h-full flex-col pb-10 pt-16">
+        <article className="flex h-full flex-col pb-10 pt-16 overflow-hidden text-wrap">
             <Prose className="flex-auto">{children}</Prose>
             <footer className="mx-auto mt-16 w-full max-w-2xl lg:max-w-5xl">
                 <Feedback />
diff --git a/typography.ts b/typography.ts
index 505c2e8..789542d 100644
--- a/typography.ts
+++ b/typography.ts
@@ -44,13 +44,13 @@ export default function typographyStyles({ theme }: PluginUtils) {
 
                 // Base
                 color: "var(--tw-prose-body)",
-                fontSize: theme("fontSize.sm")[0],
-                lineHeight: theme("lineHeight.7"),
+                fontSize: theme("fontSize.base")[0],
+                lineHeight: theme("lineHeight.8"),
 
                 // Text
                 p: {
-                    marginTop: theme("spacing.6"),
-                    marginBottom: theme("spacing.6"),
+                    marginTop: theme("spacing.8"),
+                    marginBottom: theme("spacing.8"),
                 },
                 '[class~="lead"]': {
                     fontSize: theme("fontSize.base")[0],
@@ -174,22 +174,22 @@ export default function typographyStyles({ theme }: PluginUtils) {
                 h1: {
                     color: "var(--tw-prose-headings)",
                     fontWeight: "700",
-                    fontSize: theme("fontSize.2xl")[0],
-                    ...theme("fontSize.2xl")[1],
-                    marginBottom: theme("spacing.2"),
+                    fontSize: theme("fontSize.4xl")[0],
+                    ...theme("fontSize.4xl")[1],
+                    marginBottom: theme("spacing.6"),
                 },
                 h2: {
                     color: "var(--tw-prose-headings)",
                     fontWeight: "600",
-                    fontSize: theme("fontSize.lg")[0],
-                    ...theme("fontSize.lg")[1],
+                    fontSize: theme("fontSize.2xl")[0],
+                    ...theme("fontSize.2xl")[1],
                     marginTop: theme("spacing.16"),
-                    marginBottom: theme("spacing.2"),
+                    marginBottom: theme("spacing.4"),
                 },
                 h3: {
                     color: "var(--tw-prose-headings)",
-                    fontSize: theme("fontSize.base")[0],
-                    ...theme("fontSize.base")[1],
+                    fontSize: theme("fontSize.lg")[0],
+                    ...theme("fontSize.lg")[1],
                     fontWeight: "600",
                     marginTop: theme("spacing.10"),
                     marginBottom: theme("spacing.2"),
@@ -206,8 +206,8 @@ export default function typographyStyles({ theme }: PluginUtils) {
                 },
                 figcaption: {
                     color: "var(--tw-prose-captions)",
-                    fontSize: theme("fontSize.xs")[0],
-                    ...theme("fontSize.xs")[1],
+                    fontSize: theme("fontSize.sm")[0],
+                    ...theme("fontSize.sm")[1],
                     marginTop: theme("spacing.2"),
                 },
 
@@ -302,7 +302,10 @@ export default function typographyStyles({ theme }: PluginUtils) {
                     paddingLeft: theme("padding[1.5]"),
                     boxShadow: "inset 0 0 0 1px var(--tw-prose-code-ring)",
                     backgroundColor: "var(--tw-prose-code-bg)",
-                    fontSize: theme("fontSize.2xs"),
+                    // If gets too long, split into multiple lines
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-all",
+                    fontSize: theme("fontSize.xs"),
                 },
                 ":is(a, h1, h2, h3, blockquote, thead th) code": {
                     color: "inherit",