<commit_before>@import '../assets/scss/variables';

header {
  height: 160px;
  @media screen and (max-width: 599px) {
    padding-left: $padding;
    height: 140px;
  }
  @media screen and (min-width: 600px) and (max-width: 999px) {
    padding-left: 40px;
  }
  @media screen and (min-width: 1000px) {
    padding-left: 60px;
  }

  h1 {
    margin: 0;
    padding: 36px 0 0;

    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease-in 0s;
    a {
      text-decoration: none;
      border-bottom: none;
      padding-right: 6px;
      color: inherit;
    }
    small {
      padding-left: 6px;
      padding-bottom: 1px;
      font-size: 0.7em;
      letter-spacing: -0.01em;
      font-weight: 300;
    }
    span {
      font-size: 0.7em;
      font-weight: 400;
    }

    @media screen and (max-width: 599px) {
      display: none;
    }
    @media screen and (min-width: 600px) and (max-width: 999px) {
      small{
        display: block;
        padding-top: 8px;
        padding-left: 0;
      }
      span{
        display: none;
      }
    }
    &.hide {
      opacity: 0;
      visibility: hidden;
      transition: visibility 0s 0.2s, opacity 0.2s ease-out;
    }

  }

  #lang {
    position: absolute;
    @media screen and (max-width: 599px) {
      top: 15px;
      right: 90px;
    }
    @media screen and (min-width: 600px) and (max-width: 999px) {
      top: 30px;
      right: 110px;
    }
    @media screen and (min-width: 1000px) {
      top: 30px;
      right: 130px;
    }
    a {
      border: none;
      padding: 0 4px;
      cursor: default;
      color: #111;
        font-weight: 600;
      &.notCurrentLang{
        cursor: pointer;
        font-weight: 400;
        color: #666;
      }
    }
  }

  label{
    cursor: pointer;
    position: absolute;
    width: 35px;
    z-index: 1001;
    @media screen and (max-width: 599px) {
      top: 25px;
      right: 30px;
    }
    @media screen and (min-width: 600px) and (max-width: 999px) {
      top: 45px;
      right: 40px;
    }
    @media screen and (min-width: 1000px) {
      top: 45px;
      right: 60px;
    }
    #navigation__button__close { fill:white; visibility: hidden; }

    @keyframes rotate {
      from {
        transform: rotate(360deg);
      }

      to {
        transform: rotate(0deg);
      }
    }

    svg {
      position: absolute;
      transition: opacity 150ms;
      &:first-child {
        visibility: visible;
        opacity: 1;
        transition: opacity 150ms, visibility 0s;
      }
      &:last-child {
        visibility: hidden;
        opacity: 0;
        transition: opacity 150ms, visibility 0s 150ms;
      }
    }
    &.isLoading {
      svg:first-child {
        visibility: hidden;
        opacity: 0;
        transition: opacity 150ms, visibility 0s 150ms;
      }
      svg:last-child {
        visibility: visible;
        opacity: 1;
        transition: opacity 150ms, visibility 0s;
        animation: 3s infinite alternate rotate;
      }
    }
  }
  input[type=checkbox]{
    display: none;
  }
  input[type=checkbox]:checked + label {
    position: fixed;
    #navigation__button__open { visibility: hidden; }
    #navigation__button__close { fill:white; visibility: visible; }
  }

  input[type=checkbox]:checked + label + nav {
    // Animation
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.2s ease-out, transform 0.1s ease-out;

    ul {
      transform : translateX(0px);
      opacity: 1;
      transition: opacity 0.2s ease-out .1s, transform 0.2s ease-out .1s;
    }<commit_msg>Improve animation on hamburger menu while loading<commit_after>@import '../assets/scss/variables';

header {
  height: 160px;
  @media screen and (max-width: 599px) {
    padding-left: $padding;
    height: 140px;
  }
  @media screen and (min-width: 600px) and (max-width: 999px) {
    padding-left: 40px;
  }
  @media screen and (min-width: 1000px) {
    padding-left: 60px;
  }

  h1 {
    margin: 0;
    padding: 36px 0 0;

    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease-in 0s;
    a {
      text-decoration: none;
      border-bottom: none;
      padding-right: 6px;
      color: inherit;
    }
    small {
      padding-left: 6px;
      padding-bottom: 1px;
      font-size: 0.7em;
      letter-spacing: -0.01em;
      font-weight: 300;
    }
    span {
      font-size: 0.7em;
      font-weight: 400;
    }

    @media screen and (max-width: 599px) {
      display: none;
    }
    @media screen and (min-width: 600px) and (max-width: 999px) {
      small{
        display: block;
        padding-top: 8px;
        padding-left: 0;
      }
      span{
        display: none;
      }
    }
    &.hide {
      opacity: 0;
      visibility: hidden;
      transition: visibility 0s 0.2s, opacity 0.2s ease-out;
    }

  }

  #lang {
    position: absolute;
    @media screen and (max-width: 599px) {
      top: 15px;
      right: 90px;
    }
    @media screen and (min-width: 600px) and (max-width: 999px) {
      top: 30px;
      right: 110px;
    }
    @media screen and (min-width: 1000px) {
      top: 30px;
      right: 130px;
    }
    a {
      border: none;
      padding: 0 4px;
      cursor: default;
      color: #111;
        font-weight: 600;
      &.notCurrentLang{
        cursor: pointer;
        font-weight: 400;
        color: #666;
      }
    }
  }

  label{
    cursor: pointer;
    position: absolute;
    width: 35px;
    z-index: 1001;
    @media screen and (max-width: 599px) {
      top: 25px;
      right: 30px;
    }
    @media screen and (min-width: 600px) and (max-width: 999px) {
      top: 45px;
      right: 40px;
    }
    @media screen and (min-width: 1000px) {
      top: 45px;
      right: 60px;
    }
    #navigation__button__close { fill:white; visibility: hidden; }

    @keyframes rotate {
      from {
        transform: rotate(360deg);
      }

      to {
        transform: rotate(0deg);
      }
    }

    svg {
      position: absolute;
      transition: opacity 150ms;
      &:first-child {
        visibility: visible;
        opacity: 1;
        transition: opacity 150ms, visibility 0s;
      }
      &:last-child {
        visibility: hidden;
        opacity: 0;
        transition: opacity 150ms, visibility 0s 150ms;
      }
    }
    &.isLoading {
      svg:first-child {
        visibility: hidden;
        opacity: 0;
        transition: opacity 150ms, visibility 0s 150ms;
      }
      svg:last-child {
        visibility: visible;
        opacity: 1;
        transition: opacity 150ms, visibility 0s;
        animation: 1s infinite linear normal rotate;
      }
    }
  }
  input[type=checkbox]{
    display: none;
  }
  input[type=checkbox]:checked + label {
    position: fixed;
    #navigation__button__open { visibility: hidden; }
    #navigation__button__close { fill:white; visibility: visible; }
  }

  input[type=checkbox]:checked + label + nav {
    // Animation
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.2s ease-out, transform 0.1s ease-out;

    ul {
      transform : translateX(0px);
      opacity: 1;
      transition: opacity 0.2s ease-out .1s, transform 0.2s ease-out .1s;
    }
{'fraction_non_alphanumeric': 0.11598224195338513, 'fraction_numerical': 0.05160932297447281, 'mean_word_length': 1.9068548387096773, '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': '743892', 'n_tokens_mistral': 2759, 'n_tokens_neox': 2383, 'n_words': 629}