Upgrading Casper to 2.7.1

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(n,t){var r=t.querySelector("link[rel=next]");if(r){var i=t.querySelector(".post-feed");if(i){var o=300,s=!1,l=!1,c=n.scrollY,u=n.innerHeight,d=t.documentElement.scrollHeight;n.addEventListener("scroll",a,{passive:!0}),n.addEventListener("resize",m),f()}}function v(){if(404===this.status)return n.removeEventListener("scroll",a),void n.removeEventListener("resize",m);this.response.querySelectorAll(".post-card").forEach(function(e){i.appendChild(e)});var e=this.response.querySelector("link[rel=next]");e?r.href=e.href:(n.removeEventListener("scroll",a),n.removeEventListener("resize",m)),d=t.documentElement.scrollHeight,l=s=!1}function e(){if(!l)if(c+u<=d-o)s=!1;else{l=!0;var e=new n.XMLHttpRequest;e.responseType="document",e.addEventListener("load",v),e.open("GET",r.href),e.send(null)}}function f(){s||n.requestAnimationFrame(e),s=!0}function a(){c=n.scrollY,f()}function m(){u=n.innerHeight,d=t.documentElement.scrollHeight,f()}}(window,document);
+//# sourceMappingURL=infinitescroll.js.map

assets/built/infinitescroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["infinitescroll.js"],"names":["window","document","nextElement","querySelector","feedElement","buffer","ticking","loading","lastScrollY","scrollY","lastWindowHeight","innerHeight","lastDocumentHeight","documentElement","scrollHeight","addEventListener","onScroll","passive","onResize","requestTick","onPageLoad","this","status","removeEventListener","response","querySelectorAll","forEach","item","appendChild","resNextElement","href","onUpdate","xhr","XMLHttpRequest","responseType","open","send","requestAnimationFrame"],"mappings":"CAIA,SAAUA,EAAQC,GAEd,IAAIC,EAAcD,EAASE,cAAc,kBACzC,GAAKD,EAAL,CAGA,IAAIE,EAAcH,EAASE,cAAc,cACzC,GAAKC,EAAL,CAEA,IAAIC,EAAS,IAETC,GAAU,EACVC,GAAU,EAEVC,EAAcR,EAAOS,QACrBC,EAAmBV,EAAOW,YAC1BC,EAAqBX,EAASY,gBAAgBC,aAmElDd,EAAOe,iBAAiB,SAAUC,EAAU,CAAEC,SAAS,IACvDjB,EAAOe,iBAAiB,SAAUG,GAElCC,KApEA,SAASC,IACL,GAAoB,MAAhBC,KAAKC,OAGL,OAFAtB,EAAOuB,oBAAoB,SAAUP,QACrChB,EAAOuB,oBAAoB,SAAUL,GAKtBG,KAAKG,SAASC,iBAAiB,cACrCC,QAAQ,SAAUC,GAC3BvB,EAAYwB,YAAYD,KAI5B,IAAIE,EAAiBR,KAAKG,SAASrB,cAAc,kBAC7C0B,EACA3B,EAAY4B,KAAOD,EAAeC,MAElC9B,EAAOuB,oBAAoB,SAAUP,GACrChB,EAAOuB,oBAAoB,SAAUL,IAIzCN,EAAqBX,EAASY,gBAAgBC,aAE9CP,EADAD,GAAU,EAId,SAASyB,IAEL,IAAIxB,EAGJ,GAAIC,EAAcE,GAAoBE,EAAqBP,EACvDC,GAAU,MADd,CAKAC,GAAU,EAEV,IAAIyB,EAAM,IAAIhC,EAAOiC,eACrBD,EAAIE,aAAe,WAEnBF,EAAIjB,iBAAiB,OAAQK,GAE7BY,EAAIG,KAAK,MAAOjC,EAAY4B,MAC5BE,EAAII,KAAK,OAGb,SAASjB,IACLb,GAAWN,EAAOqC,sBAAsBN,GACxCzB,GAAU,EAGd,SAASU,IACLR,EAAcR,EAAOS,QACrBU,IAGJ,SAASD,IACLR,EAAmBV,EAAOW,YAC1BC,EAAqBX,EAASY,gBAAgBC,aAC9CK,KAhFR,CAuFGnB,OAAQC","file":"infinitescroll.js","sourcesContent":["/**\n * Infinite Scroll\n */\n\n(function(window, document) {\n    // next link element\n    var nextElement = document.querySelector('link[rel=next]');\n    if (!nextElement) return;\n\n    // post feed element\n    var feedElement = document.querySelector('.post-feed');\n    if (!feedElement) return;\n\n    var buffer = 300;\n\n    var ticking = false;\n    var loading = false;\n\n    var lastScrollY = window.scrollY;\n    var lastWindowHeight = window.innerHeight;\n    var lastDocumentHeight = document.documentElement.scrollHeight;\n\n    function onPageLoad() {\n        if (this.status === 404) {\n            window.removeEventListener('scroll', onScroll);\n            window.removeEventListener('resize', onResize);\n            return;\n        }\n\n        // append contents\n        var postElements = this.response.querySelectorAll('.post-card');\n        postElements.forEach(function (item) {\n            feedElement.appendChild(item);\n        });\n\n        // set next link\n        var resNextElement = this.response.querySelector('link[rel=next]');\n        if (resNextElement) {\n            nextElement.href = resNextElement.href;\n        } else {\n            window.removeEventListener('scroll', onScroll);\n            window.removeEventListener('resize', onResize);\n        }\n\n        // sync status\n        lastDocumentHeight = document.documentElement.scrollHeight;\n        ticking = false;\n        loading = false;\n    }\n\n    function onUpdate() {\n        // return if already loading\n        if (loading) return;\n\n        // return if not scroll to the bottom\n        if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {\n            ticking = false;\n            return;\n        }\n\n        loading = true;\n\n        var xhr = new window.XMLHttpRequest();\n        xhr.responseType = 'document';\n\n        xhr.addEventListener('load', onPageLoad);\n\n        xhr.open('GET', nextElement.href);\n        xhr.send(null);\n    }\n\n    function requestTick() {\n        ticking || window.requestAnimationFrame(onUpdate);\n        ticking = true;\n    }\n\n    function onScroll() {\n        lastScrollY = window.scrollY;\n        requestTick();\n    }\n\n    function onResize() {\n        lastWindowHeight = window.innerHeight;\n        lastDocumentHeight = document.documentElement.scrollHeight;\n        requestTick();\n    }\n\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('resize', onResize);\n\n    requestTick();\n})(window, document);\n"],"sourceRoot":"/source/"}

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

