<commit_before>// Background animation with dots moving along 3 circular rings

$background-color: #131313

$num-rings: 4
$dots-per-ring: 5

$base-ring-size: 60vw
$ring-size-step: 12vw

$base-ring-opacity: .05
$ring-opacity-step: -1 / 100

@keyframes spin
  from
    transform: translate(-50%, -50%) rotate(0deg)

  to
    transform: translate(-50%, -50%) rotate(360deg)


.rings
  position: fixed
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  z-index: -1

// Properties for rings


.ring
  position: absolute
  top: 50vh
  left: 50vw
  transform: translate(-50%, -50%)
  border: .25vh solid $white
  border-radius: 50%

  // Some properties change between rings
  @for $i from 0 to $num-rings
    &:nth-child(#{$i + 1})
      $size: $base-ring-size + $ring-size-step * $i
      width: $size
      height: $size
      opacity: $base-ring-opacity + $ring-opacity-step * $i
      // Animations
      animation: spin linear infinite
      animation-duration: 80s - 15s * $i
      // Even go forward; odd backwards
      animation-direction: if($i % 2 == 0, normal, reverse)


// Dots


.dot
  position: absolute
  left: 50%
  top: 0
  // Outer rings have smaller dots
  $a: 2.5vw // Baseline size
  $b: 1.5    // % of ring size to subtract from baseline size
  $size: calc(#{$a} - #{$b + 0%})
  width: $size
  height: $size
  // This evaluates to 50% of parent element's size by deconstructing $size to get the value of 1%
  // of the parent's size
  transform-origin: 0% calc(-1 * (100% - #{$a}) / #{$b} * 50)
  // Shouldn't be able to see the ring underneath
  background: $background-color
  // Outlines don't go circular and borders increase element size, so box-shadow it is. If it
  // wasn't inset the shadow would overlap with the underlying ring and cause a lighter square
  // at the intersection.
  box-shadow: inset 0 0 0 .25vh $white
  // Round :)
  border-radius: 50%

  // Dots should be evenly spaced along their ring.
  @for $i from 0 to $dots-per-ring
    &:nth-child(#{$i + 1})
      // translation centers the dots on their rings
      transform: rotate(#{(360 / $dots-per-ring) * $i}deg) translate(-50%, -50%)<commit_msg>make rings' dot styles more specific<commit_after>// Background animation with dots moving along 3 circular rings

$background-color: #131313

$num-rings: 4
$dots-per-ring: 5

$base-ring-size: 60vw
$ring-size-step: 12vw

$base-ring-opacity: .05
$ring-opacity-step: -1 / 100

@keyframes spin
  from
    transform: translate(-50%, -50%) rotate(0deg)

  to
    transform: translate(-50%, -50%) rotate(360deg)


.rings
  position: fixed
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  z-index: -1

// Properties for rings


.ring
  position: absolute
  top: 50vh
  left: 50vw
  transform: translate(-50%, -50%)
  border: .25vh solid $white
  border-radius: 50%

  // Some properties change between rings
  @for $i from 0 to $num-rings
    &:nth-child(#{$i + 1})
      $size: $base-ring-size + $ring-size-step * $i
      width: $size
      height: $size
      opacity: $base-ring-opacity + $ring-opacity-step * $i
      // Animations
      animation: spin linear infinite
      animation-duration: 80s - 15s * $i
      // Even go forward; odd backwards
      animation-direction: if($i % 2 == 0, normal, reverse)


  // Dots


  .dot
    position: absolute
    left: 50%
    top: 0
    // Outer rings have smaller dots
    $a: 2.5vw // Baseline size
    $b: 1.5    // % of ring size to subtract from baseline size
    $size: calc(#{$a} - #{$b + 0%})
    width: $size
    height: $size
    // This evaluates to 50% of parent element's size by deconstructing $size to get the value of 1%
    // of the parent's size
    transform-origin: 0% calc(-1 * (100% - #{$a}) / #{$b} * 50)
    // Shouldn't be able to see the ring underneath
    background: $background-color
    // Outlines don't go circular and borders increase element size, so box-shadow it is. If it
    // wasn't inset the shadow would overlap with the underlying ring and cause a lighter square
    // at the intersection.
    box-shadow: inset 0 0 0 .25vh $white
    // Round :)
    border-radius: 50%

    // Dots should be evenly spaced along their ring.
    @for $i from 0 to $dots-per-ring
      &:nth-child(#{$i + 1})
        // translation centers the dots on their rings
        transform: rotate(#{(360 / $dots-per-ring) * $i}deg) translate(-50%, -50%)
{'fraction_non_alphanumeric': 0.1312113579116098, 'fraction_numerical': 0.04305014884359973, 'mean_word_length': 2.615894039735099, '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': '6804772', 'n_tokens_mistral': 1641, 'n_tokens_neox': 1432, 'n_words': 522}