Upgrading Casper to 2.0.4

Closes https://github.com/TryGhost/Casper/issues/352

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,19 @@
+Do you need help or have a question? Please come chat in Slack: https://ghost.org/slack 👫.
+
+If you're filing a bug 🐛, please include the following information:
+
+### Screenshot
+
+![]()
+
+### Steps to Reproduce
+ 
+ 1. This is the first step
+ 2. This may be the post content used to cause an issue...
+
+### Technical details
+
+* Casper Version:
+* Ghost Version:
+* Browser Version:
+* OS Version:

assets/css/csscomb.json

@@ -0,0 +1,240 @@
+{
+    "remove-empty-rulesets": true,
+    "always-semicolon": true,
+    "color-case": "lower",
+    "block-indent": "    ",
+    "color-shorthand": true,
+    "element-case": "lower",
+    "eof-newline": true,
+    "leading-zero": true,
+    "quotes": "double",
+    "space-before-colon": "",
+    "space-after-colon": " ",
+    "space-before-combinator": " ",
+    "space-after-combinator": " ",
+    "space-between-declarations": "\n",
+    "space-before-opening-brace": " ",
+    "space-after-opening-brace": "\n",
+    "space-after-selector-delimiter": "\n",
+    "space-before-selector-delimiter": "",
+    "space-before-closing-brace": "\n",
+    "strip-spaces": true,
+    "tab-size": 4,
+    "unitless-zero": true,
+    "sort-order": [ [
+        "content",
+        "visibility",
+        "position",
+        "top",
+        "right",
+        "bottom",
+        "left",
+        "z-index",
+        "order",
+        "flex",
+        "flex-grow",
+        "flex-shrink",
+        "flex-basis",
+        "align-self",
+        "display",
+        "flex-flow",
+        "flex-direction",
+        "justify-content",
+        "align-items",
+        "align-content",
+        "flex-wrap",
+        "flex-order",
+        "flex-pack",
+        "flex-align",
+        "float",
+        "clear",
+        "box-sizing",
+        "width",
+        "height",
+        "min-width",
+        "min-height",
+        "max-width",
+        "max-height",
+        "overflow",
+        "overflow-x",
+        "overflow-y",
+        "clip",
+        "margin",
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left",
+        "padding",
+        "padding-top",
+        "padding-right",
+        "padding-bottom",
+        "padding-left",
+        "outline",
+        "outline-width",
+        "outline-style",
+        "outline-color",
+        "outline-offset",
+        "border",
+        "border-spacing",
+        "border-collapse",
+        "border-width",
+        "border-style",
+        "border-color",
+        "border-top",
+        "border-top-width",
+        "border-top-style",
+        "border-top-color",
+        "border-right",
+        "border-right-width",
+        "border-right-style",
+        "border-right-color",
+        "border-bottom",
+        "border-bottom-width",
+        "border-bottom-style",
+        "border-bottom-color",
+        "border-left",
+        "border-left-width",
+        "border-left-style",
+        "border-left-color",
+        "border-image",
+        "border-image-source",
+        "border-image-slice",
+        "border-image-width",
+        "border-image-outset",
+        "border-image-repeat",
+        "border-top-image",
+        "border-right-image",
+        "border-bottom-image",
+        "border-left-image",
+        "border-corner-image",
+        "border-top-left-image",
+        "border-top-right-image",
+        "border-bottom-right-image",
+        "border-bottom-left-image",
+        "table-layout",
+        "caption-side",
+        "empty-cells",
+        "list-style",
+        "list-style-position",
+        "list-style-type",
+        "list-style-image",
+        "quotes",
+        "counter-increment",
+        "counter-reset",
+        "vertical-align",
+        "stroke",
+        "fill",
+        "stroke-width",
+        "stroke-opacity",
+        "color",
+        "font",
+        "font-family",
+        "font-size",
+        "line-height",
+        "font-weight",
+        "font-style",
+        "font-variant",
+        "font-size-adjust",
+        "font-stretch",
+        "text-rendering",
+        "font-feature-settings",
+        "letter-spacing",
+        "hyphens",
+        "text-align",
+        "text-align-last",
+        "text-decoration",
+        "text-emphasis",
+        "text-emphasis-position",
+        "text-emphasis-style",
+        "text-emphasis-color",
+        "text-indent",
+        "text-justify",
+        "text-outline",
+        "text-transform",
+        "text-wrap",
+        "text-overflow",
+        "text-overflow-ellipsis",
+        "text-overflow-mode",
+        "text-shadow",
+        "white-space",
+        "word-spacing",
+        "word-wrap",
+        "word-break",
+        "tab-size",
+        "user-select",
+        "src",
+        "resize",
+        "cursor",
+        "nav-index",
+        "nav-up",
+        "nav-right",
+        "nav-down",
+        "nav-left",
+        "background",
+        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+        "background-color",
+        "background-image",
+        "background-size",
+        "background-attachment",
+        "background-position",
+        "background-position-x",
+        "background-position-y",
+        "background-clip",
+        "background-origin",
+        "background-repeat",
+        "border-radius",
+        "border-top-left-radius",
+        "border-top-right-radius",
+        "border-bottom-right-radius",
+        "border-bottom-left-radius",
+        "box-decoration-break",
+        "box-shadow",
+        "opacity",
+        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+        "filter",
+        "transition",
+        "transition-delay",
+        "transition-timing-function",
+        "transition-duration",
+        "transition-property",
+        "transform",
+        "transform-origin",
+        "animation",
+        "animation-name",
+        "animation-duration",
+        "animation-play-state",
+        "animation-timing-function",
+        "animation-delay",
+        "animation-iteration-count",
+        "animation-direction",
+        "animation-fill-mode",
+        "pointer-events",
+        "unicode-bidi",
+        "direction",
+        "columns",
+        "column-span",
+        "column-width",
+        "column-count",
+        "column-fill",
+        "column-gap",
+        "column-rule",
+        "column-rule-width",
+        "column-rule-style",
+        "column-rule-color",
+        "break-before",
+        "break-inside",
+        "break-after",
+        "page-break-before",
+        "page-break-inside",
+        "page-break-after",
+        "orphans",
+        "widows",
+        "zoom",
+        "max-zoom",
+        "min-zoom",
+        "user-zoom",
+        "orientation",
+        "-webkit-overflow-scrolling",
+        "-ms-overflow-scrolling"
+    ] ]
+}

