From 5ef4d9a6909da47cb61468db7756b00b5219083c Mon Sep 17 00:00:00 2001
From: Greg Chapple <gregchapple1@gmail.com>
Date: Tue, 13 Feb 2018 12:29:14 -0500
Subject: [PATCH] Update styling to address issues in #20

- Add some table styling
- Make columns slightly wider
- Reduce size of <hr> in the sidebar
---
 _layouts/docs.liquid  |  4 ++--
 public/css/styles.css | 30 +++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/_layouts/docs.liquid b/_layouts/docs.liquid
index 68ab64a..1fc3de9 100644
--- a/_layouts/docs.liquid
+++ b/_layouts/docs.liquid
@@ -18,7 +18,7 @@
               <li><a {% if page.data.route == "directory"%}class="active"{%endif%} href="/docs/directory.html">Directory Structure</a></li>
               <li><a {% if page.data.route == "config"%}class="active"{%endif%} href="/docs/config.html">Configuration</a></li>
             </ul>
-            <hr>
+            <hr align="left">
             <p>Content</p>
             <ul>
               <li><a {% if page.data.route == "pages"%}class="active"{%endif%} href="/docs/pages.html">Pages</a></li>
@@ -30,7 +30,7 @@
               <li><a {% if page.data.route == "assets"%}class="active"{%endif%} href="/docs/assets.html">Assets</a></li>
               <li><a {% if page.data.route == "data"%}class="active"{%endif%} href="/docs/data.html">Data files</a></li>
             </ul>
-            <hr>
+            <hr align="left">
             <p>Misc</p>
             <ul>
               <li><a {% if page.data.route == "rss"%}class="active"{%endif%} href="/docs/rss.html">RSS</a></li>
diff --git a/public/css/styles.css b/public/css/styles.css
index 4876353..6f4aff2 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -31,7 +31,7 @@
 
   --font-stack: helvetica, arial, sans-serif;
 
-  --breakpoint: 41em;
+  --breakpoint: 45em;
 }
 
 html {
@@ -55,6 +55,11 @@ a {
   color: var(--orange);
 }
 
+hr {
+    color: #ccc;
+    width: 75%;
+}
+
 header {
   text-align: center;
   padding-top: 1em;
@@ -112,7 +117,7 @@ header nav .button > span {
 @media (min-width: 41em) {
   header .inner {
     display: flex;
-    justtify-content: center;
+    justify-content: center;
   }
 
   header .primary {
@@ -304,7 +309,7 @@ pre code {
   background: var(--med-grey);
 }
 
-@media (min-width: 41em) {
+@media (min-width: 45em) {
   .columns {
     display: flex;
   }
@@ -333,3 +338,22 @@ footer p {
   margin: 0;
   padding: 1em 0;
 }
+
+table {
+    border-collapse: collapse;
+}
+
+table thead {
+    background-color: var(--blue);
+    color: var(--white);
+}
+
+table thead th {
+    border: 1px solid var(--dark-blue);
+    padding: 0.5em;
+}
+
+table tbody td {
+    border: 1px solid #ccc;
+    padding: 0.5em;
+}