style.less

// ------ Vars ------
@white: #fefefa;
@gray: #889;
@black: #445;

@accent: #5bc0de;

@basefont: 14pt;
@baseline: @basefont * 1.5;

@tablet: ~'(max-width: 800px)';
@phone: ~'(max-width: 800px)';

.grid(12);
.grid(10);

//

html, body{
	background: @white;
	color: @gray;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: @basefont;
	line-height: @baseline;
	margin: 0; padding: 0;
}

a, a:link, a:visited, a:focus, a:hover, a:active{
	color: inherit;
	text-decoration: none;
}

p{
	margin: 0; padding: 0;
	margin-bottom: @baseline;
}

ul{
	font-weight: 400;
	// font-style: italic;
	line-height: @baseline * 1.25;
	margin: 0; padding: 0;
	li{
		list-style-type: none;
		margin: 0; padding: 0;
	}
	ul{
		margin-left: @baseline;
	}
}

h1{
	color: @black;
	font-size: @basefont * 2;
	font-weight: 400;
	margin: 0; padding: 0;
	margin-bottom: @baseline;
}

.onepage-pagination{ z-index: 1000; }

header{
	z-index: 1000;
	nav{
		background: @accent;
		color: @white;
		line-height: @baseline * 2;
		height: @baseline * 2; width: 100%;
		position: fixed;
		top: 0; left: 0;
		z-index: 1000;
		div{
			text-align: center;
			display: inline-block;
			width: 100%;
			ul{
				display: inline-block;
				li{
					display: inline-block;
					a{
						padding: 0 @baseline / 1.5;
					}
				}
			}
		}
	}
}
main{
	position: relative;
	z-index: 500;
	section{
		height: 100vh;
		padding: @baseline * 2;
		padding-top: @baseline * 4;
		box-sizing: border-box;
		img{
			display: none;
			width: 50vw;
			position: absolute;
			top: @baseline * 2; right: 0;
		}
	}
}


// ------ Grid ------


.gen-cols(@prefix; @cols; @i: 1;) when (@i <= @cols){
	> .col-@{prefix}-@{i}{
		float: left;
		width: (100% / @cols) * @i;
		box-sizing: border-box;
	}
	.gen-cols(@prefix, @cols, @i + 1);
}
.grid-default(@cols: @cols; @i: 1;) when (@i <= @cols){
	> .col-@{i}{
		float: left;
		width: (100% / @cols) * @i;
		box-sizing: border-box;
	}
	.grid-default(@cols, @i + 1);
}

.grid-responsive(@device; @prefix; @cols){
	@media @device{ .gen-cols(@prefix, @cols); }
}

.clearfix{
	&:before, &:after{
		content: ' ';
		display: table;
	}
	&:after{ clear: both; }
}

.grid(@cols){
	.row, .row-@{cols}, .row@{cols}{
		.clearfix;
		.grid-default(@cols);
		.grid-responsive(@tablet, sm, @cols);
		.grid-responsive(@phone, xs, @cols);
	}
}