From 4d8b9d4ed978e2922199f4fb15f2cd025bea4566 Mon Sep 17 00:00:00 2001
From: Akemi Izuko <akemi@noway.moe>
Date: Mon, 1 Jan 2024 18:06:50 -0700
Subject: [PATCH] Home: make mobile responsive

---
 src/components/Footer.astro |  6 +++++
 src/pages/index.astro       | 48 ++++++++++++++++++++++++++++---------
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 394e221..52d1b09 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -136,6 +136,12 @@ const today = new Date();
         margin-top: 60px;
         font-size: 16px;
     }
+    @media not (min-width: 760px) {
+        footer {
+            margin-top: 0px;
+        }
+    }
+
     .social-links {
         display: flex;
         justify-content: center;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4daaa23..ccc52e0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -36,6 +36,11 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 </html>
 
 <style>
+main a {
+    color: var(--accent-color);
+}
+
+@media (min-width: 760px) {
     main {
         display: grid;
         grid-template-columns: 1fr auto 20px 50%;
@@ -44,14 +49,8 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
         min-height: 70vh;
         overflow: hidden;
     }
-
-    main a {
-        color: var(--accent-color);
-    }
-
     #name-title {
         font-family: var(--font-title);
-        font-size: 96px;
         text-align: right;
         /* Grid styles */
         grid-column-start: 2;
@@ -60,7 +59,16 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
         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;
@@ -74,7 +82,6 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
         margin-right: -120px;
         margin-top: -10px;
     }
-
     #about {
         max-width: 520px;
         font-family: var(--font-sans);
@@ -87,7 +94,6 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
         justify-self: right;
         align-self: start;
     }
-
     #big-circle {
         border-radius: 50%;
         background-color: white;
@@ -95,7 +101,6 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
         height: 1500px;
         box-shadow: 10px 60px 50px -10px rgba(0, 0, 0, 0.1);
     }
-
     #big-circle-wrapper {
         width: calc(100% - 60%);
         height: 160vh;
@@ -105,7 +110,6 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
         top: -60%;
         left: 60%;
     }
-
     #pfp {
         width: 600px;
         /* Grid styles */
@@ -117,4 +121,26 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
         align-self: bottom;
         margin-right: -15%;
     }
+}
+@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;
+    }
+}
 </style>