<commit_before>task-progress {
  #task-progress-container {
    display: block;
    padding: 15px 0 30px 0;
    font-size: 24px;
  }

  #navigation {
    text-align: center;
    padding: 15px 0 20px 0;
  }

  #progress {
    width: 240px;
    margin: auto;
    display: flex;
  }

  .progress-sub {
    flex: 1 0 240px;
    transition: transform 0.8s ease-in-out;
  }

  .completed {
    width: 240px;
    height: 240px;
    border-radius: 100%;
    background-color: map-get($colors, tertiary);
  }

  .checkmark {
    font-size: 220px;
    padding-left: 35px;
    transition: transform 0.8s ease-in;
  }

  .counter {
    text-align: center;
    margin-top: -135px;
    transition: transform 0.4s ease-in-out;
  }

  .large {
    font-size: 100px;
    line-height: 2px
  }

  .small {
    margin-top: -20px;
    font-size: 18px;
  }

  $particles: 50;
  $width: 500;
  $height: 500;

  // Create the explosion...
  $box-shadow: ();
  $box-shadow2: ();
  @for $i from 0 through $particles {
    $box-shadow: $box-shadow,
                 random($width)-$width / 2 + px
                 random($height)-$height / 1.2 + px
                 hsl(random(360), 100, 50);
    $box-shadow2: $box-shadow2, 0 0 #fff
  }
  @mixin keyframes ($animationName) {
      @-webkit-keyframes #{$animationName} {
          @content;
      }

      @-moz-keyframes #{$animationName} {
          @content;
      }

      @-o-keyframes #{$animationName} {
          @content;
      }

      @-ms-keyframes #{$animationName} {
          @content;
      }

      @keyframes #{$animationName} {
          @content;
      }
  }

  @mixin animation-delay ($settings) {
      -moz-animation-delay: $settings;
      -webkit-animation-delay: $settings;
      -o-animation-delay: $settings;
      -ms-animation-delay: $settings;
      animation-delay: $settings;
  }

  @mixin animation-duration ($settings) {
      -moz-animation-duration: $settings;
      -webkit-animation-duration: $settings;
      -o-animation-duration: $settings;
      -ms-animation-duration: $settings;
      animation-duration: $settings;
  }

  @mixin animation ($settings) {
      -moz-animation: $settings;
      -webkit-animation: $settings;
      -o-animation: $settings;
      -ms-animation: $settings;
      animation: $settings;
  }

  @mixin transform ($settings) {
      transform: $settings;
      -moz-transform: $settings;
      -webkit-transform: $settings;
      -o-transform: $settings;
      -ms-transform: $settings;
  }

  .pyro > .before, .pyro > .after {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: $box-shadow2;
    @include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards));
  }

  /*.pyro > .after {
    @include animation-delay((1.25s, 1.25s, 1.25s));
    @include animation-duration((1.25s, 1.25s, 6.25s));
  }*/

  @include keyframes(bang) {
    to {
      box-shadow:$box-shadow;
    }
  }

  @include keyframes(gravity)  {
    to {
      @include transform(translateY(350px));
      opacity: 0;
    }
  }

  @include keyframes(position) {
    0%, 19.9% {
      margin-top: 10%;
      margin-left: 40%;
    }
    20%, 39.9% {
      margin-top: 40%;
      margin-left: 30%;<commit_msg>Responsive active and complete task-progress<commit_after>task-progress {
  #task-progress-container {
    display: block;
    padding: 15px 0 30px 0;
    font-size: 24px;
  }

  #navigation {
    text-align: center;
    padding: 15px 0 20px 0;
  }

  #progress {
    width: 60vw;
    margin: auto;
    display: flex;
  }

  .progress-sub {
    flex: 1 0 60vw;
    transition: transform 0.8s ease-in-out;
  }

  .completed {
    width: 60vw;
    height: 60vw;
    border-radius: 100%;
    background-color: map-get($colors, tertiary);
  }

  .checkmark {
    font-size: 220px;
    padding-left: 10vw;
    margin-top: 0vw;
    transition: transform 0.8s ease-in;
    @media screen and (max-width: 320px) {
      font-size: 200px;
      padding-left: 6vw;
      margin-top: -5vw;
    }
  }

  .counter {
    text-align: center;
    margin-top: -34vw;
    transition: transform 0.4s ease-in-out;
  }

  .large {
    font-size: 100px;
    line-height: 2px
  }

  .small {
    margin-top: -20px;
    font-size: 18px;
  }

  // Create the explosion...
  $particles: 50;
  $width: 500;
  $height: 500;

  $box-shadow: ();
  $box-shadow2: ();
  @for $i from 0 through $particles {
    $box-shadow: $box-shadow,
                 random($width)-$width / 2 + px
                 random($height)-$height / 1.2 + px
                 hsl(random(360), 100, 50);
    $box-shadow2: $box-shadow2, 0 0 #fff
  }
  @mixin keyframes ($animationName) {
      @-webkit-keyframes #{$animationName} {
          @content;
      }

      @-moz-keyframes #{$animationName} {
          @content;
      }

      @-o-keyframes #{$animationName} {
          @content;
      }

      @-ms-keyframes #{$animationName} {
          @content;
      }

      @keyframes #{$animationName} {
          @content;
      }
  }

  @mixin animation-delay ($settings) {
      -moz-animation-delay: $settings;
      -webkit-animation-delay: $settings;
      -o-animation-delay: $settings;
      -ms-animation-delay: $settings;
      animation-delay: $settings;
  }

  @mixin animation-duration ($settings) {
      -moz-animation-duration: $settings;
      -webkit-animation-duration: $settings;
      -o-animation-duration: $settings;
      -ms-animation-duration: $settings;
      animation-duration: $settings;
  }

  @mixin animation ($settings) {
      -moz-animation: $settings;
      -webkit-animation: $settings;
      -o-animation: $settings;
      -ms-animation: $settings;
      animation: $settings;
  }

  @mixin transform ($settings) {
      transform: $settings;
      -moz-transform: $settings;
      -webkit-transform: $settings;
      -o-transform: $settings;
      -ms-transform: $settings;
  }

  .pyro > .before, .pyro > .after {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: $box-shadow2;
    @include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards));
  }

  @include keyframes(bang) {
    to {
      box-shadow:$box-shadow;
    }
  }

  @include keyframes(gravity)  {
    to {
      @include transform(translateY(350px));
      opacity: 0;
    }
  }

  @include keyframes(position) {
    0%, 19.9% {
      margin-top: 10%;
      margin-left: 40%;
    }
    20%, 39.9% {
      margin-top: 40%;
      margin-left: 30%;
{'fraction_non_alphanumeric': 0.14583963691376703, 'fraction_numerical': 0.036308623298033284, 'mean_word_length': 2.1556085918854415, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 8, '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': '927041', 'n_tokens_mistral': 2509, 'n_tokens_neox': 2246, 'n_words': 488}