Attempt a thorough redesign of the landing page

After careful consideration we have decided to replace the more
brutalist landing page with something simpler and more in line with the
styling of the actual posts.

Have the front page include a short introduction and some further links
to the atom feed and git.oriole.systems. Use a more traditional and
simple top-to-bottom layout for the article links in lieu of the more
idiosyncratic left-to-right list that was difficult to scan for some
people.

Keep the post styling as is, but move around and change a few HTML
elements to make more semantic sense and improve the clarity of the CSS.

1 files changed, 62 insertions, 65 deletions

diff --git a/scss/style.scss b/scss/style.scss
index 0c787e2..ff443b9 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -15,12 +15,31 @@ $mute-text: #5a5a5a;
 body {
 	background-color: white;
 	color: black;
-	line-height: 1.6;
-	margin: 0;
+	line-height: 1.3;
+
+	max-width: 1024px;
+	margin: 1rem auto;
+	padding: 0 1rem;
+
+	font-family: $font-sans;
+	font-size: 1.3rem;
+}
+
+body.frontpage {
+	header { font-size: larger; }
+
+	nav ul {
+		list-style: none;
+		padding: 0;
+	}
+
+	hr {
+		border: none;
+		border-top: 3px double darkgrey;
+	}
 }
 
 h1 {
-	font-family: $font-serif;
 	font-size: 3.5rem;
 	font-weight: normal;
 	margin: 0;
@@ -34,7 +53,6 @@ code {
 pre {
 	background-color: $canary;
 	color: $canary-text;
-	line-height: 1.3;
 	overflow: auto;
 	padding: .7rem;
 }
@@ -61,71 +79,50 @@ blockquote > p {
 	margin: 0;
 }
 
-.frontpage {
-	background-color: $yellow;
-	font-family: $font-serif;
-	font-size: 4rem;
-}
+nav li > article {
+	display: flex;
+	flex-direction: column;
 
-.post {
-	font-family: $font-sans;
-	font-size: 1.3rem;
+	margin-bottom: 1.5rem;
 
-	header {
-		font-size: 1.5rem;
+	font-size: 2.7rem;
+	line-height: 1.2;
+
+	a {
+		text-decoration: none;
 	}
-}
 
-nav.main ul {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	list-style: none;
-	margin: .5rem;
-	padding: 0;
-}
+	a:hover {
+		text-decoration: underline;
+	}
 
-nav.main li a {
-	background-color: white;
-	border: 4px solid black;
-	box-shadow: 10px 10px 0 black;
-	color: black;
-	display: block;
-	margin: .8rem .8rem;
-	padding: 0 .8rem;
-	text-decoration: none;
-}
+	time {
+		display: flex;
 
-nav.main li a:hover {
-	background-color: black;
-	color: white;
-}
+		font-size: 60%;
+		color: $mute-text;
+	}
 
-nav.main li a:focus {
-	background-color: black;
-	color: white;
+	a { align-self: flex-start; }
 }
 
-article {
-	margin: 1rem auto;
-	max-width: 1024px;
-	padding: 0 1rem;
+header.post {
+	font-size: 1.5rem;
+	border-bottom: 1px solid darkgrey;
 
-	header {
-		border-bottom: 1px solid darkgrey;
+	a {
+		background-color: white;
+		font-weight: bold;
+		text-decoration: none;
+	}
 
-		a {
-			background-color: white;
-			font-weight: bold;
-			text-decoration: none;
-		}
+	time { font-size: smaller; }
 
-		address {
-			display: none;
-		}
+	address { display: none; }
+}
 
-		time { font-size: smaller; }
-	}
+section.post {
+	line-height: 1.6;
 
 	img {
 		display: block;
@@ -152,16 +149,16 @@ article {
 	sup > a {
 		text-decoration: none;
 	}
-}
 
-figure {
-	figcaption {
-		color: $mute-text;
-		text-align: center;
-		font-size: smaller;
+	figure {
+		figcaption {
+			color: $mute-text;
+			text-align: center;
+			font-size: smaller;
 
-		padding-top: .5em;
-	}
+			padding-top: .5em;
+		}
 
-	> img.round { border-radius: 5px; }
+		> img.round { border-radius: 5px; }
+	}
 }