From ffb604b1a7a1e0fc80726d1b4c4aaba1a3f668f8 Mon Sep 17 00:00:00 2001
From: Midgard <2885-Midgard@users.noreply.framagit.org>
Date: Tue, 9 Jun 2020 02:16:47 +0200
Subject: [PATCH] Improve lay-out

---
 blog.html       | 10 ++++++++--
 public/main.css | 52 ++++++++++++++++++++++++++++++++-----------------
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/blog.html b/blog.html
index 5d0e25c..d724ef1 100644
--- a/blog.html
+++ b/blog.html
@@ -16,8 +16,14 @@
 		</header>
 
 		<main>
-			<h1>{title}</h1>
-			{body}
+			<article>
+				<header>
+					<h1>{title}</h1>
+					<div class="metadata">published <time datetime="{published}">{published}</time> by <span class="author">midgard</span></div>
+				</header>
+
+{body}
+			</article>
 		</main>
 
 		<aside id="social">
diff --git a/public/main.css b/public/main.css
index 0b4168c..b9b10ee 100644
--- a/public/main.css
+++ b/public/main.css
@@ -20,6 +20,10 @@ a:hover {
 	text-decoration: none;
 }
 
+pre {
+	white-space: pre-wrap;
+}
+
 
 
 body {
@@ -33,7 +37,7 @@ body {
 		"footer";
 	align-items: start;
 }
-header {
+body > header {
 	grid-area: header;
 	padding: 0 2vmin;
 }
@@ -67,11 +71,11 @@ footer {
 		padding: 2vmin 2vmin 0;
 	}
 
-	header {
+	body > header {
 		padding: 0;
 	}
 	main {
-		padding: 0 2vmin;
+		padding: 0 1em;
 	}
 }
 
@@ -83,13 +87,6 @@ footer {
 		font-size: 150%;
 		margin-left: 4em;
 	}
-
-	header {
-		padding: 0;
-	}
-	main {
-		padding: 0 1em;
-	}
 }
 
 @media (min-width:1500px) {
@@ -157,7 +154,7 @@ a.wordmark:hover span:last-child:before {
 }
 
 
-header img {
+body > header img {
 	width: 25vmin;
 	height: 25vmin;
 	display: inline-block;
@@ -168,11 +165,11 @@ header img {
 	display: inline-block;
 	font-size: 12vmin;
 }
-header img, .sitename {
+body > header img, .sitename {
 	vertical-align: middle;
 }
 @media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
-	header img {
+	body > header img {
 		width: 27vmin;
 		height: 27vmin;
 		display: block;
@@ -184,7 +181,7 @@ header img, .sitename {
 	}
 }
 @media (min-width:1500px) {
-	header img {
+	body > header img {
 		width: 250px;
 		height: 250px;
 		display: block;
@@ -242,8 +239,21 @@ body.blog {
 
 
 
-main > h1:first-child {
-	margin-top: 0.3em;
+main h1 {
+	margin: 0.5em 0 0;
+}
+main header .metadata {
+	color: #888;
+	font-size: 90%;
+	margin-top: -0.1em;
+	font-weight: 200;
+}
+main header {
+	border-bottom: 1px solid #aaa;
+	padding-bottom: 0.8em;
+}
+.metadata .author, .metadata time {
+	font-weight: 400;
 }
 
 
@@ -251,8 +261,14 @@ main > h1:first-child {
 .codehilite {
 	background-color: #111;
 	color: #eee;
-	padding: 0.5em 1em;
-	margin: 0 -1em;
+	padding: 0.5em 2vmin;
+	margin: 0 -2vmin;
+}
+@media (min-width:900px) or ((min-aspect-ratio:1/1) and (min-width:300px)) {
+	.codehilite {
+		padding: 0.5em 1em;
+		margin: 0 -1em;
+	}
 }
 .codehilite pre {
 	margin: 0;