From d5eaff1a6716ab7b756f0be2e272e8a9eb34aa3a Mon Sep 17 00:00:00 2001
From: AceyGoesBoom <83757443+AceyDoCodes@users.noreply.github.com>
Date: Sun, 4 Sep 2022 09:01:52 +0000
Subject: [PATCH] Made index page responsive

---
 index.html | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)
diff --git a/index.html b/index.html
index 413095a..93c68f5 100644
--- a/index.html
+++ b/index.html
@@ -10,19 +10,19 @@
         <meta name="description" content="Free subdomains for developers around the globe.">
     </head>
     <body class="bg-bg">
-        <div class="flex flex-col w-7/12 mx-auto bg-bg-accent rounded mt-12 text-text p-12">
-            <h1 class="text-4xl text-center"><a class="hover:underline underline-offset-4" href="https://redirect.is-a-good.dev/header-register">yourname</a>.is-a-good.dev</h1>
-            <span class="mt-12 w-8/12 flex place-self-center">
+        <div class="flex flex-col w-7/12 mx-auto bg-bg-accent rounded mt-12 text-text py-12 px-6">
+            <h1 class="text-4xl text-center break-words"><a class="hover:underline underline-offset-4" href="https://redirect.is-a-good.dev/header-register">yourname</a>.is-a-good.dev</h1>
+            <span class="mt-12 text-center">
                 is-a-good.dev is an open source project providing free subdomains for developers around the world. Our service allows you to get your very own is-a-good.dev domain for free. To get yours follow the instructions found on our documentation.
             </span>
-            <div class="flex flex-row place-self-center mt-6">
-                <a class="text-lg px-5 py-2 w-8/12 bg-bg mx-5 rounded hover:ring hover:ring-accent focus:ring focus:ring-accent ring ring-gray-600" href="https://redirect.is-a-good.dev/register">Register</a>
-                <a class="text-lg px-5 py-2 w-8/12 bg-bg mx-5 rounded hover:ring hover:ring-accent focus:ring focus:ring-accent ring ring-gray-600" href="https://redirect.is-a-good.dev/docs">Documentation</a>
+            <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 mx-auto">
+                <a class="text-lg px-2 py-2 text-center bg-bg max-w-fit mx-auto rounded hover:ring hover:ring-accent focus:ring focus:ring-accent ring ring-gray-600 mt-6" href="https://redirect.is-a-good.dev/register">Register</a>
+                <a class="text-lg px-2 py-2 text-center bg-bg max-w-fit mx-auto rounded hover:ring hover:ring-accent focus:ring focus:ring-accent ring ring-gray-600 mt-6" href="https://redirect.is-a-good.dev/docs">Documentation</a>
             </div>
         </div>
-        <div class="w-7/12 mx-auto mt-10">
-            <div class="grid grid-cols-2 grid-rows-1 gap-x-20">
-                <div id="col-sec-1" class="bg-bg-accent col-start-auto rounded text-text">
+        <div class="w-7/12 mx-auto">
+            <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 gap-x-20">
+                <div id="col-sec-1" class="bg-bg-accent col-start-auto rounded text-text mt-10">
                     <h2 class="text-2xl my-4 text-center">Donations & Support</h2>
                     <div class="mx-9 flex flex-col">
                         <span>
@@ -33,7 +33,7 @@
                         </div>
                     </div>
                 </div>
-                <div id="col-sec-2" class="bg-bg-accent col-start-auto rounded text-text">
+                <div id="col-sec-2" class="bg-bg-accent col-start-auto rounded text-text mt-10">
                     <h2 class="text-2xl my-4 text-center">Useful Links</h2>
                     <div class="flex flex-col w-12/12 mb-5">
                         <ul class="place-self-center">
@@ -49,6 +49,10 @@
                 </div>
             </div>
         </div>
+        <br>
+        <br>
+        <br>
+        <br>
 
         <!-- Kofi widget -->
         <script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
