Cleanup LESS variable names

2013-09-07 08:44:10 -04:00
parent 194642eaa0
commit 07b98f3459
11 changed files with 293 additions and 369 deletions
--- a/assets/less/coderay.less
+++ b/assets/less/coderay.less
@@ -1,6 +1,6 @@
 .CodeRay {
  background-color: #efefef;
-  font-family: @codefont;
+  font-family: @code-font;
  font-size: 80%;
  color: #333332;
  margin-bottom: 1.5em;
--- a/assets/less/forms.less
+++ b/assets/less/forms.less
@@ -40,7 +40,7 @@ input,
 button,
 select,
 textarea {
-	font-family: @basefont; 
+	font-family: @base-font; 
 	.box-sizing(border-box); 
 }
 label {
--- a/assets/less/ie.less
+++ b/assets/less/ie.less
@@ -12,7 +12,7 @@
@import "site.less";
 // TYPOGRAPHY =================================================
 /* Typeplate.com typographic starter pack ================== */
-@import "typeplate.less";
+// @import "typeplate.less";
@import "typography.less";
 // MIXINS =====================================================
@import "mixins.less";
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -12,7 +12,7 @@
@import "site.less";
 // TYPOGRAPHY =================================================
 /* Typeplate.com typographic starter pack ================== */
-@import "typeplate.less";
+// @import "typeplate.less";
@import "typography.less";
 /* Pygments Syntax highlighting ============================= */
@import "pygments.less";
--- a/assets/less/mixins.less
+++ b/assets/less/mixins.less
@@ -1,76 +1,124 @@
-// ===========================================================
+// UTILITY MIXINS
+// --------------------------------------------------

-// 320 and Up by Andy Clarke
-// Version: 3.0
-// URL: http://stuffandnonsense.co.uk/projects/320andup/
-// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0
-// Modified by: Michael Rose
+// Clearfix
+// --------------------
+// For clearing floats like a boss h5bp.com/q
+.clearfix {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+    // Fixes Opera/contenteditable bug:
+    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+    line-height: 0;
+  }
+  &:after {
+    clear: both;
+  }
+}

-// ===========================================================/
+// Webkit-style focus
+// --------------------
+.tab-focus() {
+  // Default
+  outline: thin dotted #333;
+  // Webkit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}

-// ROOT =====================================================
-// TYPOGRAPHY ===============================================
-.font-size(@font-size: 16){
-@rem: (@font-size / 10);
-font-size : @font-size * 1px;
-font-size : ~"@{rem}rem"; }
+// Center-align a block level element
+// ----------------------------------
+.center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}

-.lineheight(@font-size: 16){
-@rem: (@font-size / 10);
-line-height: @font-size * 1px;
-line-height: ~"@{rem}rem"; }
+// TYPOGRAPHY
+// --------------------------------------------------
+
+// Full-fat vertical rhythm
+// ------------------------
+.font-size(@size) {
+  font-size: 0px + @size;
+  font-size: 0rem + @size / @doc-font-size;
+  line-height: 0 + round(@doc-line-height / @size*10000) / 10000;
+  margin-bottom: 0px + @doc-line-height;
+  margin-bottom: 0rem + (@doc-line-height / @doc-font-size);
+}
+
+// Just the REMs
+// -------------
+.font-rem(@size) {
+  font-size: 0px + @size;
+  font-size: 0rem + @size / @doc-font-size;
+}
+
+// Just font-size and line-height
+// ------------------------------
+.font(@size) {
+  font-size: 0px + @size;
+  font-size: 0rem + @size / @doc-font-size;
+  line-height: 0 + round(@doc-line-height / @size*10000) / 10000;
+}

 .text-overflow() {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap; }

-// COLOR ====================================================
-// TEXTURE ==================================================
-/* Gradients ============================================= */
+// GRADIENTS
+// --------------------------------------------------
+
 .horizontal(@startColor : @white, @endColor : @lightergrey) {
 background-color: @endColor;
 background-image  : -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
-background-image  : -webkit-linear-gradient(left, @startColor, @endColor); 					 // Safari 5.1+, Chrome 10+
-background-image  : -moz-linear-gradient(left, @startColor, @endColor); 					 // FF 3.6+
-background-image  : -ms-linear-gradient(left, @startColor, @endColor); 						 // IE10
-background-image  : -o-linear-gradient(left, @startColor, @endColor); 						 // Opera 11.10
-background-image  : linear-gradient(left, @startColor, @endColor); 							 // W3C
+background-image  : -webkit-linear-gradient(left, @startColor, @endColor);           // Safari 5.1+, Chrome 10+
+background-image  : -moz-linear-gradient(left, @startColor, @endColor);            // FF 3.6+
+background-image  : -ms-linear-gradient(left, @startColor, @endColor);             // IE10
+background-image  : -o-linear-gradient(left, @startColor, @endColor);              // Opera 11.10
+background-image  : linear-gradient(left, @startColor, @endColor);               // W3C
 background-repeat : repeat-x; }

 .vertical(@startColor : @white, @endColor:  @lightergrey) {
 background-image  : -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
-background-image  : -webkit-linear-gradient(top, @startColor, @endColor); 					 // Safari 5.1+, Chrome 10+
+background-image  : -webkit-linear-gradient(top, @startColor, @endColor);            // Safari 5.1+, Chrome 10+
 background-color  : @endColor;
-background-image  : -moz-linear-gradient(top, @startColor, @endColor);   					 // FF 3.6+
-background-image  : -ms-linear-gradient(top, @startColor, @endColor); 						 // IE10
-background-image  : -o-linear-gradient(top, @startColor, @endColor); 						 // Opera 11.10
-background-image  : linear-gradient(top, @startColor, @endColor); 							 // W3C
+background-image  : -moz-linear-gradient(top, @startColor, @endColor);             // FF 3.6+
+background-image  : -ms-linear-gradient(top, @startColor, @endColor);              // IE10
+background-image  : -o-linear-gradient(top, @startColor, @endColor);             // Opera 11.10
+background-image  : linear-gradient(top, @startColor, @endColor);                // W3C
 background-repeat : repeat-x; }

 .directional(@startColor : @white, @endColor : @lightergrey, @deg : 45deg) {
 background-color  : @endColor;
-background-image  : -moz-linear-gradient(@deg, @startColor, @endColor); 					// FF 3.6+
-background-image  : -ms-linear-gradient(@deg, @startColor, @endColor); 						// IE10
-background-image  : -webkit-linear-gradient(@deg, @startColor, @endColor); 					// Safari 5.1+, Chrome 10+
-background-image  : -o-linear-gradient(@deg, @startColor, @endColor); 						// Opera 11.10
-background-image  : linear-gradient(@deg, @startColor, @endColor); 							// W3C
+background-image  : -moz-linear-gradient(@deg, @startColor, @endColor);           // FF 3.6+
+background-image  : -ms-linear-gradient(@deg, @startColor, @endColor);            // IE10
+background-image  : -webkit-linear-gradient(@deg, @startColor, @endColor);          // Safari 5.1+, Chrome 10+
+background-image  : -o-linear-gradient(@deg, @startColor, @endColor);             // Opera 11.10
+background-image  : linear-gradient(@deg, @startColor, @endColor);              // W3C
 background-repeat : repeat-x; }

-/* .bordered(COLOR, COLOR, COLOR, COLOR); ================ */
+// .bordered(COLOR, COLOR, COLOR, COLOR);
 .bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee) {
 border-top : solid 1px @top-color;
 border-left : solid 1px @left-color;
 border-right : solid 1px @right-color;
 border-bottom : solid 1px @bottom-color; }

