<commit_before>@import '_AppWideVariables';
@import '_ResponsiveBreakpoints';
@import '_ThreeColumnLayout_Base';

html.flexbox {
  body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .page_area {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
  }
  .application_menu {
    flex-basis: calc(#{$appmenu-width} - #{$double_side_padding});
    flex-shrink: 0;
  }
  .content_area {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
  }
  .content_container {
    display: flex;
    flex-grow: 1;
  }
  .main_content {
    flex-grow: 1;
  }
  .main_content_asides {
    flex-basis: $asides-width;
  }
  body>footer {
    flex-basis: $footer-height;
    width: calc(100% - #{$appmenu-width});
    position: relative;
    left: $appmenu-width;
  }
}

@media #{$mobile_media}, #{$tablet_media} {
  html.flexbox {
    .application_menu, .content_area {
      flex-grow: 0;
      flex-shrink: 0;
      box-sizing: border-box;
    }
    .content_area > header {
      width: 100%;
      box-sizing: border-box;
    }
    .content_container {
      flex-grow: 1;
    }
    .main_content, .main_content_asides {
      flex-grow: 0;
      flex-shrink: 0;
      box-sizing: border-box;
    }
    body>footer {
      flex-basis: $footer-height;
      width: 100%;
      position: static;
      left: 0;
    }
  }
}
@media #{$mobile_media} {
  html.flexbox {
    .page_area {
      width: 200%;
      transform: translateX(-50%);
    }
    .content_container {
      width: 200%;
    }
    .page_area.app_nav_panel_active {
      transform: translateX(0);
    }
    .page_area.asides_panel_active .content_container {
      transform: translateX(-50%);
    }
    .application_menu {
      flex-basis: 50%;
    }
    .content_area {
      flex-basis: 50%;
    }
    .main_content, .main_content_asides {
      flex-basis: 50%;
    }
  }
}

@media #{$tablet_media} {
  html.flexbox {
    .page_area {
      width: calc(100% + 300px);
      transform: translateX(-300px);
    }
    .page_area.app_nav_panel_active {
      transform: translateX(0);
    }
    .page_area.app_nav_panel_active+footer {
      transform: translateX(300px);
    }
    .page_area.asides_panel_active .content_container {
      transform: translateX(-300px);
    }
    .application_menu {
      flex-basis: 300px;
    }
    .content_area {
      flex-grow: 1;
    }
    .content_container {
      width: calc(100% + 300px);
    }
    .main_content {
      flex-basis: 700px;
      min-width: 700px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    .main_content_asides {
      flex-basis: 300px;
    }
    .content_area > header {
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

@media #{$medium_desktop_media} {
  html.flexbox {
    .page_area {
      width: calc(100% + 300px);
      transform: translateX(-300px);
    }
    .page_area.app_nav_panel_active .application_menu {
      transform: translateX(300px);
    }
    .content_area > header {
      min-width: 960px;
      max-width: 1080px;
      margin-left: 0;
      margin-right: auto;
    }
   .main_content {
      min-width: 660px;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
      flex-shrink: 1;<commit_msg>WIP #AG261 - Fix bug in flexbox layout (tablet)<commit_after>@import '_AppWideVariables';
@import '_ResponsiveBreakpoints';
@import '_ThreeColumnLayout_Base';

html.flexbox {
  body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .page_area {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
  }
  .application_menu {
    flex-basis: calc(#{$appmenu-width} - #{$double_side_padding});
    flex-shrink: 0;
  }
  .content_area {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
  }
  .content_container {
    display: flex;
    flex-grow: 1;
  }
  .main_content {
    flex-grow: 1;
  }
  .main_content_asides {
    flex-basis: $asides-width;
  }
  body>footer {
    flex-basis: $footer-height;
    width: calc(100% - #{$appmenu-width});
    position: relative;
    left: $appmenu-width;
  }
}

@media #{$mobile_media}, #{$tablet_media} {
  html.flexbox {
    .application_menu, .content_area {
      flex-grow: 0;
      flex-shrink: 0;
      box-sizing: border-box;
    }
    .content_area > header {
      width: 100%;
      box-sizing: border-box;
    }
    .content_container {
      flex-grow: 1;
    }
    .main_content, .main_content_asides {
      flex-grow: 0;
      flex-shrink: 0;
      box-sizing: border-box;
    }
    body>footer {
      flex-basis: $footer-height;
      width: 100%;
      position: static;
      left: 0;
    }
  }
}
@media #{$mobile_media} {
  html.flexbox {
    .page_area {
      width: 200%;
      transform: translateX(-50%);
    }
    .content_container {
      width: 200%;
    }
    .page_area.app_nav_panel_active {
      transform: translateX(0);
    }
    .page_area.asides_panel_active .content_container {
      transform: translateX(-50%);
    }
    .application_menu {
      flex-basis: 50%;
    }
    .content_area {
      flex-basis: 50%;
    }
    .main_content, .main_content_asides {
      flex-basis: 50%;
    }
  }
}

@media #{$tablet_media} {
  html.flexbox {
    .page_area {
      width: calc(100% + 600px);
      transform: translateX(-300px);
    }
    .page_area.app_nav_panel_active {
      transform: translateX(0);
    }
    .page_area.app_nav_panel_active+footer {
      transform: translateX(300px);
    }
    .page_area.asides_panel_active .content_container {
      transform: translateX(-300px);
    }
    .application_menu {
      flex-basis: 300px;
    }
    .content_area {
      flex-grow: 1;
      flex-shrink: 1;
    }
    .content_container {
      width: 100%;
    }
    .main_content {
      flex-basis: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    .main_content_asides {
      flex-basis: 300px;
    }
    .content_area > header {
      width: 700px;
      margin-left: calc(50% - 500px);
      margin-right: calc(50% - 200px);
    }
  }
}

@media #{$medium_desktop_media} {
  html.flexbox {
    .page_area {
      width: calc(100% + 300px);
      transform: translateX(-300px);
    }
    .page_area.app_nav_panel_active .application_menu {
      transform: translateX(300px);
    }
    .content_area > header {
      min-width: 960px;
      max-width: 1080px;
      margin-left: 0;
      margin-right: auto;
    }
   .main_content {
      min-width: 660px;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
      flex-shrink: 1;
{'fraction_non_alphanumeric': 0.1337646704784833, 'fraction_numerical': 0.033554017454107736, 'mean_word_length': 2.189539347408829, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, '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': '3397391', 'n_tokens_mistral': 2621, 'n_tokens_neox': 2388, 'n_words': 421}