brouilleursdeblanc/_sass/_site.scss

// Selection
// --------------------------------------------------

::-moz-selection { 
	background-color: lighten($base-color, 65%); 
	color: $base-color; 
	text-shadow: none; 
}  	
::selection { 
	background-color: lighten($base-color, 65%); 
	color: $base-color; 
	text-shadow: none; 
}


// Body
// --------------------------------------------------

body {
	font-family: $base-font;
	color: $text-color;
}


// TYPOGRAPHY
// --------------------------------------------------

body {
	font-family: $base-font;
	color: $text-color;
	@include font-size(16);
}

p {
	@include font-size(18,yes,28);
}

li {
	@include font-size(16,12,24);
}

// Headings
h1, h2, h3, h4, h5, h6 {
	font-family: $heading-font;
	text-rendering: optimizeLegibility; // Fix the character spacing for headings
}
h1 {
	@include font-size(36);
}
h2 {
	@include font-size(32);
}
h3 {
	@include font-size(28);
}
h4 {
	@include font-size(24);
}
h5 {
	@include font-size(20);
}
h6 {
	@include font-size(18);
}

u,
ins {
	text-decoration: none;
	border-bottom: 1px solid $text-color;
}


// Tables
table {
	border-collapse: collapse;
	margin: ((0px + $doc-line-height) / 2) 0;
	margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
	width: 100%;
}
tbody {
	tr:hover > td, tr:hover > th {
		background-color: $table-hover-color;
	}
}
thead {
	tr:first-child td {
		border-bottom: 2px solid $table-border-color;
	}
}
th {
	padding: (0px + $doc-line-height) / 2;
	padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
	font-family: $alt-font;
	font-weight: bold;
	text-align: left;
	background-color: $table-header-color;
	border-bottom: 1px solid darken($border-color, 15%);
}
td {
	border-bottom: 1px solid $border-color;
	padding: (0px + $doc-line-height) / 2;
	padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
	@include font-size(18);
}
tr, td, th {
	vertical-align: middle;
}


// Links
// --------------------------------------------------

a { 
	text-decoration: none;
	color: $link-color; 
	&:visited { 
		color: lighten($link-color, 20); 
	}
	&:hover { 
		color: darken($link-color, 20); 
	}
	&:focus { 
		outline: thin dotted; 
		color: darken($link-color, 20);
	}
	&:hover, 
	&:active { 
		outline: 0; 
	}
}

.link-arrow {
	font-weight: 100;
	text-decoration: underline;
	font-style: normal;
}


// Figures
// --------------------------------------------------

figcaption {
	padding-top: 10px;
	@include font-size(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;
	@include font-size(14,no);
	line-height: 1.3;
	color: lighten($text-color, 30);
	@include clearfix();
	@include media($medium) {
		max-width: 760px;
		padding-right: 60px;
		padding-left: 60px;
	}
	@include media($large) {
		max-width: 960px;
	}
	a {
		color: lighten($text-color, 30);
	}
}


// Note text
// --------------------------------------------------

.notice {
	margin-top: 1.5em;
	padding: .5em 1em;
	text-indent: 0;
	@include font-size(16);
	background-color: lighten($black, 95);
	border: 1px solid lighten($black, 90);
	@include rounded(4px);
}


// Blockquotes
// --------------------------------------------------

blockquote {
	font-family: $alt-font;
	font-style: italic;
	@include font-size(16);
	padding-left: 20px;
	border-left: 8px solid $black;
}


// Footnotes
// --------------------------------------------------

.footnotes {
	@include font-size(14);
	font-family: $base-font;
}


// Code
// --------------------------------------------------

tt, code, kbd, samp, pre {
	font-family: $code-font;
}
p,
li { 
	code {
		@include font-size(14);
		font-family: $code-font;
		white-space: nowrap;
		margin: 0 2px;
		padding: 0 5px;
		border: 1px solid lighten($black, 90);
		background-color: lighten($black, 95);
		@include rounded(3px);
	}
}
pre {
	@include font-size(14);
	overflow-x: auto;
}


// Utility Classes
// --------------------------------------------------

.wrap {
	margin: 0 auto;
}
.all-caps {
	text-transform: uppercase;
}
.pull-left {
	float: left;
	padding-right: $gutter;
}
.pull-right {
	float: right;
	padding-left: $gutter;
}
.unstyled-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	li {
		list-style-type: none;
	}
}


// Global Transition
// ---------------------------------------------------

b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, .highlight {
	@include transition(all .2s ease);
}