Upgrading Casper to 1.3.7

Closes #285

LICENSE

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

README.md

@@ -6,11 +6,5 @@ To download, visit the [releases](https://github.com/TryGhost/Casper/releases) p
 
 ## Copyright & License
 
-Copyright (c) 2013-2015 Ghost Foundation - Released under the MIT License.
+Copyright (c) 2013-2017 Ghost Foundation - Released under the [MIT license](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:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

assets/css/screen.css

@@ -10,94 +10,93 @@
     3.  Utilities
     4.  General
     5.  Single Post
-    6.  Tag Archive
-    7.  Read Next
+    6.  Author Profile
+    7.  Read More
     8.  Third Party Elements
     9.  Pagination
-    10.  Footer
-    11. Media Queries (Tablet)
-    12. Media Queries (Mobile)
-    13. Animations
+    10. Subscribe
+    11. Footer
+    12. Media Queries (Tablet)
+    13. Media Queries (Mobile)
+    14. Animations
 
 */
 
 /* ==========================================================================
-   0. Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified)
+   0. normalize.css v3.0.3 | MIT License | git.io/normalize | (minified)
    ========================================================================== */
 
-article, aside, details,
-figcaption, figure,
-footer, header, hgroup,
-main, nav, section,
-summary { display: block; }
-audio, canvas, video { display: inline-block; }
-audio:not([controls]) { display: none; height: 0; }
-[hidden], template { display: none; }
 html {
-   font-family: sans-serif;
-   -ms-text-size-adjust: 100%;
-   -webkit-text-size-adjust: 100%;
+    font-family: sans-serif;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%
 }
 body { margin: 0; }
-a { background: transparent; }
-a:focus { outline: thin dotted; }
-a:active, a:hover { outline: 0; }
-h1 { font-size: 2em; margin: 0.67em 0; }
-abbr[title] { border-bottom: 1px dotted; }
-b, strong { font-weight: 700; }
-dfn { font-style: italic; }
-hr {
-   -moz-box-sizing: content-box;
-   box-sizing: content-box;
-   height: 0;
+article, aside, details,
+figcaption, figure,
+footer, header,
+main, menu, nav,
+section, summary { display:block; }
+audio, canvas, progress, video {
+    display: inline-block;
+    vertical-align: baseline;
 }
-mark { background: #FF0; color: #000; }
-code, kbd, pre,
-samp { font-family: monospace, serif; font-size: 1em; }
-pre { white-space: pre-wrap; }
-q { quotes: "\201C" "\201D" "\2018" "\2019"; }
+audio:not([controls]) { display: none; height: 0; }
+[hidden], template { display: none; }
+a { background-color: transparent;}
+a:active, a:hover { outline: 0; }
+abbr[title] { border-bottom: 1px dotted; }
+b, strong { font-weight: bold; }
+dfn { font-style: italic; }
+h1 { font-size: 2em; margin: 0.67em 0; }
+mark { background: #ff0; color: #000; }
 small { font-size: 80%; }
 sub, sup {
-   font-size: 75%;
-   line-height: 0;
-   position: relative;
-   vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
 }
 sup { top: -0.5em; }
 sub { bottom: -0.25em; }
 img { border: 0; }
 svg:not(:root) { overflow: hidden; }
-figure { margin: 0; }
-fieldset {
-   border: 1px solid #c0c0c0;
-   margin: 0 2px;
-   padding: 0.35em 0.625em 0.75em;
+figure { margin: 1em 40px; }
+hr { box-sizing: content-box; height: 0; }
+pre { overflow: auto; }
+code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
+button, input, optgroup, select, textarea {
+    color: inherit;
+    font: inherit;
+    margin: 0;
 }
-legend { border: 0; padding: 0; }
-button, input, select,
-textarea { font-family: inherit; font-size: 100%; margin: 0; }
-button, input { line-height: normal; }
+button { overflow: visible; }
 button, select { text-transform: none; }
 button, html input[type="button"],
 input[type="reset"], input[type="submit"] {
-   -webkit-appearance: button;
-   cursor: pointer;
+    -webkit-appearance: button;
+    cursor: pointer;
 }
 button[disabled], html input[disabled] { cursor: default; }
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+input { line-height: normal; }
 input[type="checkbox"],
 input[type="radio"] { box-sizing: border-box; padding: 0; }
-input[type="search"] {
-   -webkit-appearance: textfield;
-   -moz-box-sizing: content-box;
-   -webkit-box-sizing: content-box;
-   box-sizing: content-box;
-}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button { height: auto; }
+input[type="search"] { -webkit-appearance: textfield; }
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
-button::-moz-focus-inner,
-input::-moz-focus-inner { border: 0; padding: 0; }
-textarea { overflow: auto; vertical-align: top; }
-table { border-collapse: collapse; border-spacing: 0; }
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+legend { border: 0; padding: 0; }
+textarea { overflow: auto; }
+optgroup { font-weight: bold; }
+table{ border-collapse: collapse; border-spacing: 0; }
+td, th{ padding: 0; }
 
 
 /* ==========================================================================
@@ -229,6 +228,7 @@ h2 {
 
 h3 {
     font-size: 3rem;
+    letter-spacing: -0.6px;
 }
 
 h4 {
@@ -295,6 +295,10 @@ li li {
     margin: 0;
 }
 
+li > p:last-of-type {
+    margin-bottom: 0;
+}
+
 hr {
     display: block;
     height: 1px;
@@ -344,6 +348,9 @@ code, tt {
     border: #E3EDF3 1px solid;
     background: #F7FAFB;
     border-radius: 2px;
+    -webkit-font-feature-settings: "liga" 0;
+    -moz-font-feature-settings: "liga" 0;
+    font-feature-settings: "liga" 0;
 }
 
 pre {
@@ -439,6 +446,78 @@ margin on the iframe, cause it breaks stuff. */
     margin: 0;
 }
 
+textarea, select, input {
+    width: 260px;
+    padding: 6px 9px;
+    margin: 0 0 5px 0;
+    outline: 0;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 1.6rem;
+    font-weight: 100;
+    line-height: 1.4em;
+    background: #fff;
+    border: #e7eef2 1px solid;
+    border-radius: 4px;
+    box-shadow: none;
+    -webkit-appearance: none;
+}
+
+textarea {
+    width: 100%;
+    max-width: 340px;
+    min-width: 250px;
+    height: auto;
+    min-height: 80px;
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+input[type="number"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="week"]:focus,
+input[type="time"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+textarea:focus {
+    border: #bbc7cc 1px solid;
+    background: #fff;
+    outline: none;
+    outline-width: 0;
+}
+
+select {
+    width: 270px;
+    height: 30px;
+    line-height: 30px;
+}
+
+button {
+    min-height: 35px;
+    width: auto;
+    display: inline-block;
+    padding: 0.1rem 1.5rem;
+    cursor: pointer;
+    outline: none;
+    text-decoration: none;
+    color: #fff;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 11px; /* Hacks targeting Firefox. */
+    line-height: 13px; /* Hacks targeting Firefox. */
+    font-weight: 300;
+    text-align: center;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    text-shadow: none;
+    border-radius: 0.3rem;
+    border: rgba(0,0,0,0.05) 0.1em solid;
+    background: #5ba4e5;
+}
+
 
 /* ==========================================================================
    3. Utilities - These things get used a lot
@@ -758,8 +837,8 @@ body.nav-opened .nav {
 /* Hide when there's no cover image or on page2+ */
 .no-cover .scroll-down,
 .no-cover.main-header:after,
-.archive-template .scroll-down,
-.archive-template .main-header:after {
+.paged .scroll-down,
+.paged .main-header:after {
     display: none
 }
 
@@ -901,13 +980,13 @@ body.nav-opened .nav {
 /* Add subtle load-in animation for content on the home page */
 .home-template .page-title {
     -webkit-animation: fade-in-down 0.6s;
-    animation: fade-in-down 0.6s;
+    animation: fade-in-down 0.6s both;
     -webkit-animation-delay: 0.2s;
     animation-delay: 0.2s;
 }
 .home-template .page-description {
     -webkit-animation: fade-in-down 0.9s;
-    animation: fade-in-down 0.9s;
+    animation: fade-in-down 0.9s both;
     -webkit-animation-delay: 0.1s;
     animation-delay: 0.1s;
 }
@@ -944,6 +1023,10 @@ body:not(.post-template) .post-title {
     font-size: 3.6rem;
 }
 
+body.page-template .post-title {
+    font-size: 5rem;
+}
+
 .post-title a {
     text-decoration: none;
 }
@@ -1042,19 +1125,23 @@ body:not(.post-template) .post-title {
    5. Single Post - When you click on an individual post
    ========================================================================== */
 
-.post-template .post-header {
+.post-template .post-header,
+.page-template .post-header {
    margin-bottom: 3.4rem;
 }
 
-.post-template .post-title {
+.post-template .post-title,
+.page-template .post-title {
     margin-bottom: 0;
 }
 
-.post-template .post-meta {
+.post-template .post-meta,
+.page-template .post-meta {
     margin: 0;
 }
 
-.post-template .post-date {
+.post-template .post-date,
+.page-template .post-date {
     padding: 0;
     margin: 0;
     border: none;
@@ -1063,19 +1150,22 @@ body:not(.post-template) .post-title {
 /* Stop elements, such as img wider than the post content, from
    creating horizontal scroll - slight hack due to imperfections
    with browser width % calculations and rounding */
-.post-template .content {
+.post-template .content,
+.page-template .content {
     overflow: hidden;
 }
 
 /* Tweak the .post wrapper style */
-.post-template .post {
+.post-template .post,
+.page-template .post {
     margin-top: 0;
     border-bottom: none;
     padding-bottom: 0;
 }
 
 /* Kill that stylish little circle that was on the border, too */
-.post-template .post:after {
+.post-template .post:after,
+.page-template .post:after {
     display: none;
 }
 
@@ -1120,7 +1210,7 @@ body:not(.post-template) .post-title {
 .post-footer {
     position: relative;
     margin: 6rem 0 0 0;
-    padding: 6rem 0 0 0;
+    padding: 3rem 0 0 0;
     border-top: #EBF2F6 1px solid;
 }
 
@@ -1173,7 +1263,7 @@ body:not(.post-template) .post-title {
    links remain at a fixed width the whole time */
 .post-footer .share {
     position: absolute;
-    top: 6rem;
+    top: 3rem;
     right: 0;
     width: 140px;
 }
@@ -1302,6 +1392,7 @@ body:not(.post-template) .post-title {
     color: #50585D;
     letter-spacing: 0;
     text-indent: 0;
+    white-space: pre;
 }
 
 .author-meta {
@@ -1325,7 +1416,7 @@ body:not(.post-template) .post-title {
 
 /* Turn off meta for page2+ to make room for extra
    pagination prev/next links */
-.archive-template .author-profile .author-meta {
+.paged .author-profile .author-meta {
     display: none;
 }
 
@@ -1441,6 +1532,9 @@ body:not(.post-template) .post-title {
 /* if there are two posts without covers, put a border between them */
 .read-next-story.no-cover + .read-next-story.no-cover {
     border-left: rgba(0,0,100,0.04) 1px solid;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 /* Correctly position site-footer when next to the .read-next container */
@@ -1460,6 +1554,7 @@ body:not(.post-template) .post-title {
 .gist table {
     margin: 0;
     font-size: 1.4rem;
+    text-rendering: auto;
 }
 .gist td {
     line-height: 1.4;
@@ -1550,18 +1645,76 @@ body:not(.post-template) .post-title {
 }
 
 /* On page2+ make all the headers smaller */
-.archive-template .main-header {
+.paged .main-header {
     max-height: 30vh;
 }
 
 /* On page2+ show extra pagination controls at the top of post list */
-.archive-template .extra-pagination {
+.paged .extra-pagination {
     display: block;
 }
 
 
 /* ==========================================================================
-   10. Footer - The bottom of every page
+   10. Subscribe - Generate those email subscribers
+   ========================================================================== */
+
+.gh-subscribe {
+    border: #e7eef2 1px solid;
+    padding: 3rem;
+    margin-top: 3rem;
+    text-align: center;
+    background: #f5f8fa;
+    border-radius: 5px;
+}
+
+.gh-subscribe-title {
+    margin-bottom: 0;
+    font-size: 2.4rem
+}
+
+.gh-subscribe p {
+    margin-top: 0;
+    font-size: 1.5rem;
+}
+
+.gh-subscribe form {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0 0 0;
+}
+
+.gh-subscribe .form-group {
+    flex-grow: 1;
+    max-width: 300px;
+}
+
+.gh-subscribe .subscribe-email {
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    border-radius: 4px 0 0 4px;
+    transition: all ease 0.5s;
+}
+
+.gh-subscribe .subscribe-email:focus {
+    border: #5ba4e5 1px solid;
+    transition: all ease 0.2s;
+}
+
+.gh-subscribe button {
+    margin-left: -1px;
+    border-radius: 0 4px 4px 0;
+}
+
+.gh-subscribe-rss {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 1.2rem;
+    line-height: 1.4em;
+}
+
+/* ==========================================================================
+   11. Footer - The bottom of every page
    ========================================================================== */
 
 .site-footer {
@@ -1599,7 +1752,7 @@ body:not(.post-template) .post-title {
 
 
 /* ==========================================================================
-   11. Media Queries - Smaller than 900px
+   12. Media Queries - Smaller than 900px
    ========================================================================== */
 
 @media only screen and (max-width: 900px) {
@@ -1621,7 +1774,7 @@ body:not(.post-template) .post-title {
     .scroll-down,
     .home-template .main-header:after { display: none; }
 
-    .archive-template .main-header {
+    .paged .main-header {
         min-height: 180px;
         padding: 10% 0;
     }
@@ -1648,6 +1801,10 @@ body:not(.post-template) .post-title {
         font-size: 3.2rem;
     }
 
+    body.page-template .post-title {
+        font-size: 4.5rem;
+    }
+
     hr {
         margin: 2.4em 0;
     }
@@ -1715,6 +1872,18 @@ body:not(.post-template) .post-title {
         padding: 0;
     }
 
+    .gh-subscribe {
+        padding: 2rem;
+    }
+
+    .gh-subscribe-title {
+        font-size: 2rem
+    }
+
+    .gh-subscribe p {
+        font-size: 1.4rem;
+    }
+
     .read-next {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
@@ -1737,7 +1906,7 @@ body:not(.post-template) .post-title {
 
 
 /* ==========================================================================
-   12. Media Queries - Smaller than 500px
+   13. Media Queries - Smaller than 500px
    ========================================================================== */
 
 @media only screen and (max-width: 500px) {
@@ -1751,7 +1920,7 @@ body:not(.post-template) .post-title {
         height: 30vh;
     }
 
-    .archive-template .main-header {
+    .paged .main-header {
         max-height: 20vh;
         min-height: 160px;
         padding: 10% 0;
@@ -1773,7 +1942,7 @@ body:not(.post-template) .post-title {
     .menu-button {
         padding: 0 5px;
         border-radius: 0;
-        border-color: transparent;
+        border-width: 0;
         color: #2e2e2e;
         background: transparent;
     }
@@ -1838,11 +2007,13 @@ body:not(.post-template) .post-title {
         display: none;
     }
 
-    .post-template .post-header {
+    .post-template .post-header,
+    .page-template .post-header {
         margin-bottom: 2rem;
     }
 
-    .post-template .post-date {
+    .post-template .post-date,
+    .page-template .post-date {
         display: inline-block;
     }
 
@@ -1902,7 +2073,12 @@ body:not(.post-template) .post-title {
         font-size: 2.5rem;
     }
 
-    .post-template .site-footer {
+    body.page-template .post-title {
+        font-size: 2.8rem;
+    }
+
+    .post-template .site-footer,
+    .page-template .site-footer {
         margin-top: 0;
     }
 
@@ -1975,6 +2151,10 @@ body:not(.post-template) .post-title {
         height: 20vh;
     }
 
+    .post-footer .author-image {
+        top: -60px;
+    }
+
     .author-profile .author-image {
         margin-top: -70px;
     }
@@ -1983,10 +2163,18 @@ body:not(.post-template) .post-title {
         font-size: 1.4rem;
     }
 
-    .archive-template .main-header .page-description {
+    .paged .main-header .page-description {
         display: none;
     }
 
+    .gh-subscribe {
+        padding: 15px;
+    }
+
+    .gh-subscribe form {
+        margin-top: 10px;
+    }
+
     .read-next {
         margin-top: 2rem;
         margin-bottom: -37px;
@@ -2000,7 +2188,7 @@ body:not(.post-template) .post-title {
 
 
 /* ==========================================================================
-   13. Animations
+   14. Animations
    ========================================================================== */
 
 /* Used to fade in title/desc on the home page */
@@ -2045,15 +2233,15 @@ body:not(.post-template) .post-title {
     }
 }
 @keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {
+    0%, 10%, 25%, 40%, 50% {
         -webkit-transform: translateY(0) rotate(-90deg);
                 transform: translateY(0) rotate(-90deg);
     }
-    40% {
+    20% {
         -webkit-transform: translateY(-10px) rotate(-90deg);
                 transform: translateY(-10px) rotate(-90deg);
     }
-    60% {
+    30% {
         -webkit-transform: translateY(-5px) rotate(-90deg);
                 transform: translateY(-5px) rotate(-90deg);
     }

author.hbs

@@ -1,13 +1,13 @@
 {{!< default}}
-{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
+{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-{{! The big featured header }}
+{{!-- The big featured header --}}
 
-{{! Everything inside the #author tags pulls data from the author }}
+{{!-- Everything inside the #author tags pulls data from the author --}}
 {{#author}}
     <header class="main-header author-head {{#if cover}}" style="background-image: url({{cover}}){{else}}no-cover{{/if}}">
         <nav class="main-nav overlay clearfix">
-            {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
+            {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
             {{#if @blog.navigation}}
                 <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
             {{/if}}
@@ -32,10 +32,10 @@
     </section>
 {{/author}}
 
-{{! The main content area on the homepage }}
+{{!-- The main content area on the homepage --}}
 <main class="content" role="main">
 
-    {{! The tag below includes the post loop - partials/loop.hbs }}
+    {{!-- The tag below includes the post loop - partials/loop.hbs --}}
     {{> "loop"}}
 
 </main>

default.hbs

@@ -1,35 +1,40 @@
 <!DOCTYPE html>
 <html>
 <head>
-    {{! Document Settings }}
+    {{!-- Document Settings --}}
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    {{! Page Meta }}
+    {{!-- Page Meta --}}
     <title>{{meta_title}}</title>
     <meta name="description" content="{{meta_description}}" />
 
+    {{!-- Mobile Meta --}}
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    {{!-- Brand icon --}}
     <link rel="shortcut icon" href="{{asset "favicon.ico"}}">
 
-    {{! Styles'n'Scripts }}
-    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
+    {{!-- Styles'n'Scripts --}}
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
+    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
 
-    {{! Ghost outputs important style and meta data with this tag }}
+
+    {{!-- Ghost outputs important style and meta data with this tag --}}
     {{ghost_head}}
 </head>
 <body class="{{body_class}} nav-closed">
 
+    {{!-- The blog navigation links --}}
     {{navigation}}
 
     <div class="site-wrapper">
 
-        {{! Everything else gets inserted here }}
+        {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
         {{{body}}}
 
+        {{!-- The tiny footer at the very bottom --}}
         <footer class="site-footer clearfix">
             <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>
@@ -37,11 +42,13 @@
 
     </div>
 
-    {{! Ghost outputs important scripts and data with this tag }}
+    {{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}}
+    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
+    {{!-- Ghost outputs important scripts and data with this tag --}}
     {{ghost_foot}}
-
-    {{! The main JavaScript file for Casper }}
+    {{!-- Fitvids makes video embeds responsive and awesome --}}
     <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
+    {{!-- The main JavaScript file for Casper --}}
     <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
 
 </body>

index.hbs

@@ -1,10 +1,10 @@
 {{!< default}}
-{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
+{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-{{! The big featured header }}
+{{!-- The big featured header --}}
 <header class="main-header {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
     <nav class="main-nav overlay clearfix">
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
+        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
         {{#if @blog.navigation}}
             <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
         {{/if}}
@@ -18,10 +18,10 @@
     <a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
 </header>
 
-{{! The main content area on the homepage }}
+{{!-- The main content area on the homepage --}}
 <main id="content" class="content" role="main">
 
-    {{! The tag below includes the post loop - partials/loop.hbs }}
+    {{!-- The tag below includes the post loop - partials/loop.hbs --}}
     {{> "loop"}}
 
 </main>

package.json

@@ -1,4 +1,36 @@
 {
-  "name": "Casper",
-  "version": "1.2.2"
+    "name": "casper",
+    "description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
+    "demo": "https://demo.ghost.io",
+    "version": "1.3.7",
+    "engines": {
+        "ghost": ">=0.9.0 <1.0.0"
+    },
+    "license": "MIT",
+    "screenshots": {
+        "desktop": "assets/screenshot-desktop.jpg",
+        "mobile": "assets/screenshot-mobile.jpg"
+    },
+    "author": {
+        "name": "Ghost Foundation",
+        "email": "hello@ghost.org",
+        "url": "https://ghost.org"
+    },
+    "gpm": {
+        "type": "theme",
+        "categories": [
+            "Minimal",
+            "Personal Blogs"
+        ]
+    },
+    "keywords": [
+        "ghost",
+        "theme"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/TryGhost/Casper.git"
+    },
+    "bugs": "https://github.com/TryGhost/Casper/issues",
+    "contributors": "https://github.com/TryGhost/Casper/graphs/contributors"
 }

page.hbs

@@ -1,14 +1,14 @@
 {{!< default}}
 
-{{! 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. }}
+{{!-- 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. --}}
 
-{{! Everything inside the #post tags pulls data from the page }}
+{{!-- Everything inside the #post tags pulls data from the page --}}
 {{#post}}
 
 <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">
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
+        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
         {{#if @blog.navigation}}
             <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
         {{/if}}

partials/loop.hbs

@@ -1,25 +1,25 @@
-{{! Previous/next page links - only displayed on page 2+ }}
+{{!-- Previous/next page links - only displayed on page 2+ --}}
 <div class="extra-pagination inner">
     {{pagination}}
 </div>
 
-{{! This is the post loop - each post will be output using this markup }}
+{{!-- This is the post loop - each post will be output using this markup --}}
 {{#foreach posts}}
 <article class="{{post_class}}">
     <header class="post-header">
-        <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
+        <h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
     </header>
     <section class="post-excerpt">
         <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}}
+        {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
         {{author}}
         {{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}}
 
-{{! Previous/next page links - displayed on every page }}
+{{!-- Previous/next page links - displayed on every page --}}
 {{pagination}}

partials/navigation.hbs

@@ -5,9 +5,13 @@
     </a>
     <ul>
         {{#foreach navigation}}
-            <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="presentation"><a href="{{url absolute="true"}}">{{label}}</a></li>
+            <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}"><a href="{{url absolute="true"}}">{{label}}</a></li>
         {{/foreach}}
     </ul>
-    <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
+    {{#if @labs.subscribers}}
+        <a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
+    {{else}}
+        <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
+    {{/if}}
 </div>
 <span class="nav-cover"></span>

post.hbs

@@ -1,14 +1,14 @@
 {{!< default}}
 
-{{! The comment above "< default" means - insert everything in this file into
-    the {body} of the default.hbs template, which contains our header/footer. }}
+{{!-- The comment above "< default" means - insert everything in this file into
+    the {{{body}}} of the default.hbs template, containing the blog header/footer. --}}
 
-{{! Everything inside the #post tags pulls data from the post }}
+{{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
 
 <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">
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
+        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
         {{#if @blog.navigation}}
             <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
         {{/if}}
@@ -21,7 +21,7 @@
         <header class="post-header">
             <h1 class="post-title">{{title}}</h1>
             <section class="post-meta">
-                <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time> {{tags prefix=" on "}}
+                <time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time> {{tags prefix=" on "}}
             </section>
         </header>
 
@@ -31,7 +31,7 @@
 
         <footer class="post-footer">
 
-        {{! Everything inside the #author tags pulls data from the author }}
+        {{!-- Everything inside the #author tags pulls data from the author --}}
         {{#author}}
 
             {{#if image}}
@@ -58,7 +58,7 @@
 
             <section class="share">
                 <h4>Share this post</h4>
-                <a class="icon-twitter" href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}"
+                <a class="icon-twitter" href="https://twitter.com/intent/tweet?text={{encode title}}&amp;url={{url absolute="true"}}"
                     onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
                     <span class="hidden">Twitter</span>
                 </a>
@@ -72,11 +72,22 @@
                 </a>
             </section>
 
+            {{!-- Email subscribe form at the bottom of the page --}}
+            {{#if @labs.subscribers}}
+            <section class="gh-subscribe">
+                <h3 class="gh-subscribe-title">Subscribe to {{@blog.title}}</h3>
+                <p>Get the latest posts delivered right to your inbox.</p>
+                {{subscribe_form placeholder="Your email address"}}
+                <span class="gh-subscribe-rss">or subscribe <a href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/">via RSS</a> with Feedly!</span>
+            </section>
+            {{/if}}
+
         </footer>
 
     </article>
 </main>
 
+{{!-- Links to Previous/Next posts --}}
 <aside class="read-next">
     {{#next_post}}
     <a class="read-next-story {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">

tag.hbs

@@ -1,32 +1,34 @@
 {{!< default}}
-{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
+{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-{{! If we have a tag cover, display that - else blog cover - else nothing }}
+{{!-- If we have a tag cover, display that - else blog cover - else nothing --}}
 <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">
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
+        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
         {{#if @blog.navigation}}
             <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
         {{/if}}
     </nav>
     <div class="vertical">
+        {{#tag}}
         <div class="main-header-content inner">
-            <h1 class="page-title">{{tag.name}}</h1>
+            <h1 class="page-title">{{name}}</h1>
             <h2 class="page-description">
-                {{#if tag.description}}
-                    {{tag.description}}
+                {{#if description}}
+                    {{description}}
                 {{else}}
-                    A {{pagination.total}}-post collection
+                    A {{../pagination.total}}-post collection
                 {{/if}}
             </h2>
         </div>
+        {{/tag}}
     </div>
 </header>
 
-{{! The main content area on the homepage }}
+{{!-- The main content area on the homepage --}}
 <main class="content" role="main">
 
-    {{! The tag below includes the post loop - partials/loop.hbs }}
+    {{!-- The tag below includes the post loop - partials/loop.hbs --}}
     {{> "loop"}}
 
 </main>