Post image support

assets/css/screen.css

@@ -589,6 +589,7 @@ margin on the iframe, cause it breaks stuff. */
     text-transform: uppercase;
     line-height: 35px;
     border-radius: 3px;
+    background: rgba(0,0,0,0.1);
     transition: all ease 0.3s;
 }
 .back-button:before {
@@ -615,6 +616,7 @@ margin on the iframe, cause it breaks stuff. */
     line-height: 35px;
     white-space: nowrap;
     border-radius: 3px;
+    background: rgba(0,0,0,0.1);
     transition: all ease 0.3s;
 }
 .subscribe-button:before {
@@ -635,7 +637,9 @@ margin on the iframe, cause it breaks stuff. */
     background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
     background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
 }
-.no-cover .main-nav.overlay {
+.no-cover .main-nav.overlay,
+.no-cover .back-button,
+.no-cover .subscribe-button {
     background: none;
 }
 
@@ -645,13 +649,13 @@ margin on the iframe, cause it breaks stuff. */
 
 .main-nav.overlay .back-button,
 .main-nav.overlay .subscribe-button {
-    border-color: #fff;
+    border-color: rgba(255,255,255,0.6);
 }
 
 .main-nav.overlay a:hover {
     color: #222;
-    border-color: rgba(255,255,255,0.8);
+    border-color: #fff;
-    background: rgba(255,255,255,0.8);
+    background: #fff;
     transition: all 0.1s ease;
 }
 
@@ -1057,6 +1061,18 @@ body:not(.post-template) .post-title {
    6. Author profile
    ========================================================================== */
 
+.post-head.main-header {
+    height: 65%;
+    min-height: 180px;
+}
+
+.no-cover.post-head.main-header {
+    height: 85px;
+    min-height: 0;
+    margin-bottom: 0;
+    background: transparent;
+}
+
 .tag-head.main-header {
     height: 40%;
     min-height: 180px;
@@ -1420,11 +1436,20 @@ body:not(.post-template) .post-title {
         font-size: 1.6rem;
     }
 
+    .post-head.main-header {
+        height:45%;
+    }
+
     .tag-head.main-header,
     .author-head.main-header {
         height: 30%;
     }
 
+    .no-cover.post-head.main-header {
+        height: 55px;
+        padding: 0;
+    }
+
     .no-cover.author-head.main-header {
         padding: 0;
     }
@@ -1439,7 +1464,7 @@ body:not(.post-template) .post-title {
 @media only screen and (max-width: 500px) {
 
     .main-header {
-        margin-bottom: 0;
+        margin-bottom: 15px;
         height: 40%;
     }
 
@@ -1473,6 +1498,7 @@ body:not(.post-template) .post-title {
         line-height: 41px;
         border-radius: 0;
         color: #2e2e2e;
+        background: transparent;
     }
     .back-button:hover,
     .subscribe-button:hover {
@@ -1670,6 +1696,10 @@ body:not(.post-template) .post-title {
         padding-bottom: 2rem;
     }
 
+    .post-head.main-header {
+        height: 30%;
+    }
+
     .tag-head.main-header,
     .author-head.main-header {
         height: 20%;

post.hbs

@@ -3,16 +3,19 @@
 {{! The comment above "< default" means - insert everything in this file into
     the {body} of the default.hbs template, which contains our header/footer. }}
 
-<nav class="main-nav clearfix">
+{{! Everything inside the #post tags pulls data from the post }}
-    <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
+{{#post}}
-    <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
+
-</nav>
+<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
+    <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
+        <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
+        <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
+    </nav>
+</header>
 
 <main class="content" role="main">
 
     <article class="{{post_class}}">
-    {{! Everything inside the #post tags pulls data from the post }}
-    {{#post}}
 
         <header class="post-header">
             <h1 class="post-title">{{title}}</h1>
@@ -70,7 +73,8 @@
 
         </footer>
 
-    {{/post}}
     </article>
 
 </main>
+
+{{/post}}