<commit_before>/* VARIABLES
------------------------------------------------------------------------------------------------- */

  $charcoal: #3E3E3E;
  $light-charcoal: #4B4B4B;
  $grey: #CACACA;
  $white: #FFFFFF;
  $red: #DC3D50;
  $blue: #515EA4;
  $bright-green: #84F965;
  $dull-green: #8BBE56;
  $yellow: #F8CD60;
  $purple: #B935C3;


  /*
    (TEXT) PARAMS
    =================
    1. Namespace
    2. Intensity
    3. Text color
    4. Background color (flat)
    5. Highlight #1 color
    6. Highlight #2 color
    7. Width (px)
    8. Height (px)
  */

  @mixin textGlitch($name, $intensity, $textColor, $background, $highlightColor1, $highlightColor2, $width, $height) {

    color: $textColor;
    //position: relative;
    $steps: $intensity;

    // Ensure the @keyframes are generated at the root level
    @at-root {
      // We need two different ones
      @for $i from 1 through 2 {
        @keyframes #{$name}-anim-#{$i} {
          @for $i from 0 through $steps {
            #{percentage($i*(1/$steps))} {
              clip: rect(
                random($height)+px,
                $width+px,
                random($height)+px,
                0
              );
            }
          }
        }
      }
    }
    &:before,
    &:after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: $background;
      clip: rect(0, 0, 0, 0);
      opacity: 0.95;
    }
    &:after {
      left: 2px;
      text-shadow: -1px 0 $highlightColor1;
      animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
    }
    &:before {
      left: -2px;
      text-shadow: 2px 0 $highlightColor2;
      animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
    }
  }

  @mixin buttonBackgroundGlitch($colour1, $colour2, $colour3) {
    &:before,
    &:after {
      content: '';
      animation-name: bgGlitch;
      animation-fill-mode: both;
      animation-iteration-count: infinite;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    @keyframes bgGlitch {
      0% {
        height: 50%;
        background-color: $colour1;
      }

      10% {
        height: 10%;
      }

      17% {
        background-color: $colour2;
        width: 80%;
      }<commit_msg>updated variables<commit_after>/* VARIABLES
------------------------------------------------------------------------------------------------- */

  $charcoal: #3E3E3E;
  $light-charcoal: #4B4B4B;
  $grey: #CACACA;
  $white: #FFFFFF;
  $red: #DC3D50;
  $blue: #515EA4;
  $bright-green: #84F965;
  $dull-green: #8BBE56;
  $yellow: #F8CD60;
  $purple: #B935C3;


  /*
    (TEXT) PARAMS
    =================
    1. Namespace
    2. Intensity
    3. Text color
    4. Background color (flat)
    5. Highlight #1 color
    6. Highlight #2 color
    7. Width (px)
    8. Height (px)
  */

  @mixin textGlitch($name, $intensity, $textColor, $background, $highlightColor1, $highlightColor2, $width, $height) {

    color: $textColor;
    //position: relative;
    $steps: $intensity;

    // Ensure the @keyframes are generated at the root level
    @at-root {
      // We need two different ones
      @for $i from 1 through 2 {
        @keyframes #{$name}-anim-#{$i} {
          @for $i from 0 through $steps {
            #{percentage($i*(1/$steps))} {
              clip: rect(
                random($height)+px,
                $width+px,
                random($height)+px,
                0
              );
            }
          }
        }
      }
    }
    &:before,
    &:after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: $background;
      clip: rect(0, 0, 0, 0);
      opacity: 0.95;
    }
    &:after {
      left: 2px;
      text-shadow: -1px 0 $highlightColor1;
      animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
    }
    &:before {
      left: -2px;
      text-shadow: 2px 0 $highlightColor2;
      animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
    }
  }

  @mixin buttonBackgroundGlitch($colour1, $colour2, $colour3) {
    &:before,
    &:after {
      content: '';
      animation-name: testAnim;
      animation-fill-mode: both;
      animation-iteration-count: infinite;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    @keyframes testAnim {
      0% {
        height: 50%;
        background-color: $colour1;
      }

      10% {
        height: 10%;
      }

      17% {
        background-color: $colour2;
        width: 80%;
      }
{'fraction_non_alphanumeric': 0.18173950670705322, 'fraction_numerical': 0.03894418000865426, 'mean_word_length': 1.6059751972942502, 'pattern_counts': {'":': 0, '<': 3, '<?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': '4194509', 'n_tokens_mistral': 1660, 'n_tokens_neox': 1510, 'n_words': 367}