Fix post images overflowing viewport on mobile

See #322
Merge pull request #327 from AileenCGN/1.0.0/infinite-scroll-fix
2025-07-12 16:56:06 +00:00 · 2017-07-20 17:27:02 +04:00 · 2017-07-11 09:26:21 +01:00 · 2017-07-11 09:01:16 +01:00 · 2017-07-11 12:32:58 +07:00 · 2017-07-11 09:49:53 +07:00
40 changed files with 3150 additions and 2397 deletions
--- a/2
+++ b/2
@ -1,4 +1,4 @@
-Copyright (c) 2013-2016 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
--- a/README.md
+++ b/README.md
@ -1,16 +1,60 @@
 # Casper

-The default theme for [Ghost](http://github.com/tryghost/ghost/).
+The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper. If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.

-To download, visit the [releases](https://github.com/TryGhost/Casper/releases) page.
+&nbsp;

-## Copyright & License
+![screenshot-desktop](https://user-images.githubusercontent.com/120485/27221326-1e31d326-5280-11e7-866d-82d550a7683b.jpg)

-Copyright (c) 2013-2016 Ghost Foundation - Released under the MIT License.
+&nbsp;

-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:
+# First time using a Ghost theme?

-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.

-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.
+We've documented our default theme pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://themes.ghost.org) which explains every possible Handlebars helper and template.
+
+**The main files are:**
+
+- `default.hbs` - The main template file
+- `index.hbs` - Used for the home page
+- `post.hbs` - Used for individual posts
+- `page.hbs` - Used for individual pages
+- `tag.hbs` - Used for tag archives
+- `author.hbs` - Used for author archives
+
+One really neat trick is that you can also create custom one-off templates just by adding the slug of a page to a template file. For example:
+
+- `page-about.hbs` - Custom template for the `/about/` page
+- `tag-news.hbs` - Custom template for `/tag/news/` archive
+- `author-ali.hbs` - Custom template for `/author/ali/` archive
+
+
+# Development
+
+Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node and Gulp installed globally. After that, from the theme's root directory:
+
+`$ npm install`
+
+`$ gulp`
+
+Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
+
+
+# PostCSS Features Used
+
+- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
+- Variables - Simple pure CSS variables
+- [Color Function](https://github.com/postcss/postcss-color-function)
+
+
+# SVG Icons
+
+Casper uses inline SVG icons, included via Handlebars partials. You can find all icons inside `/partials/icons`. To use an icon just include the name of the relevant file, eg. To include the SVG icon in `/partials/icons/rss.hbs` - use `{{> "icons/rss"}}`.
+
+You can add your own SVG icons in the same manner.
+
+
+# Copyright & License
+
+Copyright (c) 2013-2017 Ghost Foundation - Released under the [MIT license](LICENSE).
--- a/assets/built/global.css
+++ b/assets/built/global.css
@ -0,0 +1,2 @@
+a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#3c484e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.5rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e3e9ed}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}li{margin:.5em 0;padding-left:.5em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:.5em solid #e5eff5}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:700;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5rem;font-weight:700}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}
+/*# sourceMappingURL=global.css.map */
--- a/assets/built/global.css.map
+++ b/assets/built/global.css.map
--- a/assets/built/screen.css
+++ b/assets/built/screen.css
--- a/assets/built/screen.css.map
+++ b/assets/built/screen.css.map
--- a/assets/css/.csscomb.json
+++ b/assets/css/.csscomb.json
@ -0,0 +1,237 @@
+{
+    "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",
+        "flex-wrap",
+        "justify-content",
+        "align-items",
+        "align-content",
+        "flex-order",
+        "flex-pack",
+        "flex-align",
+        "float",
+        "clear",
+        "overflow",
+        "overflow-x",
+        "overflow-y",
+        "-webkit-overflow-scrolling",
+        "clip",
+        "box-sizing",
+        "margin",
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left",
+        "padding",
+        "padding-top",
+        "padding-right",
+        "padding-bottom",
+        "padding-left",
+        "min-width",
+        "min-height",
+        "max-width",
+        "max-height",
+        "width",
+        "height",
+        "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",
+        "color",
+        "font",
+        "font-family",
+        "font-size",
+        "line-height",
+        "font-weight",
+        "font-style",
+        "font-variant",
+        "font-size-adjust",
+        "font-stretch",
+        "font-feature-settings",
+        "letter-spacing",
+        "text-rendering",
+        "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",
+        "hyphens",
+        "user-select",
+        "fill",
+        "stroke",
+        "background",
+        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+        "background-color",
+        "background-image",
+        "background-attachment",
+        "background-position",
+        "background-position-x",
+        "background-position-y",
+        "background-clip",
+        "background-origin",
+        "background-size",
+        "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",
+        "table-layout",
+        "caption-side",
+        "empty-cells",
+        "list-style",
+        "list-style-position",
+        "list-style-type",
+        "list-style-image",
+        "quotes",
+        "counter-increment",
+        "counter-reset",
+        "vertical-align",
+        "src",
+        "opacity",
+        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+        "filter",
+        "resize",
+        "cursor",
+        "nav-index",
+        "nav-up",
+        "nav-right",
+        "nav-down",
+        "nav-left",
+        "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"
+    ] ]
+}
--- a/assets/css/global.css
+++ b/assets/css/global.css
@ -0,0 +1,482 @@
+/* Variables
+/* ---------------------------------------------------------- */
+
+:root {
+    /* Colours */
+    --blue: #3eb0ef;
+    --green: #a4d037;
+    --purple: #ad26b4;
+    --yellow: #fecd35;
+    --red: #f05230;
+    --darkgrey: #15171A;
+    --midgrey: #738a94;
+    --lightgrey: #c5d2d9;
+    --whitegrey: #e5eff5;
+    --pink: #fa3a57;
+    --brown: #a3821a;
+}
+
+/* Reset
+/* ---------------------------------------------------------- */
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline;
+}
+body {
+    line-height: 1;
+}
+ol,
+ul {
+    list-style: none;
+}
+blockquote,
+q {
+    quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: "";
+    content: none;
+}
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+img {
+    max-width: 100%;
+}
+html {
+    box-sizing: border-box;
+    font-family: sans-serif;
+
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+a {
+    background-color: transparent;
+}
+a:active,
+a:hover {
+    outline: 0;
+}
+b,
+strong {
+    font-weight: bold;
+}
+i,
+em,
+dfn {
+    font-style: italic;
+}
+h1 {
+    margin: 0.67em 0;
+    font-size: 2em;
+}
+small {
+    font-size: 80%;
+}
+sub,
+sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+sup {
+    top: -0.5em;
+}
+sub {
+    bottom: -0.25em;
+}
+img {
+    border: 0;
+}
+svg:not(:root) {
+    overflow: hidden;
+}
+mark {
+    background-color: #fdffb6;
+}
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+    margin: 0; /* 3 */
+    color: inherit; /* 1 */
+    font: inherit; /* 2 */
+}
+button {
+    overflow: visible;
+    border: none;
+}
+button,
+select {
+    text-transform: none;
+}
+button,
+html input[type="button"],
+/* 1 */
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer; /* 3 */
+
+    -webkit-appearance: button; /* 2 */
+}
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+input {
+    line-height: normal;
+}
+input:focus {
+    outline: none;
+}
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+input[type="search"] {
+    box-sizing: content-box; /* 2 */
+
+    -webkit-appearance: textfield; /* 1 */
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+legend {
+    padding: 0; /* 2 */
+    border: 0; /* 1 */
+}
+textarea {
+    overflow: auto;
+}
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+td,
+th {
+    padding: 0;
+}
+
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+html {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    font-size: 62.5%;
+
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+    overflow-x: hidden;
+    color: color(var(--midgrey) l(-25%));
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    font-size: 1.5rem;
+    line-height: 1.6em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: 0;
+    text-rendering: optimizeLegibility;
+    background: #fff;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -moz-font-feature-settings: "liga" on;
+}
+
+::selection {
+    text-shadow: none;
+    background: color(var(--blue) lightness(+30%));
+}
+
+hr {
+    position: relative;
+    display: block;
+    width: 100%;
+    margin: 2.5em 0 3.5em;
+    padding: 0;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid color(var(--lightgrey) l(+10%));
+}
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+    vertical-align: middle;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+p,
+ul,
+ol,
+dl,
+blockquote {
+    margin: 0 0 1.5em 0;
+}
+
+ol,
+ul {
+    padding-left: 1em;
+    padding-right: 1.5em;
+}
+
+ol ol,
+ul ul,
+ul ol,
+ol ul {
+    margin: 0.5em 0 1em;
+}
+
+ul {
+    list-style: disc;
+}
+
+ol {
+    list-style: decimal;
+}
+
+li {
+    margin: 0.5em 0;
+    padding-left: 0.5em;
+    line-height: 1.6em;
+}
+
+dt {
+    float: left;
+    margin: 0 20px 0 0;
+    width: 120px;
+    color: var(--darkgrey);
+    font-weight: 500;
+    text-align: right;
+}
+
+dd {
+    margin: 0 0 5px 0;
+    text-align: left;
+}
+
+blockquote {
+    margin: 1.5em 0;
+    padding: 0 1.6em 0 1.6em;
+    border-left: var(--whitegrey) 0.5em solid;;
+}
+
+blockquote p {
+    margin: 0.8em 0;
+    font-size: 1.2em;
+    font-weight: 300;
+}
+
+blockquote small {
+    display: inline-block;
+    margin: 0.8em 0 0.8em 1.5em;
+    font-size: 0.9em;
+    opacity: 0.8;
+}
+/* Quotation marks */
+blockquote small:before {
+    content: "\2014 \00A0";
+}
+
+blockquote cite {
+    font-weight: bold;
+}
+blockquote cite a {
+    font-weight: normal;
+}
+
+a {
+    color: color(var(--blue) l(-5%));
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 0;
+    line-height: 1.15;
+    font-weight: 700;
+    text-rendering: optimizeLegibility;
+}
+
+h1 {
+    margin: 0 0 0.5em 0;
+    font-size: 5rem;
+    font-weight: 700;
+}
+@media (max-width: 500px) {
+    h1 {
+        font-size: 2.2rem;
+    }
+}
+
+h2 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 2rem;
+}
+@media (max-width: 500px) {
+    h2 {
+        font-size: 1.8rem;
+    }
+}
+
+h3 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 1.8rem;
+    font-weight: 500;
+}
+@media (max-width: 500px) {
+    h3 {
+        font-size: 1.7rem;
+    }
+}
+
+h4 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 1.6rem;
+    font-weight: 500;
+}
+
+h5 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 1.4rem;
+    font-weight: 500;
+}
+
+h6 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 1.4rem;
+    font-weight: 500;
+}
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
--- a/assets/fonts/casper-icons.eot
+++ b/assets/fonts/casper-icons.eot
--- a/assets/fonts/casper-icons.svg
+++ b/assets/fonts/casper-icons.svg
@ -1,20 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="512">
-<font-face units-per-em="512" ascent="480" descent="-32" />
-<missing-glyph horiz-adv-x="512" />
-<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
-<glyph unicode="&#xf600;" d="M0 480v-102.4h307.2v102.4h-307.2zM0 275.2v-102.4h512v102.4h-512zM0 70.4v-102.4h204.8v102.4h-204.8zM307.2 70.4v-102.4h204.8v102.4h-204.8zM409.6 480v-102.4h102.4v102.4h-102.4z" />
-<glyph unicode="&#xf601;" d="M421.344-32c-0.4 229.616-200.752 417.264-421.344 417.696v94.304c270.656 0 512-230.304 512-512h-90.656zM343.6-31.968h-90.608c0.304 56.384-28.336 119.488-73.664 166.736-45.072 47.632-124.96 77.648-179.104 77.36v94.272c169.040-3.648 339.936-163.312 343.376-338.368zM64.256 96.048c35.312 0 63.936-28.656 63.936-64 0-35.328-28.624-63.984-63.936-63.984s-63.936 28.656-63.936 63.984c0 35.344 28.624 64 63.936 64z" />
-<glyph unicode="&#xf602;" d="M512 382.791c-18.838-8.354-39.082-14.001-60.33-16.54 21.686 13 38.343 33.585 46.186 58.115-20.298-12.039-42.778-20.78-66.705-25.49-19.16 20.415-46.461 33.17-76.673 33.17-58.011 0-105.044-47.029-105.044-105.039 0-8.233 0.929-16.25 2.72-23.939-87.3 4.382-164.701 46.2-216.509 109.753-9.042-15.514-14.223-33.558-14.223-52.809 0-36.444 18.544-68.596 46.73-87.433-17.219 0.546-33.416 5.271-47.577 13.139-0.010-0.438-0.010-0.878-0.010-1.321 0-50.894 36.209-93.348 84.261-103-8.813-2.4-18.094-3.686-27.674-3.686-6.769 0-13.349 0.66-19.764 1.886 13.368-41.73 52.16-72.103 98.126-72.948-35.95-28.175-81.243-44.967-130.458-44.967-8.479 0-16.84 0.497-25.058 1.47 46.486-29.805 101.701-47.197 161.021-47.197 193.211 0 298.868 160.062 298.868 298.872 0 4.554-0.103 9.084-0.305 13.59 20.528 14.81 38.336 33.31 52.418 54.374z" />
-<glyph unicode="&#xf603;" d="M0.403 45.168c-0.122 1.266-0.226 2.535-0.292 3.815 0.065-1.28 0.17-2.549 0.292-3.815zM117.954 197.426c46.005-1.369 76.867 46.349 68.931 106.599-7.947 60.24-51.698 108.584-97.704 109.961-46.013 1.365-76.87-44.741-68.926-105 7.941-60.234 51.676-110.187 97.699-111.56zM512 352v42.655c0 46.94-38.391 85.345-85.329 85.345h-341.328c-46.138 0-84.006-37.116-85.282-82.963 29.181 25.693 69.662 47.158 111.437 47.158 44.652 0 178.622 0 178.622 0l-39.974-33.809h-56.634c37.565-14.402 57.578-58.062 57.578-102.861 0-37.624-20.905-69.977-50.444-92.984-28.822-22.451-34.286-31.854-34.286-50.939 0-16.289 30.873-44 47.016-55.394 47.191-33.269 62.458-64.156 62.458-115.728 0-8.214-1.021-16.415-3.033-24.48h153.871c46.937 0 85.328 38.375 85.328 85.345v266.654h-96v-95.999h-32v96h-95.999v32h95.999v96h32v-96h96zM92.943 97.032c10.807 0 20.711 0.295 30.968 0.295-13.573 13.167-24.313 29.3-24.313 49.19 0 11.804 3.782 23.168 9.067 33.26-5.391-0.385-10.895-0.497-16.563-0.497-37.178 0-68.753 12.038-92.102 31.927v-33.621l0.003-100.865c26.72 12.687 58.444 20.311 92.94 20.311zM1.71 36.371c-0.556 2.729-0.983 5.503-1.271 8.317 0.287-2.814 0.715-5.588 1.271-8.317zM227.725 3.577c-7.529 29.403-34.227 43.982-71.444 69.784-13.536 4.366-28.447 6.937-44.447 7.104-44.809 0.482-86.554-17.471-110.108-44.186 7.96-38.853 42.517-68.279 83.617-68.279h143.222c0.908 5.564 1.348 11.316 1.348 17.216 0 6.267-0.767 12.396-2.188 18.361z" />
-<glyph unicode="&#xf604;" d="M426.672 480h-341.33c-46.936 0-85.342-38.407-85.342-85.344v-341.313c0-46.969 38.406-85.343 85.342-85.343l341.33 0.001c46.938 0 85.328 38.373 85.328 85.344v341.311c0 46.937-38.391 85.344-85.328 85.344zM435.296 224h-83.296v-224h-96v224h-46.263v73.282h46.263v47.593c0 64.671 27.896 103.125 103.935 103.125h87.622v-79.285h-71.565c-21.241 0.035-23.876-11.076-23.876-31.756l-0.116-39.677h96l-12.704-73.282z" />
-<glyph unicode="&#xf605;" d="M368.615 34.099c6.861-6.938 6.861-18.125 0-25.063s-17.945-6.938-24.807 0l-200.448 202.419c-6.861 6.938-6.861 18.15 0 25.063l200.448 202.445c6.861 6.938 17.945 6.938 24.807 0s6.861-18.125 0-25.063l-182.784-189.901 182.784-189.901z" />
-<glyph unicode="&#xf606;" d="M435.2 454.4h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-435.2h102.4v435.2c0 14.131-11.443 25.6-25.6 25.6zM281.6 300.8h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-281.6h102.4v281.6c0 14.131-11.443 25.6-25.6 25.6zM128 147.2h-56.32c-14.131 0-20.48-11.443-20.48-25.6v-128h102.4v128c0 14.157-11.469 25.6-25.6 25.6z" />
-<glyph unicode="&#xf607;" d="M256 428.8c-70.707 0-128-57.319-128-128 0-122.214 128-281.6 128-281.6s128 159.386 128 281.6c0 70.681-57.293 128-128 128zM256 230.144c-38.169 0-69.12 30.951-69.12 69.12s30.951 69.12 69.12 69.12 69.12-30.951 69.12-69.12-30.95-69.12-69.12-69.12z" />
-<glyph unicode="&#xf608;" d="M201.19 103.834l-20.736-20.582c-17.971-17.792-47.181-17.817-65.126 0-8.627 8.576-13.363 19.917-13.363 32.026s4.761 23.475 13.363 32.051l76.288 75.699c15.795 15.693 45.542 38.759 67.226 17.255 9.959-9.881 26.035-9.805 35.891 0.128 9.882 9.933 9.83 26.010-0.128 35.891-36.839 36.557-91.315 29.798-138.752-17.255l-76.288-75.699c-18.279-18.176-28.365-42.343-28.365-68.070 0-25.702 10.087-49.869 28.391-68.045 18.841-18.714 43.571-28.032 68.301-28.032s49.511 9.318 68.352 28.032l20.736 20.608c9.958 9.882 10.010 25.959 0.128 35.865-9.881 9.933-25.958 9.984-35.917 0.128zM432.409 397.85c-39.577 39.27-94.899 41.395-131.558 5.043l-25.831-25.626c-9.959-9.882-10.035-25.933-0.154-35.891 9.907-9.958 25.959-10.010 35.891-0.128l25.83 25.625c18.969 18.841 43.827 11.034 60.058-5.043 8.627-8.55 13.363-19.942 13.363-32.026 0-12.109-4.762-23.475-13.363-32.026l-81.408-80.742c-37.197-36.915-54.682-19.61-62.131-12.211-9.958 9.882-26.010 9.805-35.865-0.128-9.881-9.959-9.831-26.035 0.128-35.891 17.075-16.947 36.608-25.344 57.037-25.344 25.037 0 51.481 12.595 76.621 37.555l81.382 80.743c18.304 18.151 28.39 42.317 28.39 68.019s-10.087 49.894-28.39 68.070z" />
-<glyph unicode="&#xf609;" d="M64 362.667h384q8.834 0 15.084-6.25t6.25-15.083-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.083 15.084 6.25zM64 106.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25zM64 234.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25z" />
-</font></defs></svg>
--- a/assets/fonts/casper-icons.ttf
+++ b/assets/fonts/casper-icons.ttf
--- a/assets/fonts/casper-icons.woff
+++ b/assets/fonts/casper-icons.woff
--- a/assets/js/index.js
+++ b/assets/js/index.js
@ -1,56 +0,0 @@
-/**
- * Main JS file for Casper behaviours
- */
-
-/* globals jQuery, document */
-(function ($, undefined) {
-    "use strict";
-
-    var $document = $(document);
-
-    $document.ready(function () {
-
-        var $postContent = $(".post-content");
-        $postContent.fitVids();
-
-        $(".scroll-down").arctic_scroll();
-
-        $(".menu-button, .nav-cover, .nav-close").on("click", function(e){
-            e.preventDefault();
-            $("body").toggleClass("nav-opened nav-closed");
-        });
-
-    });
-
-    // Arctic Scroll by Paul Adam Davis
-    // https://github.com/PaulAdamDavis/Arctic-Scroll
-    $.fn.arctic_scroll = function (options) {
-
-        var defaults = {
-            elem: $(this),
-            speed: 500
-        },
-
-        allOptions = $.extend(defaults, options);
-
-        allOptions.elem.click(function (event) {
-            event.preventDefault();
-            var $this = $(this),
-                $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) {
-                toMove = parseInt(offset);
-                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed);
-            } else if (position) {
-                toMove = parseInt(position);
-                $htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed);
-            } else {
-                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed);
-            }
-        });
-
-    };
-})(jQuery);
--- a/assets/js/infinitescroll.js
+++ b/assets/js/infinitescroll.js
@ -0,0 +1,83 @@
+// Code snippet inspired by https://github.com/douglasrodrigues5/ghost-blog-infinite-scroll
+$(function ($) {
+    var currentPage = 1;
+    var pathname = window.location.pathname;
+    var $document = $(document);
+    var $result = $('.post-feed');
+    var buffer = 100;
+
+    var ticking = false;
+    var isLoading = false;
+
+    var lastScrollY = window.scrollY;
+    var lastWindowHeight = window.innerHeight;
+    var lastDocumentHeight = $document.height();
+
+    // remove hash params from pathname
+    pathname = pathname.replace(/#(.*)$/g, '').replace('/\//g', '/');
+
+    function onScroll() {
+        lastScrollY = window.scrollY;
+        requestTick();
+    }
+
+    function onResize() {
+        lastWindowHeight = window.innerHeight;
+        lastDocumentHeight = $document.height();
+        requestTick();
+    }
+
+    function requestTick() {
+        if (!ticking) {
+            requestAnimationFrame(infiniteScroll)
+        }
+        ticking = true;
+    }
+
+    function infiniteScroll () {
+        // return if already loading
+        if (isLoading) {
+            return;
+        }
+
+        // return if not scroll to the bottom
+        if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
+            ticking = false;
+            return;
+        }
+
+        // return if currentPage is the last page already
+        if (currentPage === maxPages) {
+            return;
+        }
+
+        isLoading = true;
+
+        // next page
+        currentPage++;
+
+        // Load more
+        var nextPage = pathname + 'page/' + currentPage + '/';
+
+        $.get(nextPage, function (content) {
+            $result.append($(content).find('.post').hide().fadeIn(100));
+
+        }).fail(function (xhr) {
+            // 404 indicates we've run out of pages
+            if (xhr.status === 404) {
+                window.removeEventListener('scroll', onScroll, {passive: true});
+                window.removeEventListener('resize', onResize);
+            }
+
+        }).always(function () {
+            lastDocumentHeight = $document.height();
+            isLoading = false;
+            ticking = false;
+        });
+    }
+
+    window.addEventListener('scroll', onScroll, {passive: true});
+    window.addEventListener('resize', onResize);
+
+    infiniteScroll();
+});
--- a/assets/js/jquery.fitvids.js
+++ b/assets/js/jquery.fitvids.js
@ -1,4 +1,3 @@
-/*global jQuery */
 /*jshint browser:true */
 /*!
 * FitVids 1.1
@ -9,20 +8,21 @@
 *
 */

