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: "Open Sans", 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-small) {
		height: 80px;
	}
}

#bold_title {
	color: white;
	@include container;
	position: relative;
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	
	h1 {
		font-size: 3em;
		text-align: right;
		position: relative;
		top: 0.75em;
		@include span(3 first);
	}
	
	.tagline {
		font-size: 1.5em;
		text-align: left;
		@include span(3 last);
		
		span {
			position: absolute;
			margin-left: -1*span(2);
			top: 3em;
		}
	}
	
	@include breakpoint(max-width $bp-small) {
		h1 {
			font-size: 2em;
			top: 0.5em;
			@include span(4 first);
		}
		
		.tagline span {
			font-size: 0.75em;
			top: 2.5em;
		}
	}
}

.page {
	#content_box {
		#inner_box {
			@include container;
			article {
				@include span(full);
				padding-top: 2*$base-line-height;

				@include breakpoint(max-width $bp-middle) {
					@include span(full split);
				}
				
				@include breakpoint(max-width $bp-small) {
					padding-top: $base-line-height;
				}
			
				header {
					text-align: center;
				
					h2 {
						font-size: 2em;
						font-family: "Oswald", sans-serif;
						line-height: 2*$base-line-height;
						padding-bottom: $base-line-height;
					
						@include breakpoint(max-width $bp-small) {
							font-size: 1.5em;
							padding-bottom: 0;
						}
					}
				}
			}
		}
	}
}

.home.page {
	#bold_title {
		h1 {
			text-align: center;
			@include span(6);
			
			.hi {
				font-size: 0.667em;
				vertical-align: super;
				margin-right: 0.25em;
			}
		}
		
		@include breakpoint(max-width $bp-small) {
			h1 {
				font-size: 3em;
				top: 0.35em;
			}
		
			.tagline span {
				background: red;
				font-size: 0.75em;
			}
		}
	}
}

#content_box {
	background: white;
	position: relative;
	
	#main_menu {
		background: black;
		@include container;
				
		ul {
			position: absolute;
			bottom: -42px;
			text-align: center;
		
			li {
				padding: 10px 15px 5px 0;
				display: inline-block;
			}
		
			a {
				color: white;
				font-family: "Oswald", sans-serif;
				font-weight: normal;
			}
		}
		
		@include breakpoint(max-width $bp-middle) {
			ul {
				@include pre(gutter()/2);
			}
		}
	}
}

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

.home.page {
	#inner_box {
		padding-bottom: 0;
	}
	
	h2 {
		line-height: 80px;
		text-align: center;
		font-size: 2em;
		font-family: 'Oswald', sans-serif;
	}
	
	.work.column {
		width: 25%;
		height: 300px;
		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;
		}
		
		&.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: 46px;
		border-bottom: 1px solid hsl(210, 25, 50);
		
		a {
			color: adjust-lightness($link-color, 20);
		}

		.column {
			padding-top: 14px;
			font-size: 0.75em;
			
			&.first {
				@include span(first 2);
			}
			
			&.last {
				@include span(last 4);
			}
			
			@include breakpoint(max-width $bp-middle) {
				&.first {
					@include span(2);
					@include pre(gutter()/2);
				}
			
				&.last {
					@include span(last 3);
					@include post(gutter()/2);
				}				
			}
		}
	}
}