<commit_before>$mq-col1: $mq-not-medium;
$mq-col2: $mq-medium;
$mq-col3: $mq-x-large;

#main-wrap {
  --main-max-width: calc(100vh - #{$site-header-outer-height});

  @include breakpoint($mq-col2) {
    --main-max-width: auto;
  }
}

.trainer {
  grid-area: main;
  display: grid;

  .side {
    @extend %zen;
    grid-area: side;
  }

  .main-board {
    grid-area: board;
  }

  .table {
    grid-area: table;
  }

  .progress {
    @extend %zen;
    grid-area: progress;
  }

  .keyboard-input {
    grid-area: kb-input;
  }

  grid-template-areas: 'board' 'progress' 'table' 'side';
  grid-row-gap: $block-gap;

  @include breakpoint($mq-col2) {
    grid-template-columns: $col2-uniboard-width $block-gap $col2-uniboard-table;
    grid-template-rows: fit-content(0);
    grid-template-areas:
      'board    . table'
      'board    . side'
      'progress . side'
      '.        . side';
  }

  @include breakpoint($mq-col3) {
    grid-template-areas:
      'side . board    . table'
      'side . progress . .'
      'side . kb-input . .'
      'side . .        . .';
    grid-template-columns: $col3-uniboard-side $block-gap $col3-uniboard-width $block-gap $col3-uniboard-table;
  }

  &.init {
    @include breakpoint($mq-col1) {
      .explanation {
        order: 2;
        margin: 1em;
      }
    }
  }
}<commit_msg>add input to 1 and 2 column views<commit_after>$mq-col1: $mq-not-medium;
$mq-col2: $mq-medium;
$mq-col3: $mq-x-large;

#main-wrap {
  --main-max-width: calc(100vh - #{$site-header-outer-height});

  @include breakpoint($mq-col2) {
    --main-max-width: auto;
  }
}

.trainer {
  grid-area: main;
  display: grid;

  .side {
    @extend %zen;
    grid-area: side;
  }

  .main-board {
    grid-area: board;
  }

  .table {
    grid-area: table;
  }

  .progress {
    @extend %zen;
    grid-area: progress;
  }

  .keyboard-input {
    grid-area: kb-input;
  }

  grid-template-areas: 'board' 'progress' 'kb-input' 'table' 'side';
  grid-row-gap: $block-gap;

  @include breakpoint($mq-col2) {
    grid-template-columns: $col2-uniboard-width $block-gap $col2-uniboard-table;
    grid-template-rows: fit-content(0);
    grid-template-areas:
      'board    . table'
      'board    . side'
      'progress . side'
      'kb-input . side'
      '.        . side';
  }

  @include breakpoint($mq-col3) {
    grid-template-areas:
      'side . board    . table'
      'side . progress . .'
      'side . kb-input . .'
      'side . .        . .';
    grid-template-columns: $col3-uniboard-side $block-gap $col3-uniboard-width $block-gap $col3-uniboard-table;
  }

  &.init {
    @include breakpoint($mq-col1) {
      .explanation {
        order: 2;
        margin: 1em;
      }
    }
  }
}
{'fraction_non_alphanumeric': 0.172744014732965, 'fraction_numerical': 0.013996316758747698, 'mean_word_length': 2.048260381593715, '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': '7304783', 'n_tokens_mistral': 1110, 'n_tokens_neox': 1058, 'n_words': 182}