Upgrading Casper to 1.1.6

Switch navigation to be global

LICENSE

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

README.md

@@ -6,7 +6,7 @@ To download, visit the [releases](https://github.com/TryGhost/Casper/releases) p
 
 ## Copyright & License
 
-Copyright (c) 2013-2014 Ghost Foundation - Released under the MIT License.
+Copyright (c) 2013-2015 Ghost Foundation - Released under the MIT License.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

assets/js/index.js

@@ -2,89 +2,102 @@
  * Main JS file for Casper behaviours
  */
 
-/*globals jQuery, document */
+/* globals jQuery, document */
-(function ($) {
+(function ($, sr, undefined) {
     "use strict";
 
-    $(document).ready(function(){
+    var $document = $(document),
 
-        $(".post-content").fitVids();
+        // debouncing function from John Hann
+        // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+        debounce = function (func, threshold, execAsap) {
+            var timeout;
 
-        function casperFullImg() {
+            return function debounced () {
-            $("img").each( function() {
+                var obj = this, args = arguments;
-                var contentWidth = $(".post-content").outerWidth(); // Width of the content
+                function delayed () {
-                var imageWidth = $(this)[0].naturalWidth; // Original image resolution
+                    if (!execAsap) {
-
+                        func.apply(obj, args);
-                if (imageWidth >= contentWidth) {
+                    }
-                    $(this).addClass('full-img');
+                    timeout = null;
-                } else {
-                    $(this).removeClass('full-img');
                 }
-            });
+
+                if (timeout) {
+                    clearTimeout(timeout);
+                } else if (execAsap) {
+                    func.apply(obj, args);
+                }
+
+                timeout = setTimeout(delayed, threshold || 100);
+            };
         };
 
+    $document.ready(function () {
+
+        var $postContent = $(".post-content");
+        $postContent.fitVids();
+
+        function updateImageWidth() {
+            var $this = $(this),
+                contentWidth = $postContent.outerWidth(), // Width of the content
+                imageWidth = this.naturalWidth; // Original image resolution
+
+            if (imageWidth >= contentWidth) {
+                $this.addClass('full-img');
+            } else {
+                $this.removeClass('full-img');
+            }
+        }
+
+        var $img = $("img").on('load', updateImageWidth);
+        function casperFullImg() {
+            $img.each(updateImageWidth);
+        }
+
         casperFullImg();
         $(window).smartresize(casperFullImg);
 
         $(".scroll-down").arctic_scroll();
 
+        $(".menu-button, .nav-cover, .nav-close").on("click", function(e){
+            e.preventDefault();
+            $("body").toggleClass("nav-opened nav-closed");
+        });
+
     });
 
-}(jQuery));
+    // smartresize
+    jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
 
-(function($,sr){
+    // Arctic Scroll by Paul Adam Davis
-
+    // https://github.com/PaulAdamDavis/Arctic-Scroll
-  // debouncing function from John Hann
-  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
-  var debounce = function (func, threshold, execAsap) {
-      var timeout;
-
-      return function debounced () {
-          var obj = this, args = arguments;
-          function delayed () {
-              if (!execAsap)
-                  func.apply(obj, args);
-              timeout = null;
-          };
-
-          if (timeout)
-              clearTimeout(timeout);
-          else if (execAsap)
-              func.apply(obj, args);
-
-          timeout = setTimeout(delayed, threshold || 100);
-      };
-  }
-  // smartresize 
-  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
-
-})(jQuery,'smartresize');
-
-// Arctic Scroll by Paul Adam Davis
-// https://github.com/PaulAdamDavis/Arctic-Scroll
-(function ($) {
     $.fn.arctic_scroll = function (options) {
 
         var defaults = {
             elem: $(this),
             speed: 500
-        };
+        },
-        var options = $.extend(defaults, options);
 
-        options.elem.click(function(event){     
+        allOptions = $.extend(defaults, options);
+
+        allOptions.elem.click(function (event) {
             event.preventDefault();
-            var offset = ($(this).attr('data-offset')) ? $(this).attr('data-offset') : false,
+            var $this = $(this),
-                position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false;         
+                $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) {
-                var toMove = parseInt(offset);
+                toMove = parseInt(offset);
-                $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, options.speed);
+                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed);
             } else if (position) {
-                var toMove = parseInt(position);
+                toMove = parseInt(position);
-                $('html,body').stop(true, false).animate({scrollTop: toMove }, options.speed);
+                $htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed);
             } else {
-                $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, options.speed);
+                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed);
             }
         });
 
     };
-})(jQuery);
+})(jQuery, 'smartresize');

author.hbs