-/* .rounded(VALUE); ====================================== */
+// ROUND CORNERS
+// --------------------------------------------------
+
+// .rounded(VALUE);
 .rounded(@radius:4px) {
 -webkit-border-radius : @radius;
 -moz-border-radius : @radius;
 border-radius : @radius; }

-/* .border-radius(VALUE,VALUE,VALUE,VALUE); ============== */
+// .border-radius(VALUE,VALUE,VALUE,VALUE);
 .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
 -webkit-border-top-right-radius : @topright;
 -webkit-border-bottom-right-radius : @bottomright;
@@ -88,29 +136,32 @@ border-top-left-radius : @topleft;
 -moz-background-clip : padding;  
 background-clip : padding-box; }

-/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) =========== */
+// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
 .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
 -webkit-box-shadow : @shadow;
 -moz-box-shadow : @shadow;
 box-shadow : @shadow; }

-/* .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); ======= */
+// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
 .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
 -webkit-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
 -moz-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
 box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); }

-/* .text-shadow(); ======================================== */
+// .text-shadow();
 .text-shadow(@shadow: 0 2px 3px rgba(0,0,0,.25)) {
 text-shadow : @shadow; }

-/* .opacity(VALUE); ======================================= */
+// .opacity(VALUE);
 .opacity(@opacity : .5) {
 -webkit-opacity : @opacity;
 -moz-opacity : @opacity;
 opacity : @opacity; }

