_sass/_layout.scss

/* ==========================================================================
   Page layout
   ========================================================================== */

/*
   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;
}


/*
   Menus
   ========================================================================== */

.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: 100%;
				background: transparent;
			}
			&:after {
				width: 0;
				background: $black;
			}
			&:active:after,
			&:hover:after {
				width: 100%;
			}
		}
	}
}

/* Top menu navigation */

.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 navigation */

.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));
	}
}

/*
   Main content
   ========================================================================== */

#main {
	.inner-wrap {
		@include media($medium) {
			@include span-columns(9);
		}
	}
	.page-title {
		@include fill-parent;
	}
	@at-root {
		.page-content {
			@include fill-parent;
			// 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;
			}
      .toc li > a {
        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;
			}
		}
	}
  /* advertisements */
	.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: 'Advertisement';
			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: $white;
	@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;
		}
	}
}

/*
   Page footer
   ========================================================================== */

.page-footer {
	position: relative;
}

/* Author block */

.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);
}

/*
   Site 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 text */
	.copyright {
		@include font-size(12);
		color: lighten($black,60);
		a {
			color: lighten($black,60);
			text-decoration: none;
		}
	}
}