@import "base.less";
@import "mixins.less";
@import "var.less";

// Credits: [Golden Grid System](http://goldengridsystem.com/) by [Joni Korpi](http://jonikorpi.com/) licensed under [MIT](http://www.opensource.org/licenses/mit-license.php)

// Important numbers

@line: 24;
@column: 100% / 18;
@font-size: 16;
@em: @font-size*1em;


// Simple fluid media

figure {
	position: relative;
}

figure img, figure object, figure embed, figure video {
	max-width: 100%; 
	display: block;
}

// Elastic Object & Iframe Embedded Videos  http://webdesignerwall.com/tutorials/css-elastic-videos

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: @line * 1px;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

// Typography settings - Make the text bigger if you dare

.small    {font-size: 12px;}
.normal   {font-size: 14px;}
.large    {font-size: 18px;}
.huge     {font-size: 24px;}
.massive  {font-size: 36px;}
.gigantic {font-size: 48px;}

body {
	.normal; 
	line-height: @line * 1px;
	background: @white;
	color: lighten(@black, 25%);
	.sans;
}

.title{
	line-height: 1;
	.fancy-font;
	font-weight: 700;
}

h1{
	.title;
	.huge;
	margin: 0 0 (@line * 1.5px) 0;
}

h2{
	.title;
	.large;
	margin: (@line * 2px) 0 (@line * 1px);
	
}

h3{
	.title;
	.normal;
	margin: (@line * 1.5px) 0 (@line * 1px);
	text-transform: uppercase;
	color: lighten(@black, 60%);
	
}

h4, h5, h6{
	.title;
	.normal;
	margin: (@line * 1px) 0;
	font-weight: 400;
	
}

b, strong{
	font-weight: 700;
}


// Four-column grid active
// ----------------------------------------
// Margin   | #  1   2   3   4   |   Margin
// 5.55555% | %  25  50  75  100 | 5.55555%

.wrapper {
	padding: 0 (@line/2)/@em;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		 -o-box-sizing: border-box;
			box-sizing: border-box;
}


a{
	color: @link;
	text-decoration: none;
	.transition();
	
		&:hover{
			color: darken(@link, 40%);
			text-decoration:underline;
		}
}

header{
	.border-image(0 0 2px, 0 0 2, '../images/2px.png', repeat); // It's a very small detail, delete this line if you want different colors and don't want to edit the image file
	.gradient(@color, darken(@color, 6%));
	padding: (@line * 2px) @column;
	margin-bottom: (@line * 2px);
	
	h1{
		margin: 0;
	}
	
	a{
		text-decoration: none;
		color: fade(@white, 80%);
		
		// The 3d effect is kind of silly, so go ahead and delete the following lines xD
		text-shadow: 
			0 1px 0 lighten(@black, 70%), 
			0 2px 0 lighten(@black, 60%), 
			0 3px 0 lighten(@black, 50%), 
			0 4px 0 lighten(@black, 40%), 
			0 5px 0 lighten(@black, 30%), 
			0 6px 0 lighten(@black, 20%), 
			0px 7px 0 lighten(@black, 10%), 
			0 8px 7px lighten(@black, 5%);
			
			
			&:hover{
				color: @white;
				text-decoration:none;
				}			
	}
}

footer{
	.border-image(20px 0 0, 20 0 0, '../images/pages.png', repeat); // Again, it's a detail. I used border-image to be able to use a gradient or background color for the footer, but now it's white
	padding: (@line * 2px) @column (@line * 1px);
	margin-top: (@line * 4px);
	color: fade(@black, 60%);	
}

.pages{
	margin-bottom: (@line * 1px);
}

.nav li{
	list-style: none;
	display: inline;
	padding-right: 10px;
}

p[role="contentinfo"]{
	margin-top: (@line / 2px); // If you don't use the Twitter button, delete this line
	.small;
}

.content{
	margin:0 @column;
}

.meta{
	background: lighten(@black, 95%);
	padding-top: (@line * 1px);
	padding-bottom: (@line * 1px);
	.rounded();
}

time{
	.small;
	text-transform: uppercase;
}

.tags li{
	display: inline;
	list-style: none;
}

blockquote, code, .post ul, .post ol, p{
	margin: 0 0 (@line * 1px) 0;
}

blockquote{
	margin-left: -(@line / 2px);
	border-left: (@line / 4px) solid @link;
	padding-left: (@line / 4px);
}