-/* .rotate(VALUEdeg); ===================================== */
+// TRANSFORMATIONS
+// --------------------------------------------------
+
+// .rotate(VALUEdeg);
 .rotate(@deg) {
 -webkit-transform : rotate(@deg);
 -moz-transform : rotate(@deg);
@@ -118,7 +169,7 @@ opacity : @opacity; }
 -o-transform : rotate(@deg);
 transform : rotate(@deg); }

-/* .scale(VALUE); ========================================= */
+// .scale(VALUE);
 .scale(@ratio) {
 -webkit-transform : scale(@ratio);
 -moz-transform : scale(@ratio);
@@ -126,7 +177,7 @@ transform : rotate(@deg); }
 -o-transform : scale(@ratio);
 transform : scale(@ratio); }

-/* .skew(VALUE, VALUE); =================================== */
+// .skew(VALUE, VALUE);
 .skew(@x: 0, @y: 0) {
 -webkit-transform : skew(@x, @y);
 -moz-transform : skew(@x, @y);
@@ -134,7 +185,7 @@ transform : scale(@ratio); }
 -o-transform : skew(@x, @y);
 transform : skew(@x, @y); }

-/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */
+// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
 .transition(@transition) {
 -webkit-transition : @transition;
 -moz-transition : @transition;
@@ -142,7 +193,7 @@ transform : skew(@x, @y); }
 -o-transition : @transition;
 transition : @transition; }

-/* .translate(VALUE, VALUE) =============================== */
+// .translate(VALUE, VALUE)
 .translate(@x: 0, @y: 0) {
 -webkit-transform : translate(@x, @y);
 -moz-transform : translate(@x, @y);
@@ -157,51 +208,46 @@ transform : translate(@x, @y); }
 -o-transform : translate(@x, @y, @z);
 transform : translate(@x, @y, @z); }

-// ELEMENTS ==================================================
-/* .background-alpha(VALUE VALUE); ======================== */
+.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {
+  -webkit-animation: @name @duration @delay @ease;
+  -moz-animation:    @name @duration @delay @ease;
+  -ms-animation:     @name @duration @delay @ease;
+}
+
+// BACKGROUND
+// --------------------------------------------------
+
+// .background-alpha(VALUE VALUE);
 .background-alpha(@color: @white, @alpha: 1) {
 background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); }

-/* .background-size(VALUE VALUE); ========================= */
+// .background-size(VALUE VALUE);
 .background-size(@size){
 -webkit-background-size : @size;
 -moz-background-size : @size;
 -o-background-size : @size;
 background-size : @size; }

-/* .background-clip(VALUE); (border-box, padding-box, content-box) */
+// .background-clip(VALUE); (border-box, padding-box, content-box)
 .background-clip(@clip) {
 -webkit-background-clip : @clip;
 -moz-background-clip : @clip;
 background-clip : @clip; }

-/* .box-sizing(VALUE); (border-box, padding-box, content-box) */
+// .box-sizing(VALUE); (border-box, padding-box, content-box)
 .box-sizing(@boxsize: border-box) {
 -webkit-box-sizing : @boxsize;
 -moz-box-sizing : @boxsize;
 -ms-box-sizing : @boxsize;
 box-sizing : @boxsize; }

