af/css/sass/screen.scss

@import "_base";
@import "compass/reset";

@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;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

@import "cookie";

#top_banner {
	background-repeat: no-repeat ! important;
	background-position: center center ! important;
	@include background-size(cover !important);
	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;
	@include single-text-shadow(black, 0px, 0px, 3px);
	
	h1 {
		font-size: 3em;
		text-align: right;
		position: relative;
		top: 0.75em;
		@include span(3 first);
		@include nowrap();
	}
	
	.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(5 split);
		}
		
		.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;
				
				&.bottom_padding {
					padding-bottom: 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;
						}
					}
				}
				
				h2 {
					font-family: "Oswald", sans-serif;
					font-size: 1.5em;
					line-height: 2*$base-line-height;
				}
				
				h3 {
					@extend h2;
					font-size: 1.25em;
					
					strong {
						text-transform: uppercase;
					}
				}
				
				ul {
					padding-left: 1em;
					margin: $base-line-height/2 0;
					
					&.nomargin {
						margin: 0;
					}
					
					li {
						text-indent: -0.7em;
					}
					
					li:before {
						content: '• ';
						width: 1em;
					}
					
					&.nobullets {
						padding-left: 0;

						li {
							text-indent: 0;
						}
					
						li:before {
							content: '';
							width: 0;
						}
					}
				}
				
				p.calltoaction {
					text-align: center;
					display: block;
					margin: $base-line-height/2 0;
					padding: $base-line-height/2 0;
					background-color: hsl(210, 88, 95);
					font-size: 1.5em;
					font-family: "Oswald", sans-serif;
					
					a {

					}
				}

				section {
					&.full {
						@include span(full);
						
						&.hr {
							height: 1px;
							padding: 0;
							margin: $base-line-height*0.73 0 $base-line-height*0.25 0;
							background: hsl(0,0,80);
						}
					}
					&.left {
						@include span(first 3);
						
						@include breakpoint(max-width $bp-small) {
							@include span(full);
						}
					}
					&.right {
						@include span(last 3);

						@include breakpoint(max-width $bp-small) {
							@include span(full);
						}
					}
					&.focus {
					}
				}
				
				figure {
					position: relative;
					margin-top: $base-line-height/2;
					margin-bottom: $base-line-height/2;
		
					img {
						@include border-radius($corner-radius);
						width: 100%;
						display: block;
					}

					figcaption {
						position: absolute;
						width: 100%;
						bottom: 0;
						font-size: 0.75em;
						color: #fff;
						line-height: $base-line-height;
						background: rgba(0, 0, 0, 0.5);
						padding: 0 0 0.2em 0;
						@include border-radius(0 0 $corner-radius $corner-radius);
			
						a {
							color: #fff;
							text-decoration: underline;
						}
			
						span {
							padding: 0 1em;
				
							&:before {
								content: '\203A  ';
							}
						}
					}
				}
			}
		}
	}
}

.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;
		overflow: hidden;
				
		ul {
			position: absolute;
			bottom: -42px;
			text-align: center;
			@include nowrap();
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;

			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) {
				@include span(full split);
				background: url('../images/hscroller-01.png') bottom center no-repeat;
				background-size: auto 100%;
			}
		}
	}
}

#inner_box {
	@include container;
}

.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 1);
			}
			&.second {
				@include span(1);
			}
			
			&.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);
				}				
			}
		}
	}
}

@import "_contact";
@import "_development";
@import "_cv";