Optimize about for mobile

backontrackus · Dec 30, 2024 · b5fe48a · b5fe48a
1 parent 0af9656
commit b5fe48a
Showing 1 changed file with 31 additions and 11 deletions.
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -4,46 +4,66 @@ import BackOnTrackLayout from "../layouts/BackOnTrackLayout.astro";
 
 <BackOnTrackLayout title="About">
   <div
-    class="flex w-full flex-wrap items-center justify-center gap-3 bg-bot-orange py-5"
+    class="flex w-full flex-wrap items-center justify-center bg-bot-orange p-3 md:p-5"
   >
-    <p class="text-center text-xl font-bold text-white">
-      Fighting homelessness and food insecurity since 2020.
+    <p class="text-center text-base font-bold text-white md:text-xl">
+      Fighting homelessness and food insecurity since <i>2020</i>.
     </p>
   </div>
   <div class="grid h-full grid-cols-2">
     <div
       class="flex h-full w-full flex-col items-center justify-center bg-black/[.6] bg-[url('/habitat.jpg')] bg-cover bg-no-repeat bg-blend-overlay"
     >
-      <p class="text-center text-6xl font-extrabold italic text-white">
+      <p
+        class="text-center text-2xl font-extrabold italic text-white md:text-6xl"
+      >
         10,000+
       </p>
-      <p class="text-center text-4xl font-extrabold text-white underline">
+      <p
+        class="text-center text-xl font-extrabold text-white underline md:text-4xl"
+      >
         hours volunteered
       </p>
     </div>
     <div
       class="flex h-full w-full flex-col items-center justify-center bg-black/[.6] bg-[url('/hope.jpg')] bg-cover bg-no-repeat bg-blend-overlay"
     >
-      <p class="text-center text-6xl font-extrabold italic text-white">
+      <p
+        class="text-center text-2xl font-extrabold italic text-white md:text-6xl"
+      >
         50,000+
       </p>
-      <p class="text-center text-4xl font-extrabold text-white underline">
+      <p
+        class="text-center text-xl font-extrabold text-white underline md:text-4xl"
+      >
         meals served
       </p>
     </div>
     <div
       class="flex h-full w-full flex-col items-center justify-center bg-black/[.6] bg-[url('/icna.jpg')] bg-cover bg-center bg-no-repeat bg-blend-overlay"
     >
-      <p class="text-center text-6xl font-extrabold italic text-white">12</p>
-      <p class="text-center text-4xl font-extrabold text-white underline">
+      <p
+        class="text-center text-2xl font-extrabold italic text-white md:text-6xl"
+      >
+        12
+      </p>
+      <p
+        class="text-center text-xl font-extrabold text-white underline md:text-4xl"
+      >
         chapters
       </p>
     </div>
     <div
       class="flex h-full w-full flex-col items-center justify-center bg-black/[.6] bg-[url('/nameless.jpg')] bg-cover bg-center bg-no-repeat bg-blend-overlay"
     >
-      <p class="text-center text-6xl font-extrabold italic text-white">9</p>
-      <p class="text-center text-4xl font-extrabold text-white underline">
+      <p
+        class="text-center text-2xl font-extrabold italic text-white md:text-6xl"
+      >
+        9
+      </p>
+      <p
+        class="text-center text-xl font-extrabold text-white underline md:text-4xl"
+      >
         states
       </p>
     </div>