Home: cleanup stylesheet

src/pages/index.astro

@@ -36,18 +36,22 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 </html>
 
 <style>
-main a {
+    /*****************************************
+     * Global styles
+     ****************************************/
+    main a {
         color: var(--accent-color);
-}
+    }
-
+    main .footer {
-
-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%;
@@ -57,15 +61,6 @@ main .footer {
             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);
             text-align: right;
@@ -76,22 +71,6 @@ main .footer {
             grid-row-end: 4;
             align-self: center;
         }
-    @media (min-width: 1350px) {
-        #name-title {
-            font-size: 96px;
-        }
-    }
-    @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;
@@ -100,29 +79,8 @@ main .footer {
             box-shadow: 0 40px 50px -10px rgba(0, 0, 0, 0.1);
             /* Grid styles */
             grid-row: 2 / 4;
-        /*margin-right: -120px;*/
             margin-top: -10px;
-    }
+            align-self: center;
-    @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;
@@ -136,13 +94,6 @@ main .footer {
             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;
@@ -159,32 +110,84 @@ main .footer {
             top: -60%;
             left: 60%;
         }
+        #pfp {
+            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%;
             }
         }
-    #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 {
+     * Phones
-            margin-top: 25%;
+     *
-        }
+     * Completely changes the layout to flex
-    }
+     ****************************************/
-    */
+    @media not (min-width: 760px) {
-}
-@media not (min-width: 760px) {
         main {
             display: flex;
             flex-direction: column;
@@ -204,5 +207,5 @@ main .footer {
             padding: 0;
             margin: 0;
         }
-}
+    }
 </style>