From 3f472dd87233b6afb8daa1f14a6ece614cf0c531 Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel.summers.2415@gmail.com>
Date: Thu, 19 Oct 2017 20:06:09 -0500
Subject: [PATCH] Added a responsive header

---
 themes/bit-badger/layout/_partial/header.pug |  2 +-
 themes/bit-badger/source/style.css           | 73 +++++++++++++++-----
 2 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/themes/bit-badger/layout/_partial/header.pug b/themes/bit-badger/layout/_partial/header.pug
index 95fd87c..9e6efac 100644
--- a/themes/bit-badger/layout/_partial/header.pug
+++ b/themes/bit-badger/layout/_partial/header.pug
@@ -1,4 +1,4 @@
-header
+header.site-header
   .header-logo
     a(href='/')
       img(src='/img/bitbadger.png'
diff --git a/themes/bit-badger/source/style.css b/themes/bit-badger/source/style.css
index 17dd568..33ecd55 100644
--- a/themes/bit-badger/source/style.css
+++ b/themes/bit-badger/source/style.css
@@ -37,17 +37,35 @@ h3 {
   margin: 1rem 0;
 }
 h2, h3 {
-  width: 80%;
   border-bottom: solid 2px navy;
 }
+@media all and (min-width:40rem) {
+  h2, h3 {
+    width: 80%;
+  }
+}
 p {
   margin: 1rem 0;
 }
+#content {
+  margin: 0 1rem;
+}
+.content {
+  font-size: 1.1rem;
+}
+.auto {
+  margin: 0 auto;
+}
+@media all and (min-width: 68rem) {
+  .content {
+    width: 66rem;
+  }
+}
 .hdr {
 	font-size: 14pt;
 	font-weight: bold;
 }
-header {
+.site-header {
 	height: 100px;
   display: flex;
   flex-direction: row;
@@ -57,12 +75,44 @@ header {
   background-image: -moz-linear-gradient(top, lightgray, #FFFAFA);
   background-image: linear-gradient(to bottom, lightgray, #FFFAFA);
 }
-header a:link, header a:visited {
+.site-header a:link, .site-header a:visited {
   color: black;
 }
-header a:hover {
+.site-header a:hover {
 	border-bottom:none;
 }
+.header-title {
+  font-size: 3rem;
+  font-weight: bold;
+  line-height: 100px;
+  text-align: center;
+}
+.header-spacer {
+  flex-grow: 3;
+}
+.header-social {
+  padding: 25px .8rem 0 0;
+}
+.header-social img {
+  width: 50px;
+  height: 50px;
+}
+@media all and (max-width:40rem) {
+  .site-header {
+    height: auto;
+    flex-direction: column;
+    align-items: center;
+  }
+  .header-title {
+    line-height: 3rem;
+  }
+  .header-spacer {
+    display: none;
+  }
+  .header-social {
+    padding-right: 0;
+  }
+}
 .content-item {
 	padding-left: 5px;
 	padding-right: 5px;
@@ -100,21 +150,6 @@ ul {
 li {
 	list-style-type: disc;
 }
-.header-title {
-  font-size: 3rem;
-  font-weight: bold;
-  line-height: 100px;
-}
-.header-spacer {
-  flex-grow: 3;
-}
-.header-social {
-  padding: 25px .8rem 0 0;
-}
-.header-social img {
-  width: 50px;
-  height: 50px;
-}
 
 .content-wrapper {
   margin: 0 1rem;