From a80b0dff8ff0f3c6b4883cdcfd93da629a62f778 Mon Sep 17 00:00:00 2001
From: Leonora Tindall <nora@nora.codes>
Date: Sat, 1 Oct 2022 21:46:07 -0500
Subject: [PATCH] Rev CSS and make more mobile friendly.

---
 content/_header.md | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)
diff --git a/content/_header.md b/content/_header.md
index 3a00321..61d515c 100644
--- a/content/_header.md
+++ b/content/_header.md
@@ -1,20 +1,34 @@
 <style>
-body {
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto; 
+
+/* 100 Bytes of CSS to look good nearly anywhere */
+html {
+  max-width: 70ch;
+  padding: 3em 1em;
+  margin: auto;
+  line-height: 1.75;
+  font-size: 1.25em;
 }
 
+/* 100 More optional bytes */
 h1, h2, h3, h4, h5, h6 {
   text-align: center;
+  margin: 3em 0 1em;
 }
 
+p, ul, ol {
+  margin-bottom: 2em;
+  color: #1d1d1d;
+  font-family: sans-serif;
+}
+
+/* Don't underline the link to the index page */
 h1 a {
   text-decoration: none;
   color: black;
   font-weight: bold;
 }
 
+/* Clear around images, and preallocate their space */
 img {
   margin-left: auto;
   margin-right: auto;
@@ -23,6 +37,7 @@ img {
   aspect-ratio: attr(width) / attr(height);
 }
 
+/* For each particular image, set its size */
 img[alt="A diagram showing the difference in pipeline between normal websites with a CDN and this monstrosity"] {
   width: 582px;
   height: 521px;
@@ -30,7 +45,12 @@ img[alt="A diagram showing the difference in pipeline between normal websites wi
 
 </style>
 
+<!-- These should, by rights, go in <head>, but we have no such luxury. -->
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Markdown@Edge</title>
+<!-- And here we begin the true page content. -->
 
 <a href="/"><h1>Markdown@Edge</h1></a>
 
