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.

3 files changed, 17 insertions, 21 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index da0a3e5..4312eec 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -13,21 +13,19 @@
   {{- $mod = .Page.GitInfo.CommitDate.Format "Jan 2, 2006" -}}
   {{ end -}}
   {{ if eq $pub $mod }}
-  <div id="meta_date">posted on {{ $pub }}</div>
+  <span id="meta_date">posted on {{ $pub }}</span>
   {{ else }}
-  <div id="meta_date">posted on {{ $pub }} - last modified {{ $mod }}</div>
+  <span id="meta_date">posted on {{ $pub }} - last modified {{ $mod }}</span>
   {{ end }}
   {{ if .Params.tags }}
-  <div>
   {{ if eq (len .Params.tags) 1 }}
-  tag:
+  with tag:
   {{ else }}
-  tags:
+  with tags:
   {{ end }}
   {{ range $idx, $tag := .Params.tags }}
   <span id="meta_tags"><a href="/tags/{{ $tag | urlize }}/">{{ $tag }}</a></span>
   {{ end }}
-  </div>
   {{ end }}
 </div>
 
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 2124bde..26a77d1 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,6 @@
 <header>
   <nav class="navbar">
-    <h2><a rel="author" href="{{ .Site.BaseURL }}">franck cuny</a></h2>
+    <h1 id="header"><a rel="author" href="{{ .Site.BaseURL }}">franck cuny</a></h1>
     {{ range .Site.Menus.main }}
     <a class="nav-bold" href="{{ absURL .URL }}">{{ .Title }}</a>
     <span class="bar">|</span>
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;