AAAAAyes

resources/css/mixins.scss

@@ -34,4 +34,10 @@
   @media screen and (max-width: variables.$index_brands_fix2) {
     @content;
   }
+}
+
+@mixin mx_mobile {
+  @media screen and (max-width: 400px) {
+    @content;
+  }
 }

resources/css/partials/footer.scss

@@ -6,7 +6,8 @@
   justify-content: space-between;
   background-color: variables.$clr_footerBackground;
   font: 16px "Montserrat", sans-serif;
-  padding: 50px 200px;
+  padding-top: 50px;
+  padding-bottom: 50px;
 
   #small-logo {
     height: 50px;
@@ -23,6 +24,10 @@
         margin: 0 0 16px 0;
         font: 700 18px "Montserrat", sans-serif;
         color: variables.$clr_footerSleepHigh;
+
+        @include mixins.mx_mobile {
+          font-size: 14px;
+        }
       }
 
       a {
@@ -32,6 +37,10 @@
         &:hover {
           font-size: 17px;
           color: variables.$clr_footerActive;
+
+          @include mixins.mx_mobile {
+            font-size: 13px;
+          }
         }
       }
 
@@ -42,11 +51,16 @@
       }
     }
   }
+
+  @include mixins.mx_mobile {
+    font-size: 12px;
+  }
 }
 
 #footer-stateless {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   background-color: variables.$clr_brand;
   color: white;
   font: 14px "Montserrat", sans-serif;
@@ -63,5 +77,13 @@
   .smaller {
     font-weight: 200;
     font-size: 12px;
+
+    @include mixins.mx_mobile {
+      font-size: 8px;
+    }
+  }
+
+  @include mixins.mx_mobile {
+    font-size: 10px;
   }
 }

resources/css/urls.scss

@@ -0,0 +1,2 @@
+$index_showcase_bg_day: url("../img/index/g.jpg");
+$index_showcase_bg_night: url("../img/index/y.jpg");

resources/css/variables.scss

@@ -2,8 +2,8 @@ $header_overflow: 1200px;
 $header_overflow2: 850px;
 $index_brands_fix: 1100px;
 $index_brands_fix2: 850px;
-$footer_overflow2: 880px;
-$footer_overflow: 1110px;
+$footer_overflow: 1200px;
+$footer_overflow2: 850px;
 
 $px_headerPadding: 150px;
 $px_headerPadding2: 50px;

resources/css/views/index.scss

@@ -1,8 +1,11 @@
 @use "../variables.scss";
 @use "../mixins.scss";
+@use "../urls.scss";
 @use "sass:math";
 
+$table-item_img_width_l: 150px;
 $table-item_img_width: 100px;
+$table-item_img_width_s: 60px;
 $table-item_margin_between_items: 10px;
 
 $social-button_img_width: 32px;
@@ -10,12 +13,29 @@ $social-button_inner_margin: 10px;
 
 .showcase {
   display: flex;
-  height: 100vh;
-  background-image: url("../../resources/img/index/g.jpg"), url("../../resources/img/index/y.jpg");
+  height: 90vh;
+  background-image: urls.$index_showcase_bg_day;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
-  backdrop-filter: brightness(0%);
+
+  @include mixins.header_overflow2 {
+    height: 95vh;
+  }
+}
+
+.showcase-animation {
+  animation: slideshow-appear 1000ms;
+}
+
+@keyframes slideshow-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 .table {
@@ -28,23 +48,45 @@ $social-button_inner_margin: 10px;
     flex-direction: row;
     align-items: center;
 
+    p {
+      font: x-large sans-serif;
+
+      @include mixins.mx_index_brands_fix {
+        font-size: large;
+      }
+
+      @include mixins.mx_index_brands_fix2 {
+        font-size: xx-small;
+      }
+    }
+
     img {
       margin-right: math.div(variables.$px_horizontalPadding, 10);
-      height: auto;
-      width: $table-item_img_width;
+      width: $table-item_img_width_l;
 
       @include mixins.mx_index_brands_fix {
         margin-right: math.div(variables.$px_horizontalPadding2, 10);
+        width: $table-item_img_width;
       }
 
       @include mixins.mx_index_brands_fix2 {
         margin-right: math.div(variables.$px_horizontalPadding2, 10);
+        width: $table-item_img_width_s;
+      }
+
+      @include mixins.mx_mobile {
+        margin: 0 0 2px 0;
+        width: $table-item_img_width;
       }
     }
 
     &:first-of-type {
       margin-top: 0;
     }
+
+    @include mixins.mx_mobile {
+      flex-direction: column;
+    }
   }
 
   .vertical-separator {
@@ -60,6 +102,22 @@ $social-button_inner_margin: 10px;
     @include mixins.mx_index_brands_fix2 {
       margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10);
     }
+
+    @include mixins.mx_mobile {
+      display: none;
+    }
+  }
+
+  .horizontal-separator {
+    // horizontal-separator makes an empty div behave as a separator which aligned horizontally
+    display: none;
+    width: $table-item_img_width + 20px;
+    border: solid 1px variables.$clr_brand;
+    margin: 0 0 18px 0;
+
+    @include mixins.mx_mobile {
+      display: block;
+    }
   }
 
   .reverse {
@@ -83,6 +141,10 @@ $social-button_inner_margin: 10px;
 
     p {
       text-align: right;
+
+      @include mixins.mx_mobile {
+        text-align: left;
+      }
     }
 
     .vertical-separator {
@@ -97,11 +159,28 @@ $social-button_inner_margin: 10px;
         margin-left: 9 * math.div(variables.$px_horizontalPadding3, 10);
       }
     }
+
+    @include mixins.mx_mobile {
+      flex-direction: column;
+    }
   }
 
   .square {
     img {
-      height: $table-item_img_width;
+      height: $table-item_img_width_l;
+      width: auto;
+
+      @include mixins.mx_index_brands_fix {
+        height: $table-item_img_width;
+      }
+
+      @include mixins.mx_index_brands_fix2 {
+        height: $table-item_img_width_s;
+      }
+
+      @include mixins.mx_mobile {
+        height: $table-item_img_width;
+      }
     }
   }
 
@@ -148,6 +227,7 @@ $social-button_inner_margin: 10px;
 
   p {
     font: 700 $social-button_img_width "Montserrat", sans-serif;
+    margin: 30px 0;
   }
 
   .social-button {
@@ -175,5 +255,19 @@ $social-button_inner_margin: 10px;
     &:last-of-type {
       margin: 0;
     }
+
+    @include mixins.mx_mobile {
+      margin: 0 0 30px 0;
+    }
+  }
+
+  @include mixins.mx_mobile {
+    flex-direction: column;
+
+    p {
+      font-size: 20px;
+      font-weight: 600;
+      text-align: center;
+    }
   }
 }