Upgrading Casper to 2.7.0

no issue

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+sudo: false
+node_js:
+  - "8"
+
+

README.md

@@ -32,7 +32,7 @@ One really neat trick is that you can also create custom one-off templates just
 
 # 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:
+Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:
 
 ```bash
 $ yarn install

assets/built/infinitescroll.js

@@ -0,0 +1,2 @@
+$(function(t){var o=1,r=window.location.pathname,a=t(document),s=t(".post-feed"),c=300,l=!1,w=!1,d=window.scrollY,v=window.innerHeight,u=a.height();function f(){d=window.scrollY,e()}function g(){v=window.innerHeight,u=a.height(),e()}function e(){l||requestAnimationFrame(n),l=!0}function n(){var e,n;if(n=/(?:page\/)(\d)(?:\/)$/i,(e=(e=r).replace(/#(.*)$/g,"").replace("////g","/")).match(n)&&(o=parseInt(e.match(n)[1]),e=e.replace(n,"")),r=e,!w)if(d+v<=u-c)l=!1;else{if(o>=maxPages)return window.removeEventListener("scroll",f,{passive:!0}),void window.removeEventListener("resize",g);w=!0;var i=r+"page/"+(o+=1)+"/";t.get(i,function(e){var n=document.createRange().createContextualFragment(e).querySelectorAll(".post");n.length&&[].forEach.call(n,function(e){s[0].appendChild(e)})}).fail(function(e){404===e.status&&(window.removeEventListener("scroll",f,{passive:!0}),window.removeEventListener("resize",g))}).always(function(){u=a.height(),l=w=!1})}}window.addEventListener("scroll",f,{passive:!0}),window.addEventListener("resize",g),n()});
+//# sourceMappingURL=infinitescroll.js.map

assets/built/jquery.fitvids.js

@@ -0,0 +1,2 @@
+!function(d){"use strict";d.fn.fitVids=function(t){var i={customSelector:null,ignore:null};if(!document.getElementById("fit-vids-style")){var e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("div");r.innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.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%;}</style>',e.appendChild(r.childNodes[1])}return t&&d.extend(i,t),this.each(function(){var t=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];i.customSelector&&t.push(i.customSelector);var r=".fitvidsignore";i.ignore&&(r=r+", "+i.ignore);var e=d(this).find(t.join(","));(e=(e=e.not("object object")).not(r)).each(function(){var t=d(this);if(!(0<t.parents(r).length||"embed"===this.tagName.toLowerCase()&&t.parent("object").length||t.parent(".fluid-width-video-wrapper").length)){t.css("height")||t.css("width")||!isNaN(t.attr("height"))&&!isNaN(t.attr("width"))||(t.attr("height",9),t.attr("width",16));var e=("object"===this.tagName.toLowerCase()||t.attr("height")&&!isNaN(parseInt(t.attr("height"),10))?parseInt(t.attr("height"),10):t.height())/(isNaN(parseInt(t.attr("width"),10))?t.width():parseInt(t.attr("width"),10));if(!t.attr("name")){var i="fitvid"+d.fn.fitVids._count;t.attr("name",i),d.fn.fitVids._count++}t.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*e+"%"),t.removeAttr("height").removeAttr("width")}})})},d.fn.fitVids._count=0}(window.jQuery||window.Zepto);
+//# sourceMappingURL=jquery.fitvids.js.map

assets/css/screen.css

@@ -13,9 +13,12 @@ production stylesheet in assets/built/screen.css
 7.  Single Post
   7.1. Subscribe Form
   7.2. Post Footer
+     7.2.1 Single Author Byline
+     7.2.2 Multiple Author Byline
   7.3. Comments
   7.4. Related Posts
   7.5. Floating Header
+  7.6. Koenig Styles
 8.  Author Template
 9.  Error Template
 10. Subscribe Overlay
@@ -455,38 +458,16 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 .post-card-meta {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-end;
     padding: 0 25px 25px;
 }
 
-.profile-image-wrapper,
+.author-profile-image,
 .avatar-wrapper {
-    position: absolute;
-    display: inline-block;
-    width: 28px;
-}
-
-.avatar-wrapper {
-    display: inline-block;
-    box-sizing: content-box;
-    margin-right: 3px;
-    border: 2px solid #fff;
-    text-align: center;
-    background-color: color(var(--lightgrey) l(+10%));
-    border-radius: 100%;
-}
-
-.avatar-wrapper svg {
-    width: 28px;
-    height: 28px;
-}
-
-.author-profile-image {
-    box-sizing: content-box;
-    margin-right: 5px;
-    width: 28px;
-    height: 28px;
-    border: 2px solid #fff;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: color(var(--lightgrey) l(+10%));
     border-radius: 100%;
 
     object-fit: cover;
@@ -499,75 +480,81 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 
 .author-list {
     display: flex;
-    margin-bottom: 0;
+    flex-wrap: wrap-reverse;
+    margin: 0;
     padding: 0;
-    max-width: calc(100% - 120px);
-    list-style-type: none;
+    list-style: none;
 }
 
 .author-list-item {
     position: relative;
+    flex-shrink: 0;
     margin: 0;
     padding: 0;
-    width: 25px;
 }
 
-.moving-avatar {
-    transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-    transform: translate(0px);
+.author-list-item:nth-child(1) {
+    z-index: 10;
 }
-
-.moving-avatar.right {
-    transform: translateX(10px);
-}
-
-.moving-avatar.left {
-    transform: translateX(-10px);
-}
-
-.author-list-item:nth-child( 1 ) {
+.author-list-item:nth-child(2) {
     z-index: 9;
 }
-
-.author-list-item:nth-child( 2 ) {
+.author-list-item:nth-child(3) {
     z-index: 8;
 }
-
-.author-list-item:nth-child( 3 ) {
+.author-list-item:nth-child(4) {
     z-index: 7;
 }
-
-.author-list-item:nth-child( 4 ) {
+.author-list-item:nth-child(5) {
     z-index: 6;
 }
-
-.author-list-item:nth-child( 5 ) {
+.author-list-item:nth-child(6) {
     z-index: 5;
 }
-
-.author-list-item:nth-child( 6 ) {
+.author-list-item:nth-child(7) {
     z-index: 4;
 }
-
-.author-list-item:nth-child( 7 ) {
+.author-list-item:nth-child(8) {
     z-index: 3;
 }
-
-.author-list-item:nth-child( 8 ) {
+.author-list-item:nth-child(9) {
     z-index: 2;
 }
-
-.author-list-item:nth-child( 9 ) {
+.author-list-item:nth-child(10) {
     z-index: 1;
 }
 
-.z-999 {
-    z-index: 999;
+.static-avatar {
+    display: block;
+    overflow: hidden;
+    margin: 0 -5px;
+    width: 34px;
+    height: 34px;
+    border: #fff 2px solid;
+    border-radius: 100%;
+}
+
+.moving-avatar {
+    display: block;
+    overflow: hidden;
+    margin: 0 -6px;
+    width: 56px;
+    height: 56px;
+    border: #fff 2px solid;
+    border-radius: 100%;
+    transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s;
+}
+
+@media (min-width: 800px) {
+    .author-list:hover .moving-avatar {
+        margin: 0;
+        transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+    }
 }
 
 .author-name-tooltip {
     position: absolute;
-    bottom: 36px;
+    bottom: 105%;
     z-index: 999;
     display: block;
     padding: 2px 8px;
@@ -596,8 +583,11 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 }
 
 .reading-time {
+    flex-shrink: 0;
+    margin-left: 20px;
     color: var(--midgrey);
     font-size: 1.2rem;
+    line-height: 33px;
     font-weight: 500;
     letter-spacing: 0.5px;
     text-transform: uppercase;
@@ -798,13 +788,6 @@ The first (most recent) post in the list is styled to be bigger than the others
     display: none;
 }
 
-.kg-card-markdown {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 920px;
-}
-
 .post-full-content h1,
 .post-full-content h2,
 .post-full-content h3,
@@ -830,13 +813,9 @@ The first (most recent) post in the list is styled to be bigger than the others
     margin: 0;
 }
 
-.post-template .kg-card-markdown > p:first-child {
-    font-size: 1.25em;
-    line-height: 1.5em;
-}
-
 .post-full-content a {
     color: #000;
+    word-break: break-word;
     box-shadow: var(--blue) 0 -1px 0 inset;
 }
 
@@ -864,6 +843,7 @@ The first (most recent) post in the list is styled to be bigger than the others
     display: block;
     margin: 1.5em auto;
     max-width: 1040px;
+    height: auto;
 }
 @media (max-width: 1040px) {
     .post-full-content img,
@@ -899,11 +879,13 @@ Usage (In Ghost editor):
     display: block;
     margin-top: -3em;
     margin-bottom: 1.5em;
+    text-align: center;
 }
 
 
+/* Override third party iframe styles */
 .post-full-content iframe {
-    margin: 0 auto;
+    margin: 0 auto !important;
 }
 
 .post-full-content blockquote {
@@ -933,6 +915,10 @@ Usage (In Ghost editor):
     border-radius: 3px;
 }
 
+.post-full-content p code {
+    word-break: break-all;
+}
+
 .post-full-content pre {
     overflow-x: auto;
     margin: 1.5em 0 3em;
@@ -953,7 +939,7 @@ Usage (In Ghost editor):
     background: transparent;
 }
 
-.post-full-content pre code * {
+.post-full-content pre code :not(span) {
     color: inherit;
 }
 
@@ -1289,13 +1275,22 @@ Usage (In Ghost editor):
     max-width: 840px;
 }
 
+/* 7.2.1 Single Author Byline
+/* ---------------------------------------------------------- */
+
 .author-card {
     display: flex;
-    align-items: center;
+}
+
+.author-card .author-profile-image,
+.author-card .avatar-wrapper {
+    margin-right: 15px;
+    width: 60px;
+    height: 60px;
 }
 
 .author-card-name {
-    margin: 0 0 2px 0;
+    margin: 8px 0 2px 0;
     padding: 0;
     font-size: 2rem;
 }
@@ -1338,6 +1333,9 @@ Usage (In Ghost editor):
     text-decoration: none;
 }
 
+/* 7.2.2 Multiple Author Byline
+/* ---------------------------------------------------------- */
+
 .post-full-authors {
     flex-grow: 1;
     display: flex;
@@ -1369,46 +1367,24 @@ Usage (In Ghost editor):
     text-transform: uppercase;
 }
 
-.post-full-footer .author-list-item {
-    width: 42px;
-}
-
-@media (max-width: 650px) {
-    .post-full-footer .author-list-item {
-        width: 54px;
-        height: 54px;
-    }
-}
-
-.post-full-footer .author-list-item > a {
-    position: absolute;
-    display: inline-block;
-    width: 48px;
-}
-
-.post-full-footer .author-profile-image,
-.post-full-footer .avatar-wrapper {
-    width: 48px;
-    height: 48px;
+.post-full-footer .author-list {
+    justify-content: center;
+    padding: 10px 20px;
 }
 
 .author-card .author-profile-image,
 .author-card .avatar-wrapper {
-    margin-right: 15px;
     position: relative;
-}
-
-.post-full-footer .avatar-wrapper svg {
-    width: 46px;
-    height: 46px;
+    margin-right: 15px;
 }
 
 .author-list-item .author-card {
     position: absolute;
-    bottom: 12px;
-    left: calc(-160px + 28px);
-    z-index: 999;
+    bottom: 130%;
+    left: 50%;
+    z-index: 300;
     display: block;
+    margin-left: -160px;
     width: 320px;
     font-size: 1.4rem;
     letter-spacing: 0.2px;
@@ -1417,7 +1393,7 @@ Usage (In Ghost editor):
     box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
     opacity: 0;
     transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-    transform: scale(0.98) translateY(10px);
+    transform: scale(0.98) translateY(15px);
     pointer-events: none;
 }
 
@@ -1425,8 +1401,9 @@ Usage (In Ghost editor):
     content: "";
     position: absolute;
     top: 100%;
-    left: calc(160px - 20px + 6px);
+    left: 50%;
     display: block;
+    margin-left: -12px;
     width: 0;
     height: 0;
     border-top: 12px solid #fff;
@@ -1846,6 +1823,110 @@ Usage (In Ghost editor):
 }
 
 
+/* 7.6. Koenig Styles
+/* ---------------------------------------------------------- */
+
+.post-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 920px;
+}
+
+.post-template .post-content > p:first-child {
+    font-size: 1.25em;
+    line-height: 1.5em;
+}
+
+.post-full-content .kg-image {
+    max-width: 100%;
+}
+
+/* Preventing full-width image overlap with post image.  */
+.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
+    width: 100%;
+}
+
+.post-full-content .kg-width-wide .kg-image {
+    max-width: 1040px;
+}
+
+.post-full-content .kg-width-full .kg-image {
+    max-width: 100vw;
+}
+
+.post-full-content figure {
+    margin: 1.5em 0 3em;
+}
+
+.post-full-content figure img {
+    margin: 0;
+}
+
+.post-full-content figcaption {
+    margin: 1.0em 0 0;
+    font-size: 80%;
+    line-height: 1.6em;
+    text-align: center;
+}
+
+.kg-width-full figcaption {
+    padding: 0 1.5em;
+}
+
+.kg-embed-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 100%;
+}
+
+.kg-embed-card .fluid-width-video-wrapper {
+    margin: 0;
+}
+
+
+@media (max-width: 1040px) {
+    .post-full-content .kg-width-full .kg-image {
+        width: 100vw;
+    }
+}
+
+.kg-gallery-container {
+    display: flex;
+    flex-direction: column;
+    max-width: 1040px;
+    width: 100vw;
+}
+
+.kg-gallery-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.kg-gallery-image img {
+    display: block;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.kg-gallery-row:not(:first-of-type) {
+    margin: 0.75em 0 0 0;
+}
+
+.kg-gallery-image:not(:first-of-type) {
+    margin: 0 0 0 0.75em;
+}
+
+.kg-gallery-card + .kg-image-card.kg-width-wide,
+.kg-gallery-card + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
+    margin: -2.25em 0 3em;
+}
+
 /* 8. Author Template
 /* ---------------------------------------------------------- */
 

author.hbs

@@ -38,7 +38,7 @@
 {{/author}}
 
 {{!-- The main content area --}}
-<main id="site-main" class="site-main outer" role="main">
+<main id="site-main" class="site-main outer">
     <div class="inner">
 
         <div class="post-feed">

default.hbs

@@ -55,13 +55,25 @@
     </div>
     {{/if}}
 
+    <script>
+        var images = document.querySelectorAll('.kg-gallery-image img');
+        images.forEach(function (image) {
+            var container = image.closest('.kg-gallery-image');
+            var width = image.attributes.width.value;
+            var height = image.attributes.height.value;
+            var ratio = width / height;
+            container.style.flex = ratio + ' 1 0%';
+        })
+    </script>
+
+
     {{!-- 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>
+    <script type="text/javascript" src="{{asset "built/jquery.fitvids.js"}}"></script>
 
     {{#if pagination.pages}}
     <script>
@@ -70,7 +82,7 @@
         // we reached the last page already.
         var maxPages = parseInt('{{pagination.pages}}');
     </script>
-    <script src="{{asset "js/infinitescroll.js"}}"></script>
+    <script src="{{asset "built/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. --}}

error-404.hbs

@@ -28,7 +28,7 @@ It's a good idea to keep this template as minimal as possible in terms of both f
             </div>
         </header>
 
-        <main id="site-main" class="site-main outer" role="main">
+        <main id="site-main" class="site-main outer">
             <div class="inner">
 
                 <section class="error-message">

error.hbs

@@ -29,7 +29,7 @@ You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in
             </div>
         </header>
 
-        <main id="site-main" class="site-main outer" role="main">
+        <main id="site-main" class="site-main outer">
             <div class="inner">
 
                 <section class="error-message">

gulpfile.js

@@ -6,6 +6,8 @@ var livereload = require('gulp-livereload');
 var postcss = require('gulp-postcss');
 var sourcemaps = require('gulp-sourcemaps');
 var zip = require('gulp-zip');
+var uglify = require('gulp-uglify');
+var filter = require('gulp-filter');
 
 // postcss plugins
 var autoprefixer = require('autoprefixer');
@@ -24,10 +26,12 @@ var nodemonServerInit = function () {
     livereload.listen(1234);
 };
 
-gulp.task('build', ['css'], function (/* cb */) {
+gulp.task('build', ['css', 'js'], function (/* cb */) {
     return nodemonServerInit();
 });
 
+gulp.task('generate', ['css', 'js']);
+
 gulp.task('css', function () {
     var processors = [
         easyimport,
@@ -46,11 +50,25 @@ gulp.task('css', function () {
         .pipe(livereload());
 });
 
+gulp.task('js', function () {
+    var jsFilter = filter(['**/*.js'], {restore: true});
+
+    return gulp.src('assets/js/*.js')
+        .on('error', swallowError)
+        .pipe(sourcemaps.init())
+        .pipe(jsFilter)
+        .pipe(uglify())
+        .pipe(jsFilter.restore)
+        .pipe(sourcemaps.write('.'))
+        .pipe(gulp.dest('assets/built/'))
+        .pipe(livereload());
+});
+
 gulp.task('watch', function () {
     gulp.watch('assets/css/**', ['css']);
 });
 
-gulp.task('zip', ['css'], function () {
+gulp.task('zip', ['css', 'js'], function () {
     var targetDir = 'dist/';
     var themeName = require('./package.json').name;
     var filename = themeName + '.zip';

index.hbs

@@ -20,7 +20,7 @@ into the {body} of the default.hbs template --}}
 </header>
 
 {{!-- The main content area --}}
-<main id="site-main" class="site-main outer" role="main">
+<main id="site-main" class="site-main outer">
     <div class="inner">
 
         <div class="post-feed">

package.json

@@ -2,9 +2,9 @@
     "name": "casper",
     "description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
     "demo": "https://demo.ghost.io",
-    "version": "2.2.0",
+    "version": "2.7.0",
     "engines": {
-        "ghost": ">=1.2.0"
+        "ghost": ">=2.0.0"
     },
     "license": "MIT",
     "screenshots": {
@@ -12,8 +12,9 @@
         "mobile": "assets/screenshot-mobile.jpg"
     },
     "scripts": {
-      "dev": "gulp",
-      "zip": "gulp zip"
+        "dev": "gulp",
+        "zip": "gulp zip",
+        "test": "gscan ."
     },
     "author": {
         "name": "Ghost Foundation",
@@ -29,7 +30,8 @@
     },
     "keywords": [
         "ghost",
-        "theme"
+        "theme",
+        "ghost-theme"
     ],
     "repository": {
         "type": "git",
@@ -40,6 +42,7 @@
     "devDependencies": {
         "autoprefixer": "6.3.6",
         "cssnano": "3.7.1",
+        "gscan": "^2.0.0",
         "gulp": "3.9.1",
         "gulp-livereload": "3.8.1",
         "gulp-postcss": "6.1.1",
@@ -49,7 +52,9 @@
         "gulp-zip": "4.0.0",
         "postcss-color-function": "2.0.1",
         "postcss-custom-properties": "5.0.1",
-        "postcss-easy-import": "1.0.1"
+        "postcss-easy-import": "1.0.1",
+        "gulp-filter": "5.1.0",
+        "gulp-uglify": "3.0.1"
     },
     "config": {
         "posts_per_page": 25

page.hbs

@@ -12,7 +12,7 @@ into the {body} of the default.hbs template --}}
 {{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
 
-<main id="site-main" class="site-main outer" role="main">
+<main id="site-main" class="site-main outer">
     <div class="inner">
 
         <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
@@ -27,7 +27,9 @@ into the {body} of the default.hbs template --}}
             {{/if}}
 
             <section class="post-full-content">
-                {{content}}
+                <div class="post-content">
+                    {{content}}
+                </div>
             </section>
 
         </article>

partials/byline-multiple.hbs

@@ -0,0 +1,72 @@
+<section class="post-full-authors">
+
+    <div class="post-full-authors-content">
+        <p>This post was a collaboration between</p>
+        <p>{{authors}}</p>
+    </div>
+
+    <ul class="author-list">
+    {{#foreach authors}}
+        <li class="author-list-item">
+
+            <div class="author-card">
+                <div class="basic-info">
+                    {{#if profile_image}}
+                        <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
+                    {{else}}
+                        <div class="author-profile-image">{{> "icons/avatar"}}</div>
+                    {{/if}}
+                    <h2>{{name}}</h2>
+                </div>
+                <div class="bio">
+                    {{#if bio}}
+                        <p>{{bio}}</p>
+                        <p><a href="{{url}}">More posts</a> by {{name}}.</p>
+                    {{else}}
+                        <p>Read <a href="{{url}}">more posts</a> by this author.</p>
+                    {{/if}}
+                </div>
+            </div>
+
+            {{#if profile_image}}
+                <a href="{{url}}" class="moving-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a>
+            {{else}}
+                <a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a>
+            {{/if}}
+
+        </li>
+    {{/foreach}}
+
+    </ul>
+
+</section>
+
+{{#contentFor "scripts"}}
+<script>
+// Adds delay to author card dropups to disappear. This gives enough
+// time for the user to interact with the author card while they move
+// the mouse from the avatar to the card. Also makes space for the
+// interacted avatar.
+$(document).ready(function () {
+
+    var hoverTimeout;
+
+    $('.author-list-item').hover(function(){
+        var $this = $(this);
+
+        clearTimeout(hoverTimeout);
+
+        $('.author-card').removeClass('hovered');
+        $(this).children('.author-card').addClass('hovered');
+
+    }, function() {
+        var $this = $(this);
+
+        hoverTimeout = setTimeout(function() {
+            $this.children('.author-card').removeClass('hovered');
+        }, 800);
+    });
+
+});
+</script>
+{{/contentFor}}

partials/byline-single.hbs

@@ -0,0 +1,23 @@
+{{!-- Everything inside the #author tags pulls data from the author --}}
+{{#primary_author}}
+
+<section class="author-card">
+    {{#if profile_image}}
+        <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
+    {{else}}
+        <span class="avatar-wrapper">{{> "icons/avatar"}}</span>
+    {{/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>
+
+{{/primary_author}}

partials/floating-header.hbs

@@ -20,7 +20,7 @@
             {{> "icons/facebook"}}
         </a>
     </div>
-    <progress class="progress" value="0">
+    <progress id="reading-progress" class="progress" value="0">
         <div class="progress-container">
             <span class="progress-bar"></span>
         </div>

partials/post-card.hbs

@@ -27,9 +27,9 @@
                     </div>
 
                     {{#if profile_image}}
-                        <span class="profile-image-wrapper"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></span>
+                        <a href="{{url}}" class="static-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a>
                     {{else}}
-                        <span class="avatar-wrapper">{{> "icons/avatar"}}</span>
+                        <a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
                     {{/if}}
                 </li>
             {{/foreach}}

partials/site-nav.hbs

@@ -14,16 +14,16 @@
     <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" rel="noopener">{{> "icons/facebook"}}</a>
+                <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
             {{/if}}
             {{#if @blog.twitter}}
-                <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
             {{/if}}
         </div>
         {{#if @labs.subscribers}}
             <a class="subscribe-button" href="#subscribe">Subscribe</a>
         {{else}}
-            <a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@blog.url}}/rss/" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
+            <a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@blog.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
         {{/if}}
     </div>
 </nav>

post.hbs

@@ -12,7 +12,7 @@ into the {body} of the default.hbs template --}}
 {{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
 
-<main id="site-main" class="site-main outer" role="main">
+<main id="site-main" class="site-main outer">
     <div class="inner">
 
         <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
@@ -33,7 +33,9 @@ into the {body} of the default.hbs template --}}
             {{/if}}
 
             <section class="post-full-content">
-                {{content}}
+                <div class="post-content">
+                    {{content}}
+                </div>
             </section>
 
             {{!-- Email subscribe form at the bottom of the page --}}
@@ -47,102 +49,22 @@ into the {body} of the default.hbs template --}}
 
             <footer class="post-full-footer">
 
-                {{!-- If there are multiple authors for the post, display all of their avatars in a stack --}}
+                {{!-- There are two options for how we display the byline/author-info.
+                If the post has more than one author, we load a specific template
+                from includes/byline-multiple.hbs, otherwise, we just use the
+                default byline. --}}
+
                 {{#has author="count:>1"}}
-
-                    <section class="post-full-authors">
-
-                        <div class="post-full-authors-content">
-                            <p>This post was a collaboration between</p>
-                            <p>{{authors}}</p>
-                        </div>
-
-                        <ul class="author-list">
-                        {{#foreach authors}}
-                            <li class="author-list-item">
-
-                                <div class="author-card">
-                                    <div class="basic-info">
-                                        {{#if profile_image}}
-                                            <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
-                                        {{else}}
-                                            <span class="avatar-wrapper">{{> "icons/avatar"}}</span>
-                                        {{/if}}
-                                        <h2>{{name}}</h2>
-                                    </div>
-                                    <div class="bio">
-                                        {{#if bio}}
-                                            <p>{{bio}}</p>
-                                            <p><a href="{{url}}">More posts</a> by {{name}}.</p>
-                                        {{else}}
-                                            <p>Read <a href="{{url}}">more posts</a> by this author.</p>
-                                        {{/if}}
-                                    </div>
-                                </div>
-
-                                {{#if profile_image}}
-                                    <a href="{{url}}" class="moving-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a>
-                                {{else}}
-                                    <a href="{{url}}" class="moving-avatar"><span class="avatar-wrapper">{{> "icons/avatar"}}</span></a>
-                                {{/if}}
-
-                            </li>
-                        {{/foreach}}
-
-                        </ul>
-
-                    </section>
-
-                {{!-- If there is a single author for the post, display her/his information  --}}
+                    {{> "byline-multiple"}}
                 {{else}}
-
-                    {{!-- Everything inside the #author tags pulls data from the author --}}
-                    {{#author}}
-
-                    <section class="author-card">
-                        {{#if profile_image}}
-                            <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
-                        {{else}}
-                            <span class="avatar-wrapper">{{> "icons/avatar"}}</span>
-                        {{/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}}
+                    {{> "byline-single"}}
                 {{/has}}
 
             </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-{{comment_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>
+                If you want to embed comments, this is a good place to do it!
             </section>
             --}}
 
@@ -221,7 +143,7 @@ $(document).ready(function () {
     $postContent.fitVids();
     // End fitVids
 
-    var progressBar = document.querySelector('progress');
+    var progressBar = document.querySelector('#reading-progress');
     var header = document.querySelector('.floating-header');
     var title = document.querySelector('.post-full-title');
 
@@ -271,56 +193,6 @@ $(document).ready(function () {
 
     update();
 
-});
-
-// Adds delay to author card dropups to disappear. This gives enough
-// time for the user to interact with the author card while they move
-// the mouse from the avatar to the card. Also makes space for the
-// interacted avatar.
-$(document).ready(function () {
-
-    var hoverTimeout;
-    var direction = 'left';
-
-    $('.author-list-item:first-child').addClass('first-child');
-
-    function makeSpaceForAvatar(avatar) {
-        if (avatar.hasClass('first-child')) {
-            return;
-        }
-
-        $('.author-list-item').each(function(i, obj) {
-
-            if ($(this)[0] != avatar[0]) {
-                if (Number($(this).css('z-index')) > Number(avatar.css('z-index'))) {
-                    $(this).children('.moving-avatar').addClass('left');
-                } else {
-                    $(this).children('.moving-avatar').addClass('right');
-                }
-            }
-
-        });
-    }
-
-    $('.author-list-item').hover(function(){
-        var $this = $(this);
-
-        clearTimeout(hoverTimeout);
-
-        $('.author-card').removeClass('hovered');
-        $(this).children('.author-card').addClass('hovered');
-
-        makeSpaceForAvatar($this);
-    }, function() {
-        var $this = $(this);
-
-        $('.author-list-item').children('.moving-avatar').removeClass('left right');
-
-        hoverTimeout = setTimeout(function() {
-            $this.children('.author-card').removeClass('hovered');
-        }, 800);
-    });
-
 });
 </script>
 {{/contentFor}}

tag.hbs

@@ -21,7 +21,7 @@
 {{/tag}}
 
 {{!-- The main content area --}}
-<main id="site-main" class="site-main outer" role="main">
+<main id="site-main" class="site-main outer">
     <div class="inner">
         <div class="post-feed">
             {{#foreach posts}}