Responsive design

12 files changed, 116 insertions, 17 deletions

diff --git a/index-en.html b/index-en.html
index 0ba491d..299dfa8 100644
--- a/index-en.html
+++ b/index-en.html
@@ -122,7 +122,8 @@
           </div>
         </div>
 
-        <div class="project-container">
+        <!-- reverse order class for smaller screen sizes -->
+        <div class="project-container reverse-order">
           <div class="text-container">
             <h3 class="subtitle">All In Trips</h3>
             <p>
diff --git a/index.html b/index.html
index 09d26b2..0b7fbf9 100644
--- a/index.html
+++ b/index.html
@@ -124,7 +124,8 @@
           </div>
         </div>
 
-        <div class="project-container">
+        <!-- reverse order class for smaller screen sizes -->
+        <div class="project-container reverse-order">
           <div class="text-container">
             <h3 class="subtitle">All In Trips</h3>
             <p>
diff --git a/sass/abstracts/_animations.scss b/sass/abstracts/_animations.scss
index 819b356..48c0ce6 100644
--- a/sass/abstracts/_animations.scss
+++ b/sass/abstracts/_animations.scss
@@ -30,3 +30,15 @@
     transform: translate(0) skewX(-12deg);
   }
 }
+
+// without skew effect for smaller screens
+@keyframes moveInRightMobile {
+  0% {
+    opacity: 0;
+    transform: translateX(10rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
index 98351c4..5a05ec3 100644
--- a/sass/abstracts/_mixins.scss
+++ b/sass/abstracts/_mixins.scss
@@ -11,6 +11,13 @@
   justify-content: space-around;
 }
 
+@mixin flex-column-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 @mixin standard-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -30,3 +37,8 @@
     margin-bottom: 5rem;
   }
 }
+
+@mixin mobile-container {
+  margin: 8rem auto;
+  width: 80%;
+}
diff --git a/sass/components/_button.scss b/sass/components/_button.scss
index 2d5b50c..727d9fb 100644
--- a/sass/components/_button.scss
+++ b/sass/components/_button.scss
@@ -9,7 +9,7 @@ button {
   font-weight: bold;
   padding: 0.7rem;
   text-transform: uppercase;
-  width: 35%;
+  width: 8rem;
 
   &:hover {
     background-color: $text-special-dark;
diff --git a/sass/components/_contact-form.scss b/sass/components/_contact-form.scss
index a2a9c40..87b79c1 100644
--- a/sass/components/_contact-form.scss
+++ b/sass/components/_contact-form.scss
@@ -38,3 +38,22 @@
     }
   }
 }
+
+// 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 {
+    @include flex-column-center;
+    width: 100%;
+
+    & div {
+      width: 100%;
+    }
+  }
+}
diff --git a/sass/components/_project-container.scss b/sass/components/_project-container.scss
index d6d4e68..ed5fb0d 100644
--- a/sass/components/_project-container.scss
+++ b/sass/components/_project-container.scss
@@ -4,3 +4,16 @@
   @include flex-sp-around-center;
   gap: 2rem;
 }
+
+// mobile to smaller laptop screen sizes
+@media screen and (max-width: 1380px) {
+  .project-container {
+    @include flex-column-center;
+    gap: 5rem;
+  }
+
+  // for second project, otherwise screenshot below text-container
+  .reverse-order {
+    flex-direction: column-reverse;
+  }
+}
diff --git a/sass/components/_screenshot-container.scss b/sass/components/_screenshot-container.scss
index 8c28462..f3fdf0b 100644
--- a/sass/components/_screenshot-container.scss
+++ b/sass/components/_screenshot-container.scss
@@ -13,3 +13,10 @@
     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 0108f94..95d2944 100644
--- a/sass/components/_text-container.scss
+++ b/sass/components/_text-container.scss
@@ -18,3 +18,16 @@
   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 {
+    animation: moveInRightMobile 2s ease-out;
+    margin-top: 5rem;
+  }
+}
diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
index ecfb0a5..0fa9cc4 100644
--- a/sass/layout/_footer.scss
+++ b/sass/layout/_footer.scss
@@ -6,7 +6,7 @@ footer {
   // position: absolute;
   // bottom: 0;
   // left: 0;
-  width: 100%;
+  width: 100vw;
 
   & * {
     margin: $margin-main;
@@ -39,10 +39,9 @@ footer {
   }
 }
 
-@media screen and (max-width: 420px) {
+// mobile
+@media screen and (max-width: 520px) {
   footer {
-    top: 100;
-
     & * {
       margin: $margin-mobile;
     }
diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss
index fb2d433..7cb2735 100644
--- a/sass/layout/_main-sections.scss
+++ b/sass/layout/_main-sections.scss
@@ -30,3 +30,25 @@
 .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 {
+    @include mobile-container;
+  }
+}
diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
index d57f3d7..8d03e69 100644
--- a/sass/layout/_nav.scss
+++ b/sass/layout/_nav.scss
@@ -4,11 +4,10 @@ nav {
   background-color: $bg-text-container;
   font-family: "Archivo Black", sans-serif;
   height: 10vh;
-  width: 100%;
+  width: 100vw;
 
   ul {
     display: flex;
-    flex-flow: row nowrap;
     align-items: center;
     justify-content: flex-end;
     height: 100%;
@@ -39,23 +38,24 @@ nav {
   }
 }
 
-// mobile
-@media screen and (max-width: 770px) {
+// tablet & mobile
+@media screen and (max-width: 980px) {
   nav {
+    height: fit-content;
+
     ul {
+      @include flex-column-center;
       gap: 1rem;
-      justify-content: center;
       padding: 0;
     }
 
+    li a {
+      font-size: $big-text;
+    }
+
     li:first-child {
       text-align: center;
       margin-right: 1.5rem;
     }
-
-    li a {
-      font-size: 1rem;
-      padding: 0;
-    }
   }
 }