_layout.scss

// MASTHEAD
// --------------------------------------------------

#masthead {
	padding: $gutter;
	z-index: 5;
	@include transform(translate(0,0));
	@include transition(500ms cubic-bezier(.645,.045,.355,1.000));
	&.slide {
		@include transform(translate(-1600px,0));
	}
	.inner-wrap {
		@include outer-container;
	}
}
.site-title {
	@include row;
	@include media($large) {
		@include span-columns(4);
	}
	padding: (.25 * $masthead-height) 0; // fourth the height to center vertically
	height: $masthead-height;
	text-decoration: none;
	color: $black;
	font-family: $alt-font;
	font-weight: 700;
	@include font-size(20,no);
	line-height: .5 * $masthead-height; // half the height to center vertically
	text-transform: uppercase;
}


// NAVIGATIONS
// --------------------------------------------------

.menu {
	li {
		float: left;
		&:last-child a {
			@include media($medium) {
				margin-right: 0; // remove spacing from last menu link
			}
		}
		a {
			// line hover effect
			position: relative;
			display: block;
			margin-right: $gutter;
			padding: (.25 * $masthead-height) 0 (.25 * $masthead-height) ;
			height: $masthead-height;
			font-family: $alt-font;
			&:before,
			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				height: 2px;
				@include transition(width 0.3s);
			}
			&:before {
				width: 40%;
				background: transparent;
			}
			&:after {
				width: 0;
				background: $yellow;
			}
			&:active:after,
			&:hover:after {
				width: 100%;
			}
		}
	}
}

.top-menu {
	display: none;
	position: relative;
	@include media($medium) {
		@include span-columns(12);
	}
	@include media($large) {
		@include span-columns(7);
		ul {
			position: absolute;
			right: 0;
		}
	}
	.home,
	.sub-menu-item {
		display: none;
	}
	li {
		a {
			font-weight: 700;
			@include font-size(16,no);
			line-height: .5 * $masthead-height; // half the height to center vertically
			color: $black;
			text-transform: uppercase;
		}
	}
}
.bottom-menu {
	@include clearfix;
	font-weight: 700;
	a {
		color: lighten($black,60);
	}
}


// PAGE WRAPPER
// --------------------------------------------------

#page-wrapper {
	padding: 0 $gutter; // add white space for smaller screens
	@include size(100% 100%);
	-webkit-overflow-scrolling: touch;
	z-index: 2;
	@include transform(translate(0,0));
	@include transition(500ms cubic-bezier(.645,.045,.355,1.000));
	&.slide {
		@include transform(translate(-60rem,0));
	}
}


// BROWSER UPGRADE
// --------------------------------------------------

.upgrade {
	text-align: center;
	a {
		text-decoration: none;
	}
}


// MAIN
// --------------------------------------------------

