rushed media queries (#11)

abdullahmorrison · Aug 30, 2023 · c670d40 · c670d40
1 parent e916602
commit c670d40
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 3 deletions.
diff --git 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;
+  }
+}
diff --git 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;
+    }
 }
diff --git 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;
+    }
 }
diff --git 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>