design for mobile-small

radek-drw · Apr 30, 2024 · 43ceef0 · 43ceef0
1 parent 3f1caaa
commit 43ceef0
Show file tree

Hide file tree

Showing 14 changed files with 925 additions and 214 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/js/slider.js b/js/slider.js
@@ -364,8 +364,8 @@ toysButton.addEventListener("click", function () {
 });
 
 // Use matchMedia to check the device's viewport width
-if (window.matchMedia("(min-width: 480px)").matches) {
-  // If viewport width is at least 480px, run the desktop version script
+if (window.matchMedia("(min-width: 769px)").matches) {
+  // If viewport width is at least 769px, run the desktop version script
   desktopScript();
 } else {
   // Otherwise, run the mobile version script

diff --git a/sass/_about.scss b/sass/_about.scss
@@ -3,11 +3,14 @@ section.about {
   margin: 0 auto;
   padding: 110px 0 100px 0;
   position: relative;
-  @include mobile {
+  @include mobile-styles {
     border-top: 1px solid #d1d1d1;
     border-bottom: 1px solid #d1d1d1;
-    padding: 0 20px 30px 20px;
+    padding: 40px 15px 30px 15px;
   }
+  // @include tablet {
+  //   padding: 60px 20px 30px 20px;
+  // }
   &::before {
     content: "";
     position: absolute;
@@ -16,7 +19,7 @@ section.about {
     width: 150vw;
     height: 1px;
     background-color: #d1d1d1;
-    @include mobile {
+    @include mobile-styles {
       display: none;
     }
   }
@@ -28,7 +31,7 @@ section.about {
     width: 150vw;
     height: 1px;
     background-color: #d1d1d1;
-    @include mobile {
+    @include mobile-styles {
       display: none;
     }
   }
@@ -37,7 +40,7 @@ section.about {
     margin: 0 auto;
     text-align: center;
     margin-bottom: 80px;
-    @include mobile {
+    @include mobile-styles {
       max-width: 100%;
       margin-bottom: 50px;
     }
@@ -46,15 +49,15 @@ section.about {
       font-size: 4rem;
       font-weight: 800;
       margin-bottom: 25px;
-      @include mobile {
+      @include mobile-styles {
         font-size: 2.8rem;
         margin-bottom: 12px;
       }
     }
     p {
       font-family: "Lato";
       font-size: 1.4rem;
-      @include mobile {
+      @include mobile-styles {
         font-size: 1.2rem;
         padding: 0 25px;
         line-height: 1.5;
@@ -63,13 +66,19 @@ section.about {
           display: none;
         }
       }
+      @include tablet {
+        br {
+          display: block;
+        }
+      }
     }
   }
   .columns {
     display: flex;
     justify-content: space-around;
-    @include mobile {
+    @include mobile-styles {
       position: relative;
+      justify-content: space-between;
     }
     .left-column,
     .right-column {
@@ -80,15 +89,15 @@ section.about {
         font-family: "Lato";
         font-size: 1.1rem;
         line-height: 2;
-        @include mobile {
+        @include mobile-styles {
           padding: 0;
           font-size: 1rem;
           width: 50%;
         }
       }
       p.upper-txt {
         margin-bottom: 25px;
-        @include mobile {
+        @include mobile-styles {
           margin-bottom: 12px;
         }
       }
@@ -98,34 +107,44 @@ section.about {
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
-        @include mobile {
+        @include mobile-styles {
           transform: translateX(0);
-          left: -55%;
+          left: -62%;
           top: 30px;
+          z-index: -1;
+        }
+        @include tablet {
+          left: 35%;
         }
       }
       .fish-img {
         margin-bottom: 60px;
         top: 15px;
         z-index: -1;
-        @include mobile {
+        @include mobile-styles {
           top: 40px;
-          left: -62%;
+          left: -70%;
+        }
+        @include tablet {
+          left: 60%;
         }
       }
     }
     .right-column {
-      @include mobile {
+      @include mobile-styles {
         p.upper-txt,
         p.lower-txt {
-          margin-left: -220px;
+          margin-left: -280px;
           margin-top: 100px;
-          width: 55%;
+          width: 50%;
         }
         p.lower-txt {
           margin-top: 10px;
         }
       }
+      @include tablet {
+        margin-left: -30px;
+      }
     }
   }
 }
diff --git a/sass/_basic.scss b/sass/_basic.scss
@@ -32,7 +32,7 @@ button {
 .container {
   max-width: 1440px;
   margin: 0 auto;
-  @include mobile {
+  @include mobile-styles {
     overflow: hidden;
   }
 }
diff --git a/sass/_contact-form.scss b/sass/_contact-form.scss
@@ -3,44 +3,50 @@
   padding: 100px 0 0 0;
   justify-content: space-between;
   align-items: center;
-  @include mobile {
+  @include mobile-styles {
     padding: 30px 20px 20px 20px;
     flex-wrap: wrap;
   }
   .contact-info {
     flex-basis: 290px;
-    @include mobile {
+    @include mobile-styles {
       flex-basis: 100%;
       text-align: center;
     }
     h2 {
       font-family: "Literata";
       font-weight: 800;
       font-size: 4rem;
-      @include mobile {
+      @include mobile-styles {
         font-size: 2.8rem;
         br {
           display: none;
         }
       }
+      @include tablet {
+        font-size: 3.2rem;
+      }
     }
     p.description {
       font-family: "Lato";
       font-size: 1.4rem;
       padding: 40px 0;
       line-height: 1.5;
-      @include mobile {
+      @include mobile-styles {
         font-size: 1.2rem;
         padding: 14px 0 40px 0;
         br {
           display: none;
         }
       }
+      @include tablet {
+        font-size: 1.4rem;
+      }
     }
     .contact-details {
       display: flex;
       justify-content: space-between;
-      @include mobile {
+      @include mobile-styles {
         justify-content: space-around;
         padding-bottom: 20px;
       }
@@ -72,7 +78,7 @@
     align-self: stretch;
     position: relative;
     padding-top: 35px;
-    @include mobile {
+    @include mobile-styles {
       flex-basis: 100%;
     }
     .name-and-email {
@@ -94,32 +100,35 @@
         font-family: "Lato";
         font-size: 1.4rem;
         color: #000;
-        @include mobile {
+        @include mobile-small {
           font-size: 1.2rem;
         }
+        @include tablet {
+          font-size: 1.4rem;
+        }
       }
     }
     .name-input {
       width: 190px;
-      @include mobile {
+      @include mobile-styles {
         width: 30%;
       }
     }
     .email-input {
       width: 500px;
-      @include mobile {
+      @include mobile-styles {
         width: 60%;
       }
     }
     .message-input {
       display: block;
       width: 100%;
       margin-top: 65px;
-      @include mobile {
+      @include mobile-styles {
         margin-top: 20px;
       }
     }
-
+    // ERROR INFO
     .error-info {
       position: absolute;
       bottom: 0;
@@ -130,8 +139,11 @@
         font-family: "Lato";
         font-size: 1.4rem;
         display: none;
-        @include mobile {
+        @include mobile-styles {
           font-size: 1.2rem;
+          @include mobile-small {
+            font-size: 1.1rem;
+          }
         }
       }
       h2 {
@@ -150,7 +162,7 @@
       border: none;
       font-family: "Lato";
       font-size: 1.2rem;
-      @include mobile {
+      @include mobile-styles {
         margin-top: 30px;
       }
       img {

diff --git a/sass/_footer.scss b/sass/_footer.scss
@@ -2,14 +2,14 @@
   padding: 60px 0;
   display: flex;
   justify-content: flex-end;
-  @include mobile {
+  @include mobile-styles {
     justify-content: flex-start;
     padding: 0 20px;
   }
   .content {
     display: flex;
     align-items: center;
-    @include mobile {
+    @include mobile-styles {
       width: 100%;
       justify-content: space-between;
     }
@@ -19,17 +19,20 @@
     }
     a.instagram-footer {
       margin: 0 20px;
-      @include mobile {
-        margin-left: -160px;
+      @include mobile-styles {
+        margin-left: -90px;
       }
     }
     p {
       font-family: "Lato";
       font-size: 1.4rem;
       margin-left: 60px;
-      @include mobile {
+      @include mobile-small {
         font-size: 1rem;
       }
+      @include tablet {
+        font-size: 1.4rem;
+      }
     }
   }
 }