From bbf850d5c755ffa73976a221e84771bbe4df6746 Mon Sep 17 00:00:00 2001
From: Akemi Izuko <akemi@noway.moe>
Date: Mon, 1 Jan 2024 18:55:44 -0700
Subject: [PATCH] Home: make ipad responsive

---
 src/pages/index.astro | 74 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 65 insertions(+), 9 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index ccc52e0..69c92e3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -30,8 +30,8 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
             you (>ω^)!
         </p>
         <img id="pfp" src="/images/home/akemi-silly-transparent.avif" />
+        <div class="footer"><Footer /></div>
         </main>
-        <Footer />
     </body>
 </html>
 
@@ -40,14 +40,31 @@ main a {
     color: var(--accent-color);
 }
 
+
+main .footer {
+    margin-top: -30px;
+    grid-row: 7 / 8;
+    grid-column: 1 / -1;
+}
+
 @media (min-width: 760px) {
     main {
         display: grid;
         grid-template-columns: 1fr auto 20px 50%;
-        grid-template-rows: repeat(6, 1fr);
+        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr auto;
         width: 100%;
         min-height: 70vh;
         overflow: hidden;
+        padding: 0 20px;
+    }
+    @media (max-width: 900px) {
+        main {
+            grid-template-columns: 1fr auto 0px 40%;
+            grid-template-rows: 1fr 1fr 1fr 1fr auto;
+        }
+        main .footer {
+            grid-row: 5 / 6;
+        }
     }
     #name-title {
         font-family: var(--font-title);
@@ -59,16 +76,22 @@ main a {
         grid-row-end: 4;
         align-self: center;
     }
-    @media (min-width: 1300px) {
+    @media (min-width: 1350px) {
         #name-title {
             font-size: 96px;
         }
     }
-    @media not (min-width: 1300px) {
+    @media not (min-width: 1350px) {
         #name-title {
             font-size: 64px;
         }
     }
+    @media (max-width: 900px) {
+        #name-title {
+            grid-row-start: 1;
+            grid-row-end: 3;
+        }
+    }
     #title-circle {
         border-radius: 50%;
         background-color: white;
@@ -76,24 +99,50 @@ main a {
         height: 200px;
         box-shadow: 0 40px 50px -10px rgba(0, 0, 0, 0.1);
         /* Grid styles */
-        grid-column: 1 / 2;
         grid-row: 2 / 4;
-        justify-self: right;
-        margin-right: -120px;
+        /*margin-right: -120px;*/
         margin-top: -10px;
     }
+    @media (min-width: 1350px) {
+        #title-circle {
+            justify-self: right;
+            margin-right: -120px;
+            grid-column: 1 / 2;
+        }
+    }
+    @media not (min-width: 1350px) {
+        #title-circle {
+            justify-self: center;
+            margin-right: 0;
+            grid-column: 1 / 3;
+            margin-left: -120px;
+            margin-top: -30px;
+        }
+    }
+    @media (max-width: 900px) {
+        #title-circle {
+            grid-row: 1 / 3;
+        }
+    }
     #about {
+        margin-top: 20px;
         max-width: 520px;
         font-family: var(--font-sans);
         font-size: 1.2rem;
         line-height: 1.8;
         /* Grid styles */
         grid-column-start: 2;
-        grid-row-start: 4;
-        grid-row-end: 7;
+        grid-row: 4 / 7;
         justify-self: right;
         align-self: start;
     }
+    @media (max-width: 900px) {
+        #about {
+            grid-row: 3 / 6;
+            font-size: 1rem;
+            padding: 1rem 2rem;
+        }
+    }
     #big-circle {
         border-radius: 50%;
         background-color: white;
@@ -121,6 +170,13 @@ main a {
         align-self: bottom;
         margin-right: -15%;
     }
+    /*
+    @media (max-width: 900px) {
+        #pfp {
+            margin-top: 25%;
+        }
+    }
+    */
 }
 @media not (min-width: 760px) {
     main {