ugurgaleri/resources/css/views/index.scss

@use "../variables.scss";
@use "../mixins.scss";
@use "../urls.scss";
@use "../keyframes";
@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;

.slideshow {
  margin: 0;
  padding: 0;
  height: 80vh;
  z-index: 0;
  list-style-type: none;

  @include mixins.header_overflow2 {
    height: calc(100vh - 45px);
  }

  li span {
    position: absolute;
    width: 100%;
    height: 80vh;
    left: 0;
    color: transparent;
    background-size: cover;
    background-position: 50% 90%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    animation: slideshow 30s linear infinite 0s;

    @include mixins.header_overflow2 {
      height: calc(100vh - 45px);
    }
  }

  li:nth-child(1) span {
    background-image: urls.$index_slide1;
    background-position-y: 50%;
  }
  li:nth-child(2) span {
    background-image: urls.$index_slide2;
    animation-delay: 6s;
  }
  li:nth-child(3) span {
    background-image: urls.$index_slide3;
    animation-delay: 12s;
  }
  li:nth-child(4) span {
    background-image: urls.$index_slide4;
    animation-delay: 18s;
  }
  li:nth-child(5) span {
    background-image: urls.$index_slide5;
    animation-delay: 24s;
  }
}

.araclar {
  background: variables.$clr_brand_gradient;
  text-align: center;

  a {
    display: inline-block;
    color: white;
    font: 600 32px "Montserrat", sans-serif;
    animation: important 2s infinite ease-in-out;

    &:hover {
      animation-play-state: paused;
      font-style: italic;
      color: variables.$clr_dark;
    }

    @include mixins.header_overflow2 {
      margin: 1.5vh 1vw;
    }
  }
}

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

  .table-item {
    margin-top: $table-item_margin_between_items;
    display: inline-flex;
    flex-direction: row;

    picture {
      place-self: center;
    }

    img {
      align-self: center;
      margin-right: math.div(variables.$px_horizontalPadding, 10);

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

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

      @include mixins.mx_mobile {
        margin: 0 0 2px 0;
      }
    }

    hr {
      min-height: 100%;
      max-height: 100vh;
      width: 5px;
      background: variables.$clr_brand;
      margin-right: 9 * math.div(variables.$px_horizontalPadding, 10) - 5;

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

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

      @include mixins.mx_mobile {
        width: $table-item_img_width + 20px;
        border: solid 1px variables.$clr_brand;
        margin: 0 0 18px 0;
      }
    }

    &:first-of-type {
      margin-top: 0;
    }

    @include mixins.mx_mobile {
      flex-direction: column;
      align-items: center;
    }
  }

  .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);
      }
    }

    hr {
      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 {
        margin: 0 0 18px 0;
      }
    }

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

      img {
        margin: 0 0 2px 0;
      }
    }
  }

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

  nav {
    display: flex;

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

    nav {
      .social-button {
        margin-right: 10px;
      }
    }
  }
}