assets/css/screen.css

@@ -36,8 +36,8 @@ body {
     display: block;
     width: 100%;
     height: 100%;
-    background-position: center center;
     background-size: cover;
+    background-position: center center;
     border-radius: 100%;
 }
 
@@ -59,9 +59,9 @@ body {
 
 /* Centered content container blocks */
 .inner {
-    margin: 0 auto;
-    max-width: 1040px;
     width: 100%;
+    max-width: 1040px;
+    margin: 0 auto;
 }
 
 /* Usage:
@@ -81,12 +81,12 @@ body {
     .home-template .post-feed,
     .tag-template .post-feed,
     .author-template .post-feed {
-        margin-top: -110px;
+        margin-top: -70px;
+        padding-top: 0;
     }
     .home-template .site-nav {
         position: relative;
         top: -70px;
-        z-index: 300;
     }
 }
 
@@ -134,15 +134,13 @@ body {
 }
 
 .site-header-content {
-    position: relative;
-    z-index: 300;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 10vw 4vw;
     min-height: 200px;
     max-height: 450px;
+    padding: 10vw 4vw;
     text-align: center;
 }
 
@@ -181,12 +179,12 @@ body {
 
 .site-nav {
     position: relative;
-    z-index: 100;
+    z-index: 300;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    overflow-y: hidden;
     height: 40px;
+    overflow-y: hidden;
     font-size: 1.2rem;
 }
 
@@ -199,7 +197,6 @@ body {
     padding-bottom: 80px;
     letter-spacing: 0.4px;
     white-space: nowrap;
-
     -webkit-overflow-scrolling: touch;
     -ms-overflow-scrolling: touch;
 }
@@ -216,6 +213,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     flex-shrink: 0;
     display: block;
     margin-right: 24px;
+    padding: 9px 0;
     color: #fff;
     font-size: 1.7rem;
     line-height: 1em;
@@ -337,19 +335,19 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 }
 
 .rss-button svg {
-    margin-bottom: 1px;
     height: 2.1rem;
+    margin-bottom: 1px;
     fill: #fff;
 }
 
 @media (max-width: 700px) {
     .site-header {
-        padding-left: 0;
         padding-right: 0;
+        padding-left: 0;
     }
     .site-nav-left {
-        padding-left: 4vw;
         margin-right: 0;
+        padding-left: 4vw;
     }
     .site-nav-right {
         display: none;
@@ -360,9 +358,12 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 /* 6. Post Feed
 /* ---------------------------------------------------------- */
 
+.site-main {
+    z-index: 100;
+}
+
 .post-feed {
     position: relative;
-    z-index: 200;
     display: flex;
     flex-wrap: wrap;
     margin: 0 -20px;
@@ -373,9 +374,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     flex: 1 1 300px;
     display: flex;
     flex-direction: column;
+    min-height: 300px;
     overflow: hidden;
     margin: 0 20px 40px;
-    min-height: 300px;
     background: #fff center center;
     background-size: cover;
     border-radius: 5px;
@@ -391,6 +392,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 
 .post-card-image-link {
     position: relative;
+    display: block;
+    overflow: hidden;
+    border-radius: 5px 5px 0 0;
 }
 
 .post-card-image {
@@ -442,9 +446,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 }
 
 .author-profile-image {
-    margin-right: 5px;
     width: 25px;
     height: 25px;
+    margin-right: 5px;
     border-radius: 100%;
 }
 
@@ -533,9 +537,9 @@ The first (most recent) post in the list is styled to be bigger than the others
 /* ^ Required to make .post-full-content:before/after z-index stacking work */
 
 .post-full-header {
+    max-width: 1040px;
     margin: 0 auto;
     padding: 6vw 3vw 3vw;
-    max-width: 1040px;
     text-align: center;
 }
 
@@ -564,8 +568,8 @@ The first (most recent) post in the list is styled to be bigger than the others
 }
 
 .post-full-image {
-    margin: 0 -10vw -165px;
     height: 800px;
+    margin: 0 -10vw -165px;
     background: var(--lightgrey) center center;
     background-size: cover;
     border-radius: 5px;
@@ -573,8 +577,8 @@ The first (most recent) post in the list is styled to be bigger than the others
 
 @media (max-width: 1170px) {
     .post-full-image {
-        margin: 0 -4vw -100px;
         height: 600px;
+        margin: 0 -4vw -100px;
         border-radius: 0;
     }
 }
@@ -587,9 +591,9 @@ The first (most recent) post in the list is styled to be bigger than the others
 
 .post-full-content {
     position: relative;
+    min-height: 230px;
     margin: 0 auto;
     padding: 70px 100px 0;
-    min-height: 230px;
     font-family: Georgia, serif;
     font-size: 2.2rem;
     line-height: 1.6em;
@@ -699,8 +703,8 @@ The first (most recent) post in the list is styled to be bigger than the others
 .post-full-content img,
 .post-full-content video {
     display: block;
-    margin: 1.5em auto;
     max-width: 1040px;
+    margin: 1.5em auto;
 }
 @media (max-width: 1040px) {
     .post-full-content img,
@@ -709,15 +713,36 @@ The first (most recent) post in the list is styled to be bigger than the others
     }
 }
 
-/*
-If an image url has #full on the end, give it special wide styles.
+
+/* Full bleed images (#full)
 Super neat trick courtesy of @JoelDrapper
+
+Usage (In Ghost edtior):
+
+![img](/some/image.jpg#full)
+
 */
 .post-full-content img[src$="#full"] {
     width: 100vw;
     max-width: none;
 }
 
+
+/* Image captions
+
+Usage (In Ghost editor):
+
+![img](/some/image.jpg)
+<small>Your image caption</small>
+
+*/
+.post-full-content br + small {
+    display: block;
+    margin-top: -3em;
+    margin-bottom: 1.5em;
+}
+
+
 .post-full-content iframe {
     margin: 0 auto 1.5em;
 }
@@ -741,9 +766,9 @@ Super neat trick courtesy of @JoelDrapper
 }
 
 @media (min-width: 1000px) {
-    .post-full-content blockquote {
-        max-width: 1060px;
+    .post-full-content blockquote:not(:first-of-type) {
         width: 100vw;
+        max-width: 1060px;
     }
 }
 
@@ -761,10 +786,10 @@ Super neat trick courtesy of @JoelDrapper
 }
 
 .post-full-content pre {
+    max-width: 100%;
     overflow-x: auto;
     margin: 1.5em 0 3em;
     padding: 20px;
-    max-width: 100%;
     border: color(var(--darkgrey) l(-10%)) 1px solid;
     color: var(--whitegrey);
     font-size: 1.4rem;
@@ -794,9 +819,9 @@ Super neat trick courtesy of @JoelDrapper
     top: -15px;
     left: 50%;
     display: block;
-    margin-left: -10px;
     width: 1px;
     height: 30px;
+    margin-left: -10px;
     background: color(var(--lightgrey) l(+10%));
     box-shadow: #fff 0 0 0 5px;
     transform: rotate(45deg);
@@ -808,8 +833,8 @@ Super neat trick courtesy of @JoelDrapper
 .post-full-content h4,
 .post-full-content h5,
 .post-full-content h6 {
-    padding-top: 75px;
     margin-top: -75px;
+    padding-top: 75px;
     color: color(var(--darkgrey) l(-5%));
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
@@ -891,47 +916,48 @@ Super neat trick courtesy of @JoelDrapper
 
 /* Tables */
 .post-full-content table {
-    display: table;
-    width: 100%;
+    display: inline-block;
+    width: auto;
     max-width: 100%;
     overflow-x: auto;
-    white-space: nowrap;
-    border-collapse: collapse;
-    border-spacing: 0;
     margin: 0.5em 0 2.5em;
+    border-spacing: 0;
+    border-collapse: collapse;
+    vertical-align: top;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     font-size: 1.6rem;
+    white-space: nowrap;
 }
 
 .post-full-content table {
-    -webkit-overflow-scrolling: touch;
     background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
     background-size: 10px 100%, 10px 100%;
     background-attachment: scroll, scroll;
     background-repeat: no-repeat;
+    -webkit-overflow-scrolling: touch;
 }
 
 .post-full-content table td:first-child {
     background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
-    background-repeat: no-repeat;
     background-size: 20px 100%;
+    background-repeat: no-repeat;
 }
 
 .post-full-content table td:last-child {
     background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
-    background-repeat: no-repeat;
-    background-position: 100% 0;
     background-size: 20px 100%;
+    background-position: 100% 0;
+    background-repeat: no-repeat;
 }
 
 .post-full-content table th {
-    font-size: 1.2rem;
-    letter-spacing: 0.2px;
     color: var(--darkgrey);
+    font-size: 1.2rem;
     font-weight: 700;
+    letter-spacing: 0.2px;
     text-align: left;
     text-transform: uppercase;
-    background: color(var(--whitegrey) l(+4%));
+    background-color: color(var(--whitegrey) l(+4%));
 }
 
 .post-full-content table th,
@@ -940,16 +966,6 @@ Super neat trick courtesy of @JoelDrapper
     border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
 }
 
-@media (max-width: 800px) {
-    .post-full-content table {
-        display: inline-block;
-        vertical-align: top;
-        max-width: 100%;
-        width: auto;
-    }
-}
-
-
 
 /* 7.1. Subscribe Form
 /* ---------------------------------------------------------- */
@@ -984,8 +1000,8 @@ Super neat trick courtesy of @JoelDrapper
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 0 auto;
     max-width: 420px;
+    margin: 0 auto;
 }
 
 .subscribe-form .form-group {
@@ -994,8 +1010,8 @@ Super neat trick courtesy of @JoelDrapper
 
 .subscribe-email {
     display: block;
-    padding: 10px;
     width: 100%;
+    padding: 10px;
     border: color(var(--lightgrey) l(+7%)) 1px solid;
     color: var(--midgrey);
     font-size: 1.8rem;
@@ -1015,9 +1031,9 @@ Super neat trick courtesy of @JoelDrapper
 
 .subscribe-form button {
     display: inline-block;
+    height: 41px;
     margin: 0 0 0 10px;
     padding: 0 20px;
-    height: 41px;
     outline: none;
     color: #fff;
     font-size: 1.5rem;
@@ -1072,9 +1088,9 @@ Super neat trick courtesy of @JoelDrapper
     display: flex;
     justify-content: space-between;
     align-items: center;
+    max-width: 840px;
     margin: 0 auto;
     padding: 3vw 0 6vw 0;
-    max-width: 840px;
 }
 
 .author-card {
@@ -1083,9 +1099,9 @@ Super neat trick courtesy of @JoelDrapper
 }
 
 .author-card .author-profile-image {
-    margin-right: 15px;
     width: 60px;
     height: 60px;
+    margin-right: 15px;
 }
 
 .author-card-name {
@@ -1137,8 +1153,8 @@ Super neat trick courtesy of @JoelDrapper
 /* ---------------------------------------------------------- */
 
 .post-full-comments {
-    margin: 0 auto;
     max-width: 840px;
+    margin: 0 auto;
 }
 
 
@@ -1223,9 +1239,8 @@ Super neat trick courtesy of @JoelDrapper
 
 .read-next-divider svg {
     width: 40px;
-    fill: transparent;
     stroke: #fff;
-
+    fill: transparent;
     stroke-width: 0.5px;
     stroke-opacity: 0.65;
 }
@@ -1243,8 +1258,8 @@ Super neat trick courtesy of @JoelDrapper
     flex-direction: column;
     margin: 0 auto;
     padding: 0;
-    text-align: center;
     list-style: none;
+    text-align: center;
 }
 
 .read-next-card-content li {
@@ -1260,9 +1275,9 @@ Super neat trick courtesy of @JoelDrapper
     display: block;
     padding: 20px 0;
     border-bottom: rgba(255,255,255,0.3) 1px solid;
+    vertical-align: top;
     color: #fff;
     font-weight: 500;
-    vertical-align: top;
     transition: opacity 0.3s ease;
 }
 
@@ -1324,8 +1339,8 @@ Super neat trick courtesy of @JoelDrapper
     display: flex;
     align-items: center;
     color: var(--darkgrey);
-    font-weight: 700;
     line-height: 1.1em;
+    font-weight: 700;
 }
 
 .floating-header-logo a:hover {
@@ -1333,8 +1348,8 @@ Super neat trick courtesy of @JoelDrapper
 }
 
 .floating-header-logo img {
-    margin: 0 10px 0 0;
     max-height: 20px;
+    margin: 0 10px 0 0;
 }
 
 .floating-header-divider {
@@ -1385,9 +1400,9 @@ Super neat trick courtesy of @JoelDrapper
 }
 
 .floating-header-share-label svg {
-    margin: 0 5px 0 10px;
     width: 18px;
     height: 18px;
+    margin: 0 5px 0 10px;
     stroke: rgba(0,0,0,0.7);
     transform: rotate(90deg);
 }
@@ -1492,16 +1507,16 @@ Super neat trick courtesy of @JoelDrapper
 
 .site-header-content .author-profile-image {
     flex-shrink: 0;
-    margin: 0 0 20px 0;
     width: 100px;
     height: 100px;
+    margin: 0 0 20px 0;
     box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
 }
 
 .site-header-content .author-bio {
     flex-shrink: 0;
-    margin: 5px 0 10px 0;
     max-width: 600px;
+    margin: 5px 0 10px 0;
     font-size: 2rem;
     line-height: 1.3em;
     font-weight: 300;
@@ -1652,8 +1667,8 @@ Super neat trick courtesy of @JoelDrapper
 }
 
 .subscribe-overlay-description {
-    margin: 0 auto 50px;
     max-width: 650px;
+    margin: 0 auto 50px;
     font-family: Georgia, serif;
     font-size: 3rem;
     line-height: 1.3em;
@@ -1665,8 +1680,8 @@ Super neat trick courtesy of @JoelDrapper
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 0 auto;
     max-width: 500px;
+    margin: 0 auto;
 }
 
 .subscribe-overlay .form-group {
@@ -1675,8 +1690,8 @@ Super neat trick courtesy of @JoelDrapper
 
 .subscribe-overlay .subscribe-email {
     display: block;
-    padding: 14px 20px;
     width: 100%;
+    padding: 14px 20px;
     border: none;
     color: var(--midgrey);
     font-size: 2rem;
@@ -1697,9 +1712,9 @@ Super neat trick courtesy of @JoelDrapper
 
 .subscribe-overlay button {
     display: inline-block;
+    height: 52px;
     margin: 0 0 0 15px;
     padding: 0 25px;
-    height: 52px;
     outline: none;
     color: #fff;
     font-size: 1.7rem;

error-404.hbs

@@ -0,0 +1,56 @@
+{{!--
+This error template is used for all 404 errors, which might occur on your site.
+It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
+--}}
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>{{meta_title}}</title>
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
+</head>
+<body class="error-template">
+    <div class="site-wrapper">
+
+        <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
+            <div class="inner">
+                <nav class="site-nav-center">
+                    {{#if @blog.logo}}
+                        <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+                    {{else}}
+                        <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
+                    {{/if}}
+                </nav>
+            </div>
+        </header>
+
+        <main id="site-main" class="site-main outer" role="main">
+            <div class="inner">
+
+                <section class="error-message">
+                    <h1 class="error-code">{{code}}</h1>
+                    <p class="error-description">{{message}}</p>
+                    <a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
+                </section>
+            </div>
+        </main>
+
+        {{#get "posts" limit="3"}}
+        <aside class="outer">
+            <div class="inner">
+                <div class="post-feed">
+                    {{#foreach posts}}
+                        {{> "post-card"}}
+                    {{/foreach}}
+                </div>
+            </div>
+        </aside>
+        {{/get}}
+
+    </div>
+</body>
+</html>

error.hbs

@@ -1,5 +1,7 @@
 {{!--
-This error template is used for all 400/500 errors which might occur on your site. It's a good idea to keep this template as minimal as possible in terms of both file size and complexity. You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in this file.
+This error template is used for all 400/500 errors, except 404, which might occur on your site.
+It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
+You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in this file.
 --}}
 
 <!DOCTYPE html>
@@ -56,19 +58,6 @@ This error template is used for all 400/500 errors which might occur on your sit
 
             </div>
         </main>
-
-        {{#get "posts" limit="3"}}
-        <aside class="outer">
-            <div class="inner">
-                <div class="post-feed">
-                    {{#foreach posts}}
-                        {{> "post-card"}}
-                    {{/foreach}}
-                </div>
-            </div>
-        </aside>
-        {{/get}}
-
     </div>
 </body>
 </html>

package.json

@@ -2,9 +2,9 @@
     "name": "casper",
     "description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
     "demo": "https://demo.ghost.io",
-    "version": "2.0.2",
+    "version": "2.0.4",
     "engines": {
-        "ghost": ">=1.0.0"
+        "ghost": ">=1.2.0"
     },
     "license": "MIT",
     "screenshots": {

partials/post-card.hbs

@@ -7,8 +7,8 @@
     <div class="post-card-content">
         <a class="post-card-content-link" href="{{url}}">
             <header class="post-card-header">
-                {{#if tags}}
-                    <span class="post-card-tags">{{tags.[0].name}}</span>
+                {{#if primary_tag}}
+                    <span class="post-card-tags">{{primary_tag.name}}</span>
                 {{/if}}
                 <h2 class="post-card-title">{{title}}</h2>
             </header>

post.hbs

@@ -20,9 +20,9 @@ into the {body} of the default.hbs template --}}
             <header class="post-full-header">
                 <section class="post-full-meta">
                     <time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
-                    {{#if tags}}
-                        <span class="date-divider">/</span> <a href="{{@blog.url}}/tag/{{tags.[0].slug}}">{{tags.[0].name}}</a>
-                    {{/if}}
+                    {{#primary_tag}}
+                        <span class="date-divider">/</span> <a href="{{url}}">{{name}}</a>
+                    {{/primary_tag}}
                 </section>
                 <h1 class="post-full-title">{{title}}</h1>
             </header>
@@ -102,11 +102,11 @@ into the {body} of the default.hbs template --}}
     <div class="inner">
         <div class="read-next-feed">
 
-            {{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3" as |related_posts|}}
+            {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
                 {{#if related_posts}}
                 <article class="read-next-card"
-                    {{#if ../tags.[0].feature_image}}
-                        style="background-image: url({{../tags.[0].feature_image}})"
+                    {{#if ../primary_tag.feature_image}}
+                        style="background-image: url({{../primary_tag.feature_image}})"
                     {{else}}
                         {{#if @blog.cover_image}}
                             style="background-image: url({{@blog.cover_image}})"{{/if}}
@@ -114,7 +114,9 @@ into the {body} of the default.hbs template --}}
                 >
                     <header class="read-next-card-header">
                         <small class="read-next-card-header-sitetitle">&mdash; {{@blog.title}} &mdash;</small>
-                        <h3 class="read-next-card-header-title"><a href="{{@blog.url}}/tag/{{../tags.[0].slug}}/">{{../tags.[0].name}}</a></h3>
+                        {{#../primary_tag}}
+                        <h3 class="read-next-card-header-title"><a href="{{url}}">{{name}}</a></h3>
+                        {{/../primary_tag}}
                     </header>
                     <div class="read-next-divider">{{> "icons/infinity"}}</div>
                     <div class="read-next-card-content">
@@ -125,7 +127,7 @@ into the {body} of the default.hbs template --}}
                         </ul>
                     </div>
                     <footer class="read-next-card-footer">
-                        <a href="{{@blog.url}}/tag/{{../tags.[0].slug}}/">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
+                        <a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
                     </footer>
                 </article>
                 {{/if}}