// COLORS

$blue: #0066cc;
$blue-darker: #0d4d8e;
$gray-dark: #333;
$gray-lighter: #666;

$color-text: $gray-dark;
$color-link: $blue;

// FONTS

$font-sans: 'Roboto Condensed', sans-serif;

// SIZES

$bp-large:  85rem;
$bp-medium: 45rem;
$bp-small:  28rem;
// for debugging layout
@mixin debug-layout($color: black, $important: false) {
  @if $important {
    * {
      background: rgba($color, .05) !important;
    }
  } @else {
    * {
      background: rgba($color, .05);
    }
  }
}

// COLORS

$blue: #0066cc;
$blue-darker: #0d4d8e;
$gray-dark: #333;
$gray-lighter: #666;

$color-text: $gray-dark;
$color-link: $blue;

// FONTS

$font-sans: 'Roboto Condensed', sans-serif;

// SIZES

$bp-large:  85rem;
$bp-medium: 45rem;
$bp-small:  28rem;

// mixin to reduce amount of code for responsive design tweaks
@mixin bp($point) {

  @if $point == large {
    @media only screen and (min-width: $bp-large) { @content; }
  }
  @else if $point == medium {
    @media only screen and (max-width: $bp-medium) { @content; }
  }
  @else if $point == small {
    @media only screen and (max-width: $bp-small) { @content; }
  }

}

// for debugging layout
@mixin debug-layout($color: black, $important: false) {
  @if $important {
    * {
      background: rgba($color, .05) !important;
    }
  } @else {
    * {
      background: rgba($color, .05);
    }
  }
}

Add mixin to reduce responsive design code for tweaks
Add mixin to reduce responsive design code for tweaks