-/* Contain floats ========================================= */
-.clearfix() {
-	*zoom:1;
-	&:before,
-	&:after {
-	    content:"";
-	    display:table;
-	}
-	&:after {
-	    clear:both;
-	}
-}
-
-/* For image replacement ================================== */
+// For image replacement
 .hide-text() {
 text-indent : 100%;
 white-space : nowrap;
 overflow : hidden; }

-/* Hide from visual and speaking browsers ================= */
+// Hide from visual and speaking browsers
 .hidden() {
 display : none !important; 
 visibility : hidden; }
@@ -210,23 +256,23 @@ visibility : hidden; }
  visibility: hidden;
 }

-/* Hide but maintain layout =============================== */
+// Hide but maintain layout
 .invisible() { 
 visibility : hidden; }

-/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */
+// .resize(VALUE) (none, both, horizontal, vertical, inherit)
 .resize(@direction: both) {
 resize : @direction;
 overflow : auto; }

-/* .userselect(VALUE) (all, element, none, text) ========== */
+// .userselect(VALUE) (all, element, none, text)
 .user-select(@select) {
 -webkit-user-select : @select;
 -moz-user-select : @select;
 -o-user-select : @select;
 user-select : @select; }

-/* Hidden but available to speaking browsers ============== */
+// Hidden but available to speaking browsers
 .visuallyhidden() { 
 overflow : hidden; 
 position : absolute;
@@ -237,7 +283,7 @@ margin : -1px;
 padding : 0; 
 border : 0; }

-/* Make visuallyhidden focusable with a keyboard ========== */
+// Make visuallyhidden focusable with a keyboard
 .visuallyhidden.focusable:active, 
 .visuallyhidden.focusable:focus { 
 position : static;
@@ -245,55 +291,4 @@ clip : auto;
 height : auto; 
 width : auto;
 margin : 0; 
-overflow: visible; }
-
-/* Responsive visibility utilities =================================== */
-/* For desktops =========================================== */
-.visible-phone     { display: none !important; }
-.visible-tablet    { display: none !important; }
-.visible-desktop   { } // Don't set initially
-.hidden-phone      { }
-.hidden-tablet     { }
-.hidden-desktop    { display: none !important; }
-/* Mobile phones only  =====================================*/
-@media (max-width: 767px) {
-  // Show
-  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
-  // Hide
-  .hidden-phone      { display: none !important; }
-  // Hide everything else
-  .hidden-desktop    { display: inherit !important; }
-  .visible-desktop   { display: none !important; }
-}
-/* Tablets & small desktops only ========================== */
-@media (min-width: 768px) and (max-width: 979px) {
-  // Show
-  .visible-tablet    { display: inherit !important; }
-  // Hide
-  .hidden-tablet     { display: none !important; }
-  // Hide everything else
-  .hidden-desktop    { display: inherit !important; }
-  .visible-desktop   { display: none !important ; }
-}
-
-// LAYOUT ==================================================== 
-/* .columns(250px, 0, 24px, COLOR, solid, 1px) ============ */
-.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #eee, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
-webkit-column-width : @colwidth;
-webkit-column-count : @colcount;
-webkit-column-gap : @colgap;
-webkit-column-rule-color : @columnRuleColor;
-webkit-column-rule-style : @columnRuleStyle;
-webkit-column-rule-width : @columnRuleWidth;
-moz-column-width : @colwidth;
-moz-column-count : @colcount;
-moz-column-gap : @colgap;
-moz-column-rule-color : @columnRuleColor;
-moz-column-rule-style : @columnRuleStyle;
-moz-column-rule-width : @columnRuleWidth;
-column-width : @colwidth;
-column-count : @colcount;
-column-gap : @colgap;
-column-rule-color : @columnRuleColor;
-column-rule-style : @columnRuleStyle;
-column-rule-width : @columnRuleWidth; }
+overflow: visible; }
--- a/assets/less/page.less
+++ b/assets/less/page.less
@@ -1,13 +1,13 @@
 html {
 	background-color: @bodycolor;
-	font-family: @basefont;
+	font-family: @base-font;
 	font-color: @textcolor;
 	font-size: 90%;
 }
 .navigation-wrapper {
 	.container();
 	padding: 2em 0 3em;
-	font-family: @baseheadingfont;
+	font-family: @heading-font;
 	font-weight: 700;
 	text-transform: uppercase;
 }
