Small media query adjustments

3 files changed, 57 insertions, 61 deletions

diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
index 0fa9cc4..a637329 100644
--- a/sass/layout/_footer.scss
+++ b/sass/layout/_footer.scss
@@ -2,14 +2,15 @@
 
 footer {
   background-color: $bg-text-container;
-  // delete positioning to make grid footer from body work
-  // position: absolute;
-  // bottom: 0;
-  // left: 0;
   width: 100vw;
 
   & * {
     margin: $margin-main;
+
+    // mobile
+    @include responsive(phone) {
+      margin: $margin-mobile;
+    }
   }
 
   dl {
@@ -18,11 +19,23 @@ footer {
     align-items: center;
     height: 2rem;
 
+    // mobile
+    @include responsive(phone) {
+      flex-direction: column;
+      height: max-content;
+    }
+
     & * {
       color: inherit;
       font-size: $medium-text;
       margin: 0.5rem;
       transition: transform 0.3s;
+
+      // mobile
+      @include responsive(phone) {
+        font-size: $medium-text-mobile;
+        margin: 0.3rem;
+      }
     }
 
     & dd i:hover {
@@ -38,22 +51,3 @@ footer {
     font-size: $big-text;
   }
 }
-
-// mobile
-@media screen and (max-width: 520px) {
-  footer {
-    & * {
-      margin: $margin-mobile;
-    }
-
-    dl {
-      flex-direction: column;
-      height: max-content;
-
-      & * {
-        font-size: $medium-text-mobile;
-        margin: 0.3rem;
-      }
-    }
-  }
-}
diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss
index 7cb2735..aec49e5 100644
--- a/sass/layout/_main-sections.scss
+++ b/sass/layout/_main-sections.scss
@@ -3,6 +3,12 @@
 .about-section {
   @include flex-sp-around-center;
   @include narrow-container;
+
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
+    @include flex-column-center;
+    @include mobile-container;
+  }
 }
 
 .welcome-section {
@@ -11,6 +17,13 @@
   @include narrow-container;
   width: 60%;
 
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
+    @include flex-column-center;
+    gap: 4rem;
+    @include mobile-container;
+  }
+
   .welcome-intro {
     border-radius: $radius-text-container;
     outline: 3px solid $text-special-dark;
@@ -21,6 +34,11 @@
 .projects-section {
   @include wide-container;
 
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
+    @include mobile-container;
+  }
+
   // less margin between h2 and the 2nd child = first project-container
   & > div:not(:nth-child(2)) {
     margin-top: 10rem;
@@ -29,26 +47,9 @@
 
 .contact-section {
   @include wide-container;
-}
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
-  .about-section {
-    @include flex-column-center;
-    @include mobile-container;
-  }
-
-  .welcome-section {
-    @include flex-column-center;
-    gap: 4rem;
-    @include mobile-container;
-  }
-
-  .projects-section {
-    @include mobile-container;
-  }
 
-  .contact-section {
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
     @include mobile-container;
   }
 }
diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
index 8d03e69..e2d462e 100644
--- a/sass/layout/_nav.scss
+++ b/sass/layout/_nav.scss
@@ -6,6 +6,11 @@ nav {
   height: 10vh;
   width: 100vw;
 
+  // tablet & mobile
+  @include responsive(tablet) {
+    height: fit-content;
+  }
+
   ul {
     display: flex;
     align-items: center;
@@ -14,12 +19,25 @@ nav {
     list-style-type: none;
     padding: 0 3rem;
     width: 100%;
+
+    // tablet & mobile
+    @include responsive(tablet) {
+      @include flex-column-center;
+      gap: 1rem;
+      padding: 0;
+    }
   }
 
   // logo to the left side of navbar
   li:first-child {
     text-align: left;
     margin-right: auto;
+
+    // tablet & mobile
+    @include responsive(tablet) {
+      text-align: center;
+      margin-right: 1.5rem;
+    }
   }
 
   li a {
@@ -35,27 +53,10 @@ nav {
     &:hover {
       @include main-link-hover;
     }
-  }
-}
-
-// tablet & mobile
-@media screen and (max-width: 980px) {
-  nav {
-    height: fit-content;
-
-    ul {
-      @include flex-column-center;
-      gap: 1rem;
-      padding: 0;
-    }
 
-    li a {
+    // tablet & mobile
+    @include responsive(tablet) {
       font-size: $big-text;
     }
-
-    li:first-child {
-      text-align: center;
-      margin-right: 1.5rem;
-    }
   }
 }