_base.scss

/* Define constants for the application and to configure the blueprint framework. */


/* ===== Compass Imports ===== */

/* DO NOT include Blueprint here. We are using Susy for the grid, and if Blueprint is here, it will mess things up */

@import "compass";
/* @import "compass/css3/columns" */
@import "compass/css3/font-face";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/box-sizing";
/* @import "compass/css3/hyphenation"; */
@import "compass/css3/inline-block";
@import "compass/css3/transform";
@import "compass/css3/transition";
@import "compass/typography"; 
@import "compass/typography/links/link-colors"; /* Needed for the link-colors() function */
@import "compass/typography/lists/horizontal-list"; /* Needed for the horizontal-list() function */
@import "compass/typography/text/nowrap"; /* When remembering whether or not there's a hyphen in white-space is too hard */
@import "compass/support";
@import "compass/utilities/general/clearfix"; /* Use pie-clearfix when there is no width set ont the element to avoid edge cases */
@import "compass/utilities/color/contrast"; /* Use to calculate color legibility: http://compass-style.org/reference/compass/utilities/color/contrast/ */

/* Other interesting functions: 
	@import "compass/utilities/color/contrast";
		detailed here: http://compass-style.org/reference/compass/utilities/color/contrast/
		Used to pass two colors into a get out the most readable color. 
		Good for situations where we dont want to create a new color, 
		but be sure that colors from variables are always going to be readable
*/




/* ! ===== Grid ===== */
/*
 * Susy: Un-obtrusive grids for designers
 * By: Eric A. Meyer and OddBird
 * Site: susy.oddbird.net
 * 
 * Would like to remove the dependence on Susy by using a simpler grid structure : J. Hogue
 */
@import "susy";

/* Settings  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that on or off. 
 * We are using Susy 1.0. Update your GEM file by deleting the old and downloading the new. 
 */
 
$total-columns: 12; 
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: $gutter-width;
$container-style: fluid; 


/* ! ===== Variables ===== */

/* Colors */
$default-color: #444;

$white: #fff; /* Confusing, but in some cases, this can be set to a dark color */
$grey-lighterest: #f2f4f6; 
$grey-lightest: #e6e8ea;
$grey-lighterer: #ddd;
$grey-lighter: #caccce;
$grey-light: #999;
$grey: #666;
$grey-dark: #333;
$grey-darker: #222;

$blue: #3776ab; /* Python blue */
$psf: #78797a; 
$yellow: #ffd343; /* Python yellow */
$green: #82b043;
$purple: #a06ba7; 
$red: #b55863;  /* Also used for error messages */
$orange: #cc9547; 

$darkblue: #1f3b47; 
$darkerblue: #1e2933; 

$link-color: $blue;
$link-hover: $darkerblue;

$code-green: #0c7d0c;
$default-border-color: $grey-lighter; /* Set a generic border color here to keep them consistent */


/* Typography */

$relative-font-sizing       : true; /* True here means that all computed values will be in EMs */
$round-to-nearest-half-line : true; /* Allows the adjust-font-size-to and lines-for-font-size mixins to round to the nearest half line height to avoid large spacing between lines. */
$base-font-size             : 16px; /* Useful to set this here, but don't echo it anywhere. Used in calculations */
$base-line-height           : 28px; /* Useful to set this here, but don't echo it anywhere. Used in calculations */

$giga: 40px;
$mega: 36px;
$kilo: 32px;
$headerone: 28px;
$headertwo: 24px;
$headerthree: 21px;
$headerfour: 18px;

$default-font: SourceSansProRegular, Arial, sans-serif;
$default-font-italic: SourceSansProItalic, Arial, sans-serif;
$default-font-bold: SourceSansProBold, Arial, sans-serif;
$alt-font: Flux-Regular, $default-font;
$alt-font-bold: Flux-Bold, $default-font-bold;

/* Calculate the font-size-adjust of Flux:
 * http://www.cs.tut.fi/~jkorpela/x-height.html
 * Or, in this case, we did it by hand by comparing Flux to Arial, side by side. 
 * We then adjusted it further visually, as Flux is more condensed and therefore line-length changes pretty dramatically. 
 */
$font-size-adjust-value: 1.15; 

	/* 
		Compass will convert the font sizes from px to em and fit it into the vertical rhythm automatically with the necessary margin 
		A neat trick, for sure. More on using the vertical rhythm properties and mixins: http://compass-style.org/reference/compass/typography/vertical_rhythm/
		
		Note: The line height is relative to the constant $base-line-height. 
		The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems. 
		Don’t worry about nested elements etc, Compass will do the maths for you :)
	*/


/* Defaults */
$relative-assets: false; 

$legacy-support-for-ie : true;
$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : true;
$legacy-support-for-ie8 : true;
$legacy-support-for-mozilla : true;

$inline-block-alignment: baseline; 

$default-border-radius: 6px;
$default-box-shadow-color: rgba( #000, .3 ); 
$default-box-shadow-h-offset: 2px;
$default-box-shadow-v-offset: 2px; /* Positive is down */
$default-box-shadow-blur: 4px;
$default-box-shadow-spread: false;
$default-box-shadow-inset: false; 

$default-transition-property: all;
$default-transition-duration: .3s;
$default-transition-function: false;
$default-transition-delay: false;