@@ -64,7 +64,6 @@ html {
 	margin-bottom: 2em;
 	article {
 		h2 {
-			.delta();
 			margin-bottom: 0;
 		}
 		p+p {
@@ -103,19 +102,17 @@ html {
 }
 .headline-wrap {
 	h1 {
-		.beta();
+		
 	}
 	h2 {
-		.delta();
 		text-transform: uppercase;
 	}
 }
 .article-wrap {
 	h2 {
-		.gamma();
+		
 	}
 	h3 {
-		.delta();
 	}
 }
 .byline {
@@ -176,7 +173,7 @@ html {
 		display: block;
 		margin: 0;
 		padding: 0;
-		font-family: @baseheadingfont;
+		font-family: @heading-font;
 		border-bottom: 1px solid darken(@white, 50);
 		&:last-child {
 			border-bottom: 0 solid transparent;
@@ -223,7 +220,7 @@ html {
 	}
 }
 .holder {
-	font-family: @baseheadingfont;
+	font-family: @heading-font;
 	a {
 		cursor: pointer;
 		margin: 0 5px;
@@ -288,7 +285,7 @@ html {
 	.prefix(12,1);
 	.suffix(12,1);
 	h4 {
-		.epsilon();
+		
 		text-transform: uppercase;
 		margin-bottom: 0;
 	}
@@ -302,7 +299,6 @@ html {
 		display: inline-block;
 		padding-right: 5px;
 		a {
-			.delta();
 			color: lighten(@basecolor, 40%);
 			.transition(.4s linear);
 			&:hover {
--- a/assets/less/pygments.less
+++ b/assets/less/pygments.less
@@ -1,6 +1,6 @@
 .highlight {
  background-color: #efefef;
-  font-family: @codefont;
+  font-family: @code-font;
  font-size: 80%;
  color: #333332;
  margin-bottom: 1.5em;
--- a/assets/less/typography.less
+++ b/assets/less/typography.less
@@ -1,25 +1,33 @@
-/* Headings ============================================== */
-h1, h2, h3, h4, h5, h6 {
-	font-family: @baseheadingfont;
-	font-weight: 700;
-}
-h6 {
-	font-weight: 400;
+// Body
+// --------------------------------------------------
+body {
+	font-family: @base-font;
+	color: @text-color;
 }

-/* Links ================================================= */
+// Headings
+// --------------------------------------------------
+h1, h2, h3, h4, h5, h6 {
+	font-family: @heading-font;
+}
+h1 {
+	.font-rem(32);
+}
+
+// Links
+// --------------------------------------------------
 a { 
 	text-decoration: none;
-	color: @linkcolor; 
+	color: @link-color; 
 	&:visited { 
-		color: @linkcolorvisited; 
+		color: lighten(@link-color, 20); 
 	}
 	&:hover { 
-		color: @linkcolorhover; 
+		color: darken(@link-color, 20); 
 	}
 	&:focus { 
 		outline: thin dotted; 
-		color: @linkcolorfocus; 
+		color: darken(@link-color, 20);
 	}
 	&:hover, 
 	&:active { 
@@ -27,88 +35,90 @@ a {
 	}
 }

-b, strong { 
-	font-weight: 700;
+.link-arrow {
+	font-weight: 100;
+	text-decoration: underline;
+	font-style: normal;
 }

-/* Lists ============================================== */
-ul {
-	li {
-		list-style-type: square
-	}
-}
-ol {
-	li {
-		list-style-type: upper-roman;
-	}
-}
-
-/* Add underline for main links ======================= */
-p > a,
-li > a,
-em > a,
-a > em,
-footer a {
-	text-decoration: none;
-	border-bottom: 1px dotted lighten(@textcolor, 50%);
-}
-p > a:hover,
-li > a:hover,
-em > a:hover,
-footer a:hover {
-	text-decoration: none;
-	border-bottom: 1px solid lighten(@textcolor, 50%);
-}
-
-/* Figure caption ===================================== */
+// Figures
+// --------------------------------------------------
 figcaption {
-	margin-top: (@indent-val / 2);
-	line-height: 1.25;
-	.zeta();
-	font-family: @baseheadingfont;
-	counter-increment: captions;
-	&:before {
-		font-weight: 700;
-		text-transform: uppercase;
-		content: "Figure " counter(captions) ": ";
+	padding-top: 10px;
+	.font(14);
+	line-height: 1.3;
+	color: lighten(@text-color, 10);
+}
+
+// Feature Image Caption
+// --------------------------------------------------
+.image-credit {
+	margin: 0 auto;
+	max-width: 440px;
+	padding-top: 5px;
+	padding-right: 20px;
+	padding-left: 20px;
+	text-align: right;
+	.font(14);
+	line-height: 1.3;
+	color: lighten(@text-color, 30);
+	.clearfix();
+	a {
+		color: lighten(@text-color, 30);
 	}
 }

-/* Notice ============================================== */
+// Note text
+// --------------------------------------------------
 .notice {
 	margin-top: 1.5em;
 	padding: .5em 1em;
 	text-indent: 0;
-	font-size: 90%;
-	background-color: #ddd;
-	border-left: 10px solid #ccc;
+	.font-rem(14);
+	background-color: @body-color;
+	border: 1px solid darken(@body-color,20);
+	.rounded(3px);
 }
-/* Blockquote =========================================== */
+
+// Blockquotes
+// --------------------------------------------------
 blockquote {
+	margin-left: -28px;
+	padding-left: 20px;
+	border-left: 8px solid @border-color;
+	font-family: @alt-font;
 	font-style: italic;
-	border-left: 10px solid #ccc;
-	margin-left: 0;
-	padding-left: 1em;
-	border-left: 10px solid #ccc;
-	p+p {
-		text-indent: 0;
-		margin-top: 0;
+	.font-rem(24);
+}
+
+// Footnotes
+// --------------------------------------------------
+.entry-content .footnotes {
+	ol, li, p {
+		.font-size(14);
 	}
 }
-/* Footnotes ============================================= */
-.footnotes {
-	font-size: 90%;
-}
-/* Code ================================================== */
+
+// Code
+// --------------------------------------------------
 tt, code, kbd, samp, pre {
-	font-family: @codefont;
+	font-family: @code-font;
+}
+p,
+li { 
+	code {
+		.font-rem(12);
+		line-height: 1.5;
+		white-space: nowrap;
+		margin: 0 2px;
+		padding: 0 5px;
+		border: 1px solid lighten(@black, 90);
+		background-color: lighten(@black, 95);
+		.rounded(3px);
+	}
+}
+pre {
+	.font-rem(12);
+	line-height: 1.5;
+	overflow-x: auto;
 }
-p code {
-	font-size: 80%;
-	white-space: nowrap;
-	margin: 0 2px;
-	padding: 0 5px;
-	border: 1px solid lighten(@black, 90);
-	background-color: lighten(@black, 95);
-	.rounded(3px);
-}
--- a/assets/less/variables.less
+++ b/assets/less/variables.less
@@ -1,11 +1,17 @@
 // TYPOGRAPHY ================================================
-@basefont: 'PT Serif', serif;
-@baseheadingfont: 'PT Sans Narrow', sans-serif;
-@codefont: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
+@doc-font-size: 16;
+@doc-line-height: 26;
+@base-font: 'PT Serif', serif;
+@heading-font: 'PT Sans Narrow', sans-serif;
+@code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
+@alt-font: @base-font;

 // COLOR ====================================================
@bodycolor      : #fff;
+@body-color: @bodycolor;
@textcolor      : #333332;
+@text-color     : @textcolor;
+@border-color: @text-color;
@basecolor 		: #343434;	  
@compcolor 		: spin(@basecolor, 180); 
@bordercolor    : @basecolor;
@@ -14,6 +20,7 @@
@accentcolor    : @black;
 /* Links ================================================= */
@linkcolor 		    : #343434;
+@link-color: @linkcolor;
@linkcolorhover 	: darken(@linkcolor, 10);
@linkcolorvisited   : lighten(@linkcolorhover, 20);
@linkcolorfocus 	: darken(@linkcolorvisited, 10);