Update to Stylesheet of index.html

Jedbert · Apr 30, 2024 · fcf7662 · fcf7662
1 parent 661d9fc
commit fcf7662
Showing 1 changed file with 54 additions and 6 deletions.
diff --git a/styles.css b/styles.css
@@ -9,6 +9,39 @@ html {
       scroll-behavior: smooth;
   }
 
+@media screen and (max-width: 750px) {
+    html {
+            font-size: 14px;
+    }
+    body {
+        font-size: 1.2rem;
+    }
+    header {
+        height: 20rem;
+    }
+    .main-content>h2 {
+        font-size: 1.2em;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    html {
+        font-size: 12px;
+    }
+
+    body {
+        font-size: 1rem;
+    }
+
+    header {
+        height: 15rem;
+    }
+
+    .main-content>h2 {
+        font-size: 1.1em;
+    }
+}
+
 @media screen and (max-width: 750px) {
 body {
     width: 100vw;
@@ -26,7 +59,6 @@ body {
         }
 }
 
-
 header {
     display: flex;
     position: relative;
@@ -37,11 +69,19 @@ header {
     background-position: center;
     justify-content: space-between;
     align-items: center;
-    height: 30rem;
+    height: 100vh;
     z-index: 1000;
     overflow: hidden;
 }
 
+@media screen and (max-width: 768px) {
+    header {
+        height: 20rem;
+        font-size: 1.4rem;
+        padding: 10px 0;
+    }
+}
+
 header::before {
     content: "";
     position: absolute;
@@ -80,9 +120,9 @@ main {
     top: 0;
     left: 0;
     width: 7px;
-    height: 125px;
+    height: 70px;
     max-width: 100%;
-    max-height: 10vh;
+    max-height: 7vh;
     margin: 10px;
     padding: 0;
 }
@@ -100,6 +140,8 @@ main {
 #nav-bar ul {
     list-style: none;
     display: flex;
+    flex-direction: wrap;
+    justify-content: center;
 }
 
 #nav-bar ul li {
@@ -110,7 +152,7 @@ main {
 .nav-link {
     color: #4e3535;
     text-decoration: none;
-    padding: 10px 35px;
+    padding: 10px 7px;
     font-weight: bold;
     text-shadow: 0 0 4.5px rgba(0, 0, 0, 0.544);
     letter-spacing: 1px;
@@ -122,6 +164,13 @@ main {
     color: #325a60;
 }
 
+@media screen and (max-width: 768px) {
+    .nav-link {
+        padding: 5px 7px;
+        font-size: 0.68rem;
+    }
+}
+
 #instagram-media {
     margin-top: 2.5rem;
     display: flex;
@@ -158,7 +207,6 @@ main {
     justify-content: center;
     gap: 20px;
     margin-top: 20px;
-    /* margin-left: 20%; */
 }
 
 .section-i {