styles.scss

/*-- scss:rules --*/

.quarto-title-banner {
  background-color: $brand-white;
}

.sourceCode {
  border-radius: 0 !important;
  border-color: $brand-blue;
}

$navbar-transparent-width: 10%;
$navbar-stripe-widths: (10%, 25%, 55%);
$navbar-stripe-colors: ($brand-red, $brand-blue, $brand-yellow);
$navbar-stripe-angle: 80deg;
$navbar-stripe-epsilon: 1px;

@keyframes Animation { 
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(1.05); }
}

.navbar {
  position: relative;
  overflow: hidden;
  background-color: $brand-grey;
  z-index: 1;

  // Ensure content stays on top
  > * {
    position: relative;
    z-index: 2;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    transform-origin: right center;
    will-change: transform;
    animation: Animation 15s ease-in-out infinite;
    z-index: -1;

    $gradient-stops: ();
    $current-position: 0%;
    $gradient-stops: join($gradient-stops, (transparent 0%, transparent #{$navbar-transparent-width}), comma);
    $current-position: $navbar-transparent-width;
    
    @for $i from 1 through length($navbar-stripe-colors) {
      $color: nth($navbar-stripe-colors, $i);
      $width: nth($navbar-stripe-widths, $i);

      $start-position: $current-position;
      $end-position: $start-position + $width;
      
      $gradient-stops: join($gradient-stops, ($color calc(#{$start-position} + #{$navbar-stripe-epsilon}), $color #{$end-position}), comma);
      $current-position: $end-position;
    }

    background-image: linear-gradient($navbar-stripe-angle, $gradient-stops);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}