From 1c2ceaefac564bc20e2bfa593eb409ed1993a511 Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Sat, 20 Apr 2024 20:08:52 -0700
Subject: [PATCH] docs: Adjust format size based on screen size (#4724)

Updates typography to scale with screen size for docs and website blog.
---
 website/src/app/docs/layout.tsx            | 2 +-
 website/src/app/kb/layout.tsx              | 2 +-
 website/src/components/Blog/Post/index.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/app/docs/layout.tsx b/website/src/app/docs/layout.tsx
index fbe6ee4b5..013b5c302 100644
--- a/website/src/app/docs/layout.tsx
+++ b/website/src/app/docs/layout.tsx
@@ -8,7 +8,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <DocsSidebar />
       <main className="p-4 pt-20 -ml-64 md:ml-0 lg:mx-auto">
         <div className="px-4">
-          <article className="max-w-screen-md format format-firezone format-sm">
+          <article className="max-w-screen-md format format-sm md:format-md lg:format-lg format-firezone">
             {children}
           </article>
         </div>
diff --git a/website/src/app/kb/layout.tsx b/website/src/app/kb/layout.tsx
index 131949296..93b5be143 100644
--- a/website/src/app/kb/layout.tsx
+++ b/website/src/app/kb/layout.tsx
@@ -7,7 +7,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <KbSidebar />
       <main className="p-4 pt-20 -ml-64 md:ml-0 lg:mx-auto">
         <div className="px-4">
-          <article className="max-w-screen-md format format-sm format-firezone">
+          <article className="max-w-screen-md format format-sm md:format-md lg:format-lg format-firezone">
             {children}
           </article>
         </div>
diff --git a/website/src/components/Blog/Post/index.tsx b/website/src/components/Blog/Post/index.tsx
index 473a7ed03..373edc508 100644
--- a/website/src/components/Blog/Post/index.tsx
+++ b/website/src/components/Blog/Post/index.tsx
@@ -19,7 +19,7 @@ export default function Post({
   return (
     <main className="py-14 lg:pb-24 border border-b-1 ">
       <div className="flex justify-between px-4 mx-auto max-w-screen-xl">
-        <article className="mx-auto w-full max-w-2xl format format-lg format-firezone">
+        <article className="mx-auto w-full max-w-2xl format format-sm md:format-md lg:format-lg format-firezone">
           <header className="mb-4 lg:mb-6 not-format">
             <address className="flex items-center mb-6 not-italic">
               <div className="inline-flex items-center mr-3 text-sm ">