diff --git a/index.html b/index.html
index def007e..ce390d8 100644
--- a/index.html
+++ b/index.html
@@ -14,29 +14,31 @@
 			</h1>
 		</header>
 
-		<section id="blog">
-			<h2>Blog</h2>
-			<ul>{blog_posts}
-			</ul>
-		</section>
+		<main>
+			<section id="blog" class="links">
+				<h2>Blog</h2>
+				<ul>{blog_posts}
+				</ul>
+			</section>
 
-		<section id="projects">
-			<h2>Projects</h2>
-			<ul>
-				<li><a href="/projects/osm-frontend/">
-					<div class="title">OpenStreetMap frontend</div>
-					<div class="summary">Building a great frontend for a great map</div>
-				</a></li>
-				<li><a href="/projects/ipo/">
-					<div class="title">ipo</div>
-					<div class="summary">A Python library that brings shell-like piping to Python</div>
-				</a></li>
-				<li><a href="/projects/itinero-mapmatcher/">
-					<div class="title">Itinero Mapmatcher</div>
-					<div class="summary">My internship: snapping GPX traces to the road network</div>
-				</a></li>
-			</ul>
-		</section>
+			<section id="projects" class="links">
+				<h2>Projects</h2>
+				<ul>
+					<li><a href="/projects/osm-frontend/">
+						<div class="title">OpenStreetMap frontend</div>
+						<div class="summary">Building a great frontend for a great map</div>
+					</a></li>
+					<li><a href="/projects/ipo/">
+						<div class="title">ipo</div>
+						<div class="summary">A Python library that brings shell-like piping to Python</div>
+					</a></li>
+					<li><a href="/projects/itinero-mapmatcher/">
+						<div class="title">Itinero Mapmatcher</div>
+						<div class="summary">My internship: snapping GPX traces to the road network</div>
+					</a></li>
+				</ul>
+			</section>
+		</main>
 
 		<aside id="social">
 			<a id="rss-link" href="/rss/">Follow with RSS</a>
diff --git a/public/main.css b/public/main.css
index d928a53..63eb234 100644
--- a/public/main.css
+++ b/public/main.css
@@ -25,72 +25,41 @@ a:hover {
 body {
 	display: grid;
 	grid-template-columns: auto;
-	grid-template-rows: auto auto auto auto 1fr;
-	grid-template-areas:
-		"header"
-		"blog"
-		"projects"
-		"social"
-		"footer";
-	align-items: start;
-}
-body.blog {
 	grid-template-rows: auto auto auto 1fr;
 	grid-template-areas:
 		"header"
 		"main"
 		"social"
 		"footer";
+	align-items: start;
 }
 header {
 	grid-area: header;
 }
 main {
 	grid-area: main;
+}
+.blog main {
 	justify-self: center;
 }
-#blog {
-	grid-area: blog;
-}
-#projects {
-	grid-area: projects;
-}
 #social {
 	grid-area: social;
+	align-self: start;
 }
 footer {
 	grid-area: footer;
 	align-self: end;
 }
 
-@media (min-width:500px) {
-	section {
-		font-size: 125%;
-	}
-}
 @media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
 	body {
-		grid-template-columns: 1fr 2fr;
-		grid-template-rows: auto;
-		grid-template-areas:
-			"header blog"
-			"header projects"
-			"social projects"
-			"footer footer";
-		gap: 1em 3em;
-	}
-	body.blog {
-		grid-template-rows: auto;
+		grid-template-columns: 27vmin 2fr;
+		grid-template-rows: auto 1fr auto;
 		grid-template-areas:
 			"header main"
 			"social main"
 			"footer footer";
-	}
-	header {
-		grid-area: header;
-	}
-	footer {
-		align-self: end;
+		gap: 1em 3em;
 	}
 }
 
@@ -98,8 +67,9 @@ footer {
 	body {
 		padding: 2em 2em 0;
 	}
-	section {
+	body:not(.blog) main {
 		font-size: 150%;
+		margin-left: 4em;
 	}
 }
 
@@ -107,19 +77,17 @@ footer {
 	body {
 		padding: 4em 4em 0;
 
-		grid-template-columns: 1fr 2fr 2fr;
-		grid-template-areas:
-			"header blog projects"
-			"social blog projects"
-			"footer footer footer";
+		grid-template-columns: 250px 1fr;
 		gap: 1em 4em;
 	}
-	body.blog {
-		grid-template-columns: 1fr 3fr 1fr;
-		grid-template-areas:
-			"header main ."
-			"social main ."
-			"footer footer footer";
+
+	body:not(.blog) main {
+		display: flex;
+		margin-left: 6em;
+	}
+	body:not(.blog) main > * {
+		margin-right: 4em;
+		flex-grow: 1;
 	}
 }
 
@@ -136,7 +104,7 @@ footer {
 
 	text-align: left;
 	display: inline-block;
-	width: 3.4em;
+	width: 3.37em;
 }
 .wordmark span {
 	display: block;
@@ -170,9 +138,6 @@ a.wordmark:hover span:last-child:before {
 }
 
 
-header {
-	background-color: #fff;
-}
 header img {
 	width: 25vmin;
 	height: 25vmin;
@@ -188,9 +153,6 @@ header img, .sitename {
 	vertical-align: middle;
 }
 @media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
-	header {
-		background-color: transparent;
-	}
 	header img {
 		width: 27vmin;
 		height: 27vmin;
@@ -211,54 +173,63 @@ header img, .sitename {
 	.sitename {
 		margin: 0.3em 0 0 0;
 		display: block;
-		font-size: 56pt;
+		font-size: 56.5pt;
 	}
 }
 
 
 
-ul {
+.links ul {
 	padding: 0;
 }
-li {
+.links li {
 	list-style: none;
 	margin: 1.5em 0;
 }
 
-li a {
+.links li a {
 	display: block;
 	text-decoration: none;
 	padding: 0.2em 0.3em;
 	margin: 0 -0.3em;
 }
-li a:hover, li a:focus {
+.links li a:hover, li a:focus {
 	background-color: #fffaf7;
 }
-a .summary {
+.links a .summary {
 	font-size: 75%;
 	color: #333;
 	margin-top: 0.3em;
 }
-a .title {
+.links a .title {
 	text-decoration: underline;
 }
 
 
 
-main {
+.blog main {
 	line-height: 1.5;
 	max-width: 50em;
 }
+@media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
+	.blog main {
+		line-height: 1.7;
+	}
+}
 
 
 
+#social {
+	font-size: 75%;
+}
 #social a {
 	display: inline-block;
 	width: 4em;
 	text-align: center;
+	vertical-align: top;
 	text-decoration: none;
 	color: #000;
-	opacity: 0.7;
+	opacity: 0.5;
 }
 #social a:hover {
 	opacity: 1;
@@ -279,6 +250,17 @@ main {
 #irc-link:before {
 	background-image: url(irc.svg);
 }
+@media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
+	#social {
+		font-size: 2vmin;
+		margin-top: 5em;
+	}
+}
+@media (min-width:1500px) {
+	#social {
+		font-size: 100%;
+	}
+}