From d177e965fd41f040595948bdc8821656b4497990 Mon Sep 17 00:00:00 2001
From: Dan Gold <dan.gold@charitywater.org>
Date: Fri, 23 Sep 2016 22:53:52 +0100
Subject: [PATCH] Fixing the mobile styling for the `Made with Poole` section

There wasn't any mobile styling so the two column layout was smushed on mobile.
I added some simple media queries to change the layout to the initial design after 640px.
---
 public/css/poole-www.css | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/public/css/poole-www.css b/public/css/poole-www.css
index 2c8b1cc..e10476b 100644
--- a/public/css/poole-www.css
+++ b/public/css/poole-www.css
@@ -1,6 +1,7 @@
 html {
   font-family: "PT Serif", Georgia, "Times New Roman", serif;
 }
+
 body {
   padding: 2rem 1rem;
   color: #93979e;
@@ -11,6 +12,7 @@ body {
 a {
   color: #fff;
 }
+
 a:hover,
 a:focus {
   text-decoration: none;
@@ -24,6 +26,7 @@ a:focus {
   border: .1rem solid #32343c;
   border-radius: .1rem;
 }
+
 .btn:hover,
 .btn:focus {
   color: #26282d;
@@ -35,8 +38,6 @@ h1, h2, h3 {
   color: #fff;
 }
 
-.header {
-}
 .header-title {
   display: inline-block;
   padding: .5rem 1.5rem;
@@ -44,11 +45,11 @@ h1, h2, h3 {
   border: .2rem solid #32343c;
   border-radius: .1rem;
 }
+
 .header-lead {
   margin-bottom: 0;
 }
 
-
 hr {
   max-width: 6rem;
   margin: 3rem auto;
@@ -61,11 +62,26 @@ hr {
   text-align: center;
   padding: 0 2rem;
 }
+
 .theme {
-  float: left;
-  width: 50%;
   padding: 0 1rem;
 }
+
+.theme:first-child {
+  margin-bottom: 3.5rem;
+}
+
 .theme h3 {
   margin-top: 1rem;
 }
+
+@media (min-width: 640px) {
+  .theme {
+    float: left;
+    width: 50%;
+  }
+
+  .theme:first-child {
+    margin-bottom: 0;
+  }
+}