Home: cleanup stylesheet

src/pages/index.astro

@@ -30,24 +30,36 @@ 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>
 
 <style>
-main a {
+    /*****************************************
+     * Global styles
+     ****************************************/
+    main a {
         color: var(--accent-color);
-}
+    }
+    main .footer {
+        margin-top: -30px;
+        grid-row: 7 / 8;
+        grid-column: 1 / -1;
+    }
 
-@media (min-width: 760px) {
+    /*****************************************
+     * Desktop, iPad horizontal and vertical
+     ****************************************/
+    @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;
         }
         #name-title {
             font-family: var(--font-title);
@@ -59,16 +71,6 @@ main a {
             grid-row-end: 4;
             align-self: center;
         }
-    @media (min-width: 1300px) {
-        #name-title {
-            font-size: 96px;
-        }
-    }
-    @media not (min-width: 1300px) {
-        #name-title {
-            font-size: 64px;
-        }
-    }
         #title-circle {
             border-radius: 50%;
             background-color: white;
@@ -76,21 +78,19 @@ 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-top: -10px;
+            align-self: center;
         }
         #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: 4 / 7;
-        grid-row-end: 7;
             justify-self: right;
             align-self: start;
         }
@@ -113,16 +113,81 @@ main a {
         #pfp {
             width: 600px;
             /* Grid styles */
-        grid-column-start: 4;
+            grid-column: 4 / 5;
-        grid-column-end: 5;
+            grid-row: 1 / 7;
-        grid-row-start: 1;
-        grid-row-end: 7;
             justify-self: right;
             align-self: bottom;
             margin-right: -15%;
         }
-}
+        /*****************************************
-@media not (min-width: 760px) {
+         * iPad vertical
+         ****************************************/
+        @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 {
+                grid-row-start: 1;
+                grid-row-end: 3;
+            }
+            #title-circle {
+                grid-row: 1 / 3;
+            }
+            #about {
+                grid-row: 3 / 6;
+                font-size: 1rem;
+                padding: 1rem 2rem;
+            }
+        }
+        /*****************************************
+         * iPad horizontal
+         ****************************************/
+        @media not (min-width: 1350px) {
+            #name-title {
+                font-size: 64px;
+            }
+            #title-circle {
+                justify-self: center;
+                margin-right: 0;
+                grid-column: 1 / 3;
+                margin-left: -120px;
+                margin-top: -30px;
+            }
+        }
+        /*****************************************
+         * Desktop
+         ****************************************/
+        @media (min-width: 1350px) {
+            #name-title {
+                font-size: 96px;
+            }
+            #title-circle {
+                justify-self: right;
+                margin-right: -120px;
+                grid-column: 1 / 2;
+            }
+        }
+        /*****************************************
+         * Shift over big circle for iPad
+         ****************************************/
+        @media (max-width: 1350px) and (min-width: 901px) {
+            #big-circle-wrapper {
+                width: calc(100% - 56%);
+                left: 56%;
+            }
+        }
+    }
+
+    /*****************************************
+     * Phones
+     *
+     * Completely changes the layout to flex
+     ****************************************/
+    @media not (min-width: 760px) {
         main {
             display: flex;
             flex-direction: column;
@@ -142,5 +207,5 @@ main a {
             padding: 0;
             margin: 0;
         }
-}
+    }
 </style>