From 1aa2f35f53bd4b75f6be9dfe38c4fca92ac6376a Mon Sep 17 00:00:00 2001
From: Johannes Löthberg <johannes@kyriasis.com>
Date: Wed, 16 Nov 2016 14:42:22 +0100
Subject: Use 62.5% base font size and proper rem everywhere
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://snook.ca/archives/html_and_css/font-size-with-rem

Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
---
 templates/layout.html | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

(limited to 'templates')

diff --git a/templates/layout.html b/templates/layout.html
index 3dfa031..562764f 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -4,8 +4,11 @@
 		<meta charset="UTF-8">
 {% block head %}{% endblock %}
 		<style>
+html {
+	font-size:62.5%;
+}
 body {
-	max-width: 42rem;
+	max-width: 75rem;
 }
 a, a:visited {
 	text-decoration: none;
@@ -20,7 +23,7 @@ header nav ul {
 }
 header nav ul li {
 	display: inline;
-	margin-right: 0.25rem;
+	margin-right: 0.5rem;
 }
 header nav a, header nav a:visited {
 	color: #444;
@@ -29,8 +32,17 @@ header nav a:hover {
 	color: #111;
 }
 .padded-box {
-	padding-left: 0.5rem;
-	padding-right: 0.5rem;
+	font-size: 1.6rem;
+	padding-left: 1rem;
+	padding-right: 1rem;
+}
+hr {
+	margin-top: 2rem;
+	margin-bottom: 2rem;
+}
+article header h1 {
+	margin-top: 2rem;
+	margin-bottom: 0.5rem;
 }
 article p {
 	white-space: pre-wrap;
@@ -39,7 +51,7 @@ article p {
 	padding-bottom: 0.25rem;
 }
 #post-nav {
-	padding-bottom: 0.25rem;
+	padding-bottom: 0rem;
 }
 ul#archive-list {
 	list-style-type: none;
@@ -49,19 +61,22 @@ ul#tag-list {
 	list-style-type: circle;
 	padding-left: 2rem;
 }
-footer p#copy {
+footer#bottom div {
+	margin-bottom: 0.25rem;
+}
+footer#bottom p#copy {
 	margin: 0rem;
 	padding-top: 0.25rem;
 	padding-bottom: 0.25rem;
 }
-footer ul#contact-info {
+footer#bottom ul#contact-info {
 	margin: 0;
 	padding: 0rem;
 	padding-top: 0.25rem;
 	padding-bottom: 0.25rem;
 	list-style-type: none;
 }
-footer ul#contact-info li {
+footer#bottom ul#contact-info li {
 	display: inline;
 	margin-right: 0.25rem;
 }
@@ -84,7 +99,7 @@ footer ul#contact-info li {
 {% block content %}{% endblock %}
 		</div>
 		<hr />
-		<footer class="padded-box">
+		<footer id="bottom" class="padded-box">
 			<div>
 				<p id="copy">© 2016 Johannes Löthberg</p>
 			</div>
-- 
cgit v1.2.3-70-g09d2