@@ -815,6 +815,7 @@ The first (most recent) post in the list is styled to be bigger than the others
 
 .post-full-content a {
     color: #000;
+    word-break: break-word;
     box-shadow: var(--blue) 0 -1px 0 inset;
 }
 
@@ -842,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,
@@ -881,8 +883,9 @@ Usage (In Ghost editor):
 }
 
 
+/* Override third party iframe styles */
 .post-full-content iframe {
-    margin: 0 auto;
+    margin: 0 auto !important;
 }
 
 .post-full-content blockquote {
@@ -912,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;
@@ -932,7 +939,7 @@ Usage (In Ghost editor):
     background: transparent;
 }
 
-.post-full-content pre code * {
+.post-full-content pre code :not(span) {
     color: inherit;
 }
 
@@ -1826,20 +1833,6 @@ Usage (In Ghost editor):
     max-width: 920px;
 }
 
-/* For Ghost 1.0 */
-.kg-card-markdown {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 100%;
-}
-
-.post-template .kg-card-markdown > p:first-child {
-    font-size: 1.25em;
-    line-height: 1.5em;
-}
-/* ^ .kg-card-markdown will be will disappear in Ghost 2.0 */
-
 .post-template .post-content > p:first-child {
     font-size: 1.25em;
     line-height: 1.5em;
@@ -1862,48 +1855,77 @@ Usage (In Ghost editor):
     max-width: 100vw;
 }
 
