<commit_before>@import './breakpoints.scss';

header {
  display: flex;
  width: 100%;
  width: 100vw;
  height: 4.375rem;

  position: fixed;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  z-index: 5;

  background-color: $white;

  font-weight: bold;
  color: $font-color;
  box-shadow: 3px 0px 6px $text-shadow-color;

  .brand {
    margin-left: 5%;

    a {
      display: flex;
      align-items: center;
      color: $font-color;

      &:hover {
        color: $font-color;
        text-shadow: none;
      }

      img {
        display: none;
      }

      h1 {
        font-size: 1.375rem;
        font-weight: $font-weight-semi-bold;
        text-align: left;

        color: $font-color;
      }
    }
  }

  .hamburger-menu {
    display: flex;
    height: 21px;
    width: 29px;

    position: relative;
    right: 5%;

    flex-flow: column nowrap;
    align-items: center;

    transition: 0.5s ease-in-out;
    cursor: pointer;

    span {
      display: block;
      height: 4px;
      width: 100%;

      position: absolute;
      left: 0;

      border-radius: 9px;
      background-color: $font-color;

      transition: 0.25s ease-in-out;

      &:nth-child(1) {
        top: 0px;
      }

      &:nth-child(2),
      &:nth-child(3) {
        top: 8px;
      }

      &:nth-child(4) {
        top: 16px;
      }
    }

    &.active {
      span {
        background-color: $heading-color;

        &:nth-child(1),
        &:nth-child(4) {
          width: 0%;
          top: 9px;
          left: 50%;
        }

        &:nth-child(2) {
          transform: rotate(45deg);
        }

        &:nth-child(3) {
          transform: rotate(-45deg);
        }
      }
    }
  }

  .navbar-items {
    display: flex;
    width: 100%;
    width: 100vw;
    height: 0rem;

    overflow: hidden;

    position: absolute;
    top: 69px;

    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;

    font-size: 1.25rem;
    font-weight: $font-weight-medium;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-shadow: $text-shadow $text-shadow-color;

    border-top: $border-grey;
    background: $white;
    transition: height 0.25s ease-out;

    .navbar-item {
      display: inline;
      margin-left: 6%;
      margin-left: 6vw;
    }

    &.active {
      height: 20rem;
      padding: $spc-s;

      transition: height 0.25s ease-out;
    }
  }
}

@media screen and (max-width: 360px) {
  header {
    .brand {
      a {
        h1 {
          font-size: 1.2rem;
        }
      }
    }
  }
}

@media screen and (min-width: $desktop) {
  header {
    .brand {
      margin-left: $spc-m;

      a {
        img {
          display: block;
          width: 45px;
        }

        h1 {
          font-size: 1.375rem;
          margin-left: 6%;
          margin-left: 2vw;
          letter-spacing: 0.1em;
        }
      }
    }

    .navbar-items {
      display: flex;
      width: 40%;
      width: 40vw;
      height: auto;

      visibility: visible;
      position: relative;

      top: auto;<commit_msg>navigation and logo brekpoint fix<commit_after>@import './breakpoints.scss';

header {
  display: flex;
  width: 100%;
  width: 100vw;
  height: 4.375rem;

  position: fixed;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  z-index: 5;

  background-color: $white;

  font-weight: bold;
  color: $font-color;
  box-shadow: 3px 0px 6px $text-shadow-color;

  .brand {
    margin-left: 5%;

    a {
      display: flex;
      align-items: center;
      color: $font-color;

      &:hover {
        color: $font-color;
        text-shadow: none;
      }

      img {
        display: none;
      }

      h1 {
        font-size: 1.375rem;
        font-weight: $font-weight-semi-bold;
        text-align: left;

        color: $font-color;
      }
    }
  }

  .hamburger-menu {
    display: flex;
    height: 21px;
    width: 29px;

    position: relative;
    right: 5%;

    flex-flow: column nowrap;
    align-items: center;

    transition: 0.5s ease-in-out;
    cursor: pointer;

    span {
      display: block;
      height: 4px;
      width: 100%;

      position: absolute;
      left: 0;

      border-radius: 9px;
      background-color: $font-color;

      transition: 0.25s ease-in-out;

      &:nth-child(1) {
        top: 0px;
      }

      &:nth-child(2),
      &:nth-child(3) {
        top: 8px;
      }

      &:nth-child(4) {
        top: 16px;
      }
    }

    &.active {
      span {
        background-color: $heading-color;

        &:nth-child(1),
        &:nth-child(4) {
          width: 0%;
          top: 9px;
          left: 50%;
        }

        &:nth-child(2) {
          transform: rotate(45deg);
        }

        &:nth-child(3) {
          transform: rotate(-45deg);
        }
      }
    }
  }

  .navbar-items {
    display: flex;
    width: 100%;
    width: 100vw;
    height: 0rem;

    overflow: hidden;

    position: absolute;
    top: 69px;

    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;

    font-size: 1.25rem;
    font-weight: $font-weight-medium;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-shadow: $text-shadow $text-shadow-color;

    border-top: $border-grey;
    background: $white;
    transition: height 0.25s ease-out;

    .navbar-item {
      display: inline;
      margin-left: 6%;
      margin-left: 6vw;
    }

    &.active {
      height: 20rem;
      padding: $spc-s;

      transition: height 0.25s ease-out;
    }
  }
}

@media screen and (max-width: 360px) {
  header {
    .brand {
      a {
        h1 {
          font-size: 1.2rem;
        }
      }
    }
  }
}

@media screen and (min-width: 600px) {
  header {
    .brand {
      margin-left: $spc-s;

      a {
        img {
          display: block;
          width: 45px;
        }

        h1 {
          font-size: 1.375rem;
          margin-left: 6%;
          margin-left: 2vw;
          letter-spacing: 0.1em;
        }
      }
    }
  }
}

@media screen and (min-width: 1320px) {
  header {
    .brand {
      margin-left: $spc-m;
    }

    .navbar-items {
      display: flex;
      width: 40%;
      width: 40vw;
      height: auto;

      visibility: visible;
      position: relative;

      top: auto;
{'fraction_non_alphanumeric': 0.13501180173092053, 'fraction_numerical': 0.032887490165224235, 'mean_word_length': 1.5495387083834737, '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': '2180362', 'n_tokens_mistral': 2501, 'n_tokens_neox': 2248, 'n_words': 478}