From c670d409f297e132bf4589f520bdf4ad1df9bf16 Mon Sep 17 00:00:00 2001
From: abdullahmorrison <abdullahmorrison@gmail.com>
Date: Tue, 29 Aug 2023 20:05:53 -0400
Subject: [PATCH] rushed media queries (#11)

---
 src/app/globals.scss     | 15 +++++++++++++++
 src/app/nav.module.scss  |  8 ++++++++
 src/app/page.module.scss | 21 ++++++++++++++++++++-
 src/app/page.tsx         |  4 ++--
 4 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/app/globals.scss b/src/app/globals.scss
index 764eb72..1250f61 100644
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
@@ -41,3 +41,18 @@ h4 {
 h5 {
     font-size: $heading5;
 }
+
+@media (max-width: 1000px) {
+  h1 {
+    font-size: $heading2;
+  }
+  h2 {
+    font-size: $heading3;
+  }
+  h3 {
+    font-size: $heading4;
+  }
+  h4 {
+    font-size: $heading5;
+  }
+}
\ No newline at end of file
diff --git a/src/app/nav.module.scss b/src/app/nav.module.scss
index a34b9d0..507638b 100644
--- a/src/app/nav.module.scss
+++ b/src/app/nav.module.scss
@@ -25,4 +25,12 @@
             padding: 0;
         }
     }
+}
+@media (max-width: 530px){
+    .nav{
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        gap: 20px;
+    }
 }
\ No newline at end of file
diff --git a/src/app/page.module.scss b/src/app/page.module.scss
index 280edc2..9e0acf1 100644
--- a/src/app/page.module.scss
+++ b/src/app/page.module.scss
@@ -4,7 +4,7 @@
     height: 100vh;
     padding: 50px;
 
-    .name{
+    .fullName{
         position: absolute;
         bottom: 15%;
 
@@ -39,6 +39,7 @@
 .project{
     height: 100vh;
 
+    background-color: $pseudo-black;
     background-repeat: no-repeat;
     background-size: cover;
     background-attachment: fixed;
@@ -124,4 +125,22 @@
     0% { transform: translateY(-100%); }
     50% { transform: translateY(-100%); }
     100% { transform: translateY(0%); }
+}
+
+@media (max-width: 750px){
+    .name{
+        left: 20px;
+    }
+    .project{
+        height: 500px;
+        .projectInfo{
+            width: 100%;
+        }
+    }
+}
+  
+@media (max-width: 530px){
+    .fullName{
+        font-size: $heading3;
+    }
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3173097..a8ff14c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,7 +6,7 @@ export default function Home() {
     <div>
       <main className={styles.hero}>
         <Nav/>
-        <h1 className={styles.name}>
+        <h1 className={styles.fullName}>
           <span className={styles.firstName}><p>Abdullah</p></span>
           <span className={styles.lastName}><p>Morrison</p></span> 
         </h1>
@@ -19,7 +19,7 @@ export default function Home() {
           <p className={styles.description}>A Twitch extension that helps an animal sanctuary educate viewers about animal conservation</p>
 
           <ul className={styles.links}>
-            <li><a href="https://www.twitch.tv/alveussanctuary">view project</a></li>
+            <li><a href="https://www.twitch.tv/alveussanctuary" target='_blank'>view project</a></li>
             <li><a href="https://github.com/alveusgg/extension" target="_blank">git repo</a></li>
           </ul>
         </div>