-.post-content figcaption {
+.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-image-card {
-    margin: 0 0 1.5em;
-}
-
-.kg-image-card figcaption {
-    margin: -1.0em 0 1.5em;
+.kg-width-full figcaption {
+    padding: 0 1.5em;
 }
 
 .kg-embed-card {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 1.5em 0 3em;
     min-width: 100%;
 }
 
-.kg-embed-card figcaption {
-    margin: 0.5em 0 0;
-}
-
 .kg-embed-card .fluid-width-video-wrapper {
     margin: 0;
 }
 
 
-.kg-image-full + figcaption {
-    padding: 0 1.5em;
-}
-
-
 @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
 /* ---------------------------------------------------------- */

assets/js/infinitescroll.js

@@ -1,19 +1,78 @@
-/* global maxPages */
+/**
+ * Infinite Scroll
+ */
+
+(function(window, document) {
+    // next link element
+    var nextElement = document.querySelector('link[rel=next]');
+    if (!nextElement) return;
+
+    // post feed element
+    var feedElement = document.querySelector('.post-feed');
+    if (!feedElement) return;
 
-// 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 = 300;
 
     var ticking = false;
-    var isLoading = false;
+    var loading = false;
 
     var lastScrollY = window.scrollY;
     var lastWindowHeight = window.innerHeight;
-    var lastDocumentHeight = $document.height();
+    var lastDocumentHeight = document.documentElement.scrollHeight;
+
+    function onPageLoad() {
+        if (this.status === 404) {
+            window.removeEventListener('scroll', onScroll);
+            window.removeEventListener('resize', onResize);
+            return;
+        }
+
+        // append contents
+        var postElements = this.response.querySelectorAll('.post-card');
+        postElements.forEach(function (item) {
+            feedElement.appendChild(item);
+        });
+
+        // set next link
+        var resNextElement = this.response.querySelector('link[rel=next]');
+        if (resNextElement) {
+            nextElement.href = resNextElement.href;
+        } else {
+            window.removeEventListener('scroll', onScroll);
+            window.removeEventListener('resize', onResize);
+        }
+
+        // sync status
+        lastDocumentHeight = document.documentElement.scrollHeight;
+        ticking = false;
+        loading = false;
+    }
+
+    function onUpdate() {
+        // return if already loading
+        if (loading) return;
+
+        // return if not scroll to the bottom
+        if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
+            ticking = false;
+            return;
+        }
+
+        loading = true;
+
+        var xhr = new window.XMLHttpRequest();
+        xhr.responseType = 'document';
+
+        xhr.addEventListener('load', onPageLoad);
+
+        xhr.open('GET', nextElement.href);
+        xhr.send(null);
+    }
+
+    function requestTick() {
+        ticking || window.requestAnimationFrame(onUpdate);
+        ticking = true;
+    }
 
     function onScroll() {
         lastScrollY = window.scrollY;
@@ -22,94 +81,12 @@ $(function ($) {
 
     function onResize() {
         lastWindowHeight = window.innerHeight;
-        lastDocumentHeight = $document.height();
+        lastDocumentHeight = document.documentElement.scrollHeight;
         requestTick();
     }
 
-    function requestTick() {
-        if (!ticking) {
-            requestAnimationFrame(infiniteScroll);
-        }
-        ticking = true;
-    }
-
-    function sanitizePathname(path) {
-        var paginationRegex = /(?:page\/)(\d)(?:\/)$/i;
-
-        // remove hash params from path
-        path = path.replace(/#(.*)$/g, '').replace('////g', '/');
-
-        // remove pagination from the path and replace the current pages
-        // with the actual requested page. E. g. `/page/3/` indicates that
-        // the user actually requested page 3, so we should request page 4
-        // next, unless it's the last page already.
-        if (path.match(paginationRegex)) {
-            currentPage = parseInt(path.match(paginationRegex)[1]);
-
-            path = path.replace(paginationRegex, '');
-        }
-
-        return path;
-    }
-
-    function infiniteScroll() {
-        // sanitize the pathname from possible pagination or hash params
-        pathname = sanitizePathname(pathname);
-
-        // return if already loading
-        if (isLoading) {
-            return;
-        }
-
-        // return if not scroll to the bottom
-        if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
-            ticking = false;
-            return;
-        }
-
-        /**
-        * maxPages is defined in default.hbs and is the value
-        * of the amount of pagination pages.
-        * If we reached the last page or are past it,
-        * we return and disable the listeners.
-        */
-        if (currentPage >= maxPages) {
-            window.removeEventListener('scroll', onScroll, {passive: true});
-            window.removeEventListener('resize', onResize);
-            return;
-        }
-
-        isLoading = true;
-
-        // next page
-        currentPage += 1;
-
-        // Load more
-        var nextPage = pathname + 'page/' + currentPage + '/';
-
-        $.get(nextPage, function (content) {
-            var parse = document.createRange().createContextualFragment(content);
-            var posts = parse.querySelectorAll('.post');
-            if (posts.length) {
-                [].forEach.call(posts, function (post) {
-                    $result[0].appendChild(post);
-                });
-            }
-        }).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('scroll', onScroll, { passive: true });
     window.addEventListener('resize', onResize);
 
-    infiniteScroll();
-});
+    requestTick();
+})(window, document);

default.hbs

@@ -55,22 +55,28 @@
     </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>
-        // maxPages is a global variable that is needed to determine
-        // if we need to load more pages for the infinitescroll, or if
-        // 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. --}}

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';

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.4.1",
+    "version": "2.7.1",
     "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

@@ -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-single.hbs

@@ -1,5 +1,5 @@
 {{!-- Everything inside the #author tags pulls data from the author --}}
-{{#author}}
+{{#primary_author}}
 
 <section class="author-card">
     {{#if profile_image}}
@@ -20,4 +20,4 @@
     <a class="author-card-button" href="{{url}}">Read More</a>
 </div>
 
-{{/author}}
+{{/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/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

@@ -143,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');