-(function( $ ){
+;(function( $ ){

-  "use strict";
+  'use strict';

  $.fn.fitVids = function( options ) {
    var settings = {
-      customSelector: null
+      customSelector: null,
+      ignore: null
    };

    if(!document.getElementById('fit-vids-style')) {
      // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
      var head = document.head || document.getElementsByTagName('head')[0];
      var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
-      var div = document.createElement('div');
+      var div = document.createElement("div");
      div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
      head.appendChild(div.childNodes[1]);
    }
@ -33,35 +33,55 @@

    return this.each(function(){
      var selectors = [
-        "iframe[src*='player.vimeo.com']",
-        "iframe[src*='youtube.com']",
-        "iframe[src*='youtube-nocookie.com']",
-        "iframe[src*='kickstarter.com'][src*='video.html']",
-        "object",
-        "embed"
+        'iframe[src*="player.vimeo.com"]',
+        'iframe[src*="youtube.com"]',
+        'iframe[src*="youtube-nocookie.com"]',
+        'iframe[src*="kickstarter.com"][src*="video.html"]',
+        'object',
+        'embed'
      ];

      if (settings.customSelector) {
        selectors.push(settings.customSelector);
      }

+      var ignoreList = '.fitvidsignore';
+
+      if(settings.ignore) {
+        ignoreList = ignoreList + ', ' + settings.ignore;
+      }
+
      var $allVideos = $(this).find(selectors.join(','));
-      $allVideos = $allVideos.not("object object"); // SwfObj conflict patch
+      $allVideos = $allVideos.not('object object'); // SwfObj conflict patch
+      $allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.

      $allVideos.each(function(){
        var $this = $(this);
+        if($this.parents(ignoreList).length > 0) {
+          return; // Disable FitVids on this video.
+        }
        if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
+        if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))
+        {
+          $this.attr('height', 9);
+          $this.attr('width', 16);
+        }
        var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
            width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
            aspectRatio = height / width;
-        if(!$this.attr('id')){
-          var videoID = 'fitvid' + Math.floor(Math.random()*999999);
-          $this.attr('id', videoID);
+        if(!$this.attr('name')){
+          var videoName = 'fitvid' + $.fn.fitVids._count;
+          $this.attr('name', videoName);
+          $.fn.fitVids._count++;
        }
-        $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
+        $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
        $this.removeAttr('height').removeAttr('width');
      });
    });
  };
+
+  // Internal counter for unique video names.
+  $.fn.fitVids._count = 0;
+
 // Works with either jQuery or Zepto
 })( window.jQuery || window.Zepto );
--- a/assets/screenshot-desktop.jpg
+++ b/assets/screenshot-desktop.jpg
--- a/assets/screenshot-mobile.jpg
+++ b/assets/screenshot-mobile.jpg
--- a/author.hbs
+++ b/author.hbs
@ -1,41 +1,54 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}

