<commit_before>@mixin wrapper-padding {
  @include pad(0 $base-spacing);
  width: 100%;
  box-sizing: border-box;

  @include media($desktop) {
    width: 100%;
    min-width: $max-width;
  }
}

@mixin flex-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  header[role='banner'],
  footer[role='contentinfo'] {
    flex: none;
  }
}

/*
Layout

Maximum page width is set to 1200px. Gutters between the columns are a minimum of 32px.

```
$max-width: em(1200) !global;
$gutter: em(32);
```

We define the grid placement for the following page layout elements:

- `header[role='banner']` and `footer[role='contentinfo']`
- `main.content-main`
- `aside`.

To create your own element you will need to use the <a href="http://thoughtbot.github.io/neat-docs/latest/#span-columns" rel="external">Neat <code>span-columns</code> function</a>.

For each new element you will need to set column properties for the breakpoints, from smallest to largest:

1. `$mobile`
2. `$tablet`
3. `$desktop`

The following diagram shows how the main content area takes up 12 of 16 columns at `$desktop` and above:

![Diagram of the layout across 16 columns](kss-assets/img/img_grid_layout.png)

For iOS users ensure you set the `viewport` to the `device-width` in your `<head>` to ensure your site is responsive:

```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

Style guide: Grid.5 Layout
*/

/*
Wrapper class

There is a wrapper class (`<div class="wrapper">`) for wrapping the contents of a block within the grid, while allowing its outer container to run the full viewport width.

This is currently used for the page `header` and `footer`, and also for the [breadcrumbs](section-navigation.html#kssref-navigation-2-breadcrumbs).

Style guide: Grid.5 Layout.1 Wrapper
*/

.wrapper {
  @include wrapper-padding;
  @include outer-container;
}

body {
  @include flex-layout;
}

main {
  @include wrapper-padding;
  @include outer-container;

  // makes flex work in IE10/11 https://thatemil.com/blog/2013/11/03/sticky-footers-flexbox-and-ie10/
  flex: 1 0 auto;

  @include media($tablet) {
    padding-top: $base-spacing * 2;
  }

  .form-wrapper {
    @include fill-parent;

    @include media($tablet) {
      @include span-columns(4 of 6);
    }
  }

  /*
  Sidebar

  Primary content is always contained in 12 columns. This allows for seamless introduction of a sidebar/side navigation.

  ![Diagram of the layout with optional aside nav](kss-assets/img/img_grid_layout_nav.png)

  By default the sidebar sits to the right of the main content. When the sidebar contains content controls (eg filters), instead of navigation, it can sit on the left side. Use the class `.sidebar-has-controls` on the parent `main` element:

  ```
  <main class="sidebar-has-controls">
    <aside class="sidebar">
    ...
    </aside>
    <article role="main" id="content" class="content-main">
    ...
    </article>
  </main>
  ```

  Style guide: Grid.6 Sidebar
  */
  @include direction-context(right-to-left) {
    .sidebar {
      @include fill-parent;

      @include media($tablet) {
        @include span-columns(4 of 12);
      }

      @include media($desktop) {
        @include span-columns(4 of 16);
      }
    }

    .content-main {
      @include fill-parent;

      @include media($tablet) {
        @include span-columns(8 of 12);
      }

      @include media($desktop) {
        @include span-columns(12 of 16);

        //Elements which should have shorter line-length for readability.
        h1,
        h2,
        h3,
        h4,
        h5,
        p,
        ul,
        ol,
        dl {
          max-width: 38rem;
        }

        //Elements which are one of the above but should be full width.
        .content-full-width,
        .list-horizontal,
        .list-vertical,
        .list-vertical--thirds,
        .list-vertical--forths,
        .inline-tab-nav ul,
        .inline-links,
        .inline-links--inverted {
          max-width: none;
          width: 100%;
        }
      }

      // Know what this is for?
      &:first-child {

        @include reset-layout-direction;

        @include fill-parent;
        @include shift(0);

        @include media($tablet) {
          @include span-columns(8 of 12);
          @include shift(0);
        }

        @include media($desktop) {
          @include span-columns(10 of 16);
          @include shift(0);
        }

      }
    }
  }
<commit_msg>Remove max-width from specific list styles so that we don't have to reset them<commit_after>@mixin wrapper-padding {
  @include pad(0 $base-spacing);
  width: 100%;
  box-sizing: border-box;

  @include media($desktop) {
    width: 100%;
    min-width: $max-width;
  }
}