code{
	display: block;
	background: lighten(@black, 15%); // If you don't a dark scheme for code, we can't be friends
	.box-shadow(inset 0 0 10px @black);
	padding: (@line * 1px);
	color: @white;
	.rounded();
	.mono();
	margin-left: -(@line * 1px);
}

.post ul li{
	list-style-image: url('../images/bullet.png'); // or use something less colorful, like list-style-type: square
}

.main + .main{
	margin-top: (@line * 4px);
}

.archive li{
	list-style: none;
}

.archive a{
	display: block;
	padding: (@line / 2px) 0;
	border-bottom: 1px dotted lighten(@black, 80%);
	
	&:hover{
		text-decoration:none;
	}
}

.archive time{
	display: inline;
	color: lighten(@black, 40%);
}


// Eight-column grid active
// ----------------------------------------------------------------------
// Margin   | #  1     2     3     4     5     6     7     8   |   Margin
// 5.55555% | %  12.5  25.0  37.5  50.0  62.5  75.0  87.5  100 | 5.55555%


// @media screen and (min-width: 720px)
@media screen and (min-width: 45em) {
	
	
	header .wrapper{
		width: 75%;
		float: right;
	}
	
	.meta, .pages{
		width: 25%;
		float: left;
		text-align: right;
	}
	
	.pages{
		padding-top: 28px + (@line * 1px); // Twitter button size + [role="contentinfo"] margin-top. If you don't use the Twitter button, delete this line
	}
	
	.meta{
		background: @white;
		padding-top: 24px + (@line * 1.5px); // h1 font-size + margin-bottom
		
			time{
				margin-bottom: (@line * 1px);
			}
	}
	
	.post, .copy, .main{
		width: 75%;
		float: right;
	}
	
	.tags li{
		display: block;
	}
	
	.tags a:hover, .nav a:hover{
		padding-right: (@line / 4px); // If prefer your links to remain still, delete this nonsense
	}
	
	.tags a:hover:after, .nav a:hover:after, .more:hover:after{
		content:  "\2192 ";
	}
	
	.nav li{
		display: block;
		padding-right: 0;
	}
	
	.archive time{
		display: block;
		width: 100/4%; // target 1 columns, context 4 columns
		float: left;
	}
}


// @media screen and (min-width: 888px)
@media screen and (min-width: 55.5em) {
	
	.post p, .post blockquote, .post ul, .post ol{
		width: 400/6%; // target 4 columns, context 6 columns
	}
	
	.main{
		width: 50%;
		float: none;
		margin-left: 25%;
	}
}


// @media screen and (min-width: 984px)
@media screen and (min-width: 61.5em) {

	.meta, .pages{
		width: 12.5%;
	}
	
	.pages{
		padding-top: 0;
	}

	.meta{
		padding-top: 24px + (@line * 1.5px);
	}


}


// Sixteen-column grid active
// ----------------------------------------------------------------------------------------------------------------------
// Margin   | #  1     2     3     4     5     6     7     8     9     10    11    12    13    14    15    16  |   Margin
// 5.55555% | %  6.25  12.5  18.75 25.0  31.25 37.5  43.75 50.0  56.25 62.5  68.75 75.0  81.25 87.5  93.75 100 | 5.55555%


// @media screen and (min-width: 1872px)
@media screen and (min-width: 117em) {

	body{
		.large;
	}
	
	header{
		margin-bottom: (@line * 4px);
	}
	
	footer{
		margin-top: (@line * 6px);
	}
	
	h1{
		.gigantic;
		margin-bottom: (@line * 2px);
	}
	
	h2, header .huge{
		.massive;
	}
	
	h2{
		margin-top: (@line * 3px);
	}
	
	h3{
		.huge;
		margin-top: (@line * 3px);
	}
	
	h4, h5, h6{
		.large;
		margin-top: (@line * 2px);
	}
	
	.meta, .pages{
		width: 18.75%;
		padding-left: 6.25%;
	}

	.meta{
		padding-top: 48 * 2px;
	}
	
	.post, .copy{
		width: 75%;
	}
	
	.post{
		padding-right: 12.5%;
	}
	
	.post ul{
		margin-bottom: 0;
	}
	.post li{
		margin-bottom: (@line * 1px);
	}
	
	code{
		.massive;
		line-height: 1.5;
	}
	
	.post p, .post blockquote, .post ul, .post ol{
		width: 600/10%; // target 4 columns, context 6 columns
	}
	
}



// @media screen and (min-width: 2080px)
@media screen and (min-width: 130em) {

	body {
		max-width: 2560/@em;
	}
	
}

@media print{
	@import "print.less";
}