New header

sass/style.scss

@@ -23,32 +23,54 @@
 	     url("/fonts/spectral-italic.ttf")   format("truetype");
 }
 
+.wrap {
+	max-width: 55rem;
+	margin: 0 auto;
+	padding: 0 1rem;
+}
+.grid {
+	display: grid;
+	grid-template-columns: 10em auto;
+	grid-column-gap: 2em;
+
+	& aside>*:first-child,
+	& main>*:first-child,
+	& main>article:first-child h2
+	{ padding-top: 0; margin-top: 0; }
+}
 
 body {
 	font-family: spectral, serif;
 	text-rendering: optimizeLegibility;
 	font-size: 18px;
 	line-height: 1.5;
-
-	max-width: 45em;
-	margin: 0 auto;
-	padding: 1em;
-
-	display: grid;
-	grid-template-columns: 10em auto;
-	grid-column-gap: 2em;
+	margin: 0;
 }
 
 header {
-	grid-column: 1/-1;
-	padding: 2rem 0;
-	font-weight: bold;
-	font-size: 1.5em;
+	padding: 1rem 0;
+	margin-bottom: 5rem;
+	background-color: #000;
+	color: #fff;
+	line-height: 1;
 
 	a { color: inherit }
+
+	.wrap {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+	}
+
+	.title { font-size: 1.5em; }
+	.title:hover { text-decoration: none }
+
+	nav { font-size: 1rem }
 }
 
 aside {
+	margin-bottom: 4rem;
+
 	span.title {
 		display: block;
 		margin: 2em 0 1em 0;
@@ -76,6 +98,7 @@ main {
 	margin-bottom: 5rem;
 
 	article h2 a { color: inherit }
+
 	.info {
 		border-top: 1px solid #eee;
 		margin: 2em 0;
@@ -91,6 +114,7 @@ main {
 			li { margin-right: 1em }
 		}
 	}
+
 	img {
 		max-width: 100%;
 		box-sizing: border-box;
@@ -103,6 +127,7 @@ main {
 			text-align: center;
 		}
 	}
+
 	table {
 		max-width: 100%;
 		margin: 0 auto;
@@ -110,6 +135,7 @@ main {
 
 		td, th { padding: 0 1em }
 	}
+
 	blockquote {
 		margin: 1em 2em 1em 1.5em;
 
@@ -118,6 +144,7 @@ main {
 			padding-left: 1.5em;
 		}
 	}
+
 	p>code {
 		background-color: #2b303b;
 		color: #fff;
@@ -125,12 +152,14 @@ main {
 		padding: .3em .5em;
 		border-radius: .3em;
 	}
+
 	pre {
 		font-size: 14px;
 		padding: 1em;
 		overflow: auto;
 		border-radius: .3em;
 	}
+
 	input.search {
 		display: none; // Hide for non-js browsers
 		box-sizing: border-box;
@@ -149,6 +178,6 @@ a {
 	&:hover { text-decoration: underline }
 }
 
-@media screen and (max-width: 50em) {
-	body { grid-template-columns: auto }
+@media screen and (max-width: 50rem) {
+	.grid { grid-template-columns: auto }
 }