-{{!-- The big featured header --}}
-
-{{!-- 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.title}}" /></a>{{/if}}
-            {{#if @blog.navigation}}
-                <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
+{{!-- Everything inside the #author tags pulls data from the author --}}
+<header class="site-header outer {{#if cover_image}}" style="background-image: url({{cover_image}}){{else}}no-cover{{/if}}">
+    <div class="inner">
+        {{> "site-nav"}}
+        <div class="site-header-content">
+            {{#if profile_image}}
+                <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
            {{/if}}
-        </nav>
-    </header>
-
-    <section class="author-profile inner">
-        {{#if image}}
-        <figure class="author-image">
-            <div class="img" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></div>
-        </figure>
-        {{/if}}
-        <h1 class="author-title">{{name}}</h1>
-        {{#if bio}}
-            <h2 class="author-bio">{{bio}}</h2>
-        {{/if}}
-        <div class="author-meta">
-            {{#if location}}<span class="author-location icon-location">{{location}}</span>{{/if}}
-            {{#if website}}<span class="author-link icon-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
-            <span class="author-stats"><i class="icon-stats"></i> {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}</span>
+            <h1 class="site-title">{{name}}</h1>
+            {{#if bio}}
+                <h2 class="author-bio">{{bio}}</h2>
+            {{/if}}
+            <div class="author-meta">
+                {{#if location}}
+                    <div class="author-location">{{location}} <span class="bull">&bull;</span></div>
+                {{/if}}
+                <div class="author-stats">
+                    {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} <span class="bull">&bull;</span>
+                </div>
+                {{#if website}}
+                    <a class="social-link social-link-wb" href="{{website}}" target="_blank">{{> "icons/website"}}</a>
+                {{/if}}
+                {{#if twitter}}
+                    <a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank">{{> "icons/twitter"}}</a>
+                {{/if}}
+                {{#if facebook}}
+                    <a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank">{{> "icons/facebook"}}</a>
+                {{/if}}
+                <a class="social-link social-link-rss" href="http://cloud.feedly.com/#subscription/feed/{{url absolute="true"}}/rss/" target="_blank">{{> "icons/rss"}}</a>
+            </div>
        </div>
-    </section>
+    </div>
+</header>
 {{/author}}

-{{!-- The main content area on the homepage --}}
-<main class="content" role="main">
+{{!-- The main content area --}}
+<main id="site-main" class="site-main outer" role="main">
+    <div class="inner">

-    {{!-- The tag below includes the post loop - partials/loop.hbs --}}
-    {{> "loop"}}
+        <div class="post-feed">
+            {{#foreach posts}}

+                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+                {{> "post-card"}}
+
+            {{/foreach}}
+        </div>
+
+    </div>
 </main>
--- a/default.hbs
+++ b/default.hbs
@ -1,54 +1,80 @@
 <!DOCTYPE html>
 <html>
 <head>
+
    {{!-- Document Settings --}}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

-    {{!-- Page Meta --}}
+    {{!-- Base 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"}}" />
-    <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 "built/screen.css"}}" />

-    {{!-- Ghost outputs important style and meta data with this tag --}}
+    {{!-- This tag outputes SEO meta+structured data and other important settings --}}
    {{ghost_head}}
-</head>
-<body class="{{body_class}} nav-closed">

-    {{!-- The blog navigation links --}}
-    {{navigation}}
+</head>
+<body class="{{body_class}}">

    <div class="site-wrapper">

        {{!-- 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>
+        {{!-- The footer at the very bottom of the screen --}}
+        <footer class="site-footer outer">
+            <div class="site-footer-content inner">
+                <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
+                <nav class="site-footer-nav">
+                    <a href="{{@blog.url}}">Latest Posts</a>
+                    {{#if @blog.facebook}}<a href="{{facebook_url @blog.facebook}}" target="_blank">Facebook</a>{{/if}}
+                    {{#if @blog.twitter}}<a href="{{twitter_url @blog.twitter}}" target="_blank">Twitter</a>{{/if}}
+                    <a href="https://ghost.org" target="_blank">Ghost</a>
+                </nav>
+            </div>
        </footer>

    </div>

-    {{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}}
-    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
-    {{!-- Ghost outputs important scripts and data with this tag --}}
-    {{ghost_foot}}
-    {{!-- Fitvids makes video embeds responsive and awesome --}}
+    {{!-- The big email subscribe modal content --}}
+    {{#if @labs.subscribers}}
+    <div id="subscribe" class="subscribe-overlay">
+        <a class="subscribe-overlay-close" href="#"></a>
+        <div class="subscribe-overlay-content">
+            {{#if @blog.logo}}
+                <img class="subscribe-overlay-logo" src="{{@blog.logo}}" alt="{{@blog.title}}" />
+            {{/if}}
+            <h1 class="subscribe-overlay-title">Subscribe to {{@blog.title}}</h1>
+            <p class="subscribe-overlay-description">Stay up to date! Get all the latest &amp; greatest posts delivered straight to your inbox</p>
+            {{subscribe_form placeholder="youremail@example.com"}}
+        </div>
+    </div>
+    {{/if}}
+
+    {{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
+    <script
+        src="https://code.jquery.com/jquery-3.2.1.min.js"
+        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+        crossorigin="anonymous">
+    </script>
    <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>
+
+    {{#if pagination.pages}}
+    <script>
+        var maxPages = parseInt('{{pagination.pages}}');
+    </script>
+    <script src="{{asset "js/infinitescroll.js"}}"></script>
+    {{/if}}
+
+    {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
+    {{{block "scripts"}}}
+
+    {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
+    {{ghost_foot}}

 </body>
 </html>
--- a/error.hbs
+++ b/error.hbs
@ -0,0 +1,74 @@
+{{!--
+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.
+--}}
+
+<!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>
+
+                {{#if errorDetails}}
+                <section class="error-stack">
+                    <h3>Theme errors</h3>
+                    <ul class="error-stack-list">
+                        {{#each errorDetails}}
+                            <li>
+                                <em class="error-stack-function">{{{rule}}}</em>
+
+                                {{#each failures}}
+                                    <p><span class="error-stack-file">Ref: {{ref}}</span></p>
+                                    <p><span class="error-stack-file">Message: {{message}}</span></p>
+                                {{/each}}
+                            </li>
+                        {{/each}}
+                    </ul>
+                </section>
+                {{/if}}
+
+            </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>
--- a/gulpfile.js
+++ b/gulpfile.js
@ -0,0 +1,54 @@
+var gulp = require('gulp');
+
+// gulp plugins and utils
+var gutil = require('gulp-util');
+var livereload = require('gulp-livereload');
+var nodemon = require('gulp-nodemon');
+var postcss = require('gulp-postcss');
+var sourcemaps = require('gulp-sourcemaps');
+
+// postcss plugins
+var autoprefixer = require('autoprefixer');
+var colorFunction = require('postcss-color-function');
+var cssnano = require('cssnano');
+var customProperties = require('postcss-custom-properties');
+var easyimport = require('postcss-easy-import');
+
+var swallowError = function swallowError(error) {
+    gutil.log(error.toString());
+    gutil.beep();
+    this.emit('end');
+};
+
+var nodemonServerInit = function () {
+    livereload.listen(1234);
+};
+
+gulp.task('build', ['css'], function (/* cb */) {
+    return nodemonServerInit();
+});
+
+gulp.task('css', function () {
+    var processors = [
+        easyimport,
+        customProperties,
+        colorFunction(),
+        autoprefixer({browsers: ['last 2 versions']}),
+        cssnano()
+    ];
+    gulp.src('assets/css/*.css')
+        .on('error', swallowError)
+        .pipe(sourcemaps.init())
+        .pipe(postcss(processors))
+        .pipe(sourcemaps.write('.'))
+        .pipe(gulp.dest('assets/built/'))
+        .pipe(livereload());
+});
+
+gulp.task('watch', function () {
+    gulp.watch('assets/css/**', ['css']);
+});
+
+gulp.task('default', ['build'], function () {
+    gulp.start('watch');
+});
--- a/index.hbs
+++ b/index.hbs
@ -1,27 +1,36 @@
 {{!< 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 --}}
-<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.title}}" /></a>{{/if}}
-        {{#if @blog.navigation}}
-            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
-        {{/if}}
-    </nav>
-    <div class="vertical">
-        <div class="main-header-content inner">
-            <h1 class="page-title">{{@blog.title}}</h1>
-            <h2 class="page-description">{{@blog.description}}</h2>
+{{!-- The big featured header, it uses blog cover image as a BG if available --}}
+<header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
+    <div class="inner">
+        <div class="site-header-content">
+            <h1 class="site-title">
+                {{#if @blog.logo}}
+                    <img class="site-logo" src="{{@blog.logo}}" alt="{{@blog.title}}" />
+                {{else}}
+                    {{@blog.title}}
+                {{/if}}
+            </h1>
+            <h2 class="site-description">{{@blog.description}}</h2>
        </div>
+        {{> "site-nav"}}
    </div>
-    <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 --}}
-<main id="content" class="content" role="main">
+{{!-- The main content area --}}
+<main id="site-main" class="site-main outer" role="main">
+    <div class="inner">

-    {{!-- The tag below includes the post loop - partials/loop.hbs --}}
-    {{> "loop"}}
+        <div class="post-feed">
+            {{#foreach posts}}

+                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+                {{> "post-card"}}
+
+            {{/foreach}}
+        </div>
+
+    </div>
 </main>
--- a/package.json
+++ b/package.json
@ -1,11 +1,10 @@
 {
    "name": "casper",
    "description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
-    "homepage": "http://github.com/TryGhost/Casper",
    "demo": "https://demo.ghost.io",
-    "version": "1.3.2",
+    "version": "2.0.0",
    "engines": {
-        "ghost": "^0.9.0"
+        "ghost": ">=1.0.0"
    },
    "license": "MIT",
    "screenshots": {
@ -21,7 +20,7 @@
        "type": "theme",
        "categories": [
            "Minimal",
-            "Personal Blogs"
+            "Magazine"
        ]
    },
    "keywords": [
@ -30,8 +29,25 @@
    ],
    "repository": {
        "type": "git",
-        "url": "git://github.com/TryGhost/Casper.git"
+        "url": "https://github.com/TryGhost/Casper.git"
    },
    "bugs": "https://github.com/TryGhost/Casper/issues",
-    "contributors": "https://github.com/TryGhost/Casper/graphs/contributors"
+    "contributors": "https://github.com/TryGhost/Casper/graphs/contributors",
+    "devDependencies": {
+        "autoprefixer": "6.3.6",
+        "cssnano": "3.7.1",
+        "gulp": "3.9.1",
+        "gulp-livereload": "3.8.1",
+        "gulp-nodemon": "2.1.0",
+        "gulp-postcss": "6.1.1",
+        "gulp-sourcemaps": "1.6.0",
+        "gulp-util": "3.0.7",
+        "gulp-watch": "4.3.8",
+        "postcss-color-function": "2.0.1",
+        "postcss-custom-properties": "5.0.1",
+        "postcss-easy-import": "1.0.1"
+    },
+    "config": {
+        "posts_per_page": 25
+    }
 }
--- a/page.hbs
+++ b/page.hbs
@ -1,31 +1,48 @@
 {{!< default}}
+{{!-- The tag above means: insert everything in this file
+into the {body} of the default.hbs template --}}

-{{!-- 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 --}}
-{{#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.title}}" /></a>{{/if}}
-        {{#if @blog.navigation}}
-            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
-        {{/if}}
-    </nav>
+{{!-- The big featured header, it uses blog cover image as a BG if available --}}
+<header class="site-header outer">
+    <div class="inner">
+        {{> "site-nav"}}
+    </div>
 </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>
-        </header>
+<main id="site-main" class="site-main outer" role="main">
+    <div class="inner">

-        <section class="post-content">
-            {{content}}
-        </section>
+        <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">

-    </article>
+            <header class="post-full-header">
+                <h1 class="post-full-title">{{title}}</h1>
+            </header>
+
+            {{#if feature_image}}
+            <figure class="post-full-image" style="background-image: url({{feature_image}})">
+            </figure>
+            {{/if}}
+
+            <section class="post-full-content">
+                {{content}}
+            </section>
+
+        </article>
+
+    </div>
 </main>
+
 {{/post}}
+
+{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
+{{#contentFor "scripts"}}
+<script>
+$(function() {
+    var $postContent = $(".post-full-content");
+    $postContent.fitVids();
+});
+</script>
+{{/contentFor}}
--- a/partials/floating-header.hbs
+++ b/partials/floating-header.hbs
@ -0,0 +1,28 @@
+<div class="floating-header">
+    <div class="floating-header-logo">
+        <a href="{{@blog.url}}">
+            {{#if @blog.icon}}
+                <img src="{{@blog.icon}}" alt="{{@blog.title}} icon" />
+            {{/if}}
+            <span>{{@blog.title}}</span>
+        </a>
+    </div>
+    <span class="floating-header-divider">&mdash;</span>
+    <div class="floating-header-title">{{title}}</div>
+    <div class="floating-header-share">
+        <div class="floating-header-share-label">Share this {{> "icons/point"}}</div>
+        <a class="floating-header-share-tw" href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}"
+            onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;">
+            {{> "icons/twitter"}}
+        </a>
+        <a class="floating-header-share-fb" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
+            onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
+            {{> "icons/facebook"}}
+        </a>
+    </div>
+    <progress class="progress" value="0">
+        <div class="progress-container">
+            <span class="progress-bar"></span>
+        </div>
+    </progress>
+</div>
--- a/partials/icons/facebook.hbs
+++ b/partials/icons/facebook.hbs
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"/></svg>
--- a/partials/icons/ghost-logo.hbs
+++ b/partials/icons/ghost-logo.hbs
@ -0,0 +1 @@
+<svg class="ghost-svg" viewBox="0 0 493 161" xmlns="http://www.w3.org/2000/svg"><title>Ghost Logo</title><g fill="none" fill-rule="evenodd"><path d="M328.52 37.36c-27.017 0-40.97 19.323-40.97 43.16 0 23.837 13.61 43.162 40.97 43.162s40.968-19.325 40.968-43.163c0-23.84-13.954-43.16-40.97-43.16zm20.438 43.237c-.02 15.328-5.126 27.743-20.44 27.743-15.312 0-20.42-12.414-20.435-27.743v-.078c.016-15.33 5.124-27.74 20.437-27.74 15.312 0 20.42 12.41 20.438 27.74v.07zM207.553 5.19c0-1.103.885-2.124 1.984-2.282 0 0 13.577-1.95 14.784-2.115 1.37-.187 3.19.798 3.19 2.744v44.236c3.23-3.105 6.79-5.608 10.66-7.515 3.88-1.906 8.43-2.86 13.66-2.86 4.53 0 8.53.776 12.03 2.33 3.5 1.55 6.43 3.73 8.77 6.533 2.34 2.81 4.12 6.16 5.33 10.05 1.21 3.9 1.82 8.19 1.82 12.87v51.35c0 1.1-.89 2-2 2h-15.95c-1.1 0-2-.9-2-1.99V69.18c0-5.118-1.17-9.08-3.51-11.888-2.35-2.804-5.86-4.207-10.544-4.207-3.45 0-6.677.79-9.69 2.37-3.02 1.58-5.87 3.73-8.564 6.46v58.617c0 1.102-.894 2-2.002 2h-15.94c-1.11 0-2.005-.895-2.005-2V5.188zm244.007 95.327v-43.68h-13.482c-1.1 0-1.742-.87-1.443-1.916l3-10.49c.262-.9.942-1.87 2.308-2.07l9.597-1.35 3.508-23.49c.163-1.09 1.18-2.1 2.274-2.26 0 0 9.192-1.31 10.963-1.58 1.673-.25 3.19.97 3.19 2.81v24.52h17.565c1.106 0 2.002.9 2.002 2.01v11.82c0 1.11-.89 2.01-2.002 2.01h-17.566v43.08c0 6.02 3.623 8.32 7.095 8.32 2.12 0 5.02-1.14 7.19-2.16 1.34-.62 3.41-.16 3.95 1.73l2.45 8.65c.3 1.07-.25 2.37-1.23 2.86 0 0-7.29 4.37-17.06 4.37-13.73 0-22.33-8.08-22.33-23.16zm-44.584-47.74c-7.084 0-12.657 2.476-12.657 8.433 0 7.44 12.01 9.606 20.23 12.64 5.49 2.027 20.24 5.98 20.24 22.016 0 19.48-16 27.807-33.06 27.807-17.06 0-25.4-5.465-25.4-5.465-.96-.527-1.5-1.822-1.2-2.89 0 0 2.1-7.52 2.64-9.386.48-1.68 2.41-2.27 3.64-1.792 4.39 1.712 12.32 4.092 21.28 4.092 9.07 0 13.46-2.803 13.46-8.777 0-7.95-12.26-10.38-20.36-12.967-5.59-1.78-20.36-5.93-20.36-23.566 0-17.373 15.08-25.524 31.2-25.524 13.64 0 23.5 4.69 23.5 4.69 1.01.427 1.58 1.635 1.28 2.698l-2.658 9.357c-.488 1.74-1.898 2.537-3.666 1.957-3.89-1.277-11.2-3.322-18.15-3.322zm-210.313-15.28c-6.695.775-11.472 3.962-14.562 6.93-6.06-4.81-14.49-7.106-23.94-7.106-18.95 0-33.76 9.26-33.76 29.43 0 11.58 4.88 19.56 12.62 24.26-5.75 2.75-9.57 8.59-9.57 14.34 0 9.61 7.5 12.61 7.5 12.61s-13.11 6.44-13.11 19.32c0 16.49 15.01 23.16 33.34 23.16 26.43 0 44.61-11.04 44.61-31.31 0-12.47-9.44-19.36-30.01-20.18-12.2-.48-20.11-.93-22.07-1.58-2.59-.87-3.86-2.96-3.86-5.28 0-2.55 2.08-4.98 5.35-6.65 2.86.516 5.87.768 8.99.768 18.97 0 33.76-9.223 33.76-29.425 0-4.897-.87-9.15-2.46-12.78 2.79-1.506 8.34-2.25 8.34-2.25 1.09-.17 1.975-1.21 1.974-2.31V40.3c0-1.88-1.59-2.955-3.1-2.78zm-49.13 85.132s9.954.38 19.9.84c11.172.52 14.654 2.96 14.654 8.81 0 7.15-9.71 14.1-23.28 14.1-12.88 0-19.314-4.54-19.314-12.08 0-4.33 2.26-9.18 8.04-11.69zm10.66-40.54c-8.978 0-15.983-4.83-15.983-15.35 0-10.53 7.01-15.35 15.983-15.35 8.974 0 15.984 4.81 15.984 15.34 0 10.53-7.002 15.34-15.984 15.34z" fill="#2D3134"/><g opacity=".6" transform="translate(0 36)" fill="#2E3134"><rect x=".209" y="69.017" width="33.643" height="17.014" rx="4"/><rect x="50.672" y="69.017" width="33.622" height="17.014" rx="4"/><rect x=".184" y="34.99" width="84.121" height="17.014" rx="4"/><rect x=".209" y=".964" width="50.469" height="17.013" rx="4"/><rect x="67.494" y=".964" width="16.821" height="17.013" rx="4"/></g></g></svg>
--- a/partials/icons/infinity.hbs
+++ b/partials/icons/infinity.hbs
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"/></svg>
--- a/partials/icons/location.hbs
+++ b/partials/icons/location.hbs
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M19.5 8c0 4.144-7.5 15.5-7.5 15.5S4.5 12.144 4.5 8C4.5 3.858 7.857.5 12 .5c4.142 0 7.5 3.358 7.5 7.5z"/><circle cx="12" cy="8" r="3"/></svg>
--- a/partials/icons/point.hbs
+++ b/partials/icons/point.hbs
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2"/>
+</svg>
--- a/partials/icons/rss.hbs
+++ b/partials/icons/rss.hbs
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>
--- a/partials/icons/twitter.hbs
+++ b/partials/icons/twitter.hbs
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
--- a/partials/icons/website.hbs
+++ b/partials/icons/website.hbs
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 11.957c0 6.375-5.163 11.544-11.532 11.544C5.599 23.5.5 18.125.5 11.75.5 5.542 5.37.758 11.505.511l.5-.011C18.374.5 23.5 5.582 23.5 11.957zM11.505.511c-6 6.5-6 14.98 0 22.98m1-22.98c6 6.5 6 14.977 0 22.977M2 17.479h20.063m-19.657-12h19.062m-20.968 6h22.938" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10" fill="none"/></svg>
--- a/partials/loop.hbs
+++ b/partials/loop.hbs
@ -1,25 +0,0 @@
-{{!-- 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 --}}
-{{#foreach posts}}
-<article class="{{post_class}}">
-    <header class="post-header">
-        <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.name}}" nopin="nopin" />{{/if}}
-        {{author}}
-        {{tags prefix=" on "}}
-        <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 --}}
-{{pagination}}
--- a/partials/navigation.hbs
+++ b/partials/navigation.hbs
@ -1,17 +0,0 @@
-<div class="nav">
-    <h3 class="nav-title">Menu</h3>
-    <a href="#" class="nav-close">
-        <span class="hidden">Close</span>
-    </a>
-    <ul>
-        {{#foreach navigation}}
-            <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="presentation"><a href="{{url absolute="true"}}">{{label}}</a></li>
-        {{/foreach}}
-    </ul>
-    {{#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>
--- a/partials/post-card.hbs
+++ b/partials/post-card.hbs
@ -0,0 +1,26 @@
+<article class="post-card {{post_class}}{{#unless feature_image}} no-image{{/unless}}">
+    {{#if feature_image}}
+        <a class="post-card-image-link" href="{{url}}">
+            <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
+        </a>
+    {{/if}}
+    <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}}
+                <h2 class="post-card-title">{{title}}</h2>
+            </header>
+            <section class="post-card-excerpt">
+                <p>{{excerpt words="33"}}</p>
+            </section>
+        </a>
+        <footer class="post-card-meta">
+            {{#if author.profile_image}}
+                <img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" />
+            {{/if}}
+            <span class="post-card-author">{{author}}</span>
+        </footer>
+    </div>
+</article>
--- a/partials/site-nav.hbs
+++ b/partials/site-nav.hbs
@ -0,0 +1,29 @@
+<nav class="site-nav">
+    <div class="site-nav-left">
+        {{^is "home"}}
+            {{#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}}
+        {{/is}}
+        {{#if @blog.navigation}}
+            {{navigation}}
+        {{/if}}
+    </div>
+    <div class="site-nav-right">
+        <div class="social-links">
+            {{#if @blog.facebook}}
+                <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
+            {{/if}}
+            {{#if @blog.twitter}}
+                <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
+            {{/if}}
+        </div>
+        {{#if @labs.subscribers}}
+            <a class="subscribe-button" href="#subscribe">Subscribe</a>
+        {{else}}
+            <a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
+        {{/if}}
+    </div>
+</nav>
--- a/post.hbs
+++ b/post.hbs
@ -1,110 +1,216 @@
 {{!< default}}

-{{!-- The comment above "< default" means - insert everything in this file into
-    the {{{body}}} of the default.hbs template, containing the blog header/footer. --}}
+{{!-- The tag above means: insert everything in this file
+into the {body} of the default.hbs template --}}
+
+<header class="site-header outer">
+    <div class="inner">
+        {{> "site-nav"}}
+    </div>
+</header>

 {{!-- 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.title}}" /></a>{{/if}}
-        {{#if @blog.navigation}}
-            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
-        {{/if}}
-    </nav>
-</header>
+<main id="site-main" class="site-main outer" role="main">
+    <div class="inner">

-<main class="content" role="main">
-    <article class="{{post_class}}">
+        <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">

-        <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 "}}
-            </section>
-        </header>
+            <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}}
+                </section>
+                <h1 class="post-full-title">{{title}}</h1>
+            </header>

-        <section class="post-content">
-            {{content}}
-        </section>
-
-        <footer class="post-footer">
-
-        {{!-- Everything inside the #author tags pulls data from the author --}}
-        {{#author}}
-
-            {{#if image}}
-            <figure class="author-image">
-                <a class="img" href="{{url}}" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></a>
+            {{#if feature_image}}
+            <figure class="post-full-image" style="background-image: url({{feature_image}})">
            </figure>
            {{/if}}

-            <section class="author">
-                <h4><a href="{{url}}">{{name}}</a></h4>
-
-                {{#if bio}}
-                    <p>{{bio}}</p>
-                {{else}}
-                    <p>Read <a href="{{url}}">more posts</a> by this author.</p>
-                {{/if}}
-                <div class="author-meta">
-                    {{#if location}}<span class="author-location icon-location">{{location}}</span>{{/if}}
-                    {{#if website}}<span class="author-link icon-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
-                </div>
-            </section>
-
-        {{/author}}
-
-            <section class="share">
-                <h4>Share this post</h4>
-                <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>
-                <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
-                    onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
-                    <span class="hidden">Facebook</span>
-                </a>
-                <a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}"
-                   onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
-                    <span class="hidden">Google+</span>
-                </a>
+            <section class="post-full-content">
+                {{content}}
            </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 class="subscribe-form">
+                <h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
+                <p>Get the latest posts delivered right to your inbox</p>
+                {{subscribe_form placeholder="youremail@example.com"}}
            </section>
            {{/if}}

-        </footer>
+            <footer class="post-full-footer">
+                {{!-- Everything inside the #author tags pulls data from the author --}}
+                {{#author}}

-    </article>
+                <section class="author-card">
+                    {{#if profile_image}}
+                        <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
+                    {{/if}}
+                    <section class="author-card-content">
+                        <h4 class="author-card-name"><a href="{{url}}">{{name}}</a></h4>
+                        {{#if bio}}
+                            <p>{{bio}}</p>
+                        {{else}}
+                            <p>Read <a href="{{url}}">more posts</a> by this author.</p>
+                        {{/if}}
+                    </section>
+                </section>
+                <div class="post-full-footer-right">
+                    <a class="author-card-button" href="{{url}}">Read More</a>
+                </div>
+
+                {{/author}}
+            </footer>
+
+            {{!--
+
+            If you use Disqus comments, just uncomment this block.
+            The only thing you need to change is "test-apkdzgmqhj" - which
+            should be replaced with your own Disqus site-id.
+
+            <section class="post-full-comments">
+                <div id="disqus_thread"></div>
+                <script>
+                    var disqus_config = function () {
+                        this.page.url = '{{url absolute="true"}}';
+                        this.page.identifier = 'ghost-{{id}}';
+                    };
+                    (function() {
+                        var d = document, s = d.createElement('script');
+                        s.src = 'https://test-apkdzgmqhj.disqus.com/embed.js';
+                        s.setAttribute('data-timestamp', +new Date());
+                        (d.head || d.body).appendChild(s);
+                    })();
+                </script>
+            </section>
+            --}}
+
+        </article>
+
+    </div>
 </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}}">
-        <section class="post">
-            <h2>{{title}}</h2>
-            <p>{{excerpt words="19"}}&hellip;</p>
-        </section>
-    </a>
-    {{/next_post}}
-    {{#prev_post}}
-    <a class="read-next-story prev {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
-        <section class="post">
-            <h2>{{title}}</h2>
-            <p>{{excerpt words="19"}}&hellip;</p>
-        </section>
-    </a>
-    {{/prev_post}}
+<aside class="read-next outer">
+    <div class="inner">
+        <div class="read-next-feed">
+
+            {{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}}
+                <article class="read-next-card"
+                    {{#if ../tags.[0].feature_image}}
+                        style="background-image: url({{../tags.[0].feature_image}})"
+                    {{else}}
+                        {{#if @blog.cover_image}}
+                            style="background-image: url({{@blog.cover_image}})"{{/if}}
+                    {{/if}}
+                >
+                    <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>
+                    </header>
+                    <div class="read-next-divider">{{> "icons/infinity"}}</div>
+                    <div class="read-next-card-content">
+                        <ul>
+                            {{#foreach posts}}
+                            <li><a href="{{url}}">{{title}}</a></li>
+                            {{/foreach}}
+                        </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>
+                    </footer>
+                </article>
+            {{/get}}
+
+            {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
+            {{#next_post}}
+                {{> "post-card"}}
+            {{/next_post}}
+
+            {{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
+            {{#prev_post}}
+                {{> "post-card"}}
+            {{/prev_post}}
+
+        </div>
+    </div>
 </aside>

+{{!-- Floating header which appears on-scroll, included from includes/floating-header.hbs --}}
+{{> floating-header}}
+
 {{/post}}
+
+{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
+{{#contentFor "scripts"}}
+<script>
+
+// NOTE: Scroll performance is poor in Safari
+// - this appears to be due to the events firing much more slowly in Safari.
+//   Dropping the scroll event and using only a raf loop results in smoother
+//   scrolling but continuous processing even when not scrolling
+$(document).ready(function () {
+    // Start fitVids
+    var $postContent = $(".post-full-content");
+    $postContent.fitVids();
+    // End fitVids
+
+    var progressBar = document.querySelector('progress');
+    var header = document.querySelector('.floating-header');
+    var title = document.querySelector('.post-full-title');
+
+    var lastScrollY = window.scrollY;
+    var lastWindowHeight = window.innerHeight;
+    var lastDocumentHeight = $(document).height();
+    var ticking = false;
+
+    function onScroll() {
+        lastScrollY = window.scrollY;
+        requestTick();
+    }
+
+    function onResize() {
+        lastWindowHeight = window.innerHeight;
+        lastDocumentHeight = $(document).height();
+        requestTick();
+    }
+
+    function requestTick() {
+        if (!ticking) {
+            requestAnimationFrame(update);
+        }
+        ticking = true;
+    }
+
+    function update() {
+        var trigger = title.getBoundingClientRect().top + window.scrollY;
+        var triggerOffset = title.offsetHeight + 35;
+        var progressMax = lastDocumentHeight - lastWindowHeight;
+
+        // show/hide floating header
+        if (lastScrollY >= trigger + triggerOffset) {
+            header.classList.add('floating-active');
+        } else {
+            header.classList.remove('floating-active');
+        }
+
+        progressBar.setAttribute('max', progressMax);
+        progressBar.setAttribute('value', lastScrollY);
+
+        ticking = false;
+    }
+
+    window.addEventListener('scroll', onScroll, {passive: true});
+    window.addEventListener('resize', onResize, false);
+
+    update();
+});
+</script>
+{{/contentFor}}
--- a/tag.hbs
+++ b/tag.hbs
@ -1,34 +1,33 @@
 {{!< default}}
 {{!-- 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 --}}
-<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.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">{{name}}</h1>
-            <h2 class="page-description">
+{{!-- The big featured header, it uses blog cover image as a BG if available --}}
+{{#tag}}
+<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
+    <div class="inner">
+        {{> "site-nav"}}
+        <div class="site-header-content">
+            <h1 class="site-title">{{name}}</h1>
+            <h2 class="site-description">
                {{#if description}}
                    {{description}}
                {{else}}
-                    A {{../pagination.total}}-post collection
+                    A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
                {{/if}}
            </h2>
        </div>
-        {{/tag}}
    </div>
 </header>
+{{/tag}}

-{{!-- The main content area on the homepage --}}
-<main class="content" role="main">
-
-    {{!-- The tag below includes the post loop - partials/loop.hbs --}}
-    {{> "loop"}}
-
+{{!-- The main content area --}}
+<main id="site-main" class="site-main outer" role="main">
+    <div class="inner">
+        <div class="post-feed">
+            {{#foreach posts}}
+                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+                {{> "post-card"}}
+            {{/foreach}}
+        </div>
+    </div>
 </main>
Author	SHA1	Message	Date
John O'Nolan	6c5d6af6d0	Fix post images overflowing viewport on mobile See #322	2017-07-20 17:27:02 +04:00
David Wolfe	9aa6ff1716	Merge pull request #327 from AileenCGN/1.0.0/infinite-scroll-fix 🎣 Infinite scroll: no API request on last page	2017-07-11 09:26:21 +01:00
David Wolfe	551aeb3ca5	Merge pull request #326 from AileenCGN/1.0.0-dev/delete-unused-share-partial 🔥 Delete unused partial `share.hbs`	2017-07-11 09:01:16 +01:00
Aileen Nowak	8690450eae	🎣 Infinite scroll: no API request on last page no issue Brings back a little safety guard: when the current page is also the last page, don't make an API request to the server.	2017-07-11 12:32:58 +07:00
Aileen Nowak	2fdfc5285d	🔥 Delete unused partial `share.hbs` no issue Partial is not used in Casper!	2017-07-11 09:49:53 +07:00
Kevin Ansfield	0f9410fb3d	💄 refactor infinite scroll (#325 ) closes #321, closes #323 - use `requestAnimationFrame` and related techniques to minimise scroll processing - add an `isLoading` guard to ensure we don't try to process anything until the next page has been loaded+inserted - check for a 404 as an indication we've loaded as many pages as possible at which point the scroll behaviour is removed - sanitize `window.location.pathname` to remove hash params and any double-slashes that may result - add a 100px buffer from the bottom of the screen so that it's not necessary to exactly hit the bottom before infinite loading is triggered	2017-07-10 19:53:42 +07:00
汪磊	d3a9af0666	Remove infinitescroll in single page (#319 ) * Remove infinitescroll in single page * Update infinitescroll.js	2017-06-27 18:03:51 +07:00
John O'Nolan	96ffcdceed	😒😒😒😒😒😒😒😒	2017-06-27 11:30:11 +02:00
John O'Nolan	aa80667232	Fix small images in content + minor typography improvements Closes #320	2017-06-27 11:28:36 +02:00
Aileen Nowak	0914d43a86	💄 Infinite scroll (#316 ) * 💄 Infinite scroll closes #314 Adds infinite scroll logic to Casper 2.0 * use jquery min and not slim	2017-06-21 13:10:09 +01:00
Aileen Nowak	d6d9711b9d	⛓ Fix broken tag link on post.hbs (#315 ) no issue Top link for tag was missing a `/`.	2017-06-20 08:55:16 +01:00
John O'Nolan	2ca409032a	Full responsive table styles - This took 5 hours - FUUUUUU	2017-06-19 23:03:56 +01:00
John O'Nolan	902b6dcdbc	Clean up trailing slashes See https://github.com/TryGhost/Ghost/issues/8569	2017-06-19 14:54:03 +01:00
John O'Nolan	6f441794e4	Fix readme typo	2017-06-19 14:38:07 +01:00
Kevin Ansfield	c97defd40a	Refactor post.hbs JS	2017-06-19 00:11:32 +01:00
John O'Nolan	397a096949	Rejig asset compilation destination Avoid using "public" because it's a reserved word by the asset helper	2017-06-16 13:23:03 +01:00
John O'Nolan	4b6905f175	Mobile support 📱	2017-06-16 13:16:22 +01:00
John O'Nolan	535ead65e7	DOCS	2017-06-16 10:44:06 +01:00
John O'Nolan	b7a788f973	Clean up build tasks	2017-06-16 10:13:38 +01:00
John O'Nolan	1214676bd5	CSS Comb 💇🏻	2017-06-16 09:44:12 +01:00
John O'Nolan	0791b0fdb7	Organise CSS	2017-06-16 09:17:11 +01:00
John O'Nolan	67f27e2add	New subscribe overlay	2017-06-15 15:03:19 +01:00
John O'Nolan	9f7c0e30e2	Scroll progress bar	2017-06-14 12:16:16 +01:00
John O'Nolan	eb84edae6d	Fix all the fucking bugs that I created yesterday	2017-06-14 10:41:30 +01:00
John O'Nolan	834d14b204	Allow linebreaks in bio	2017-06-14 10:29:17 +01:00
John O'Nolan	19a8b85aac	Minor cleanup	2017-06-13 19:07:26 +01:00
John O'Nolan	eeb8b248ca	Refactor site navigation	2017-06-13 19:02:22 +01:00
John O'Nolan	7f4d581caf	Restyle read-next card	2017-06-13 18:51:08 +01:00
John O'Nolan	655c35b53c	New error template and author template	2017-06-13 13:48:06 +01:00
John O'Nolan	55f35da8e9	Whatever pass I lost count	2017-06-12 10:01:00 +01:00
John O'Nolan	d55446f2ca	Next pass 2.0	2017-06-08 09:19:22 +02:00
John O'Nolan	938eaaf7a6	Third pass 2.0	2017-06-05 12:19:29 +01:00
John O'Nolan	bc9e5a0b2e	Second pass 2.0	2017-05-31 19:09:50 +01:00
John O'Nolan	ad9cb81a06	Many tweaks	2017-05-16 10:26:08 +01:00
John O'Nolan	eda0ec4db2	First pass 2.0 design	2017-05-15 21:03:47 +01:00
kirrg001	26a25208e1	Upgrading Casper to 1.3.6	2017-03-01 13:47:57 +01:00
Humeira	805925528c	move font above css include (#279 )	2017-02-24 12:23:02 +07:00
John O'Nolan	68e48cfb04	Remove role attributes intended for tabbed navigation Closes #285	2017-02-23 13:25:47 +07:00
kirrg001	c578765491	Upgrading Casper to 1.3.5	2017-01-12 12:41:55 +01:00
John O'Nolan	ba5d559d8c	2017	2017-01-04 10:53:34 +00:00
Hannah Wolfe	b06c57f1e1	Upgrading Casper to 1.3.4	2016-10-24 16:51:12 +01:00
Hannah Wolfe	99ff118174	Merge pull request #274 from eibt/patch-1 Use protocol-relative URL for jQuery script	2016-10-24 14:35:22 +01:00
Jeroen	054cd87653	No margin-bottom for last p inside li tags (#262 ) Fixes #241.	2016-10-24 20:17:30 +07:00
Matthias	5060c945e6	Fixed page title and description being visible before fading in (#268 )	2016-10-24 20:15:01 +07:00
Aileen Nowak	d07d6dee09	🐛 Fix `.post-title` (#273 ) no issue fixes the post-title font-size again, as it didn't work with two body:notstatements.	2016-10-24 20:11:49 +07:00
Mr. Ivan	0d8228ff05	Use protocol-relative URL for jQuery script Use protocol-relative URL in the script element that includes jQuery to improve availability and consistency as it's being used for Google Fonts too.	2016-10-13 17:03:11 -06:00
Hannah Wolfe	27270d3de3	Upgrading Casper to 1.3.3	2016-10-07 16:08:38 +01:00
Hannah Wolfe	09476487f0	🐛 Fixing package.json engines & repo URL no issue - semver caret ranges don't apply pre-1.0.0, therefore we need to use a more explicit range - repo URL should be a valid url	2016-10-07 16:05:10 +01:00
Hannah Wolfe	d2d796241b	🎨 Removing `homepage` from package.json no issue - this is not going to be a required field, and for Casper is the same as the repo	2016-10-07 15:56:54 +01:00
Aileen Nowak	c1b77b74cb	Remove old body classes (#272 ) refs TryGhost/Ghost#2597 Make Casper work without old body classes `.archive-template`, `.page` and use `.page-template` only for pages, as `.post-template` will not be available for pages anymore.	2016-10-07 14:02:00 +02:00
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"/></svg>`
				`@ -0,0 +1 @@`
				<svg class="ghost-svg" viewBox="0 0 493 161" xmlns="http://www.w3.org/2000/svg"><title>Ghost Logo</title><g fill="none" fill-rule="evenodd"><path d="M328.52 37.36c-27.017 0-40.97 19.323-40.97 43.16 0 23.837 13.61 43.162 40.97 43.162s40.968-19.325 40.968-43.163c0-23.84-13.954-43.16-40.97-43.16zm20.438 43.237c-.02 15.328-5.126 27.743-20.44 27.743-15.312 0-20.42-12.414-20.435-27.743v-.078c.016-15.33 5.124-27.74 20.437-27.74 15.312 0 20.42 12.41 20.438 27.74v.07zM207.553 5.19c0-1.103.885-2.124 1.984-2.282 0 0 13.577-1.95 14.784-2.115 1.37-.187 3.19.798 3.19 2.744v44.236c3.23-3.105 6.79-5.608 10.66-7.515 3.88-1.906 8.43-2.86 13.66-2.86 4.53 0 8.53.776 12.03 2.33 3.5 1.55 6.43 3.73 8.77 6.533 2.34 2.81 4.12 6.16 5.33 10.05 1.21 3.9 1.82 8.19 1.82 12.87v51.35c0 1.1-.89 2-2 2h-15.95c-1.1 0-2-.9-2-1.99V69.18c0-5.118-1.17-9.08-3.51-11.888-2.35-2.804-5.86-4.207-10.544-4.207-3.45 0-6.677.79-9.69 2.37-3.02 1.58-5.87 3.73-8.564 6.46v58.617c0 1.102-.894 2-2.002 2h-15.94c-1.11 0-2.005-.895-2.005-2V5.188zm244.007 95.327v-43.68h-13.482c-1.1 0-1.742-.87-1.443-1.916l3-10.49c.262-.9.942-1.87 2.308-2.07l9.597-1.35 3.508-23.49c.163-1.09 1.18-2.1 2.274-2.26 0 0 9.192-1.31 10.963-1.58 1.673-.25 3.19.97 3.19 2.81v24.52h17.565c1.106 0 2.002.9 2.002 2.01v11.82c0 1.11-.89 2.01-2.002 2.01h-17.566v43.08c0 6.02 3.623 8.32 7.095 8.32 2.12 0 5.02-1.14 7.19-2.16 1.34-.62 3.41-.16 3.95 1.73l2.45 8.65c.3 1.07-.25 2.37-1.23 2.86 0 0-7.29 4.37-17.06 4.37-13.73 0-22.33-8.08-22.33-23.16zm-44.584-47.74c-7.084 0-12.657 2.476-12.657 8.433 0 7.44 12.01 9.606 20.23 12.64 5.49 2.027 20.24 5.98 20.24 22.016 0 19.48-16 27.807-33.06 27.807-17.06 0-25.4-5.465-25.4-5.465-.96-.527-1.5-1.822-1.2-2.89 0 0 2.1-7.52 2.64-9.386.48-1.68 2.41-2.27 3.64-1.792 4.39 1.712 12.32 4.092 21.28 4.092 9.07 0 13.46-2.803 13.46-8.777 0-7.95-12.26-10.38-20.36-12.967-5.59-1.78-20.36-5.93-20.36-23.566 0-17.373 15.08-25.524 31.2-25.524 13.64 0 23.5 4.69 23.5 4.69 1.01.427 1.58 1.635 1.28 2.698l-2.658 9.357c-.488 1.74-1.898 2.537-3.666 1.957-3.89-1.277-11.2-3.322-18.15-3.322zm-210.313-15.28c-6.695.775-11.472 3.962-14.562 6.93-6.06-4.81-14.49-7.106-23.94-7.106-18.95 0-33.76 9.26-33.76 29.43 0 11.58 4.88 19.56 12.62 24.26-5.75 2.75-9.57 8.59-9.57 14.34 0 9.61 7.5 12.61 7.5 12.61s-13.11 6.44-13.11 19.32c0 16.49 15.01 23.16 33.34 23.16 26.43 0 44.61-11.04 44.61-31.31 0-12.47-9.44-19.36-30.01-20.18-12.2-.48-20.11-.93-22.07-1.58-2.59-.87-3.86-2.96-3.86-5.28 0-2.55 2.08-4.98 5.35-6.65 2.86.516 5.87.768 8.99.768 18.97 0 33.76-9.223 33.76-29.425 0-4.897-.87-9.15-2.46-12.78 2.79-1.506 8.34-2.25 8.34-2.25 1.09-.17 1.975-1.21 1.974-2.31V40.3c0-1.88-1.59-2.955-3.1-2.78zm-49.13 85.132s9.954.38 19.9.84c11.172.52 14.654 2.96 14.654 8.81 0 7.15-9.71 14.1-23.28 14.1-12.88 0-19.314-4.54-19.314-12.08 0-4.33 2.26-9.18 8.04-11.69zm10.66-40.54c-8.978 0-15.983-4.83-15.983-15.35 0-10.53 7.01-15.35 15.983-15.35 8.974 0 15.984 4.81 15.984 15.34 0 10.53-7.002 15.34-15.984 15.34z" fill="#2D3134"/><g opacity=".6" transform="translate(0 36)" fill="#2E3134"><rect x=".209" y="69.017" width="33.643" height="17.014" rx="4"/><rect x="50.672" y="69.017" width="33.622" height="17.014" rx="4"/><rect x=".184" y="34.99" width="84.121" height="17.014" rx="4"/><rect x=".209" y=".964" width="50.469" height="17.013" rx="4"/><rect x="67.494" y=".964" width="16.821" height="17.013" rx="4"/></g></g></svg>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>