AAAAAyes

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;
+    }
   }
 }