@@ -7,8 +7,10 @@
 {{#author}}
     <header class="main-header author-head {{#if cover}}" style="background-image: url({{cover}}){{else}}no-cover{{/if}}">
         <nav class="main-nav overlay clearfix">
-            <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
+            {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
-            <a class="subscribe-button icon-feed" href="{{url}}rss/">{{name}}</a>
+            {{#if @blog.navigation}}
+                <a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a>
+            {{/if}}
         </nav>
     </header>
 
@@ -19,7 +21,9 @@
         </figure>
         {{/if}}
         <h1 class="author-title">{{name}}</h1>
-        <h2 class="author-bio">{{bio}}</h2>
+        {{#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}}
@@ -34,4 +38,4 @@
     {{! The tag below includes the post loop - partials/loop.hbs }}
     {{> "loop"}}
 
-</main>
+</main>

default.hbs

@@ -16,20 +16,26 @@
 
     {{! 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=PT+Serif:400,700,400italic|Open+Sans:700,400" />
+    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
 
     {{! Ghost outputs important style and meta data with this tag }}
     {{ghost_head}}
 </head>
-<body class="{{body_class}}">
+<body class="{{body_class}} nav-closed">
 
-    {{! Everything else gets inserted here }}
+    {{navigation}}
-    {{{body}}}
 
-    <footer class="site-footer clearfix">
+    <div class="site-wrapper">
-         <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>
+        {{! Everything else gets inserted here }}
-    </footer>
+        {{{body}}}
+
+        <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>
+        </footer>
+
+    </div>
 
     {{! Ghost outputs important scripts and data with this tag }}
     {{ghost_foot}}

index.hbs

@@ -5,7 +5,9 @@
 <header class="main-header {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
     <nav class="main-nav overlay clearfix">
         {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
-        <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
+        {{#if @blog.navigation}}
+            <a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a>
+        {{/if}}
     </nav>
     <div class="vertical">
         <div class="main-header-content inner">
@@ -22,4 +24,4 @@
     {{! The tag below includes the post loop - partials/loop.hbs }}
     {{> "loop"}}
 
-</main>
+</main>

package.json

@@ -1,5 +1,4 @@
 {
   "name": "Casper",
-  "version": "1.0.1"
+  "version": "1.1.6"
-
 }

page.hbs

@@ -3,24 +3,29 @@
 {{! 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. }}
 
-<nav class="main-nav clearfix">
+{{! Everything inside the #post tags pulls data from the page }}
-    <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
+{{#post}}
-    <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
+
-</nav>
+<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
+    <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
+        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
+        {{#if @blog.navigation}}
+            <a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a>
+        {{/if}}
+    </nav>
+</header>
 
 <main class="content" role="main">
-
     <article class="{{post_class}}">
-    {{! Everything inside the #post tags pulls data from the post }}
-    {{#post}}
 
-        <h1 class="post-title">{{title}}</h1>
+        <header class="post-header">
+            <h1 class="post-title">{{title}}</h1>
+        </header>
 
         <section class="post-content">
             {{content}}
         </section>
 
-    {{/post}}
     </article>
-
 </main>
+{{/post}}

partials/loop.hbs

@@ -10,13 +10,13 @@
         <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
     </header>
     <section class="post-excerpt">
-        <p>{{excerpt words="30"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
+        <p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
     </section>
     <footer class="post-meta">
         {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}}
         {{author}}
-        {{tags prefix=" on "}} 
+        {{tags prefix=" on "}}
-        <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time> 
+        <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
     </footer>
 </article>
 {{/foreach}}

partials/navigation.hbs

@@ -0,0 +1,13 @@
+<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>
+    <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
+</div>
+<span class="nav-cover"></span>

post.hbs

@@ -3,16 +3,20 @@
 {{! The comment above "< default" means - insert everything in this file into
     the {body} of the default.hbs template, which contains our header/footer. }}
 
-<nav class="main-nav clearfix">
+{{! Everything inside the #post tags pulls data from the post }}
-    <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
+{{#post}}
-    <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
+
-</nav>
+<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
+    <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
+        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
+        {{#if @blog.navigation}}
+            <a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a>
+        {{/if}}
+    </nav>
+</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>
@@ -70,7 +74,7 @@
 
         </footer>
 
-    {{/post}}
     </article>
-
 </main>
+
+{{/post}}

tag.hbs

@@ -1,16 +1,24 @@
 {{!< default}}
 {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
 
-{{! The big featured header }}
+{{! If we have a tag cover, display that - else blog cover - else nothing }}
-<header class="main-header tag-head {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
+<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">
-        <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
+        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
-        <a class="subscribe-button icon-feed" href="{{@blog.url}}/tag/{{tag.slug}}/rss/">{{tag.name}}</a>
+        {{#if @blog.navigation}}
+            <a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a>
+        {{/if}}
     </nav>
     <div class="vertical">
         <div class="main-header-content inner">
             <h1 class="page-title">{{tag.name}}</h1>
-            <h2 class="page-description">A {{pagination.total}}-post collection</h2>
+            <h2 class="page-description">
+                {{#if tag.description}}
+                    {{tag.description}}
+                {{else}}
+                    A {{pagination.total}}-post collection
+                {{/if}}
+            </h2>
         </div>
     </div>
 </header>
@@ -21,4 +29,4 @@
     {{! The tag below includes the post loop - partials/loop.hbs }}
     {{> "loop"}}
 
-</main>
+</main>