Modifications to the WordPress "Spring Loaded" theme to make it more responsive for larger displays.

.gitignore

.idea
*.css
.sass-cache

spring_responsive.scss

/**
 * Cross-browser compatibility bullshit
 */

@mixin border-top-left-radius($val) {
  -moz-border-top-left-radius: $val;
  -webkit-border-top-left-radius: $val;
  border-top-left-radius: $val;
}

@mixin border-top-right-radius($val) {
  -moz-border-top-right-radius: $val;
  -webkit-border-top-right-radius: $val;
  border-top-right-radius: $val;
}

@mixin gradient($first, $second) {
  background-color: $first; // Old browsers
  background: -moz-linear-gradient(top,  $first 0%, $second 100%); // FF3.6+
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$first), color-stop(100%,$second)); // Chrome,Safari4+
  background: -webkit-linear-gradient(top,  $first 0%,$second 100%); // Chrome10+,Safari5.1+
  background: -o-linear-gradient(top,  $first 0%,$second 100%); // Opera 11.10+
  background: -ms-linear-gradient(top,  $first 0%,$second 100%); // IE10+
  background: linear-gradient(to bottom,  $first 0%,$second 100%); // W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$first}', endColorstr='#{$second}',GradientType=0 ); // IE6-9
}

/*
 * Resize the content from the original, tiny size
 */

$ORIGINAL-WIDTH : 900px;
$ORIGINAL-CONTENT : 626px;

$papabear-width : 1600px;
$mamabear-width : 1100px;
$mamabear-margin : 100px;
$papabear-margin : 400px;
$mamabear-page-margin : 20px;
$papabear-page-margin : 40px;


$bp-mamabear : "(min-width : #{$mamabear-width}) and (max-width : #{$papabear-width - 1})";
$bp-papabear : "(min-width : #{$papabear-width})";
$bp-not-babybear : "(min-width : #{$mamabear-width})";
$bp-babybear : "(max-width : #{mamabear-width - 1})";

@mixin resize-main() {
  @media #{$bp-papabear} {
    width: $papabear-width - $papabear-margin;
  }
  @media #{$bp-mamabear} {
    width: $mamabear-width - $mamabear-margin;
  }
}

@mixin resize-content-for($size, $margin) {
  width : $ORIGINAL-CONTENT + ($size - $ORIGINAL-WIDTH) - $margin;
}

@mixin resize-content() {
  @media #{$bp-papabear} {
    @include resize-content-for($papabear-width, $papabear-margin);
  }
  @media #{$bp-mamabear} {
    @include resize-content-for($mamabear-width, $mamabear-margin);
  }
}

/* Hop on the Helvetica bandwagon
 *
 */
html, h2, body, h1 {
  font-family: "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif !important;
}

.wp-caption p.wp-caption-text {
  font-size: 12px;
}  

/*
 * Resize the main content area
 */

#wrapper {
  @include resize-main();
}
#header .sleeve {
  @include resize-main();
}

#main {
  @include resize-content();
}

#navigation {
  // replace the gif with a css version, so that
  // it stretches all the way to the right
  // original gif was:
  // /wp-content/themes/pub/springloaded/images/nav-bg.gif
  @include resize-content();
  @include border-top-right-radius('7px');
  @include border-top-left-radius('7px');
  $topColor : #2f3e13;
  $bottomColor : #1d2d02;
  @include gradient($bottomColor, $topColor);
}

// couldn't create the comment background in pure CSS, but luckily the gif was pretty easy to stretch to
// the mamabear and papabear sizes
ol.commentlist li {
  @media #{$bp-not-babybear} {
    background : url(http://nolanwlawson.files.wordpress.com/2013/12/comment-bg-1200.gif) no-repeat top left;
  }
}

/**
 * Resize the text in posts
 */

.entry p, .entry ul, .entry ol {
  @media #{$bp-not-babybear} {
    padding-bottom: 20px; // instead of 10px
  }
}

.post, .page {
  @media #{$bp-not-babybear} {
    font-size: 14px; // instead of 13px
  }
}

.entry {
  @media #{$bp-papabear} {
    margin: 0 $papabear-page-margin 0 $papabear-page-margin; // instead of nothing
  }
  @media #{$bp-mamabear} {
    margin: 0 $mamabear-page-margin 0 $mamabear-page-margin; // instead of nothing
  }
}

/*
 * Style inline code snippets to look like GitHub's.
 */

@mixin code {
  border: 1px solid #ddd;
  background-color: #f8f8f8;
  border-radius: 3px;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  @media #{$bp-babybear} {
    font-size: 12px;
  }
  @media #{$bp-not-babybear} {
    font-size: 13px;
  }
}

@mixin inline-code {
  @include code;
  white-space: nowrap;
  margin: 0 2px;
  padding: 0px 5px;
}

@mixin multiline-code {
  @include code;
  margin: 5px 20px;
  padding: 5px 5px;
}

pre > code {
  white-space: normal;
}

code {
  @include inline-code;
}

font[face="monospace"] {
  font-family: monospace;
  @include inline-code;
}

pre {
  @include multiline-code;
}

/**
 * make the code snippets smaller
 */

code.java {
  font-size: 0.9em !important;
}

code.jscript {
  font-size: 0.9em !important;
}

/**
 * Block quotes
 */

.entry blockquote:before {
  content: url(//nolanwlawson.files.wordpress.com/2014/04/cquote1.png);
  left: 3em;
  position: absolute;
}

.entry blockquote {
  padding-left: 6em;
  padding-right: 7em;
  padding-bottom: 4em;
  padding-top: 1em;
  font-style: normal !important
}

.entry blockquote:after {
  content: url(//nolanwlawson.files.wordpress.com/2014/04/cquote2.png);
  right: 5em;
  position: absolute;
}

/**
 * Miscellaneous
 */

#wpstats {
  visibility: hidden; // hide the little smiley face
}

.audio-wrapper > span {
  text-align : center !important;
}