<commit_before>/* ==========================================================================
   OFF CANVAS SLIDING MENU
   Based on code by <NAME>
   http://tableless.com.br/fazendo-um-slide-menu-mobile-sem-plugin/
   ========================================================================== */

/* Slider */

.slide {
    transform: translateX(-50%);
    @include media($medium) {
      transform: translateX(em(-300));
    }
    @include media($large) {
      transform: translateX(em(-400));
    }
  }

/*
   Sliding menu button
   ========================================================================== */

.sliding-menu-button {
  position: fixed;
  transform: translateZ(0);
  backface-visibility: hidden; /* fix scroll jank */
  //top: $gutter;
  top: 0;
  right: 0;
  display: block;
	background: #C40729;
  outline: 0;
  border: 2.5px solid transparent;
  cursor: pointer;
  z-index: 30;
  box-sizing: border-box;
  &:hover {
    background: #181818;
  }
  transition: $sliding-menu-animation;
  height: 61px;
  &.slide {
    	background: #C40729;
    transform: translateX(0); /* don't slide close button on small screens only */
    @include media($medium) {
      transform: translateX(em(-300)); /* reset slide position */
    }
    @include media($large) {
      transform: translateX(em(-400)); /* reset slide position */
    }
  }
}

.nav-slide-lines {
  position: relative;
  top: 50%;
  transform: translate(0, -250%);

  width: 30px;
  height: 4px;
  margin: 0 15px;
  background: #fff;

  &::before, &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    width: 100%;
    display: block;
    transform-origin: right;
    transition: transform .3s ease;
  }
  &::before {
    transform: translate(0, 200%) scaleX(0.6);
  }
  &::after {
    transform: translate(0, 400%) scaleX(0.3);
  }
}
*:hover > .nav-slide-lines::before {
  transform: translate(0, 200%) scaleX(1);
}
*:hover > .nav-slide-lines::after {
  transform: translate(0, 400%) scaleX(1);
}

/*
   Sliding content
   ========================================================================== */

.sliding-menu-content::-webkit-scrollbar {
    display: none;  // Safari and Chrome
}

.sliding-menu-content {
  -ms-overflow-style: none;  // IE 10+ hide scrollbar
  //overflow: -moz-scrollbars-none;  // Firefox
  position: fixed;
  top: 0;
  left: 100%;
  padding: em(22) 0;
  text-align: left;
  height: 100%;
  width: 100%;
  

  &.is-visible {
    z-index: 20;
    transform: translate(-100%, 0);
  }

  @include media($medium) {
    display: none;
  }
  z-index: 20;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  h1 {
    margin: 0 20% 0 10%;
    @include media($large) {
      margin-right: 20%;
    }
    color: $white;
    @include font-size(14);
    @include media($small) {
      @include font-size(16);
    }
    span {
      display: block;
      @include font-size(32,no,1);
      @include media($small) {
        @include font-size(48,no,1);
      }
      font-family: $base-font;
      text-transform: uppercase;
      //font-weight: 400;
    }
  }
  ul {
    margin: 0;
    @include media($large) {
      margin-right: 0;
    }
    padding-left: 30%;
    padding-right: 30%;
  }
  ul,
  li {
    list-style: none;
  }
  li {
    display: block;
    position: relative;
    //min-height: 70px;
    @include media($small) {
      //min-height: 80px;
    }
  }
  .menu-item {
    a {
      display: block;
      color: $white;
      text-decoration: none;
    }
    .teaser {
      position: absolute;
      left: 0;
      margin-bottom: 0;
      width: 50px;
      border: 2px solid $white;
      margin-bottom: ($gutter / 2);
      opacity: 0.6;
      @include media($small) {
        width: 150px;
      }
    }
    a:hover .teaser {
      opacity: 1;
    }
    .title {
      display: block;
      padding-top: 1em;
      //margin-left: 60px;
      font-family: $alt-font;
      @include font-size(24,no);
      //font-weight: 700;
      @include media($small) {
        //margin-left: 170px;
        @include font-size(32,no);
      }
    }
    .excerpt {
      margin-top: 0;
      margin-left: 60px;
      @include font-size(14,no);
      @include media($small) {
        margin-left: 170px;
        @include font-size(16,no);
      }
    }
  }
  .sub-menu-item > li a {
    display: block;
    color: $white;
    font-style: italic;
  }
  .menu-item .home a {
    @include font-size(32);
  }
  .rotatingBackground {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: center right;
    background: #181818;
    z-index: 10;

    transition: transform .6s ease;
  }
  &.is-visible .rotatingBackground {
    transform: scaleX(1);
  }
  .content {
    position: relative;
    z-index: 20;
    opacity: 0;
  }
  &.is-visible .content {
    animation: fadeIn .6s ease .3s 1 forwards;
  }
}

@keyframes fadeIn {
  0% {  opacity: 0; }
  100% {  opacity: 1; }
}

/* Dim content when off canvas nav slides in */

.menu-screen {
  @include position(fixed, 0 0 0 0);
  visibility: hidden;
  z-index: 4;
  &.is-visible {
    visibility: visible;
    &:hover {
      cursor: pointer;
    }
  }
}


@include media($medium){
  .sliding-menu-button {
    display: none !important;
  }
}<commit_msg>fix navbar transparent background on full scroll<commit_after>/* ==========================================================================
   OFF CANVAS SLIDING MENU
   Based on code by <NAME>
   http://tableless.com.br/fazendo-um-slide-menu-mobile-sem-plugin/
   ========================================================================== */

