From fb291aa9a3973fb2a6f934b54bfd2b1a22550349 Mon Sep 17 00:00:00 2001
From: Akemi Izuko <akemi@noway.moe>
Date: Mon, 1 Jan 2024 19:17:58 -0700
Subject: [PATCH] Home: cleanup stylesheet

---
 src/pages/index.astro | 311 +++++++++++++++++++++---------------------
 1 file changed, 157 insertions(+), 154 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7453c76..05be270 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -36,173 +36,176 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 </html>
 
 <style>
-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: 1fr 1fr 1fr 1fr 1fr 1fr auto;
-        width: 100%;
-        min-height: 70vh;
-        overflow: hidden;
-        padding: 0 20px;
+    /*****************************************
+     * Global styles
+     ****************************************/
+    main a {
+        color: var(--accent-color);
     }
-    @media (max-width: 900px) {
+    main .footer {
+        margin-top: -30px;
+        grid-row: 7 / 8;
+        grid-column: 1 / -1;
+    }
+
+    /*****************************************
+     * Desktop, iPad horizontal and vertical
+     ****************************************/
+    @media (min-width: 760px) {
         main {
-            grid-template-columns: 1fr auto 0px 40%;
-            grid-template-rows: 1fr 1fr 1fr 1fr auto;
+            display: grid;
+            grid-template-columns: 1fr auto 20px 50%;
+            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr auto;
+            width: 100%;
+            min-height: 70vh;
+            overflow: hidden;
+            padding: 0 20px;
         }
-        main .footer {
-            grid-row: 5 / 6;
-        }
-    }
-    #name-title {
-        font-family: var(--font-title);
-        text-align: right;
-        /* Grid styles */
-        grid-column-start: 2;
-        grid-column-end: 3;
-        grid-row-start: 2;
-        grid-row-end: 4;
-        align-self: center;
-    }
-    @media (min-width: 1350px) {
         #name-title {
-            font-size: 96px;
+            font-family: var(--font-title);
+            text-align: right;
+            /* Grid styles */
+            grid-column-start: 2;
+            grid-column-end: 3;
+            grid-row-start: 2;
+            grid-row-end: 4;
+            align-self: center;
         }
-    }
-    @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;
-        width: 200px;
-        height: 200px;
-        box-shadow: 0 40px 50px -10px rgba(0, 0, 0, 0.1);
-        /* Grid styles */
-        grid-row: 2 / 4;
-        /*margin-right: -120px;*/
-        margin-top: -10px;
-    }
-    @media (min-width: 1350px) {
         #title-circle {
-            justify-self: right;
-            margin-right: -120px;
-            grid-column: 1 / 2;
+            border-radius: 50%;
+            background-color: white;
+            width: 200px;
+            height: 200px;
+            box-shadow: 0 40px 50px -10px rgba(0, 0, 0, 0.1);
+            /* Grid styles */
+            grid-row: 2 / 4;
+            margin-top: -10px;
+            align-self: center;
         }
-    }
-    @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: 4 / 7;
-        justify-self: right;
-        align-self: start;
-    }
-    @media (max-width: 900px) {
         #about {
-            grid-row: 3 / 6;
-            font-size: 1rem;
-            padding: 1rem 2rem;
+            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: 4 / 7;
+            justify-self: right;
+            align-self: start;
+        }
+        #big-circle {
+            border-radius: 50%;
+            background-color: white;
+            width: 1500px;
+            height: 1500px;
+            box-shadow: 10px 60px 50px -10px rgba(0, 0, 0, 0.1);
         }
-    }
-    #big-circle {
-        border-radius: 50%;
-        background-color: white;
-        width: 1500px;
-        height: 1500px;
-        box-shadow: 10px 60px 50px -10px rgba(0, 0, 0, 0.1);
-    }
-    #big-circle-wrapper {
-        width: calc(100% - 60%);
-        height: 160vh;
-        z-index: -1;
-        overflow: hidden;
-        position: absolute;
-        top: -60%;
-        left: 60%;
-    }
-    @media (max-width: 1350px) and (min-width: 901px) {
         #big-circle-wrapper {
-            width: calc(100% - 56%);
-            left: 56%;
+            width: calc(100% - 60%);
+            height: 160vh;
+            z-index: -1;
+            overflow: hidden;
+            position: absolute;
+            top: -60%;
+            left: 60%;
         }
-    }
-    #pfp {
-        width: 600px;
-        /* Grid styles */
-        grid-column-start: 4;
-        grid-column-end: 5;
-        grid-row-start: 1;
-        grid-row-end: 7;
-        justify-self: right;
-        align-self: bottom;
-        margin-right: -15%;
-    }
-    /*
-    @media (max-width: 900px) {
         #pfp {
-            margin-top: 25%;
+            width: 600px;
+            /* Grid styles */
+            grid-column: 4 / 5;
+            grid-row: 1 / 7;
+            justify-self: right;
+            align-self: bottom;
+            margin-right: -15%;
+        }
+        /*****************************************
+         * 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%;
+            }
         }
     }
-    */
-}
-@media not (min-width: 760px) {
-    main {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin: 20px;
+
+    /*****************************************
+     * Phones
+     *
+     * Completely changes the layout to flex
+     ****************************************/
+    @media not (min-width: 760px) {
+        main {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 20px;
+        }
+        #name-title {
+            font-family: var(--font-title);
+            font-size: 48px;
+        }
+        #about {
+            margin: 10px;
+        }
+        #pfp {
+            max-width: 300px;
+            border: 0;
+            padding: 0;
+            margin: 0;
+        }
     }
-    #name-title {
-        font-family: var(--font-title);
-        font-size: 48px;
-    }
-    #about {
-        margin: 10px;
-    }
-    #pfp {
-        max-width: 300px;
-        border: 0;
-        padding: 0;
-        margin: 0;
-    }
-}
 </style>