<commit_before>@import '../../scss/variables.scss';
@import 'ceaser-easing';

.logo {
  height: 24px;
  color: #999;
  font-size: 16px !important;
  font-weight: bold;
  color: $orange !important;
  font-weight: 400;
  &.dev {
    filter: grayscale(100%);
  }
  &.beta {
    filter: hue-rotate(153deg) saturate(60%);
  }
}

#header {
  padding: 0 0 0 2px;
  position: fixed;
  z-index: 15;
  top: 0;
  left: 0;
  right: 0;
  height: $header-height;
  background-color: #000;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-top: constant(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  filter: var(--color-filter);

  #user {
    color: white;
  }
  .fa {
    font-size: 20px;
    color: #fafafa;
    &:hover {
      color: $orange;
      cursor: pointer;
    }
  }

  .app-icon {
    font-size: 1.33em;
    &:hover {
      color: $orange;
      cursor: pointer;
      transition: color 0.2s linear;
    }
  }

  .fa-bars {
    margin-left: 8px;
  }

  span,
  a,
  img {
    margin: 0 6px;
    text-decoration: none;
    font-size: 13px;
    -webkit-touch-callout: none;
    user-select: none;
    outline: none;
    white-space: nowrap;
  }

  .link {
    color: white;
    cursor: pointer;

    &:hover,
    &.active {
      color: $orange;
      transition: color 0.2s linear;
    }
  }

  .header-right {
    cursor: default;
    display: flex;
    margin-left: auto;
    margin-right: 0;
    align-items: center;
    flex-direction: row;
    height: 100%;
  }

  &.search-expanded .header-right {
    @include phone-portrait {
      flex: 1;
    }
  }

  .header-separator {
    display: block !important;
    width: 0;
    height: 16px !important;
    border-right: 1px solid #6f7070;
  }
  .dropdown {
    @include below-header;
    position: absolute;
    display: block;
    overflow: auto;
    height: calc(100vh - #{$header-height});
    height: calc(100vh - #{$header-height} - constant(safe-area-inset-top));
    height: calc(100vh - #{$header-height} - env(safe-area-inset-top));
    left: 0;
    margin: 0;
    padding: 0;
    min-width: 150px;
    background-color: black;
    padding-bottom: 4px;

    hr {
      margin: 2px 0;
      border: none;
      border-top: 1px solid #333;
    }

    .link {
      display: block;
      padding: 4px 2em 4px 1em;
      font-size: 18px;
      margin: 0;

      @include phone-portrait {
        font-size: 18px;
        padding: 6px 2em;
      }

      &:hover,
      &:focus {
        background-color: #151515;
        transition: none;
      }
    }
  }
  .dropdown-enter {
    transform: translateX(-250px);
  }

  .dropdown-enter.dropdown-enter-active {
    transform: translateX(0);
    transition: transform 200ms $easeOutCubic;
  }

  .dropdown-exit {
    transform: translateX(0);
  }

  .dropdown-exit.dropdown-exit-active {
    transform: translateX(-250px);
    transition: transform 200ms $easeInCubic;
  }

  .header-links {
    display: flex;
    flex-direction: row;
    height: $header-height;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    direction: rtl;
    justify-content: flex-end;

    @include phone-portrait {
      display: none;
    }
    @media (max-width: 700px) {
      display: none;
    }

    .link {
      height: 100%;
      display: flex;
      align-items: center;
      direction: ltr;

      &:hover,
      &.active {
        border-bottom: 2px solid #e8a534;
        border-top: 2px solid black;
        box-sizing: border-box;
      }
    }
  }

  .menu {
    margin-right: none;
  }
}

.pull-right {
  float: right;
  text-align: right;
}
<commit_msg>Update dropdown to respect safe area.<commit_after>@import '../../scss/variables.scss';
@import 'ceaser-easing';

.logo {
  height: 24px;
  color: #999;
  font-size: 16px !important;
  font-weight: bold;
  color: $orange !important;
  font-weight: 400;
  &.dev {
    filter: grayscale(100%);
  }
  &.beta {
    filter: hue-rotate(153deg) saturate(60%);
  }
}

#header {
  padding: 0 0 0 2px;
  position: fixed;
  z-index: 15;
  top: 0;
  left: 0;
  right: 0;
  height: $header-height;
  background-color: #000;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-top: constant(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  filter: var(--color-filter);

  #user {
    color: white;
  }
  .fa {
    font-size: 20px;
    color: #fafafa;
    &:hover {
      color: $orange;
      cursor: pointer;
    }
  }

  .app-icon {
    font-size: 1.33em;
    &:hover {
      color: $orange;
      cursor: pointer;
      transition: color 0.2s linear;
    }
  }

  .fa-bars {
    margin-left: 8px;
  }

  span,
  a,
  img {
    margin: 0 6px;
    text-decoration: none;
    font-size: 13px;
    -webkit-touch-callout: none;
    user-select: none;
    outline: none;
    white-space: nowrap;
  }

  .link {
    color: white;
    cursor: pointer;

    &:hover,
    &.active {
      color: $orange;
      transition: color 0.2s linear;
    }
  }

  .header-right {
    cursor: default;
    display: flex;
    margin-left: auto;
    margin-right: 0;
    align-items: center;
    flex-direction: row;
    height: 100%;
  }

  &.search-expanded .header-right {
    @include phone-portrait {
      flex: 1;
    }
  }

  .header-separator {
    display: block !important;
    width: 0;
    height: 16px !important;
    border-right: 1px solid #6f7070;
  }
  .dropdown {
    @include below-header;
    position: absolute;
    display: block;
    overflow: auto;
    height: calc(100vh - #{$header-height});
    height: calc(100vh - #{$header-height} - constant(safe-area-inset-top));
    height: calc(100vh - #{$header-height} - env(safe-area-inset-top));
    left: 0;
    margin: 0;
    padding: 0;
    min-width: 150px;
    background-color: black;
    padding-bottom: 4px;
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);

    hr {
      margin: 2px 0;
      border: none;
      border-top: 1px solid #333;
    }

    .link {
      display: block;
      padding: 4px 2em 4px 1em;
      font-size: 18px;
      margin: 0;

      @include phone-portrait {
        font-size: 18px;
        padding: 6px 2em;
      }

      &:hover,
      &:focus {
        background-color: #151515;
        transition: none;
      }
    }
  }
  .dropdown-enter {
    transform: translateX(-250px);
  }

  .dropdown-enter.dropdown-enter-active {
    transform: translateX(0);
    transition: transform 200ms $easeOutCubic;
  }

  .dropdown-exit {
    transform: translateX(0);
  }

  .dropdown-exit.dropdown-exit-active {
    transform: translateX(-250px);
    transition: transform 200ms $easeInCubic;
  }

  .header-links {
    display: flex;
    flex-direction: row;
    height: $header-height;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    direction: rtl;
    justify-content: flex-end;

    @include phone-portrait {
      display: none;
    }
    @media (max-width: 700px) {
      display: none;
    }

    .link {
      height: 100%;
      display: flex;
      align-items: center;
      direction: ltr;

      &:hover,
      &.active {
        border-bottom: 2px solid #e8a534;
        border-top: 2px solid black;
        box-sizing: border-box;
      }
    }
  }

  .menu {
    margin-right: none;
  }
}

.pull-right {
  float: right;
  text-align: right;
}

{'fraction_non_alphanumeric': 0.14296804243757277, 'fraction_numerical': 0.03182817958338724, 'mean_word_length': 2.1981795614398014, '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': '1520698', 'n_tokens_mistral': 3071, 'n_tokens_neox': 2787, 'n_words': 611}