mobile friendly :)

polypixeldev · Jun 18, 2024 · 2207ff8 · 2207ff8
1 parent 65da664
commit 2207ff8
Showing 1 changed file with 15 additions and 9 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -27,30 +27,36 @@ import "@fontsource/space-grotesk";
     <title>TampaHacks</title>
   </head>
   <body
-    class="flex min-h-screen flex-col items-center justify-start bg-gradient-to-b from-black to-gray-600 py-20"
+    class="flex min-h-screen flex-col items-center justify-start bg-gradient-to-b from-black to-gray-600 px-10 py-20"
   >
-    <img src="/logo.png" alt="TampaHacks logo" class="aspect-square w-1/12" />
+    <img
+      src="/logo.png"
+      alt="TampaHacks logo"
+      class="aspect-square w-1/3 md:w-1/12"
+    />
     <h1 class="my-5 text-center font-mono text-6xl text-white">TampaHacks</h1>
     <p class="text-center text-2xl text-white">
       A high school <strong>game jam</strong> where teens can get together and make
       games for fun!
     </p>
     <hr class="my-5 w-5/6 border-white" />
-    <p class="text-3xl font-bold text-white">
+    <p class="text-center text-3xl font-bold text-white">
       Saturday, August 17th &nbsp;•&nbsp; 9AM-8PM &nbsp;•&nbsp; <a
         href="https://maps.app.goo.gl/QawPhC5xhL8URuzs5"
         class="underline">AMRoC Fab Lab</a
       > &nbsp;•&nbsp; <span class="text-green-600">Free</span>
     </p>
-    <div class="my-5 flex items-center justify-center gap-x-10">
+    <div
+      class="my-5 flex flex-col items-center justify-center gap-x-10 md:flex-row"
+    >
       <a
-        class="block rounded-md border-2 border-sky-800 bg-sky-500 px-5 py-3 text-2xl font-bold text-white"
+        class="block rounded-md border-2 border-sky-800 bg-sky-500 px-5 py-3 text-center text-2xl font-bold text-white"
         href="https://lu.ma/tampahacks2024"
       >
         Sign Up
       </a>
       <a
-        class="block px-5 py-3 text-2xl font-bold text-white"
+        class="block px-5 py-3 text-center text-2xl font-bold text-white"
         href="#questions"
       >
         Read More
@@ -60,11 +66,11 @@ import "@fontsource/space-grotesk";
       id="questions"
       class="mt-10 flex flex-col items-center justify-start gap-10"
     >
-      <h2 class="-rotate-3 font-mono text-6xl font-bold text-white">
+      <h2 class="-rotate-3 text-center font-mono text-6xl font-bold text-white">
         question land
       </h2>
       <div
-        class="w-2/3 rounded-lg border-4 border-blue-900 bg-blue-700 px-10 py-5"
+        class="w-full rounded-lg border-4 border-blue-900 bg-blue-700 px-10 py-5 md:w-2/3"
       >
         <p class="pb-3 text-3xl font-bold text-white">
           what&apos;s a game jam?
@@ -76,7 +82,7 @@ import "@fontsource/space-grotesk";
         </p>
       </div>
       <div
-        class="w-2/3 rounded-lg border-4 border-green-800 bg-green-600 px-10 py-5"
+        class="w=full rounded-lg border-4 border-green-800 bg-green-600 px-10 py-5 md:w-2/3"
       >
         <p class="pb-3 text-3xl font-bold text-white">do I need experience?</p>
         <p class="text-2xl text-white">