@mixin flex-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  header[role='banner'],
  footer[role='contentinfo'] {
    flex: none;
  }
}

/*
Layout

Maximum page width is set to 1200px. Gutters between the columns are a minimum of 32px.

```
$max-width: em(1200) !global;
$gutter: em(32);
```

We define the grid placement for the following page layout elements:

- `header[role='banner']` and `footer[role='contentinfo']`
- `main.content-main`
- `aside`.

To create your own element you will need to use the <a href="http://thoughtbot.github.io/neat-docs/latest/#span-columns" rel="external">Neat <code>span-columns</code> function</a>.

For each new element you will need to set column properties for the breakpoints, from smallest to largest:

1. `$mobile`
2. `$tablet`
3. `$desktop`

The following diagram shows how the main content area takes up 12 of 16 columns at `$desktop` and above:

![Diagram of the layout across 16 columns](kss-assets/img/img_grid_layout.png)

For iOS users ensure you set the `viewport` to the `device-width` in your `<head>` to ensure your site is responsive:

```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

Style guide: Grid.5 Layout
*/

/*
Wrapper class

There is a wrapper class (`<div class="wrapper">`) for wrapping the contents of a block within the grid, while allowing its outer container to run the full viewport width.

This is currently used for the page `header` and `footer`, and also for the [breadcrumbs](section-navigation.html#kssref-navigation-2-breadcrumbs).

Style guide: Grid.5 Layout.1 Wrapper
*/

.wrapper {
  @include wrapper-padding;
  @include outer-container;
}

body {
  @include flex-layout;
}

main {
  @include wrapper-padding;
  @include outer-container;

  // makes flex work in IE10/11 https://thatemil.com/blog/2013/11/03/sticky-footers-flexbox-and-ie10/
  flex: 1 0 auto;

  @include media($tablet) {
    padding-top: $base-spacing * 2;
  }

  .form-wrapper {
    @include fill-parent;

    @include media($tablet) {
      @include span-columns(4 of 6);
    }
  }

  /*
  Sidebar

  Primary content is always contained in 12 columns. This allows for seamless introduction of a sidebar/side navigation.

  ![Diagram of the layout with optional aside nav](kss-assets/img/img_grid_layout_nav.png)

  By default the sidebar sits to the right of the main content. When the sidebar contains content controls (eg filters), instead of navigation, it can sit on the left side. Use the class `.sidebar-has-controls` on the parent `main` element:

  ```
  <main class="sidebar-has-controls">
    <aside class="sidebar">
    ...
    </aside>
    <article role="main" id="content" class="content-main">
    ...
    </article>
  </main>
  ```

  Style guide: Grid.6 Sidebar
  */
  @include direction-context(right-to-left) {
    .sidebar {
      @include fill-parent;

      @include media($tablet) {
        @include span-columns(4 of 12);
      }

      @include media($desktop) {
        @include span-columns(4 of 16);
      }
    }

    .content-main {
      @include fill-parent;

      @include media($tablet) {
        @include span-columns(8 of 12);
      }

      @include media($desktop) {
        @include span-columns(12 of 16);

        h1,
        h2,
        h3,
        h4,
        h5,
        p,
        dl {
          max-width: 38rem;
        }

        .content-full-width {
          max-width: none;
          width: 100%;
        }
      }

      // Know what this is for?
      &:first-child {

        @include reset-layout-direction;

        @include fill-parent;
        @include shift(0);

        @include media($tablet) {
          @include span-columns(8 of 12);
          @include shift(0);
        }

        @include media($desktop) {
          @include span-columns(10 of 16);
          @include shift(0);
        }

      }
    }
  }

{'fraction_non_alphanumeric': 0.12402830954867154, 'fraction_numerical': 0.021348184244111845, 'mean_word_length': 2.635596794601434, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 2, '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': '4984828', 'n_tokens_mistral': 2889, 'n_tokens_neox': 2667, 'n_words': 843}