<commit_before>
//
// Variables
//

@menu-anchor:     left;   // specify which side to render the menu
@menu-width:      280px;  // width of menu


@nav-background-color: #e3e3e3;


//
// Mixins
//

.slide-menu() when (@menu-anchor = left)      { .translate(@menu-width * -1, 0); }
.slide-menu() when (@menu-anchor = right)     { .translate(@menu-width * 1, 0); }
.slide-content() when (@menu-anchor = left)   { .translate(@menu-width * 1, 0); }
.slide-content() when (@menu-anchor = right)  { .translate(@menu-width * -1, 0); }

.menu-side(@arg: 0) when (@menu-anchor = left) { left: @arg; }
.menu-side(@arg: 0) when (@menu-anchor = right) { right: @arg; }


//
// Styles
//

html, body {
  width: @full-size;
  height: @full-size;
}


.container {
  position: absolute;
  width: @full-size;
  height: @full-size;
}

.no-js .menu-container {
  display: none;
}

.push-container {
  position: relative;
  overflow: hidden;
  width: @full-size;
  height: @full-size;
}


.menu-container {
  position: fixed;
  z-index: @z-menu-level;
  overflow: hidden;
  width: @menu-width;
  height: @full-size;
  .transitionPrefixed(transform);
  .slide-menu();
  // .transition(@menu-anchor);
  .menu-side(0);             // determines 'left' or 'right' alignment to .push-container


  &.active {
    .translate(0,0);

    // TODO: add transitions to menu slide

    // TODO: fade out .scroll-content with full-screen overlay
    // & + .scroll-container {
    //   &:before,
    //   &::before {
    //     position: fixed;
    //     z-index: (@menu-level - 100);
    //     width: @full-size;
    //     height: @full-size;
    //     background: rgba(0,0,0,0.5);
    //     content: '';
    //   }
    // }
  }

  ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}


.menu-container.active + div>.scroll-content {
  .slide-content();
}


.menu-wrapper {
  position: relative;
  height: @full-size;

  ul {
    overflow-y: auto;
    height: @full-size;
    background-color: @nav-background-color;
  }
}


.nav-panel {
  position: fixed;
  top: 0;
  height: @full-size;
  .menu-side(-100%);             // determines 'left' or 'right' alignment to .push-container
  .transition(@menu-anchor);

  &.active {
    .menu-side(0);
    z-index: @z-menu-level + 100;
    width: @full-size;
  }
}


.scroll-container {
  position: fixed;
  overflow-x: hidden;
  overflow-y: scroll;
  width: @full-size;
  height: @full-size;
}


.scroll-content {
  .transitionPrefixed(transform);
  position: relative;
  padding: @gutter;
}


[data-overlay] {
  position: fixed;
  top: 0;
  left: (@full-size * -1);
  z-index: (@z-menu-level - 500);
  width: @full-size;
  height: @full-size;
  opacity: 0;
  .transition(opacity);

  &.active {
    left: 0;
    opacity: 1;
  }
}

<commit_msg>fixed CSS issues with menu render<commit_after>
//
// Variables
//

@menu-anchor:     left;   // specify which side to render the menu
@menu-width:      280px;  // width of menu


@nav-background-color: #e3e3e3;


//
// Mixins
//

.slide-menu() when (@menu-anchor = left)      { .translate(@menu-width * -1, 0); }
.slide-menu() when (@menu-anchor = right)     { .translate(@menu-width * 1, 0); }
.slide-content() when (@menu-anchor = left)   { .translate(@menu-width * 1, 0); }
.slide-content() when (@menu-anchor = right)  { .translate(@menu-width * -1, 0); }

.menu-side(@arg: 0) when (@menu-anchor = left) { left: @arg; }
.menu-side(@arg: 0) when (@menu-anchor = right) { right: @arg; }


//
// Styles
//

html, body {
  width: @full-size;
  height: @full-size;
}


.container {
  position: absolute;
  width: @full-size;
  height: @full-size;
}

.no-js .menu-container {
  display: none;
}

.push-container {
  position: relative;
  overflow: hidden;
  width: @full-size;
  height: @full-size;
}


.menu-container {
  position: fixed;
  z-index: @z-menu-level;
  overflow: hidden;
  width: @menu-width;
  height: @full-size;
  .transitionPrefixed(transform);
  .slide-menu();
  // .transition(@menu-anchor);
  .menu-side(0);             // determines 'left' or 'right' alignment to .push-container


  &.active {
    .translate(0,0);

    // TODO: add transitions to menu slide

    // TODO: fade out .scroll-content with full-screen overlay
    // & + .scroll-container {
    //   &:before,
    //   &::before {
    //     position: fixed;
    //     z-index: (@menu-level - 100);
    //     width: @full-size;
    //     height: @full-size;
    //     background: rgba(0,0,0,0.5);
    //     content: '';
    //   }
    // }
  }

  ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}


.menu-container.active + div>.scroll-content {
  .slide-content();
}


.menu-wrapper {
  position: relative;
  height: @full-size;

  ul {
    overflow-y: auto;
    height: @full-size;
    background-color: @nav-background-color;
  }
}


.nav-panel {
  position: fixed;
  top: 0;
  z-index: @z-menu-level + 100;
  width: @full-size;
  height: @full-size;
  .menu-side(-100%);             // determines 'left' or 'right' alignment to .push-container
  .transition(@menu-anchor);

  &.active {
    .menu-side(0);
    width: @full-size;
  }
}


.scroll-container {
  position: fixed;
  overflow-x: hidden;
  overflow-y: scroll;
  width: @full-size;
  height: @full-size;
}


.scroll-content {
  .transitionPrefixed(transform);
  position: relative;
  padding: @gutter;
}


[data-overlay] {
  position: fixed;
  top: 0;
  left: (@full-size * -1);
  z-index: (@z-menu-level - 500);
  width: @full-size;
  height: @full-size;
  opacity: 0;
  .transition(opacity);

  &.active {
    left: 0;
    opacity: 1;
  }
}


{'fraction_non_alphanumeric': 0.18523153942428036, 'fraction_numerical': 0.016091543000178794, 'mean_word_length': 2.3882495457298605, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '2737591', 'n_tokens_mistral': 2161, 'n_tokens_neox': 2055, 'n_words': 459}