<commit_before><commit_msg>flexbox grid, 12 columns, wip<commit_after>@import "../mixins/*";

@mixin grid-size($value: auto) {
  -webkit-flex-basis: $value;
  -ms-flex-preferred-size: $value;
  -moz-flex-basis: $value;
  flex-basis: $value;
  max-width: $value;
}

$columns: 12;

.grid-container {
  margin-right: auto;
  margin-left: auto;
}

.grid {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.grid.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.grid-cell.reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}


@for $i from 1 through $columns {
  .grid-cell-xs-#{ $i },
  .grid-cell-xs-offset-#{ $i } {
    @extend %grid-xs-list-styles;
  }
}

%grid-xs-list-styles {
  box-sizing: border-box;

  @include flexbox;
  @include flexbox-direction;

  @include flex;
  @include flex-grow;
  @include flex-shrink;
}

.grid-cell-xs {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%;
}

@for $i from 1 through $columns {
  $calc: ((100 / $columns) * $i) * 1%;

  .grid-cell-xs-#{ $i } {
    @include grid-size($calc)
  }

  .grid-cell-xs-offset-#{ $i } {
    margin-left: $calc;
  }
}

@media only screen and (min-width: 48em) {
  .grid-container {
    width: 60rem;
  }

  @for $i from 1 through $columns {
    .grid-cell-sm-#{ $i },
    .grid-cell-sm-offset-#{ $i } {
      @extend %grid-sm-list-styles;
    }
  }

  %grid-sm-list-styles {
    box-sizing: border-box;

    @include flexbox;
    @include flexbox-direction;

    @include flex;
    @include flex-grow;
    @include flex-shrink;
  }

  .grid-cell-sm {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }

  @for $i from 1 through $columns {
    $calc: ((100 / $columns) * $i) * 1%;

    .grid-cell-sm-#{ $i } {
      @include grid-size($calc)
    }

    .grid-cell-sm-offset-#{ $i } {
      margin-left: $calc;
    }
  }
}

@media only screen and (min-width: 62em) {
  .grid-container {
    width: 80rem;
  }

  @for $i from 1 through $columns {
    .grid-cell-md-#{ $i },
    .grid-cell-md-offset-#{ $i } {
      @extend %grid-md-list-styles;
    }
  }

  %grid-md-list-styles {
    box-sizing: border-box;

    @include flexbox;
    @include flexbox-direction;

    @include flex;
    @include flex-grow;
    @include flex-shrink;
  }

  .grid-cell-md {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }

  @for $i from 1 through $columns {
    $calc: ((100 / $columns) * $i) * 1%;

    .grid-cell-md-#{ $i } {
      @include grid-size($calc)
    }

    .grid-cell-md-offset-#{ $i } {
      margin-left: $calc;
    }
  }
}

@media only screen and (min-width: 75em) {
  .grid-container {
    width: 100rem;
  }

  @for $i from 1 through $columns {
    .grid-cell-lg-#{ $i },
    .grid-cell-lg-offset-#{ $i } {
      @extend %grid-lg-list-styles;
    }
  }

  %grid-lg-list-styles {
    box-sizing: border-box;

    @include flexbox;
    @include flexbox-direction;

    @include flex;
    @include flex-grow;
    @include flex-shrink;
  }

  .grid-cell-lg {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }

  @for $i from 1 through $columns {
    $calc: ((100 / $columns) * $i) * 1%;

    .grid-cell-lg-#{ $i } {
      @include grid-size($calc)
    }

    .grid-cell-lg-offset-#{ $i } {
      margin-left: $calc;
    }
  }
}

.grid-cell-content-center {
  align-items: center;
  justify-content: center;
}
{'fraction_non_alphanumeric': 0.18244444444444444, 'fraction_numerical': 0.019555555555555555, 'mean_word_length': 2.3119941133186166, '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': '453533', 'n_tokens_mistral': 1958, 'n_tokens_neox': 1816, 'n_words': 365}