#main {
	.inner-wrap {
		@include media($medium) {
			@include span-columns(9 of 40);
		}
	}
	.toc {
		@include media($medium) {
			@include row($direction: RTL);
		}
		@include media($large) {
			@include span-columns(2 of 30);
		}
	}
	.page-title {
		@include fill-parent;
	}
	@at-root {
		.page-content {
			@include media($medium) {
				@include row($direction: RTL);
				//@include span-columns(7 of 9);
			}
			@include media($large) {
				@include span-columns(12);
			}
			// larger font for intro paragraph
			> p {
				&:first-child {
					@include font-size(20,yes,30);
				}
			}
			// cleaner underlines for links
			a { text-decoration: none; }
			p > a,
			li > a {
				border-bottom: 1px dotted lighten($link-color, 50);
				&:hover {
					border-bottom-style: solid;
				}
			}
			p > a.reversefootnote {
				border-bottom-width: 0;
			}
			.page-footer,
			.pagination {
				@include fill-parent;
			}
			.page-meta {
				p{
					@include font-size(14,no);
					font-family: $alt-font;
					color: lighten($black,60);
				}
			}
		}
	}
	@at-root {
		.archive-wrap {
			@include fill-parent;
			.page-content {
				@include reset-all;
				@include fill-parent;
			}
		}
	}
	.ads {
		position: relative;
		text-align: center;
		margin-top: $gutter;
		margin-left: -$gutter;
		margin-right: -$gutter;
		padding: 10px 0 20px;
		background: lighten($border-color,5);
		@include media($medium) {
			@include span-columns(3);
			margin-left: 0;
			margin-right: 0;
		}
		&:after {
			content: 'about.me';
			position: absolute;
			bottom: 0;
			width: 100%;
			text-align: center;
			display: block;
			@include font-size(9,no);
			font-family: $alt-font;
		}
		ins {
			border-width: 0;
		}
	}
}
// page lead
.page-lead {
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	text-align: center;
	color: $yellow;
	@include media($large) {
		background-size: cover;
	}
}
.page-lead-content {
	padding: 1em;
	@include media($medium) {
		padding: 2em;
	}
	@include media($large) {
		padding: 3em;
	}
	h1 {
		@include font-size(48);
		@include media($medium) {
			@include font-size(60);
		}
		@include media($large) {
			@include font-size(72);
		}
	}
	h2 {
		@include font-size(20);
		@include media($medium) {
			@include font-size(24);
		}
		@include media($large) {
			@include font-size(32);
		}
	}
}
// page header
.page-feature {
	@include fill-parent;
	// expand image to cover full width of header
	img {
		width: 100%;
	}
}
// make image flush with edges on small screens
.page-image {	
	position: relative;
	margin-left: -1 * $gutter;
	margin-right: -1 * $gutter;
	// Feature Image Caption
	.image-credit {
		position: absolute;
		bottom: 0;
		right: 0;
		margin: 0 auto;
		padding: 10px 15px;
		background-color: rgba($black,.5);
		color: $white;
		font-family: $alt-font;
		@include font-size(12,no);
		text-align: right;
		z-index: 10;
		a {
			color: $white;
			text-decoration: none;
		}
	}
}
// breadcrumbs
.breadcrumbs { 
	@include row;
	margin-top: $gutter;
	@include font-size(10,no);
	a {
		display: inline-block;
		font-family: $alt-font;
		font-weight: 700;
		text-align: left;
		text-transform: uppercase;
	}
}
// table of contents
.toc {
	min-height: 1px;
	ul {
		margin-top: $gutter;
		border: 1px solid $border-color;
		border-radius: $border-radius;
	}
	li {
		@include media($micro) { @include font-size(16,no,18); }
    @include media($small) { @include font-size(16,no,18); }
		@include font-size(12,no,16);
		border-bottom: 1px solid $border-color;
	}
	font-family: $alt-font;
	a {
		display: block;
		padding: (.25 * $gutter) (.5 * $gutter);
		border-left: 2px solid transparent;
		&:hover,
		&:focus {
			background: lighten($border-color,5);
		}
	}
}
// tiles
//.tile {
//	@include outer-container;
//	margin-bottom: $gutter;
//	@include media($micro) {
//		@include fill-parent;
//	}
//	@include media($small) {
//		@include span-columns(6);
//		@include omega(2n);
//	}
//	@include media($medium) {
//		@include span-columns(3);
//		@include omega(4n);
//	}
//	.entry-date {
//		@include font-size(16,no);
//		color: lighten($text-color,25);
//	}
//	.post-title {
//		@include font-size(18,no);
//	}
//	.post-excerpt {
//		@include font-size(16);
//	}
//	.post-teaser {
//		position: relative;
//		display: block;
//		&:after {
//			content: '';
//			position: absolute;
//			width: 100%;
//			height: 100%;
//			top: 0;
//			left: 0;
//			background: rgba($base-color,0);
//			pointer-events: none;
//			@include transition(background 0.3s);
//		}
//		&:hover {
//			&:after {
//				background: rgba($base-color,0.2);
//			}
//		}
//	}
//}
// footnotes
.footnotes {
	font-family: $alt-font;
	p, li {
		@include font-size(12,no);
	}
	&:before {
		content: 'Footnotes:';
		font-weight: 700;
	}
}
// page footer
.page-footer {
	position: relative;
}
.author-image {
	position: absolute;
	left: 0;
	img {
		width: 80px;
		height: 80px;
		border-radius: $border-radius;
	}
}
.author-content {
	word-wrap: break-word;
	padding-left: 100px; //avatar width + 20px padding
	min-height: 80px; //mirrors avatar height
}
.author-name {
	@include font-size(20,no);
}
.author-bio {
	margin-top: 0;
	@include font-size(16);
}


// SCROLL ARROW CUE
// --------------------------------------------------

#scroll-cue {
	position: fixed;
	bottom: 100px;
	@include media($short) {
		bottom: 0;
	}
	left: 50%;
	width: 2 * $button-size;
	height: 2 * $button-size;
	text-align: center;
	cursor: pointer;
	color: $white;
	@include font-size(12);
	font-family: $alt-font;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	letter-spacing: 2px;
}


// FOOTER
// --------------------------------------------------

#site-footer {
	@include outer-container;
	margin-top: (3 * (0px + $doc-line-height));
	margin-top: (3 * (0rem + ($doc-line-height / $doc-font-size)));
	padding-bottom: $gutter;
	font-family: $alt-font;
	.copyright {
		@include font-size(12);
		color: lighten($black,60);
		a {
			color: lighten($black,60);
			text-decoration: none;
		}
	}
}