Derp

Support for Pastebin embeds

assets/css/screen.css

@@ -14,10 +14,9 @@
     7.  Third Party Elements
     8.  Pagination
     9.  Footer
-    10. Media Queries (Medium Desktop)
+    10. Media Queries (Tablet)
-    11. Media Queries (Tablet)
+    11. Media Queries (Mobile)
-    12. Media Queries (Mobile)
+    12. Animations
-    13. Animations
 
 */
 
@@ -175,17 +174,16 @@ html {
 }
 
 body {
-    -webkit-font-feature-settings: 'kern' 1;
-    -moz-font-feature-settings: 'kern' 1;
-    -ms-font-feature-settings: 'kern' 1;
-    -o-font-feature-settings: 'kern' 1;
-    font-feature-settings: 'kern' 1;
     height: 100%;
     max-height: 100%;
-    font-family: "PT Serif", serif;
+    font-family: "Merriweather", serif;
-    font-size: 2.2rem;
+    letter-spacing: 0.01rem;
-    line-height: 1.7em;
+    font-size: 1.8rem;
+    line-height: 1.75em;
     color: #3A4145;
+    -webkit-font-feature-settings: 'kern' 1;
+    -moz-font-feature-settings: 'kern' 1;
+    -o-font-feature-settings: 'kern' 1;
 }
 
 ::-moz-selection {
@@ -200,40 +198,38 @@ h1, h2, h3,
 h4, h5, h6 {
     -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
     -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-    -ms-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
     -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-    font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
     color: #2E2E2E;
     line-height: 1.15em;
-    margin: 0 0 0.3em 0;
+    margin: 0 0 0.4em 0;
     font-family: "Open Sans", sans-serif;
 }
 
 h1 {
-    font-size: 5.6rem;
+    font-size: 5rem;
     letter-spacing: -2px;
     text-indent: -3px;
 }
 
 h2 {
-    font-size: 4.4rem;
+    font-size: 3.6rem;
     letter-spacing: -1px;
 }
 
 h3 {
-    font-size: 3.9rem;
+    font-size: 3rem;
 }
 
 h4 {
-    font-size: 3.1rem;
+    font-size: 2.5rem;
 }
 
 h5 {
-    font-size: 2.8rem;
+    font-size: 2rem;
 }
 
 h6 {
-    font-size: 2.2rem;
+    font-size: 2rem;
 }
 
 a {
@@ -248,14 +244,12 @@ a:hover {
 p, ul, ol, dl {
     -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
     -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
-    -ms-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
     -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
-    font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
+    margin: 0 0 1.75em 0;
-    margin: 0 0 1.7em 0;
 }
 
 ol, ul {
-    padding-left: 0;
+    padding-left: 3rem;
 }
 
 ol ol, ul ul,
@@ -281,6 +275,14 @@ dl dd {
     margin-bottom: 1em
 }
 
+li {
+    margin: 0.4em 0;
+}
+
+li li {
+    margin: 0;
+}
+
 hr {
     display: block;
     height: 1px;
@@ -293,8 +295,8 @@ hr {
 blockquote {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    margin: 1.7em 0 1.7em -2.2em;
+    margin: 1.75em 0 1.75em -2.2em;
-    padding: 0 0 0 1.6em;
+    padding: 0 0 0 1.75em;
     border-left: #4A4A4A 0.4em solid;
 }
 
@@ -335,7 +337,7 @@ code, tt {
 pre {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    margin: 0 0 1.7em 0;
+    margin: 0 0 1.75em 0;
     border: #E3EDF3 1px solid;
     width: 100%;
     padding: 10px;
@@ -375,7 +377,7 @@ kbd {
 table {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    margin: 1.7em 0;
+    margin: 1.75em 0;
     width: 100%;
     max-width: 100%;
     background-color: transparent;
@@ -417,7 +419,7 @@ table.plain tbody > tr:nth-child(odd) > th {
 
 iframe, .fluid-width-video-wrapper {
     display: block;
-    margin: 1.6em 0;
+    margin: 1.75em 0;
 }
 
 /* When a video is inside the fitvids wrapper, drop the
@@ -451,7 +453,7 @@ margin on the iframe, cause it breaks stuff. */
 .inner {
     position: relative;
     width: 80%;
-    max-width: 780px;
+    max-width: 710px;
     margin: 0 auto;
 }
 
@@ -508,6 +510,7 @@ margin on the iframe, cause it breaks stuff. */
     text-align: center;
     text-decoration: none;
     color: rgba(255,255,255,0.7);
+    -webkit-transform: rotate(-90deg);
     transform: rotate(-90deg);
     -webkit-animation: bounce 4s 2s infinite;
     animation: bounce 4s 2s infinite;
@@ -579,6 +582,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 {
@@ -605,6 +609,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 {
@@ -625,7 +630,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;
 }
 
@@ -635,13 +642,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;
 }
 
@@ -655,7 +662,7 @@ margin on the iframe, cause it breaks stuff. */
 /* The details of your blog. Defined in ghost/settings/ */
 .page-title {
     margin: 10px 0 10px 0;
-    font-size: 5.6rem;
+    font-size: 5rem;
     letter-spacing: -1px;
     font-weight: 700;
     font-family: "Open Sans", sans-serif;
@@ -664,11 +671,11 @@ margin on the iframe, cause it breaks stuff. */
 
 .page-description {
     margin: 0;
-    font-size: 2.2rem;
+    font-size: 2rem;
     line-height: 1.5em;
     font-weight: 400;
-    font-family: "PT Serif", serif;
+    font-family: "Merriweather", serif;
-    letter-spacing: 0;
+    letter-spacing: 0.01rem;
     color: rgba(255,255,255,0.8);
 }
 
@@ -710,7 +717,7 @@ margin on the iframe, cause it breaks stuff. */
 .post {
     position: relative;
     width: 80%;
-    max-width: 780px;
+    max-width: 710px;
     margin: 4rem auto;
     padding-bottom: 4rem;
     border-bottom: #EBF2F6 1px solid;
@@ -738,7 +745,7 @@ margin on the iframe, cause it breaks stuff. */
 }
 
 body:not(.post-template) .post-title {
-    font-size: 4rem;
+    font-size: 3.6rem;
 }
 
 .post-title a {
@@ -747,6 +754,8 @@ body:not(.post-template) .post-title {
 
 .post-excerpt p {
     margin: 0;
+    font-size: 0.9em;
+    line-height: 1.7em;
 }
 
 .read-more {
@@ -755,7 +764,7 @@ body:not(.post-template) .post-title {
 
 .post-meta {
     display: block;
-    margin: 2rem 0 0.6rem 0;
+    margin: 1.75rem 0 0 0;
     font-family: "Open Sans", sans-serif;
     font-size: 1.5rem;
     line-height: 2.2rem;
@@ -906,7 +915,7 @@ body:not(.post-template) .post-title {
 .post-footer p {
     margin: 1rem 0;
     font-size: 1.4rem;
-    line-height: 1.6em;
+    line-height: 1.75em;
 }
 
 /* list of author links - location / url */
@@ -1045,6 +1054,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;
@@ -1144,7 +1165,8 @@ body:not(.post-template) .post-title {
 /* Location, website, and link */
 .author-profile .author-meta {
     margin: 2rem 0;
-    font-family: "PT Serif", serif;
+    font-family: "Merriweather", serif;
+    letter-spacing: 0.01rem;
     font-size: 1.7rem;
 }
 .author-meta span {
@@ -1176,6 +1198,10 @@ body:not(.post-template) .post-title {
     font-size: 1.1rem;
 }
 
+/* Pastebin */
+.content .embedPastebin {
+    margin-bottom: 1.75em;
+}
 
 /* ==========================================================================
    8. Pagination - Tools to let you flick between pages
@@ -1185,7 +1211,7 @@ body:not(.post-template) .post-title {
 .pagination {
     position: relative;
     width: 80%;
-    max-width: 780px;
+    max-width: 710px;
     margin: 4rem auto;
     font-family: "Open Sans", sans-serif;
     font-size: 1.3rem;
@@ -1276,7 +1302,7 @@ body:not(.post-template) .post-title {
     border-top: #EBF2F6 1px solid;
     font-family: "Open Sans", sans-serif;
     font-size: 1rem;
-    line-height: 1.7em;
+    line-height: 1.75em;
     color: #BBC7CC;
 }
 
@@ -1305,73 +1331,7 @@ body:not(.post-template) .post-title {
 
 
 /* ==========================================================================
-   10. Media Queries - Smaller than 1600px
+   10. Media Queries - Smaller than 900px
-   ========================================================================== */
-
-@media only screen and (max-width: 1600px) {
-
-    .page-title {
-        font-size: 5rem;
-    }
-
-    .page-description {
-        font-size: 2rem;
-        line-height: 1.5em;
-    }
-
-    .post {
-        font-size: 0.9em;
-        line-height: 1.65em;
-    }
-
-    p, ul, ol, dl {
-        margin: 0 0 1.65em 0;
-    }
-
-    .post,
-    .inner,
-    .pagination {
-        max-width: 710px;
-    }
-
-    h1, h2, h3,
-    h4, h5, h6 {
-        margin: 0 0 0.4em 0;
-    }
-
-    h1 {
-        font-size: 5rem;
-    }
-
-    h2 {
-        font-size: 4rem;
-    }
-
-    h3 {
-        font-size: 3.5rem;
-    }
-
-    h4 {
-        font-size: 2.8rem;
-    }
-
-    h5 {
-        font-size: 2.5rem;
-    }
-
-    h6 {
-        font-size: 2rem;
-    }
-
-    body:not(.post-template) .post-title {
-        font-size: 3.6rem;
-    }
-
-}
-
-
-/* ==========================================================================
-   11. Media Queries - Smaller than 900px
    ========================================================================== */
 
 @media only screen and (max-width: 900px) {
@@ -1394,7 +1354,8 @@ body:not(.post-template) .post-title {
         padding: 15% 0;
     }
 
-    .scroll-down { display: none; }
+    .scroll-down,
+    .home-template .main-header:after { display: none; }
 
     .archive-template .main-header {
         min-height: 180px;
@@ -1416,7 +1377,7 @@ body:not(.post-template) .post-title {
     }
 
     .post {
-        font-size: 0.8em
+        font-size: 0.95em
     }
 
     body:not(.post-template) .post-title {
@@ -1472,11 +1433,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;
     }
@@ -1485,13 +1455,13 @@ body:not(.post-template) .post-title {
 
 
 /* ==========================================================================
-   12. Media Queries - Smaller than 500px
+   11. Media Queries - Smaller than 500px
    ========================================================================== */
 
 @media only screen and (max-width: 500px) {
 
     .main-header {
-        margin-bottom: 0;
+        margin-bottom: 15px;
         height: 40%;
     }
 
@@ -1525,6 +1495,7 @@ body:not(.post-template) .post-title {
         line-height: 41px;
         border-radius: 0;
         color: #2e2e2e;
+        background: transparent;
     }
     .back-button:hover,
     .subscribe-button:hover {
@@ -1577,7 +1548,7 @@ body:not(.post-template) .post-title {
         margin-left: 16px;
         margin-right: 16px;
         padding-bottom: 2rem;
-        line-height: 1.55em;
+        line-height: 1.65em;
     }
 
     .post-date {
@@ -1593,18 +1564,22 @@ body:not(.post-template) .post-title {
     }
 
     hr {
-        margin: 1.6em 0;
+        margin: 1.75em 0;
     }
 
     p, ul, ol, dl {
         font-size: 0.95em;
-        margin: 0 0 2rem 0;
+        margin: 0 0 2.5rem 0;
     }
 
     .page-title {
         font-size: 3rem;
     }
 
+    .post-excerpt p {
+        font-size: 0.85em;
+    }
+
     .page-description {
         font-size: 1.6rem;
     }
@@ -1615,33 +1590,33 @@ body:not(.post-template) .post-title {
     }
 
     h1 {
-        font-size: 3rem;
+        font-size: 2.8rem;
         letter-spacing: -1px;
     }
 
     h2 {
-        font-size: 2.6rem;
+        font-size: 2.4rem;
         letter-spacing: 0;
     }
 
     h3 {
-        font-size: 2.4rem;
-    }
-
-    h4 {
         font-size: 2.1rem;
     }
 
-    h5 {
+    h4 {
         font-size: 1.9rem;
     }
 
+    h5 {
+        font-size: 1.8rem;
+    }
+
     h6 {
-        font-size: 1.7rem;
+        font-size: 1.8rem;
     }
 
     body:not(.post-template) .post-title {
-        font-size: 2.6rem;
+        font-size: 2.5rem;
     }
 
     .post-template .post {
@@ -1667,6 +1642,7 @@ body:not(.post-template) .post-title {
 
     .post-meta {
         font-size: 1.3rem;
+        margin-top: 1rem;
     }
 
     .post-footer {
@@ -1692,7 +1668,7 @@ body:not(.post-template) .post-title {
     .author-meta li {
         float: none;
         margin: 0;
-        line-height: 1.6em;
+        line-height: 1.75em;
     }
 
     .author-meta li:before {
@@ -1717,6 +1693,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%;
@@ -1727,7 +1707,7 @@ body:not(.post-template) .post-title {
     }
 
     .author-profile .author-meta span {
-        font-size: 1.5rem;
+        font-size: 1.4rem;
     }
 
     .archive-template .main-header .page-description {
@@ -1738,7 +1718,7 @@ body:not(.post-template) .post-title {
 
 
 /* ==========================================================================
-   13. Animations
+   12. Animations
    ========================================================================== */
 
 /* Used to fade in title/desc on the home page */
@@ -1801,4 +1781,4 @@ body:not(.post-template) .post-title {
 /* ==========================================================================
    End of file. Animations should be the last thing here. Do not add stuff
    below this point, or it will probably fuck everything up.
-   ========================================================================== */
+   ========================================================================== */

assets/js/index.js

@@ -2,27 +2,58 @@
  * Main JS file for Casper behaviours
  */
 
-/*globals jQuery, document */
+/* globals jQuery, document */
-(function ($) {
+(function ($, sr, undefined) {
     "use strict";
 
-    $(document).ready(function(){
+    var $document = $(document),
 
-        $(".post-content").fitVids();
+        // debouncing function from John Hann
+        // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+        debounce = function (func, threshold, execAsap) {
+            var timeout;
 
-        function casperFullImg() {
+            return function debounced () {
-            $("img").each( function() {
+                var obj = this, args = arguments;
-                var contentWidth = $(".post-content").outerWidth(); // Width of the content
+                function delayed () {
-                var imageWidth = $(this)[0].naturalWidth; // Original image resolution
+                    if (!execAsap) {
-
+                        func.apply(obj, args);
-                if (imageWidth >= contentWidth) {
+                    }
-                    $(this).addClass('full-img');
+                    timeout = null;
-                } else {
-                    $(this).removeClass('full-img');
                 }
-            });
+
+                if (timeout) {
+                    clearTimeout(timeout);
+                } else if (execAsap) {
+                    func.apply(obj, args);
+                }
+
+                timeout = setTimeout(delayed, threshold || 100);
+            };
         };
 
+    $document.ready(function () {
+
+        var $postContent = $(".post-content");
+        $postContent.fitVids();
+
+        function updateImageWidth() {
+            var $this = $(this),
+                contentWidth = $postContent.outerWidth(), // Width of the content
+                imageWidth = this.naturalWidth; // Original image resolution
+
+            if (imageWidth >= contentWidth) {
+                $this.addClass('full-img');
+            } else {
+                $this.removeClass('full-img');
+            }
+        }
+
+        var $img = $("img").on('load', updateImageWidth);
+        function casperFullImg() {
+            $img.each(updateImageWidth);
+        }
+
         casperFullImg();
         $(window).smartresize(casperFullImg);
 
@@ -30,61 +61,38 @@
 
     });
 
-}(jQuery));
+    // smartresize
+    jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
 
-(function($,sr){
+    // Arctic Scroll by Paul Adam Davis
-
+    // https://github.com/PaulAdamDavis/Arctic-Scroll
-  // debouncing function from John Hann
-  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
-  var debounce = function (func, threshold, execAsap) {
-      var timeout;
-
-      return function debounced () {
-          var obj = this, args = arguments;
-          function delayed () {
-              if (!execAsap)
-                  func.apply(obj, args);
-              timeout = null;
-          };
-
-          if (timeout)
-              clearTimeout(timeout);
-          else if (execAsap)
-              func.apply(obj, args);
-
-          timeout = setTimeout(delayed, threshold || 100);
-      };
-  }
-  // smartresize 
-  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
-
-})(jQuery,'smartresize');
-
-// Arctic Scroll by Paul Adam Davis
-// https://github.com/PaulAdamDavis/Arctic-Scroll
-(function ($) {
     $.fn.arctic_scroll = function (options) {
 
         var defaults = {
             elem: $(this),
             speed: 500
-        };
+        },
-        var options = $.extend(defaults, options);
 
-        options.elem.click(function(event){     
+        allOptions = $.extend(defaults, options);
+
+        allOptions.elem.click(function (event) {
             event.preventDefault();
-            var offset = ($(this).attr('data-offset')) ? $(this).attr('data-offset') : false,
+            var $this = $(this),
-                position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false;         
+                $htmlBody = $('html, body'),
+                offset = ($this.attr('data-offset')) ? $this.attr('data-offset') : false,
+                position = ($this.attr('data-position')) ? $this.attr('data-position') : false,
+                toMove;
+
             if (offset) {
-                var toMove = parseInt(offset);
+                toMove = parseInt(offset);
-                $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, options.speed);
+                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed);
             } else if (position) {
-                var toMove = parseInt(position);
+                toMove = parseInt(position);
-                $('html,body').stop(true, false).animate({scrollTop: toMove }, options.speed);
+                $htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed);
             } else {
-                $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, options.speed);
+                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed);
             }
         });
 
     };
-})(jQuery);
+})(jQuery, 'smartresize');

default.hbs

@@ -16,7 +16,7 @@
 
     {{! Styles'n'Scripts }}
     <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
-    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=PT+Serif:400,700,400italic|Open+Sans:700,400" />
+    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
 
     {{! Ghost outputs important style and meta data with this tag }}
     {{ghost_head}}

package.json

@@ -1,5 +1,4 @@
 {
   "name": "Casper",
-  "version": "1.0.1"
+  "version": "1.1.4"
-
 }

page.hbs

@@ -3,24 +3,30 @@
 {{! This is a page template. A page outputs content just like any other post, and has all the same
     attributes by default, but you can also customise it to behave differently if you prefer. }}
 
-<nav class="main-nav clearfix">
+{{! Everything inside the #post tags pulls data from the page }}
-    <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}}
 
-        <h1 class="post-title">{{title}}</h1>
+        <header class="post-header">
+            <h1 class="post-title">{{title}}</h1>
+        </header>
 
         <section class="post-content">
             {{content}}
         </section>
 
-    {{/post}}
     </article>
 
 </main>
+{{/post}}

partials/loop.hbs

@@ -10,13 +10,13 @@
         <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
     </header>
     <section class="post-excerpt">
-        <p>{{excerpt words="30"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
+        <p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
     </section>
     <footer class="post-meta">
         {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}}
         {{author}}
-        {{tags prefix=" on "}} 
+        {{tags prefix=" on "}}
-        <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time> 
+        <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
     </footer>
 </article>
 {{/foreach}}

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}}

tag.hbs

@@ -1,8 +1,8 @@
 {{!< default}}
 {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
 
-{{! The big featured header }}
+{{! If we have a tag cover, display that - else blog cover - else nothing }}
-<header class="main-header tag-head {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
+<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
     <nav class="main-nav overlay clearfix">
         <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
         <a class="subscribe-button icon-feed" href="{{@blog.url}}/tag/{{tag.slug}}/rss/">{{tag.name}}</a>
@@ -10,7 +10,13 @@
     <div class="vertical">
         <div class="main-header-content inner">
             <h1 class="page-title">{{tag.name}}</h1>
-            <h2 class="page-description">A {{pagination.total}}-post collection</h2>
+            <h2 class="page-description">
+                {{#if tag.description}}
+                    {{tag.description}}
+                {{else}}
+                    A {{pagination.total}}-post collection
+                {{/if}}
+            </h2>
         </div>
     </div>
 </header>
@@ -21,4 +27,4 @@
     {{! The tag below includes the post loop - partials/loop.hbs }}
     {{> "loop"}}
 
-</main>
+</main>