Merge pull request #12 from ClojureBridge/margin-fixes

Fix some margin in header and paypall button

Author: davidchambers

_includes/header.html

@@ -1,27 +1,29 @@
-<div class="site-header">
+<div class="header-content">
+  <div class="site-header">
 
-  <a id="home" href="/">{{ site.title }}</a>
+    <a id="home" href="/">{{ site.title }}</a>
 
-  <ul id="site-nav">
-  {% for page in site.pages %}
-    {% if page.title %}
-    <li>
-      <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
-    </li>
-    {% endif %}
-  {% endfor %}
-    <li>
-      <a class="page-link" href="http://bridgefoundry.org/code-of-conduct/">Code of Conduct</a>
-    </li>
-    <li>
-      <a class="page-link" href="https://github.com/ClojureBridge"><i class="fa fa-github"><span>GitHub</span></i></a>
-    </li>
-    <li>
-      <a class="page-link" href="https://twitter.com/ClojureBridge"><i class="fa fa-twitter"><span>Twitter</span></i></a>
-    </li>
-    <li>
-      <a class="page-link" href="mailto:[email protected]"><i class="fa fa-envelope-o"><span>Email</span></i></a>
-    </li>
-  </ul>
+    <ul id="site-nav">
+    {% for page in site.pages %}
+      {% if page.title %}
+      <li>
+        <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
+      </li>
+      {% endif %}
+    {% endfor %}
+      <li>
+        <a class="page-link" href="http://bridgefoundry.org/code-of-conduct/">Code of Conduct</a>
+      </li>
+      <li>
+        <a class="page-link" href="https://github.com/ClojureBridge"><i class="fa fa-github"><span>GitHub</span></i></a>
+      </li>
+      <li>
+        <a class="page-link" href="https://twitter.com/ClojureBridge"><i class="fa fa-twitter"><span>Twitter</span></i></a>
+      </li>
+      <li>
+        <a class="page-link" href="mailto:[email protected]"><i class="fa fa-envelope-o"><span>Email</span></i></a>
+      </li>
+    </ul>
 
+  </div>
 </div>

css/main.css

@@ -3,8 +3,21 @@ body {
   font: 16px/1.4 "freight-sans-pro", "Helvetica", "Arial", sans-serif;
 }
 
+.content h1 {
+  font-size: 32px;
+  font-weight: 100;
+  margin-bottom: 0.8em;
+}
+
 /* TODO: Change to id */
 .site-header {
+  max-width: 62.5em;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}
+
+.header-content {
   border-width: 5px 0 3px;
   border-style: solid;
   border-color: rgb(51, 52, 62);
@@ -58,6 +71,7 @@ body {
 
 .content-wrapper {
   padding: 0 2em;
+  margin-top: 1em;
 }
 
 .content {
@@ -136,7 +150,7 @@ img {
   border-radius: 6px;
   font-size: 13px;
   background: #fec348 none repeat scroll 0 0;
-  border-color: #feb215;
+  border: 1px solid #feb215;
   color: #002f86;
 }
 
@@ -146,5 +160,13 @@ img {
 }
 
 #paypal-button {
-  float: right;
+  text-align: left;
+  margin-bottom: 1.0em;
+}
+
+@media screen and (min-width: 640px) {
+  #paypal-button {
+    text-align: right;
+    margin-bottom: -2.0em;
+  }
 }