Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/.gitignore

Last active Dec 29, 2015
Embed
What would you like to do?
Modifications to the WordPress "Spring Loaded" theme to make it more responsive for larger displays.
.idea
*.css
.sass-cache
/**
* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment