Version bump to 1.1.5

Fix indentation in footer

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2013-2014 Ghost Foundation - Released under The MIT License.
+Copyright (c) 2013-2015 Ghost Foundation
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation

README.md

@@ -6,7 +6,7 @@ To download, visit the [releases](https://github.com/TryGhost/Casper/releases) p
 
 ## Copyright & License
 
-Copyright (c) 2013-2014 Ghost Foundation - Released under the MIT License.
+Copyright (c) 2013-2015 Ghost Foundation - Released under the MIT License.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

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}}
@@ -27,8 +27,8 @@
     {{{body}}}
 
     <footer class="site-footer clearfix">
-         <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
+        <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
-         <section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a></section>
+        <section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a></section>
     </footer>
 
     {{! Ghost outputs important scripts and data with this tag }}

package.json

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

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>