/* Slider */

.slide {
    transform: translateX(-50%);
    @include media($medium) {
      transform: translateX(em(-300));
    }
    @include media($large) {
      transform: translateX(em(-400));
    }
  }

/*
   Sliding menu button
   ========================================================================== */

.sliding-menu-button {
  position: fixed;
  transform: translateZ(0);
  backface-visibility: hidden; /* fix scroll jank */
  //top: $gutter;
  top: 0;
  right: 0;
  display: block;
	background: #C40729;
  outline: 0;
  border: 2.5px solid transparent;
  cursor: pointer;
  z-index: 30;
  box-sizing: border-box;
  &:hover {
    background: #181818;
  }
  transition: $sliding-menu-animation;
  height: 61px;
  &.slide {
    	background: #C40729;
    transform: translateX(0); /* don't slide close button on small screens only */
    @include media($medium) {
      transform: translateX(em(-300)); /* reset slide position */
    }
    @include media($large) {
      transform: translateX(em(-400)); /* reset slide position */
    }
  }
}

.nav-slide-lines {
  position: relative;
  top: 50%;
  transform: translate(0, -250%);

  width: 30px;
  height: 4px;
  margin: 0 15px;
  background: #fff;

  &::before, &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    width: 100%;
    display: block;
    transform-origin: right;
    transition: transform .3s ease;
  }
  &::before {
    transform: translate(0, 200%) scaleX(0.6);
  }
  &::after {
    transform: translate(0, 400%) scaleX(0.3);
  }
}
*:hover > .nav-slide-lines::before {
  transform: translate(0, 200%) scaleX(1);
}
*:hover > .nav-slide-lines::after {
  transform: translate(0, 400%) scaleX(1);
}

/*
   Sliding content
   ========================================================================== */

.sliding-menu-content::-webkit-scrollbar {
    display: none;  // Safari and Chrome
}

.sliding-menu-content {
  -ms-overflow-style: none;  // IE 10+ hide scrollbar
  //overflow: -moz-scrollbars-none;  // Firefox
  position: fixed;
  top: 0;
  left: 100%;
  padding: em(22) 0;
  text-align: left;
  height: 100%;
  width: 100%;
  

  &.is-visible {
    z-index: 20;
    transform: translate(-100%, 0);
  }

  @include media($medium) {
    display: none;
  }
  z-index: 20;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  h1 {
    margin: 0 20% 0 10%;
    @include media($large) {
      margin-right: 20%;
    }
    color: $white;
    @include font-size(14);
    @include media($small) {
      @include font-size(16);
    }
    span {
      display: block;
      @include font-size(32,no,1);
      @include media($small) {
        @include font-size(48,no,1);
      }
      font-family: $base-font;
      text-transform: uppercase;
      //font-weight: 400;
    }
  }
  ul {
    margin: 0;
    @include media($large) {
      margin-right: 0;
    }
    padding-left: 30%;
    padding-right: 30%;
  }
  ul,
  li {
    list-style: none;
  }
  li {
    display: block;
    position: relative;
    //min-height: 70px;
    @include media($small) {
      //min-height: 80px;
    }
  }
  .menu-item {
    a {
      display: block;
      color: $white;
      text-decoration: none;
    }
    .teaser {
      position: absolute;
      left: 0;
      margin-bottom: 0;
      width: 50px;
      border: 2px solid $white;
      margin-bottom: ($gutter / 2);
      opacity: 0.6;
      @include media($small) {
        width: 150px;
      }
    }
    a:hover .teaser {
      opacity: 1;
    }
    .title {
      display: block;
      padding-top: 1em;
      //margin-left: 60px;
      font-family: $alt-font;
      @include font-size(24,no);
      //font-weight: 700;
      @include media($small) {
        //margin-left: 170px;
        @include font-size(32,no);
      }
    }
    .excerpt {
      margin-top: 0;
      margin-left: 60px;
      @include font-size(14,no);
      @include media($small) {
        margin-left: 170px;
        @include font-size(16,no);
      }
    }
  }
  .sub-menu-item > li a {
    display: block;
    color: $white;
    font-style: italic;
  }
  .menu-item .home a {
    @include font-size(32);
  }
  .rotatingBackground {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 140%;
    transform: scaleX(0);
    transform-origin: center right;
    background: #181818;
    z-index: 10;

    transition: transform .6s ease;
  }
  &.is-visible .rotatingBackground {
    transform: scaleX(1);
  }
  .content {
    position: relative;
    z-index: 20;
    opacity: 0;
  }
  &.is-visible .content {
    animation: fadeIn .6s ease .3s 1 forwards;
  }
}

@keyframes fadeIn {
  0% {  opacity: 0; }
  100% {  opacity: 1; }
}

/* Dim content when off canvas nav slides in */

.menu-screen {
  @include position(fixed, 0 0 0 0);
  visibility: hidden;
  z-index: 4;
  &.is-visible {
    visibility: visible;
    &:hover {
      cursor: pointer;
    }
  }
}


@include media($medium){
  .sliding-menu-button {
    display: none !important;
  }
}
{'fraction_non_alphanumeric': 0.2017600741083835, 'fraction_numerical': 0.03983325613710051, 'mean_word_length': 2.4067529189018617, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 11, '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': '1968903', 'n_tokens_mistral': 4084, 'n_tokens_neox': 3686, 'n_words': 864}