Small media query adjustments

9 files changed, 100 insertions, 85 deletions

diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
index 5a05ec3..3495b1b 100644
--- a/sass/abstracts/_mixins.scss
+++ b/sass/abstracts/_mixins.scss
@@ -42,3 +42,22 @@
   margin: 8rem auto;
   width: 80%;
 }
+
+// media queries
+@mixin responsive($breakpoint) {
+  @if $breakpoint == phone {
+    @media screen and (max-width: 600px) {
+      @content;
+    }
+  }
+  @if $breakpoint == tablet {
+    @media screen and (max-width: 980px) {
+      @content;
+    }
+  }
+  @if $breakpoint == laptop {
+    @media screen and (max-width: 1400px) {
+      @content;
+    }
+  }
+}
diff --git a/sass/base/_base.scss b/sass/base/_base.scss
index 2211bca..545dce7 100644
--- a/sass/base/_base.scss
+++ b/sass/base/_base.scss
@@ -41,3 +41,8 @@ main {
     animation: fade-in 2s ease-out;
   }
 }
+
+::selection {
+  background-color: $text-main;
+  color: $text-dark;
+}
diff --git a/sass/components/_contact-form.scss b/sass/components/_contact-form.scss
index 87b79c1..1195ab7 100644
--- a/sass/components/_contact-form.scss
+++ b/sass/components/_contact-form.scss
@@ -5,6 +5,11 @@
   gap: 2rem;
   width: 50%;
 
+  // larger tablet to smaller laptop screen size
+  @include responsive(laptop) {
+    width: 100%;
+  }
+
   // container for each label & input
   div {
     display: flex;
@@ -39,13 +44,6 @@
   }
 }
 
-// larger tablet to smaller laptop screen size
-@media screen and (max-width: 1380px) {
-  .messenger-form {
-    width: 100%;
-  }
-}
-
 // mobile to smaller tablet screen sizes
 @media screen and (max-width: 820px) {
   .messenger-form {
diff --git a/sass/components/_project-container.scss b/sass/components/_project-container.scss
index ed5fb0d..0bb8940 100644
--- a/sass/components/_project-container.scss
+++ b/sass/components/_project-container.scss
@@ -6,7 +6,7 @@
 }
 
 // mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
+@media screen and (max-width: 1400px) {
   .project-container {
     @include flex-column-center;
     gap: 5rem;
diff --git a/sass/components/_screenshot-container.scss b/sass/components/_screenshot-container.scss
index f3fdf0b..beaa0cd 100644
--- a/sass/components/_screenshot-container.scss
+++ b/sass/components/_screenshot-container.scss
@@ -8,15 +8,13 @@
   width: 40%;
   transition: transform 0.6s ease;
 
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
+    width: 80%;
+  }
+
   &:hover {
     transform: scale(1.2);
     z-index: 100;
   }
 }
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
-  .project-screenshot {
-    width: 80%;
-  }
-}
diff --git a/sass/components/_text-container.scss b/sass/components/_text-container.scss
index 95d2944..6cd1457 100644
--- a/sass/components/_text-container.scss
+++ b/sass/components/_text-container.scss
@@ -8,6 +8,12 @@
   transform: skewX(-12deg);
   width: 50%;
 
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
+    transform: skewX(0);
+    width: auto;
+  }
+
   // margin between paragraphs but not below the last paragraph
   & p:not(:last-child) {
     margin-bottom: 1.5rem;
@@ -17,16 +23,9 @@
 .text-about {
   animation: moveInRight 2s ease-out;
   backface-visibility: hidden;
-}
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
-  .text-container {
-    transform: skewX(0);
-    width: auto;
-  }
 
-  .text-about {
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
     animation: moveInRightMobile 2s ease-out;
     margin-top: 5rem;
   }
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;
-    }
   }
 }