path: root/Just-Read/less/main.less

@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

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

// Mobile first

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

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

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

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

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

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

b, strong{
	font-weight: 700;
}

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

code, .codehilite{
	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);
	color: @white;
	display: block;
	margin-left: -(@line * 1px);
	.mono();
	padding: (@line * 1px);	
	.rounded();	
}

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

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

// Archive

.archive li{
	list-style: none;
}

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

.archive time{
	color: lighten(@black, 40%);
	display: inline;
	padding-left: @line / 2px;
}

// jQuery UI tabs (in the archive)

.tabmenu li{
	list-style-type: none;
		
		a{
			border: 1px solid @link;
			.border-box;			
			display: block;
			float: left;
			padding: (@line / 2px) 0;
			text-align: center;
			width: 50%;
			
				&:hover{
					text-decoration:none
				}
		}
		
		&:last-child a{
			border-left: none;
		}
}

// Make jQuery tabs work (because I don't use the themes's CSS)

.ui-tabs-hide{
	display: none;
}

.tabmenu li a:hover, .ui-tabs-selected a, .ui-tabs-selected a{
	background-color: lighten(@black, 95%);
}

// Push the button

.btn { 
	color: @white; 
	background-color: @color;
	border: none;
	
	-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
	box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
	
	padding: 8px 14px 10px;  
	position: relative;
	.rounded(3px);
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);	
	-webkit-user-select: none;
	
	&:hover{
		color: @white;
		text-decoration: none;		
	}
	
	&:active { 
		-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
		-moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
		box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
		
		position: relative; 
		top: 3px;
	}
	
	&:active:after { 
		content: ""; 
		background: @white;
		bottom: -1px; 
		height: 3px;
		left: 0;
		position: absolute;
		width: 100%; 		 
	}	
	
}

// CSS tags

.tag li{
	list-style: none;
	margin-bottom: @line / 8px;
}

.tag a{
	.border-box;
	
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;	
	border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;	
	border-top-right-radius: 4px;
	
	color: @black;
	background-color: lighten(@link, 50%);
	display: block;
	margin-left: 20px;
	padding: 0 10px 0 12px;
	position: relative;
	.small;
		
	&:hover{
		background-color: lighten(@link, 30%);
		text-decoration:none;		
	}
	
	&:before{
		content: "";
		border-color: transparent lighten(@link, 50%) transparent transparent;
		border-style: solid;
		border-width: 12px 12px 12px 0;
		float: left;
		height: 0;
		left: -12px;
		position: absolute;
		top: 0;
		width: 0;	
	}
	
	&:after{
		content: "";
		background: @white;
		.box-shadow(-1px -1px 2px darken(@link, 50%));
		float: left;
		height: 4px;
		left: 0;
		position: absolute;
		.rounded(2px);
		top: 10px;
		width: 4px;
	}
	
	&:hover:before {
		border-color: transparent lighten(@link, 30%) transparent transparent;
	}
}

// Tagcloud
.tag-1 a{width: 100%;}
.tag-2 a{width: 90%;}
.tag-3 a{width: 80%;}
.tag-4 a{width: 70%;}
.tag-5 a{width: 60%;}
.tag-6 a{width: 50%;}
.tag-7 a{width: 40%;}
.tag-8 a{width: 30%;}

// Header

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%));
	margin-bottom: (@line * 2px);
	padding: (@line * 1px) @column;
		
	h1{
		margin: 0;
	}
	
	a{
		color: fade(@white, 80%);
		text-decoration: none;
		// 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

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
	color: fade(@black, 60%);
	margin-top: (@line * 4px);
	padding: (@line * 2px) @column (@line * 1px);	
}

.nav{
	margin-bottom: (@line * 1px);
	
		li{
			list-style: none;
			display: inline;
			padding-right: 10px;
		}
		
		a{
			.transition();
		}
}

p[role="contentinfo"]{
	.small;
}

.social{
	margin-bottom: @line * 1px;
	
		li{
			list-style: none;
			display: inline;
			padding-right: @line / 2px;
		}	
}

.icon{
	margin-right: 2px; 
	vertical-align: -3px;
}

.social a[href*='behance.net']:before       {content: url('../images/icons/behance.png'); .icon;}
.social a[href*='delicious.com']:before     {content: url('../images/icons/delicious.png'); .icon;}
.social a[href*='facebook.com']:before      {content: url('../images/icons/facebook.png'); .icon;}
.social a[href*='flickr.com']:before        {content: url('../images/icons/flickr.png'); .icon;}
.social a[href*='forrst.com']:before        {content: url('../images/icons/forrst.png'); .icon;}
.social a[href*='github.com']:before        {content: url('../images/icons/github.png'); .icon;}
.social a[href*='plus.google.com']:before   {content: url('../images/icons/google_plus.png'); .icon;}
.social a[href*='last.fm']:before           {content: url('../images/icons/lastfm.png'); .icon;}
.social a[href*='linkedin.com']:before      {content: url('../images/icons/linkedin.png'); .icon;}
.social a[href*='quora.com']:before         {content: url('../images/icons/quora.png'); .icon;}
.social a[href*='rss.xml']:before           {content: url('../images/icons/rss.png'); .icon;}
.social a[href*='stackoverflow.com']:before {content: url('../images/icons/stackoverflow.png'); .icon;}
.social a[href*='twitter.com']:before       {content: url('../images/icons/twitter.png'); .icon;}
.social a[href*='youtube.com']:before       {content: url('../images/icons/youtube.png'); .icon;}



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

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

.content{
	margin:0 @column;
}

.meta{
	background: lighten(@black, 98%);
	margin-top: @line * 2px;
	padding-bottom: (@line * 1px);
	padding-top: (@line * 1px);	
	.rounded();
	
		time{
			font-weight: 700;
			margin-left: 20px;
			margin-bottom: @line * 1px;
		}
}

.tag li{
	display: block;
	float: left;
	width: 50%;
}

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

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


// 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{
		float: right;
		width: 75%;		
	}
	
	.meta, .pages{
		float: left;
		text-align: right;
		width: 25%;		
	}
	
	.meta{
		background: @white;
		margin-top: 0;
		padding-top: 24px + (@line * 1.5px); // h1 font-size + margin-bottom
		
			time{
				margin-bottom: (@line * 1px);
				margin-left: 0;
				font-weight: 400;
			}
	}
	
	.post, .copy, .main{
		float: right;
		width: 75%;		
	}
	
	.tag li{
		float: none;
		width: 100%;
	}
	
	.nav a:hover{
		padding-right: (@line / 4px); // If prefer your links to remain still, delete this nonsense
	}
	
	.nav a:hover:after{
		content:  "\2192 ";
	}
	
	.nav li{
		display: block;
		padding-right: 0;
	}
	
	.archive time{
		.border-box;
		display: block;
		float: left;
		width: 100/4%; // target 1 columns, context 4 columns
	}
}


// @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{
		float: none;
		margin-left: 25%;
		width: 50%;	
	}
}


// @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{
		padding-left: 6.25%;
		width: 18.75%;		
	}

	.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, .codehilite{
		line-height: 1.5;
		.massive;		
	}
	
	.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";
}

@import "codehilite.less";