From d18a6ca60b63c433ba3e8204015a0c526979594c Mon Sep 17 00:00:00 2001
From: Zeke Abshire <zekeabshire@gmail.com>
Date: Sat, 20 May 2023 17:21:39 -0500
Subject: [PATCH] Updated with responsive typography

---
 src/components/Polaroid.tsx           |  2 +-
 src/components/ProjectDescription.tsx |  6 ++----
 src/pages/index.tsx                   | 14 +++-----------
 tailwind.config.ts                    |  2 +-
 4 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/components/Polaroid.tsx b/src/components/Polaroid.tsx
index 68c83a0..3de6906 100644
--- a/src/components/Polaroid.tsx
+++ b/src/components/Polaroid.tsx
@@ -39,7 +39,7 @@ export const Polaroid: React.FC<Props> = ({ title, imageSrc, rotation }) => {
             }`}
           />
         </div>
-        <span ref={ref} className="text-2xl font-semibold">
+        <span ref={ref} className="font-semibold text-r-lg">
           {title}
         </span>
       </div>
diff --git a/src/components/ProjectDescription.tsx b/src/components/ProjectDescription.tsx
index 353c7e3..35caed7 100644
--- a/src/components/ProjectDescription.tsx
+++ b/src/components/ProjectDescription.tsx
@@ -13,14 +13,12 @@ export const ProjectDescription: React.FC<Props> = ({
 }) => {
   return (
     <div className="max-w-4xl text-black">
-      <h3 className="text-3xl font-semibold">{title}</h3>
+      <h3 className="font-semibold text-r-xl">{title}</h3>
       <Separator.Root
         className={`${color} my-2 h-1 w-full rounded-full`}
         decorative
       />
-      <p className="text-base leading-relaxed md:text-lg lg:text-xl">
-        {children}
-      </p>
+      <p className="leading-relaxed text-r-base">{children}</p>
     </div>
   );
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3523a05..6821c77 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -15,14 +15,6 @@ 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 /> */}
@@ -53,14 +45,14 @@ const Hero = () => {
 const Projects = () => {
   return (
     <Container>
-      <h2 className="text-center text-4xl font-extrabold text-black">
+      <h2 className="my-10 text-center font-extrabold text-black text-r-2xl md:mt-16">
         Here are some of our past projects
       </h2>
-      <div className="py-20 [&>*:nth-child(odd)]:md:flex-row">
+      <div className="pb-20 [&>*:nth-child(odd)]:md:flex-row">
         {projects.map((p) => (
           <div
             key={p.title}
-            className="my-20 flex flex-col items-center gap-x-12 gap-y-6 md:my-0 md:flex-row-reverse"
+            className="mb-10 flex flex-col items-center gap-x-12 gap-y-6 md:flex-row-reverse lg:my-0"
           >
             <div>
               <Polaroid
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9304036..f4b3b5d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -16,7 +16,7 @@ export default {
         padding: "1.5rem",
       },
       fontSize: {
-        xs: ["0.75rem", { lineHeight: "1rem" }], // 12px 0.75rem
+        xs: ["0.875rem", { lineHeight: "1rem" }], // 14px 0.875rem
         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