<commit_before>.menu {
  .flexy(column);
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  .content {
    box-sizing: border-box;
    width: 100%;
    max-width: @tile_blog;
    margin-right: auto;
    .vein {
      border-bottom: 1px solid @gray_lightest;
    }
  }
  .divider {
    color: @gray_lightest;
    margin: .5rem 0;
    &:first-of-type {
      margin: 0 0 1rem;
    }
  }
  p {
    a {
      display: inline-block;
      position: relative;
      // still unsure between solid and dotted
      // border-bottom: 1px dotted @gray_light;
      box-shadow: 0 1px @gray_lighter;
      white-space: nowrap;
      cursor: pointer;
      &:not(:hover) {
        &:after {
          width: 0;
          left: 50%;
          transition: @run ease-out;
        }
      }
      &:active {
        &:after {
          left: -5%;
          width: 110%;
        }
      }
      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 1px @color_select;
      }
    }
  }
  input,
  textarea {
    outline: none;
    &[disabled] {
      color: @gray_light;
      box-shadow: none;
      border: 1px dashed @gray_lighter;
      resize: none;
      overflow: hidden;
      user-select: none;
      pointer-events: none;
    }
  }
}
.menu-header {
  .flexy(center, center);
  flex: 0 0 @tile;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: @tile;
  a {
    .flexy(center, center);
    width: @tile;
    height: @tile;
    transition: @run @bezier_fadein;
    &:only-child {
      margin-left: auto;
    }
  }
}
.menu-heading {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 @tile;
  overflow: hidden;
  cursor: default;
  animation: in-fade-bottom-soft @run_slow @bezier_deform;
  &:not(:last-of-type) {
    display: none;
  }
}
.menu-body {
  .flexy();
  box-sizing: content-box;
  flex: 1;
  position: relative;
  margin-top: 10vh;
  .mq_640({
    padding-top: @menu_padding;
  });
  .make {
    .animation_cascade(25);
  }
}
.menu-view {
  .flexy(stretch, flex-start, column);
  flex: 0 0 100%;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  transition: @run_slow @bezier_deform;
  will-change: transform;
  &:not(:last-of-type) {
    position: absolute;
    transform: translate(-100%);
  }
  &:last-child {
    &:only-child {
      &.make {
        animation: in-fade-left @run_slow @now;
      }
      .make {
        animation-name: in-fade-left;
        animation-duration: @run_slow;
        animation-fill-mode: backwards;
      }
    }
  }
  &:not(:only-child) {
    &:not(:first-child) {
      &.make {
        animation: in-fade-right @run_slow @now;
      }
      .make {
        animation-name: in-fade-right;
        animation-duration: @run_slow;
        animation-fill-mode: backwards;
      }
    }
  }
  &.credit-card {
    .disabled-input {
      margin-bottom: @menu_padding;
    }
  }
  article {
    padding: @menu_padding;
    width: 100%;
    a {
      &[role="button"] {
        .flexy(center, center);
        height: @tile;
        margin-bottom: @tile;
        transition: @run_fast @bezier_fadein;
        border: 1px solid @font_color;
        &:hover {
          color: @white;<commit_msg>use type instead of child for menu-views<commit_after>.menu {
  .flexy(column);
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  .content {
    box-sizing: border-box;
    width: 100%;
    max-width: @tile_blog;
    margin-right: auto;
    .vein {
      border-bottom: 1px solid @gray_lightest;
    }
  }
  .divider {
    color: @gray_lightest;
    margin: .5rem 0;
    &:first-of-type {
      margin: 0 0 1rem;
    }
  }
  p {
    a {
      display: inline-block;
      position: relative;
      // still unsure between solid and dotted
      // border-bottom: 1px dotted @gray_light;
      box-shadow: 0 1px @gray_lighter;
      white-space: nowrap;
      cursor: pointer;
      &:not(:hover) {
        &:after {
          width: 0;
          left: 50%;
          transition: @run ease-out;
        }
      }
      &:active {
        &:after {
          left: -5%;
          width: 110%;
        }
      }
      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 1px @color_select;
      }
    }
  }
  input,
  textarea {
    outline: none;
    &[disabled] {
      color: @gray_light;
      box-shadow: none;
      border: 1px dashed @gray_lighter;
      resize: none;
      overflow: hidden;
      user-select: none;
      pointer-events: none;
    }
  }
}
.menu-header {
  .flexy(center, center);
  flex: 0 0 @tile;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: @tile;
  a {
    .flexy(center, center);
    width: @tile;
    height: @tile;
    transition: @run @bezier_fadein;
    &:only-child {
      margin-left: auto;
    }
  }
}
.menu-heading {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 @tile;
  overflow: hidden;
  cursor: default;
  animation: in-fade-bottom-soft @run_slow @bezier_deform;
  &:not(:last-of-type) {
    display: none;
  }
}
.menu-body {
  .flexy();
  box-sizing: content-box;
  flex: 1;
  position: relative;
  margin-top: 10vh;
  .mq_640({
    padding-top: @menu_padding;
  });
  .make {
    .animation_cascade(25);
  }
}
.menu-view {
  .flexy(stretch, flex-start, column);
  flex: 0 0 100%;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  transition: @run_slow @bezier_deform;
  will-change: transform;
  &:not(:last-of-type) {
    position: absolute;
    transform: translate(-100%);
  }
  &:last-of-type {
    &:only-of-type {
      &.make {
        animation: in-fade-left @run_slow @now;
      }
      .make {
        animation-name: in-fade-left;
        animation-duration: @run_slow;
        animation-fill-mode: backwards;
      }
    }
  }
  &:not(:only-of-type) {
    &:not(:first-of-type) {
      &.make {
        animation: in-fade-right @run_slow @now;
      }
      .make {
        animation-name: in-fade-right;
        animation-duration: @run_slow;
        animation-fill-mode: backwards;
      }
    }
  }
  &.credit-card {
    .disabled-input {
      margin-bottom: @menu_padding;
    }
  }
  article {
    padding: @menu_padding;
    width: 100%;
    a {
      &[role="button"] {
        .flexy(center, center);
        height: @tile;
        margin-bottom: @tile;
        transition: @run_fast @bezier_fadein;
        border: 1px solid @font_color;
        &:hover {
          color: @white;
{'fraction_non_alphanumeric': 0.1435515722315054, 'fraction_numerical': 0.02096308673856904, 'mean_word_length': 1.9029982363315696, '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': '3618573', 'n_tokens_mistral': 2535, 'n_tokens_neox': 2363, 'n_words': 513}