fix code block mobile font size

souporserious · May 15, 2024 · 3b04de5 · 3b04de5
1 parent 54d0b55
commit 3b04de5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/site/app/changelog/page.tsx b/site/app/changelog/page.tsx
@@ -18,7 +18,16 @@ export default function Page() {
         components={{
           pre: (props) => (
             // @ts-expect-error
-            <MDXComponents.pre allowErrors {...props} />
+            <MDXComponents.pre
+              allowErrors
+              {...props}
+              style={{
+                container: {
+                  fontSize: 'var(--font-size-code)',
+                  lineHeight: 'var(--line-height-code)',
+                },
+              }}
+            />
           ),
         }}
       />

diff --git a/site/app/layout.css b/site/app/layout.css
@@ -17,11 +17,13 @@
   --font-size-body-2: 1.6rem;
   --font-size-body-3: 1.2rem;
   --font-size-title: 0.875rem;
+  --font-size-code: 1rem;
   --line-height-heading-1: 4rem;
   --line-height-heading-2: 3.4rem;
   --line-height-heading-3: 2.4rem;
   --line-height-body-1: 2.625rem;
   --line-height-body-2: 2.2rem;
+  --line-height-code: 1.2rem;
   --font-weight-heading: 700;
   --font-weight-body: 400;
   --letter-spacing-body: 0.01em;
@@ -37,11 +39,13 @@
     --font-size-body-2: 1rem;
     --font-size-body-3: 0.875rem;
     --font-size-title: 0.65rem;
+    --font-size-code: 1rem;
     --line-height-heading-1: 3rem;
     --line-height-heading-2: 2.4rem;
     --line-height-heading-3: 1.8rem;
     --line-height-body-1: 1.6rem;
     --line-height-body-2: 1.4rem;
+    --line-height-code: 1.4rem;
   }
 }
 

diff --git a/site/mdx-components.tsx b/site/mdx-components.tsx
@@ -5,8 +5,8 @@ import { GeistMono } from 'geist/font/mono'
 
 const codeBlockStyles = {
   container: {
-    fontSize: 'var(--font-size-body-2)',
-    lineHeight: 'var(--line-height-body-2)',
+    fontSize: 'var(--font-size-code)',
+    lineHeight: 'var(--line-height-code)',
     width: 'calc(100% + 2rem)',
     padding: '1rem',
     margin: '0 -1rem',