af/css/sass/screen.scss

@import "_base";
@import "compass/reset";
@import "compass/typography/vertical_rhythm";
@import "compass/css3/transform";
@import "compass/layout";
@import "compass/css3/flexbox";

@include establish-baseline;

div, section, nav, article, header, footer {

}

body {
	background: black;
	@include text-size-adjust(none);
	
	font-family: "Roboto", sans-serif;
}

a {
	text-decoration: none;
	color: $link-color;
}

@import "cookie";

#top_banner {
	background-repeat: no-repeat;
	background-position: bottom center;
	@include background-size(cover);
	height: 120px;
	background: black;
	
	@include breakpoint(max-width $bp-middle) {
		height: 120px;
	}
	
	@include breakpoint(max-width $bp-tiny) {
		height: 80px;
	}
}

#bold_title {
	color: white;
	@include container;
	position: relative;
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	
	h1 {
		position: absolute;
	}
	
	.tagline {
		position: absolute;
	}
}

.home.page {
	#bold_title {
		h1 { position: relative; }
		
		h1 .hi {
			position: absolute;
			top: 25px;
			left: 4.2em;
			font-size: em(32px);
			
			@include breakpoint(max-width $bp-tiny) {
				top: 10px;
				left: 2em;
				font-size: em(30px);
			}
		}
		
		h1 .name {
			position: absolute;
			top: 60px;
			left: 2em;
			font-size: em(54px);

			@include breakpoint(max-width $bp-tiny) {
				top: 37px;
				left: 1em;
				font-size: em(36px);
			}
		}
	}
}

#content_box {
	background: white;
	position: relative;
	
	#main_menu {
		background: black;
		font-size: em(14px);
		@include container;
		
		@include breakpoint(min-width $bp-tiny) {
			font-size: em(16px);
		}
		
		ul {
			position: absolute;
			bottom: -40px;
			@include pre(gutter());
			
			@include breakpoint(min-width $bp-tiny) {
				bottom: -50px;
				@include pre(0);
			}
		
			li {
				padding: 10px 15px 5px 0px;
				float: left;
				
				@include breakpoint(min-width $bp-tiny) {
					padding: 10px 30px 10px 0px;					
				}
			}
		
			a {
				color: white;
				font-family: "Oswald", sans-serif;
				font-weight: normal;
			}
		}
	}
}

#inner_box {
	@include container;
	padding-bottom: 50px;
}

.home.page {
	h2 {
		line-height: 80px;
		text-align: center;
		font-size: em(30px);
		font-family: 'Oswald', sans-serif;
		
		@include breakpoint(min-width $bp-tiny) {
			font-size: em(36px);
			line-height: 100px;
		}
	}
	
	.work.column {
		width: 25%;
		height: 240px;
		float: left;
		display: block;
		padding: 0;
		margin: 0;
		position: relative;
		vertical-align:bottom;
		background: gray;		
		
		span {
			position: absolute;
			color: white;
			font-family: 'Oswald', sans-serif;
			font-size: 30px;
			white-space: nowrap;
			@include apply-origin(bottom left, false);
			@include rotate(-90deg);
			display: block;
			bottom: 0.33em;
			left: em(16px) + 0.33em;
			overflow: visible;
		}
		
		@include breakpoint(min-width $bp-tiny) {
			height: 300px;
			
			span {
				font-size: 36px;
			}
		}
		
		&.research {
			background-image: url("../images/home-research-2x.png");
			background-position: right bottom;
			background-size: cover;
		}
		&.development {
			background-image: url("../images/home-development-2x.png");
			background-position: right bottom;
			background-size: cover;
		}
		&.writing {
			background-image: url("../images/home-writing-2x.png");
			background-position: right bottom;
			background-size: cover;
		}
		&.other {
			background-image: url("../images/home-contact-2x.png");
			background-position: right bottom;
			background-size: cover;
		}
	}
}

#site_footer {
	@include container;
	color: adjust-lightness($link-color, 40);
	line-height: 0.8*$base-line-height;

	.footer_body {
		padding-top: 40px;
		border-bottom: 1px solid hsl(210, 25, 50);
		
		@include breakpoint(min-width $bp-tiny) {
			margin-top: 10px;
		}
		
		a {
			color: adjust-lightness($link-color, 20);
		}

		.column {
			padding-top: 14px;
			@include pre(gutter());
			font-size: em(12px);
			@include span(5);
		
			@include breakpoint(min-width $bp-tiny) {
				@include pre(0);
				&.first {
					padding-left: 0;
					@include span(first 2);
				}
			
				&.second {
					@include span(last 4);
				}
			}
		}
	}
}