Make navigation look more like crumbs.

Author: dblock

_layouts/page.html

@@ -19,7 +19,9 @@
     {% include _search.html %}
   </div>
   <article class="page">
-    <h3><a href='/'>&lt; Home</a> | {{ page.title }}</h3>
+    <div class="crumbs">
+      <a href='/'>&lt; Home</a> | {{ page.title }}
+    </div>
     <div class="article-wrap">
       {{ content }}
     </div><!-- /.article-wrap -->

_sass/page.scss

@@ -103,6 +103,10 @@ body {
 		}
 	}
 }
+.crumbs {
+  border-bottom: 1px solid lighten($black,80);
+  border-bottom: 1px solid fade($black,10);
+}
 // Navicon lines
 $button-size: 1.5rem;
 @mixin navicon-line() {
@@ -230,10 +234,18 @@ $button-size: 1.5rem;
 	@include container;
 	@include clearfix;
 	clear: both;
-	margin-top: 2em;
 	h1 {
 		margin-top: 0;
 	}
+  @media #{$micro} {
+    margin-top: 0;
+  }
+  @media #{$small} {
+    margin-top: 2em;
+  }
+  @media #{$x-large} {
+    margin-top: 2em;
+  }
 	.post,
 	.page {
 		@include container;