From 75f10fea633cebc88234ea95bbd38bc7cdb78a5c Mon Sep 17 00:00:00 2001
From: RichardG867 <richardg867@gmail.com>
Date: Mon, 6 Dec 2021 18:12:15 -0300
Subject: [PATCH] CSS fixes, including a new printing stylesheet for internal
 work

---
 _includes/header.html        |  8 +++++--
 assets/css/style-reduced.css |  8 +++----
 assets/css/style.css         | 46 ++++++++++++++++++------------------
 3 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 9492411..1b893c9 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -23,12 +23,16 @@
 		<meta name="theme-color" content="#ff4848">
 		<meta name="viewport" content="width=640, initial-scale=0.5">
 		<!--[if !IE]><!-->
-			<link rel="stylesheet" href="/assets/css/style.css">
+			<link rel="stylesheet" href="/assets/css/style.css" media="screen">
+			<link rel="stylesheet" href="/assets/css/style-print.css" media="print">
 			<link rel="stylesheet" href="/assets/css/fonts.css">
 		<!--<![endif]-->
 		<!--[if IE]>
 			<script src="/assets/js/style-reduced.js"></script>
-			<link rel="stylesheet" href="/assets/css/style-reduced.css">
+			<link rel="stylesheet" href="/assets/css/style-reduced.css" media="screen">
+			<!--[if gte IE 5]>
+				<link rel="stylesheet" href="/assets/css/style-print.css" media="print">
+			<![endif]-->
 		<![endif]-->
 		<link rel="alternate" type="application/atom+xml" title="Blog posts" href="/feed.xml" />
 	</head>
diff --git a/assets/css/style-reduced.css b/assets/css/style-reduced.css
index 7669a97..2e79c1b 100644
--- a/assets/css/style-reduced.css
+++ b/assets/css/style-reduced.css
@@ -15,6 +15,9 @@ body {
 }
 
 /* Page Layout */
+header { /* N/A on IE6 */
+	display: inline;
+}
 img {
 	border: none;
 }
@@ -26,9 +29,6 @@ a.navlink {
 	font-size: 15pt;
 	margin: 6pt;
 }
-header { /* N/A on IE6 */
-	display: inline;
-}
 nav { /* requires JS on IE6 */
 	display: inline;
 	height: 70px;
@@ -36,7 +36,7 @@ nav { /* requires JS on IE6 */
 }
 hero, main { /* requires JS on IE6 */
 	display: block;
-	padding: 5pt 0pt;
+	margin: 5pt 0pt;
 }
 div#footer {
 	display: block;
diff --git a/assets/css/style.css b/assets/css/style.css
index a4a4fe4..21bbc4e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,7 +1,7 @@
 /* Global Defaults */
 html {
 	color: #f9f9f9;
-	font-family: "Source Code Pro", monospace;
+	font-family: "Source Code Pro", "Courier New", "Courier", monospace;
 }
 
 /* Body Layout */
@@ -21,13 +21,13 @@ body {
 }
 @media (max-width: 768px) {
 	body {
-        grid-template-rows: auto auto 1fr auto auto 70px;
+		grid-template-rows: auto auto 1fr auto auto 70px;
 		grid-template-areas: "head head head"
-                             "nav nav nav"
-				        	 "hero hero hero"
-	           				 "main main main"
-	           				 "about about about"
-	           				 "foot foot foot";
+							 "nav nav nav"
+							 "hero hero hero"
+							 "main main main"
+							 "about about about"
+							 "foot foot foot";
 	}
 }
 @keyframes backgroundScroll {
@@ -58,18 +58,18 @@ body > nav > a {
 	margin: 0 20pt;
 }
 @media (max-width: 768px) {
-    body > header {
-        text-align: center;
-    }
-    body > header > img {
-        max-width: 100%;
-        width: auto;
-        height: auto;
-    }
-    body > nav {
-        justify-content: center;
-        font-size: 25pt;
-    }
+	body > header {
+		text-align: center;
+	}
+	body > header > img {
+		max-width: 100%;
+		width: auto;
+		height: auto;
+	}
+	body > nav {
+		justify-content: center;
+		font-size: 25pt;
+	}
 }
 
 body > hero {
@@ -109,10 +109,10 @@ body > footer > div > #reduced {
 	display: none;
 }
 @media (max-width: 768px) {
-    body > footer {
-    	padding: 10pt;
-    	font-size: 20pt;
-    }
+	body > footer {
+		padding: 10pt;
+		font-size: 20pt;
+	}
 }
 
 /* Buttons */