<commit_before>$layout-animation-duration:     0.5s;
$layout-background:             $background-color;
$layout-breakpoint:             $breakpoint-small;
$layout-container-width:        $container-width;
$layout-desktop-footer-gap:     $default-unit;
$layout-desktop-header-gap:     100px;
$layout-footer-height:          100px;
$layout-mobile-tray-width:      250px;
$layout-mobile-footer-gap:      $small-unit;
$layout-mobile-header-gap:      100px;

html {
  overflow-y: scroll;
}

body {
  background: $background-color;
}

body.lightbox-open {
  overflow: hidden;
}

.layout {
  height: 100%;
}

.layout--mobile-tray {
  display: none;
}

.layout--content {
  @include single-transition(transform, $layout-animation-duration);
  background: $layout-background;
  min-height: 100%;
  overflow: hidden;
}

.layout--content--aside {
  @include spang(5,24);
}

.layout--container {
  padding-left: $desktop-gutters;
  padding-right: $desktop-gutters;
  margin: 0 auto;

  @include media-query(600px) {
    padding-left: $small-gutters;
    padding-right: $small-gutters;
  }

  @include media-query(420px) {
    padding-left: $x-small-gutters;
    padding-right: $x-small-gutters;
  }
}

.layout--main {
  background: $layout-background;
  padding-bottom: $layout-desktop-footer-gap;
  padding-top: $header-height;

  .layout__headerless & {
    padding-top: 0;
  }
}

// MENU OPEN
//

.layout-open {

  .layout--mobile-tray {
    display: block;
    min-height: 100%;
    float: right;
    width: $layout-mobile-tray-width;
  }

  .layout--content {
    @include translate(-($layout-mobile-tray-width), 0);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    @include box-shadow(0 0 10px rgba(0,0,0,0.2));
  }

}

// MENU TRANSITIONING
//

.layout-transitioning {

  overflow: hidden;
  position: relative;
  width: 100%;

  .layout--mobile-tray {
    display: block;
    min-height: 100%;
    float: right;
    width: $layout-mobile-tray-width;
  }

  .layout--content {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    @include box-shadow(0 0 10px rgba(0,0,0,0.1));
  }

}<commit_msg>Added dark overlay over page when menu is open<commit_after>$layout-animation-duration:     0.5s;
$layout-background:             $background-color;
$layout-breakpoint:             $breakpoint-small;
$layout-container-width:        $container-width;
$layout-desktop-footer-gap:     $default-unit;
$layout-desktop-header-gap:     100px;
$layout-footer-height:          100px;
$layout-mobile-tray-width:      250px;
$layout-mobile-footer-gap:      $small-unit;
$layout-mobile-header-gap:      100px;

html {
  overflow-y: scroll;
}

body {
  background: $background-color;
}

body.lightbox-open {
  overflow: hidden;
}

.layout {
  height: 100%;
}

.layout--mobile-tray {
  display: none;
}

.layout--content {
  @include single-transition(transform, $layout-animation-duration);
  background: $layout-background;
  min-height: 100%;
  overflow: hidden;
}

.layout--content--aside {
  @include spang(5,24);
}

.layout--container {
  padding-left: $desktop-gutters;
  padding-right: $desktop-gutters;
  margin: 0 auto;

  @include media-query(600px) {
    padding-left: $small-gutters;
    padding-right: $small-gutters;
  }

  @include media-query(420px) {
    padding-left: $x-small-gutters;
    padding-right: $x-small-gutters;
  }
}

.layout--main {
  background: $layout-background;
  padding-bottom: $layout-desktop-footer-gap;
  padding-top: $header-height;

  &:before {
    content: "";
    background: rgba(0,0,0,0.25);
    opacity: 0;
    @include transition(opacity .3s);
  }

  .layout-transitioning &:before,
  .layout-open &:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
  }

  .layout-open &:before {
    opacity: 1;
  }

  .layout__headerless & {
    padding-top: 0;
  }
}

// MENU OPEN
//

.layout-open {

  .layout--mobile-tray {
    display: block;
    min-height: 100%;
    float: right;
    width: $layout-mobile-tray-width;
  }

  .layout--content {
    @include translate(-($layout-mobile-tray-width), 0);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    @include box-shadow(0 0 10px rgba(0,0,0,0.2));
  }

}

// MENU TRANSITIONING
//

.layout-transitioning {

  overflow: hidden;
  position: relative;
  width: 100%;

  .layout--mobile-tray {
    display: block;
    min-height: 100%;
    float: right;
    width: $layout-mobile-tray-width;
  }

  .layout--content {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    @include box-shadow(0 0 10px rgba(0,0,0,0.1));
  }

}
{'fraction_non_alphanumeric': 0.15876068376068375, 'fraction_numerical': 0.03547008547008547, 'mean_word_length': 2.747798238590873, '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': '1364314', 'n_tokens_mistral': 1885, 'n_tokens_neox': 1697, 'n_words': 323}