From da5159aa4845ee69d1b9b86a04218fd5b2ee5150 Mon Sep 17 00:00:00 2001
From: Zeke Abshire <zekeabshire@gmail.com>
Date: Sun, 30 Apr 2023 20:02:45 -0500
Subject: [PATCH 1/2] Started writing responsive typography classes

---
 src/styles/globals.css | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index b5c61c9..8f4c494 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,3 +1,38 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Responsive typography */
+
+@layer utilities {
+  .text-r-6xl {
+    @apply text-6xl;
+  }
+  .text-r-5xl {
+    @apply text-5xl;
+  }
+  .text-r-4xl {
+    @apply text-4xl;
+  }
+  .text-r-3xl {
+    @apply text-3xl;
+  }
+  .text-r-2xl {
+    @apply text-2xl;
+  }
+  .text-r-xl {
+    @apply text-xl;
+  }
+  .text-r-lg {
+    @apply text-lg;
+  }
+  .text-r-base .text-r-md {
+    @apply text-base;
+  }
+  .text-r-sm {
+    @apply text-sm;
+  }
+  .text-r-xs {
+    @apply text-xs;
+  }
+}

From f809abcf6d9cfe827f29b5f208662c8110389394 Mon Sep 17 00:00:00 2001
From: Zeke Abshire <zekeabshire@gmail.com>
Date: Sat, 20 May 2023 16:54:46 -0500
Subject: [PATCH 2/2] SR-009: Created responsive typography plugin

---
 src/pages/index.tsx    | 12 ++++++++--
 src/styles/globals.css | 35 ----------------------------
 tailwind.config.ts     | 53 +++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 62 insertions(+), 38 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b9a6781..d9b8547 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -11,6 +11,14 @@ const Home: NextPage = () => {
       </Head>
       <>
         <Hero />
+        <div className="">
+          <p className="text-r-3xl">48px: h1</p>
+          <p className="text-r-2xl">40px: h2</p>
+          <p className="text-r-xl">32px: h3</p>
+          <p className="text-r-lg">24px: h4, header, polaroid, button</p>
+          <p className="text-r-base">20px: h5, body</p>
+          <p className="text-r-sm">16px: h6</p>
+        </div>
         {/* <Services /> */}
         {/* <Projects /> */}
         {/* <About /> */}
@@ -25,8 +33,8 @@ export default Home;
 const Hero = () => {
   return (
     <>
-      <h1 className="py-3 font-roadster text-5xl text-black">Sunrise</h1>
-      <p className="leading-relaxed text-black">
+      <h1 className="py-3 font-roadster text-black text-r-3xl">Sunrise</h1>
+      <p className="leading-relaxed text-black text-r-xl">
         Creating software that looks and works great is our specialty at
         Sunrise. Our team of experts combines artistry and technical know-how to
         craft solutions that will make your business{" "}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8f4c494..b5c61c9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,38 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/* Responsive typography */
-
-@layer utilities {
-  .text-r-6xl {
-    @apply text-6xl;
-  }
-  .text-r-5xl {
-    @apply text-5xl;
-  }
-  .text-r-4xl {
-    @apply text-4xl;
-  }
-  .text-r-3xl {
-    @apply text-3xl;
-  }
-  .text-r-2xl {
-    @apply text-2xl;
-  }
-  .text-r-xl {
-    @apply text-xl;
-  }
-  .text-r-lg {
-    @apply text-lg;
-  }
-  .text-r-base .text-r-md {
-    @apply text-base;
-  }
-  .text-r-sm {
-    @apply text-sm;
-  }
-  .text-r-xs {
-    @apply text-xs;
-  }
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2c5a016..9304036 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,11 @@
 import { type Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";
+import plugin from "tailwindcss/plugin";
+
+interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
+  [key: string]: V | RecursiveKeyValuePair<K, V>;
+}
+type CSSRuleObject = RecursiveKeyValuePair<string, null | string | string[]>;
 
 export default {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
@@ -9,6 +15,15 @@ export default {
         center: true,
         padding: "1.5rem",
       },
+      fontSize: {
+        xs: ["0.75rem", { lineHeight: "1rem" }], // 12px 0.75rem
+        sm: ["1rem", { lineHeight: "1.25rem" }], // 16px 1rem
+        base: ["1.25rem", { lineHeight: "1.5rem" }], // 20px 1.25rem
+        lg: ["1.5rem", { lineHeight: "1.75rem" }], // 24px 1.5rem
+        xl: ["2rem", { lineHeight: "1.75rem" }], // 32px 2rem
+        "2xl": ["2.5rem", { lineHeight: "2rem" }], // 40px 2.5rem
+        "3xl": ["3rem", { lineHeight: "2.25rem" }], // 48px 3rem
+      },
       fontFamily: {
         sans: ["var(--font-jakarta)"],
         roadster: ["var(--font-roadster)", ...fontFamily.sans],
@@ -25,5 +40,41 @@ export default {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    // Responsive Typography
+    plugin(function ({ addUtilities, theme }) {
+      const fontSizes = Object.keys(theme("fontSize"));
+
+      const buildCSS = (fontSize: string): CSSRuleObject => {
+        const fsIndex = fontSizes.indexOf(fontSize);
+
+        if (fsIndex > 1) {
+          const desktop = fontSize;
+          const tablet = fontSizes[fsIndex - 1] ?? fontSize;
+          const mobile = fontSizes[fsIndex - 2] ?? fontSize;
+
+          return {
+            "font-size": theme(`fontSize.${mobile}`),
+            "@screen md": {
+              "font-size": theme(`fontSize.${tablet}`),
+            },
+            "@screen 2xl": {
+              "font-size": theme(`fontSize.${desktop}`),
+            },
+          };
+        }
+
+        return { "font-size": theme(`fontSize.${fontSize}`) };
+      };
+
+      addUtilities({
+        ".text-r-3xl": buildCSS("3xl"),
+        ".text-r-2xl": buildCSS("2xl"),
+        ".text-r-xl": buildCSS("xl"),
+        ".text-r-lg": buildCSS("lg"),
+        ".text-r-base": buildCSS("base"),
+        ".text-r-sm": buildCSS("sm"),
+      });
+    }),
+  ],
 } satisfies Config;