<commit_before>$Banner-height: 80px;
$Banner-height-mobile: 60px;
$Banner-animation-time: 0.3s;
$Banner-backgorund-color: #DEFEF0;
$Banner-image-height: 50px;
$Banner-image-height-mobile: 30px;

.Banner {
  width: 100%;
  height: $Banner-height;
  padding: 0 $Theme-spacing-default;

  position: fixed;
  top: -$Banner-height;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  background-color: $Banner-backgorund-color;

  z-index: 2;

  @include media('<=smallDesktop') {
    height: $Banner-height-mobile;
    padding: $Theme-spacing-small;

    top: -$Banner-height-mobile;

  }
}

.Banner-date {
  font-weight: bold;
}

.Banner-content {
  @include font-properties(subvisual, small);

  display: flex;
  flex-direction: row;
  align-items: center;
}

.Banner-button {
  @include media('<=smallDesktop') {
    height: 30px;
  }
}

.Banner-image {
  height: $Banner-image-height;

  @include media('<=smallDesktop') {
    height: $Banner-image-height-mobile;
  }
}

.Banner-text {
  margin-left: $Theme-spacing-default;

  @include media('<=smallDesktop') {
    display: none;
  }
}

.Banner--bellowNav {
  animation-duration: $Banner-animation-time;
  animation-name: bellowNav;
  animation-fill-mode: forwards;

  @keyframes bellowNav {
    from {
      transform: translateY($Banner-height);
    }

    to {
      transform: translateY($Banner-height * 2);
    }
  }

  @include media('<=smallDesktop') {
    animation-name: bellowNavMobile;

    @keyframes bellowNavMobile {
      from {
        transform: translateY($Banner-height-mobile);
      }

      to {
        transform: translateY($Banner-height-mobile * 2);
      }
    }
  }
}

.Banner--animateTop {
  animation-duration: $Banner-animation-time;
  animation-name: slideUp;
  animation-fill-mode: forwards;

  @keyframes slideUp {
    from {
      transform: translateY($Banner-height * 2);
    }

    to {
      transform: translateY($Banner-height);
    }
  }

  @include media('<=smallDesktop') {
    animation-name: slideUpMobile;

    @keyframes slideUpMobile {
      from {
        transform: translateY($Banner-height-mobile * 2);
      }

      to {
        transform: translateY($Banner-height-mobile);
      }
    }
  }
}

.Banner--show {
  animation-duration: $Banner-animation-time;
  animation-name: show;
  animation-fill-mode: forwards;

  @keyframes show {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY($Banner-height);
    }
  }

  @include media('<=smallDesktop') {
    animation-name: showMobile;

    @keyframes showMobile {
      from {
        transform: translateY(0);
      }

      to {
        transform: translateY($Banner-height-mobile);
      }
    }
  }
}

.Banner--hide {
  transform: translateY($Banner-height * 2);
  animation-duration: $Banner-animation-time;
  animation-name: hide;
  animation-fill-mode: forwards;

  @keyframes hide {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @include media('<=smallDesktop') {
    transform: translateY($Banner-height-mobile * 2);
  }
}
<commit_msg>Fix scss lint offenses<commit_after>$Banner-height: 80px;
$Banner-height-mobile: 60px;
$Banner-animation-time: 0.3s;
$Banner-backgorund-color: #defef0;
$Banner-image-height: 50px;
$Banner-image-height-mobile: 30px;

.Banner {
  position: fixed;
  top: -$Banner-height;
  z-index: 2;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  height: $Banner-height;
  padding: 0 $Theme-spacing-default;

  background-color: $Banner-backgorund-color;

  @include media('<=smallDesktop') {
    top: -$Banner-height-mobile;

    height: $Banner-height-mobile;
    padding: $Theme-spacing-small;
  }
}

.Banner-date {
  font-weight: bold;
}

.Banner-content {
  @include font-properties(subvisual, small);

  display: flex;
  flex-direction: row;
  align-items: center;
}

.Banner-button {
  @include media('<=smallDesktop') {
    height: 30px;
  }
}

.Banner-image {
  height: $Banner-image-height;

  @include media('<=smallDesktop') {
    height: $Banner-image-height-mobile;
  }
}

.Banner-text {
  margin-left: $Theme-spacing-default;

  @include media('<=smallDesktop') {
    display: none;
  }
}

.Banner--bellowNav {
  animation-duration: $Banner-animation-time;
  animation-name: bellowNav;
  animation-fill-mode: forwards;

  @keyframes bellowNav {
    from {
      transform: translateY($Banner-height);
    }

    to {
      transform: translateY($Banner-height * 2);
    }
  }

  @include media('<=smallDesktop') {
    animation-name: bellowNavMobile;

    @keyframes bellowNavMobile {
      from {
        transform: translateY($Banner-height-mobile);
      }

      to {
        transform: translateY($Banner-height-mobile * 2);
      }
    }
  }
}

.Banner--animateTop {
  animation-duration: $Banner-animation-time;
  animation-name: slideUp;
  animation-fill-mode: forwards;

  @keyframes slideUp {
    from {
      transform: translateY($Banner-height * 2);
    }

    to {
      transform: translateY($Banner-height);
    }
  }

  @include media('<=smallDesktop') {
    animation-name: slideUpMobile;

    @keyframes slideUpMobile {
      from {
        transform: translateY($Banner-height-mobile * 2);
      }

      to {
        transform: translateY($Banner-height-mobile);
      }
    }
  }
}

.Banner--show {
  animation-duration: $Banner-animation-time;
  animation-name: show;
  animation-fill-mode: forwards;

  @keyframes show {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY($Banner-height);
    }
  }

  @include media('<=smallDesktop') {
    animation-name: showMobile;

    @keyframes showMobile {
      from {
        transform: translateY(0);
      }

      to {
        transform: translateY($Banner-height-mobile);
      }
    }
  }
}

.Banner--hide {
  transform: translateY($Banner-height * 2);

  animation-duration: $Banner-animation-time;
  animation-name: hide;
  animation-fill-mode: forwards;

  @keyframes hide {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @include media('<=smallDesktop') {
    transform: translateY($Banner-height-mobile * 2);
  }
}

{'fraction_non_alphanumeric': 0.14423076923076922, 'fraction_numerical': 0.008974358974358974, 'mean_word_length': 2.7755595886267392, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4220948', 'n_tokens_mistral': 2279, 'n_tokens_neox': 2133, 'n_words': 371}