From 568fd64a8dc915a801d71ddaaacc3c382496df4e Mon Sep 17 00:00:00 2001
From: Henry-Hiles <henry@henryhiles.com>
Date: Sat, 25 Jan 2025 16:57:26 +0000
Subject: [PATCH] Fix responsiveness

---
 src/pages/index.astro |  8 +++-----
 src/styles/global.css |  6 ++++++
 src/styles/index.css  | 41 +++++++++++++++++++++--------------------
 3 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 22d8da0..306cec1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -13,11 +13,9 @@ import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
 ---
 
 <Layout>
-    <header>
-        <section id="home">
-            <Image src={logoLong} alt="Henry Hiles" />
-            <span>Full Stack Web Developer and Discord Bot Developer</span>
-        </section>
+    <header id="home">
+        <Image src={logoLong} alt="Henry Hiles" />
+        <span>Full Stack Web Developer and Discord Bot Developer</span>
     </header>
     <mdui-card variant="outlined">
         <section id="about">
diff --git a/src/styles/global.css b/src/styles/global.css
index a9a84c0..6fe3f6c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,3 +1,7 @@
+* {
+    box-sizing: border-box;
+}
+
 :root {
     --primary: 78, 148, 228;
     background-image: url(background.svg);
@@ -41,6 +45,8 @@ main {
     display: flex;
     align-items: center;
     gap: 2em;
+
+    padding: 1em;
 }
 
 mdui-divider {
diff --git a/src/styles/index.css b/src/styles/index.css
index c3b3e79..fe7898f 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,3 +1,22 @@
+header {
+    display: flex;
+    flex-direction: column;
+    font-size: 2em;
+    justify-content: center;
+    align-items: center;
+
+    & img {
+        max-width: 35rem;
+        height: min-content;
+    }
+
+    & span {
+        display: flex;
+        text-align: center;
+        padding: 0 0.5rem;
+    }
+}
+
 section {
     max-width: 1000px;
     display: flex;
@@ -6,7 +25,7 @@ section {
     & div {
         display: flex;
         justify-content: center;
-        gap: 1.5em;
+        gap: 1em;
         flex-wrap: wrap;
     }
 
@@ -21,28 +40,10 @@ section {
         font-size: 1.3em;
     }
 
-    &#home {
-        font-size: 2em;
-        justify-content: center;
-        align-items: center;
-        padding-bottom: 1em;
-
-        & img {
-            max-width: 35rem;
-            height: min-content;
-        }
-
-        & span {
-            display: flex;
-            text-align: center;
-            padding: 0 0.5rem;
-        }
-    }
-
     &#about {
         & #stats img {
             width: 45%;
-            min-width: 400px;
+            min-width: 300px;
         }
 
         & #certificates {