ref: some CSS tweaks to make the site more readable

Set the color to something lighter, closer to white.

Increase the size of the font.

Add a small border with color for h2 headers.

1 files changed, 12 insertions, 14 deletions

diff --git a/static/css/custom.css b/static/css/custom.css
index 59db681..1c757ca 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,12 +1,12 @@
 body {
-  font-size: 1em;
+  font-size: 1.1em;
   color: #444;
   margin: 1em auto;
   padding: 0 0.55em;
   max-width: 49rem;
-  font-family: "arial";
+  font-family: sans-serif;
   line-height: 1.4em;
-  background-color: #f7f7f7;
+  background-color: #fffdfa;
 }
 
 h1,h2,h3,h4 {
@@ -14,6 +14,11 @@ h1,h2,h3,h4 {
   color: #2a3439;
 }
 
+h1#header {
+  font-size: 1.2rem;
+  margin-bottom: 1.2rem;
+}
+
 h1 {
   font-size: 1.4rem;
   margin-top: 1em;
@@ -22,9 +27,11 @@ h1 {
 
 h2 {
   font-size: 1.2rem;
+  border-left: 5px solid #4d76ae;
+  padding-left: 10px;
 }
 h3 {
-  font-size: 1.1rem;
+  font-size: 1.15rem;
 }
 
 hr{
@@ -83,12 +90,8 @@ pre {
 
 #meta {
   display: row;
-}
-
-#meta_tags {
-  padding: 0 .5rem;
+  font-style: italic;
   font-size: 0.9rem;
-  border: 1px solid #ccc;
 }
 
 #meta_tags a {
@@ -97,11 +100,6 @@ pre {
   color: #005a9c;
 }
 
-#meta_date {
-  font-style: italic;
-  font-size: 0.9rem;
-}
-
 table {
   width: 100%;
   border-spacing: 0px;