// Define defaults for each variable.

$base-font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif !default; $base-font-size: 16px !default; $base-font-weight: 400 !default; $small-font-size: $base-font-size * 0.875 !default; $base-line-height: 1.5 !default;

$spacing-unit: 30px !default;

$text-color: #111 !default; $background-color: fdfdfd !default; $brand-color: #2a7ae2 !default;

$grey-color: #828282 !default; $grey-color-light: lighten($grey-color, 40%) !default; $grey-color-dark: darken($grey-color, 25%) !default;

// Width of the content area $content-width: 800px !default;

$on-palm: 600px !default; $on-laptop: 800px !default;

// Use media queries like this: // @include media-query($on-palm) { // .wrapper { // padding-right: $spacing-unit / 2; // padding-left: $spacing-unit / 2; // } // } @mixin media-query($device) {

@media screen and (max-width: $device) {
        @content;
          }
      }

/**

* Reset some basic elements
 */

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {

  margin: 0;
    padding: 0;
}

/**
 * Basic styling
  */

body {

font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
  color: $text-color;
    background-color: $background-color;
      -webkit-text-size-adjust: 100%;
        -webkit-font-feature-settings: "kern" 1;
             -moz-font-feature-settings: "kern" 1;
                    -o-font-feature-settings: "kern" 1;
                              font-feature-settings: "kern" 1;
                                font-kerning: normal;
                            }

                            /**
                             * Set `margin-bottom` to maintain vertical rhythm
                              */

h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, %vertical-rhythm {

    margin-bottom: $spacing-unit / 2;
}

/**
 * Images
  */

img {

  max-width: 100%;
    vertical-align: middle;
}

/**
 * Figures
  */

figure > img {

    display: block;
}

figcaption {
      font-size: $small-font-size;
  }

  /**
   * Lists
    */

ul, ol {

    margin-left: $spacing-unit;
}

li {
      > ul,
        > ol {
                margin-bottom: 0;
                  }
              }

              /**
               * Headings
                */

h1, h2, h3, h4, h5, h6 {

    font-weight: $base-font-weight;
}

/**
 * Links
  */

a {

color: $brand-color;
  text-decoration: none;

    &:visited {
            color: darken($brand-color, 15%);
              }

                &:hover {
                        color: $text-color;
                            text-decoration: underline;
                              }
                          }

                          /**
                           * Blockquotes
                            */

blockquote {

color: $grey-color;
  border-left: 4px solid $grey-color-light;
    padding-left: $spacing-unit / 2;
      font-size: 18px;
        letter-spacing: -1px;
          font-style: italic;

            > :last-child {
                    margin-bottom: 0;
                      }
                  }

                  /**
                   * Code formatting
                    */

pre, code {

font-size: 15px;
  border: 1px solid $grey-color-light;
    border-radius: 3px;
      background-color: #eef;
  }

  code {
        padding: 1px 5px;
    }

    pre {
          padding: 8px 12px;
            overflow-x: auto;

              > code {
                      border: 0;
                          padding-right: 0;
                              padding-left: 0;
                                }
                            }

                            /**
                             * Wrapper
                              */

.wrapper {

max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
  max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
    margin-right: auto;
      margin-left: auto;
        padding-right: $spacing-unit;
          padding-left: $spacing-unit;
            @extend %clearfix;

              @include media-query($on-laptop) {
                      max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
                          max-width:         calc(#{$content-width} - (#{$spacing-unit}));
                              padding-right: $spacing-unit / 2;
                                  padding-left: $spacing-unit / 2;
                                    }
                                }

                                /**
                                 * Clearfix
                                  */

%clearfix:after {

content: "";
  display: table;
    clear: both;
}

/**
 * Icons
  */

.icon > svg {

display: inline-block;
  vertical-align: middle;

    path {
            fill: $grey-color;
              }
          }