/*------------------------------------*\
  #WRAPPERS
\*------------------------------------*/

/* Wrappers for the page's content.
 *
 * `.wrapper--page` is the main class that will hold all the page's content,
 * then you use `.wrapper--content` inside of it to put the text at the desired
 * width.
 *
 * This allows images to extend out past the content when placed as children of
 * `.wrapper--page`. It makes it "pop", so to speak.
 *
 * Usage:

     <div class="wrapper wrapper--page">
       <!-- This image will be a larger width than the paragraph in the below
         section. -->
       <img src="/img/sample.png">

       <section class="wrapper wrapper--content">
         </p>Some sample content</p>
       </section>
     </div>
 */

$wrapper-width: 680px;

.wrapper,
%wrapper {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: $spacing-unit;

  width: $wrapper-width;

  @include media-query(palm) {
    max-width: 100%;
  }
}

.wrapper--content,
%wrapper--content {
  @extend %wrapper;

  width: $wrapper-width - 100px;

  @include media-query(palm) {
    // Padding the sides of the text to make it easier to read
    padding: 0 $small-spacing-unit;
  }
}

/*------------------------------------*\
  #WRAPPERS
\*------------------------------------*/

/* Wrappers for the page's content.
 *
 * `.wrapper` is the main class that will hold all the page's content, then you
 * use `.wrapper--content` inside of it to put the text at the desired width.
 *
 * This allows images to extend out past the content when placed as children of
 * `.wrapper`. It makes it "pop", so to speak.
 *
 * Usage:

     <div class="wrapper">
       <!-- This image will be a larger width than the paragraph in the below
         -- section. -->
       <img src="/img/sample.png">

       <section class="wrapper--content">
         </p>Some sample content</p>
       </section>
     </div>
 */

$wrapper-width: 680px;

.wrapper,
%wrapper {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: $spacing-unit;

  width: $wrapper-width;

  @include media-query(palm) {
    max-width: 100%;
  }
}

.wrapper--content,
%wrapper--content {
  @extend %wrapper;

  width: $wrapper-width - 100px;

  @include media-query(palm) {
    // Padding the sides of the text to make it easier to read
    padding: 0 $small-spacing-unit;
  }
}

Update comment to reflect current changes
Update comment to reflect current changes

I forgot to do this when I made the wrapper class changes a while back.
This brings the docs up to speed.
