ugurgaleri/resources/css/views/index.scss

@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;
$social-button_inner_margin: 10px;

.showcase {
  display: flex;
  height: 90vh;
  background-image: urls.$index_showcase_bg_day;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  @include mixins.header_overflow2 {
    height: 95vh;
  }
}

.showcase-animation {
  animation: slideshow-appear 1000ms;
}

@keyframes slideshow-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.table {
  display: flex;
  flex-direction: column;

  .table-item {
    margin-top: $table-item_margin_between_items;
    display: inline-flex;
    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);
      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 {
    // vertical-separator makes an empty div behave as a separator which aligned vertically
    height: $table-item_img_width + 20px;
    border: solid 1px variables.$clr_brand;
    margin-right: 9 * math.div(variables.$px_horizontalPadding, 10);

    @include mixins.mx_index_brands_fix {
      margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
    }

    @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 {
    // reverse is a property given to .table-item elements
    // it contains styling for img and .vertical-separator elements contained under
    // a .table-item element
    flex-direction: row-reverse;

    img {
      margin-right: 0;
      margin-left: math.div(variables.$px_horizontalPadding, 10);;

      @include mixins.mx_index_brands_fix {
        margin-left: math.div(variables.$px_horizontalPadding2, 10);
      }

      @include mixins.mx_index_brands_fix2 {
        margin-left: math.div(variables.$px_horizontalPadding3, 10);
      }
    }

    .vertical-separator {
      margin-right: 0;
      margin-left: 9 * math.div(variables.$px_horizontalPadding, 10);;

      @include mixins.mx_index_brands_fix {
        margin-left: 9 * math.div(variables.$px_horizontalPadding2, 10);
      }

      @include mixins.mx_index_brands_fix2 {
        margin-left: 9 * math.div(variables.$px_horizontalPadding3, 10);
      }
    }

    @include mixins.mx_mobile {
      flex-direction: column;

      img {
        margin: 0 0 2px 0;
        width: $table-item_img_width;
      }
    }
  }

  .square {
    img {
      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;
      }
    }
  }

  .table-item-animation {
    animation: slide-in-right 3000ms;
  }

  .table-item-animation-reverse {
    animation: slide-in-left 3000ms;
  }

  @keyframes slide-in-left {
    from {
      transform: translateX(-5%);
      opacity: 0;
    }

    to {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  @keyframes slide-in-right {
    from {
      transform: translateX(+5%);
      opacity: 0;
    }

    to {
      transform: translateX(0%);
      opacity: 1;
    }
  }
}

.social {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: variables.$clr_brand_gradient;
  color: white;

  p {
    font: 700 $social-button_img_width "Montserrat", sans-serif;
    margin: 30px 0;
  }

  .social-button {
    display: inline-block;
    height: $social-button_img_width + (2 * $social-button_inner_margin);
    width: auto;
    border: 2px solid white;
    border-radius: 50%;
    margin: 0 10px 0 0;

    img {
      margin: 10px;
      height: $social-button_img_width;
      width: $social-button_img_width;
    }

    &:hover {
      background-color: white;

      img {
        filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
      }
    }

    &: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;
    }
  }
}