Update the blog style

5 files changed, 116 insertions, 17 deletions

diff --git a/lib/blog.js b/lib/blog.js
index 541d6b3..50ebbf2 100644
--- a/lib/blog.js
+++ b/lib/blog.js
@@ -136,6 +136,7 @@ module.exports = class Blog {
         internals.debuglog('Parsing markdown');
         posts.push({
           ...metadata,
+          index: i,
           html: Marked(postContent),
           raw: postContent
         });
diff --git a/static/css/style.css b/static/css/style.css
index 6c7fd1b..2a35a63 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -7,7 +7,9 @@ body {
   background-image: url('/images/header_background.png');
   background-size: auto 300px;
   background-attachment: fixed;
-  line-height: 1.45;
+  line-height: 1.45em;
+
+  font-family: Times, 'Times New Roman', serif;
 }
 
 header {
@@ -25,28 +27,52 @@ header a {
 
 main {
   background-color: white;
-  padding: 1.414em;
+  padding: 1.414em 4.53em;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
 }
 
-h1, h2, h3, h4 {
-  margin: 1.414em 0 0.5em;
+h1, h2, h3 {
   font-weight: 400;
   width: 100%;
-  max-width: 640px;
 }
+h1 {
+  font-size: 2rem;
+  line-height: 1.05em;
+  max-width: 30rem;
+  margin: 0.5em 0 0.5em;
+  text-transform: uppercase;
+}
+h2, h3 {
+  max-width: 30rem;
+  font-size: 1rem;
+  margin: 2em 0;
+}
+
+h2 { font-variant: small-caps; }
+h3 { font-style: italic; }
 
-p, ul, ol, img {
+ul, ol, img {
   width: 100%;
   margin: 1.414em 0;
-  max-width: 480px;;
+  max-width: 30em;
 }
 
-ul, ol { margin-left: 1.414em; }
+p {
+  max-width: 30em;
+  text-align: justify;
+  text-indent: 1.5em;
+}
+
+hr + p,
+h1 + p,
+h2 + p,
+h3 + p {
+  text-indent: 0;
+}
 
-h1 { font-size: 3.998em; }
-h2 { font-size: 2.827em; }
-h3 { font-size: 1.999em; }
-h4 { font-size: 1.414em; }
+ul, ol { margin-left: 1.414em; }
 
 code {
   background-color: whitesmoke;
@@ -56,10 +82,82 @@ code {
 pre {
   background-color: whitesmoke;
   padding: 1em;
-  max-width: 40em;
+  font-size: 1.231em;
+  max-width: 30em;
+  margin: 1.414em 0 1.414em -1em;
 }
 
-footer {
-  background-color: pink;
+hr {
+  border: 0;
+  border-bottom: 1px solid #666;
+  width: 30em;
+  margin: 1.414em 0;
+}
+
+hr.separator {
+  width: 100%;
+  border-bottom: 10px solid #666;
+}
+
+footer,
+footer a {
+  color: #fff;
+  background-color: blue;
+}
+footer p {
+  font-family: arial, sans-serif;
+  text-align: left;
+  text-indent: 0;
   padding: 1.414em;
 }
+
+/* Image and caption sttyles */
+
+p img {
+  margin-left: -1.125em;
+}
+
+hr + p img,
+h1 + p img,
+h2 + p img,
+h3 + p img {
+  margin-left: 0;
+}
+
+img {
+  width: 100%;
+  max-width: 30em;
+}
+
+img + em {
+  color: #999;
+  display: block;
+  margin: -1.414em 0 1.414em;
+  text-align: right;
+}
+
+/* Dark Mode Support */
+
+@media (prefers-color-scheme: dark) {
+  main {
+    background-color: black;
+    color: white;
+  }
+
+  code,
+  pre {
+    background-color: #444;
+  }
+
+  a {
+    color: #53FFFF;
+  }
+
+  a:visited {
+    color: #FF55FF;
+  }
+
+  hr.separator {
+    border-bottom: 10px solid #999;
+  }
+}
diff --git a/static/images/header_background.png b/static/images/header_background.png
index 8352b5e..6d1989f 100644
--- a/static/images/header_background.png
+++ b/static/images/header_background.png
diff --git a/static/images/header_foreground.png b/static/images/header_foreground.png
index eb9b34d..e0fadd1 100644
--- a/static/images/header_foreground.png
+++ b/static/images/header_foreground.png
diff --git a/templates/index.html b/templates/index.html
index 3e37304..8ab8e3c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -22,10 +22,10 @@
     </header>
     <main>
     {{~ it.posts: post}}
-      <article class="h-entry" id="{{= post.id}}">
+      <article class="h-entry" id="{{= post.index + 1}}">
         {{= post.html}}
       </article>
-      <hr>
+      <hr class="separator">
     {{~}}
     {{? it.posts.length === 0}}
       <h1>This is a fresh blog!</h1>