Upgrading Casper to 1.1.7

Fix transition property

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/css/screen.css

@@ -14,10 +14,9 @@
     7.  Third Party Elements
     8.  Pagination
     9.  Footer
-    10. Media Queries (Medium Desktop)
-    11. Media Queries (Tablet)
-    12. Media Queries (Mobile)
-    13. Animations
+    10. Media Queries (Tablet)
+    11. Media Queries (Mobile)
+    12. Animations
 
 */
 
@@ -185,6 +184,7 @@ body {
     -webkit-font-feature-settings: 'kern' 1;
     -moz-font-feature-settings: 'kern' 1;
     -o-font-feature-settings: 'kern' 1;
+    text-rendering: geometricPrecision;
 }
 
 ::-moz-selection {
@@ -204,6 +204,7 @@ h4, h5, h6 {
     line-height: 1.15em;
     margin: 0 0 0.4em 0;
     font-family: "Open Sans", sans-serif;
+    text-rendering: geometricPrecision;
 }
 
 h1 {
@@ -235,7 +236,7 @@ h6 {
 
 a {
     color: #4A4A4A;
-    transition: color ease 0.3s;
+    transition: color 0.3s ease;
 }
 
 a:hover {
@@ -247,6 +248,7 @@ p, ul, ol, dl {
     -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
     -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
     margin: 0 0 1.75em 0;
+    text-rendering: geometricPrecision;
 }
 
 ol, ul {
@@ -350,9 +352,8 @@ pre {
     border-radius: 3px;
 }
 
-pre code, tt {
+pre code, pre tt {
     font-size: inherit;
-    white-space: -moz-pre-wrap;
     white-space: pre-wrap;
     background: transparent;
     border: none;
@@ -441,7 +442,7 @@ margin on the iframe, cause it breaks stuff. */
     display: table;
 }
 .clearfix:after { clear: both; }
-.clearfix { *zoom: 1; }
+.clearfix { zoom: 1; }
 
 /* Hides shit */
 .hidden {
@@ -464,6 +465,25 @@ margin on the iframe, cause it breaks stuff. */
     vertical-align: middle;
 }
 
+/* Wraps the main content & footer */
+.site-wrapper {
+    position: relative;
+    z-index: 10;
+    min-height: 100%;
+    background: #fff;
+    -webkit-transition: -webkit-transform 0.5s ease;
+            transition: transform 0.5s ease;
+}
+
+body.nav-opened .site-wrapper {
+    overflow-x: hidden;
+    -webkit-transform: translate3D(-240px, 0, 0);
+        -ms-transform: translate3D(-240px, 0, 0);
+            transform: translate3D(-240px, 0, 0);
+    -webkit-transition: -webkit-transform 0.3s ease;
+            transition: transform 0.3s ease;
+}
+
 
 /* ==========================================================================
    4. General - The main styles for the the theme
@@ -474,7 +494,7 @@ margin on the iframe, cause it breaks stuff. */
     position: relative;
     display: table;
     width: 100%;
-    height: 100%;
+    height: 100vh;
     margin-bottom: 5rem;
     text-align: center;
     background: #222 no-repeat center center;
@@ -497,6 +517,192 @@ margin on the iframe, cause it breaks stuff. */
     font-family: 'Open Sans', sans-serif;
 }
 
+/* Navigation */
+body.nav-opened .nav-cover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 240px;
+    bottom: 0;
+    z-index: 200;
+}
+
+.nav {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 5;
+    width: 240px;
+    opacity: 0;
+    background: #111;
+    margin-bottom: 0;
+    text-align: left;
+    overflow-y: auto;
+    -webkit-transition: -webkit-transform 0.5s ease,
+                        opacity 0.3s ease 0.7s;
+            transition: transform 0.5s ease,
+                        opacity 0.3s ease 0.7s;
+}
+
+body.nav-closed .nav {
+    -webkit-transform: translate3D(97px, 0, 0);
+        -ms-transform: translate3D(97px, 0, 0);
+            transform: translate3D(97px, 0, 0);
+}
+
+body.nav-opened .nav {
+    opacity: 1;
+    -webkit-transition: -webkit-transform 0.3s ease,
+                        opacity 0s ease 0s;
+            transition: transform 0.3s ease,
+                        opacity 0s ease 0s;
+    -webkit-transform: translate3D(0, 0, 0);
+        -ms-transform: translate3D(0, 0, 0);
+            transform: translate3D(0, 0, 0);
+}
+
+.nav-title {
+    position: absolute;
+    top: 45px;
+    left: 30px;
+    font-size: 16px;
+    font-weight: 100;
+    text-transform: uppercase;
+    color: #fff;
+}
+
+.nav-close {
+    position: absolute;
+    top: 38px;
+    right: 25px;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    font-size: 10px;
+}
+
+.nav-close:focus {
+    outline: 0;
+}
+
+.nav-close:before,
+.nav-close:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    width: 20px;
+    height: 1px;
+    background: rgb(150,150,150);
+    top: 15px;
+    -webkit-transition: background 0.15s ease;
+            transition: background 0.15s ease;
+}
+
+.nav-close:before {
+    -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+            transform: rotate(45deg);
+}
+
+.nav-close:after {
+    -webkit-transform: rotate(-45deg);
+        -ms-transform: rotate(-45deg);
+            transform: rotate(-45deg);
+}
+
+.nav-close:hover:before,
+.nav-close:hover:after {
+    background: rgb(255,255,255);
+}
+
+.nav ul {
+    padding: 90px 9% 5%;
+    list-style: none;
+    counter-reset: item;
+}
+
+.nav li:before {
+    display: block;
+    float: right;
+    padding-right: 4%;
+    padding-left: 5px;
+    text-align: right;
+    font-size: 1.2rem;
+    vertical-align: bottom;
+    color: #B8B8B8;
+    content: counter(item, lower-roman);
+    counter-increment: item;
+}
+.nav li {
+    margin: 0;
+}
+.nav li a {
+    text-decoration: none;
+    line-height: 1.4;
+    font-size: 1.4rem;
+    display: block;
+    padding: 0.6rem 4%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.nav li a:after {
+    display: inline-block;
+    content: " .......................................................";
+    color: rgba(255,255,255,0.2);
+    margin-left: 5px;
+}
+.nav .nav-current:before {
+    color: #fff;
+}
+.nav .nav-current a:after {
+    content: " ";
+    border-bottom: rgba(255,255,255,0.5) 1px solid;
+    width: 100%;
+    height: 1px;
+}
+
+.nav a:link,
+.nav a:visited {
+    color: #B8B8B8;
+}
+
+.nav li.nav-current a,
+.nav a:hover,
+.nav a:active,
+.nav a:focus {
+    color: #fff;
+}
+
+.subscribe-button {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    bottom: 30px;
+    left: 30px;
+    right: 30px;
+    height: 38px;
+    padding: 0 20px;
+    color: #111 !important;
+    text-align: center;
+    font-size: 12px;
+    font-family: "Open Sans", sans-serif;
+    text-transform: uppercase;
+    text-decoration: none;
+    line-height: 35px;
+    border-radius: 3px;
+    background: #fff;
+    transition: all ease 0.3s;
+}
+.subscribe-button:before {
+    font-size: 9px;
+    margin-right: 6px;
+}
+
+
 /* Create a bouncing scroll-down arrow on homepage with cover image */
 .scroll-down {
     display: block;
@@ -512,6 +718,7 @@ margin on the iframe, cause it breaks stuff. */
     text-decoration: none;
     color: rgba(255,255,255,0.7);
     -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
     transform: rotate(-90deg);
     -webkit-animation: bounce 4s 2s infinite;
     animation: bounce 4s 2s infinite;
@@ -536,9 +743,6 @@ margin on the iframe, cause it breaks stuff. */
     bottom: 0;
     left: 50%;
     margin-left: -75px;
-    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%);
-    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.15)), color-stop(70%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0)));
-    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
     background: radial-gradient(ellipse at center,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
 }
 
@@ -568,41 +772,16 @@ margin on the iframe, cause it breaks stuff. */
     width: auto;
 }
 
-.back-button {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    display: inline-block;
-    float: left;
-    height: 38px;
-    padding: 0 15px 0 10px;
-    border: transparent 1px solid;
-    color: #9EABB3;
-    text-align: center;
-    font-size: 12px;
-    text-transform: uppercase;
-    line-height: 35px;
-    border-radius: 3px;
-    background: rgba(0,0,0,0.1);
-    transition: all ease 0.3s;
-}
-.back-button:before {
-    position: relative;
-    bottom: -2px;
-    font-size: 13px;
-    line-height: 0;
-    margin-right: 8px;
-}
-
-.subscribe-button {
+.menu-button {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     display: inline-block;
     float: right;
     height: 38px;
-    padding: 0 20px;
-    border: transparent 1px solid;
+    padding: 0 15px;
+    border: #bfc8cd 1px solid;
+    opacity: 1;
     color: #9EABB3;
     text-align: center;
     font-size: 12px;
@@ -611,13 +790,31 @@ margin on the iframe, cause it breaks stuff. */
     white-space: nowrap;
     border-radius: 3px;
     background: rgba(0,0,0,0.1);
-    transition: all ease 0.3s;
+    transition: all 0.5s ease;
 }
-.subscribe-button:before {
-    font-size: 9px;
+.menu-button:focus {
+    outline: 0;
+}
+.menu-button .burger {
+    font-size: 12px;
     margin-right: 6px;
 }
 
+body.nav-opened .menu-button {
+    padding: 0 12px;
+    background: #111 !important;
+    border-color: #111 !important;
+    color: #fff !important;
+    -webkit-transform: translate3D(94px, 0, 0);
+        -ms-transform: translate3D(94px, 0, 0);
+            transform: translate3D(94px, 0, 0);
+    transition: all 0.3s ease;
+}
+body.nav-opened .menu-button .word {
+    opacity: 0;
+    transition: all 0.3s ease;
+}
+
 /* Special styles when overlaid on an image*/
 .main-nav.overlay {
     position: absolute;
@@ -626,14 +823,10 @@ margin on the iframe, cause it breaks stuff. */
     right: 0;
     height: 70px;
     border: none;
-    background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0)));
-    background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
     background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
 }
 .no-cover .main-nav.overlay,
-.no-cover .back-button,
-.no-cover .subscribe-button {
+.no-cover .menu-button {
     background: none;
 }
 
@@ -641,8 +834,7 @@ margin on the iframe, cause it breaks stuff. */
     color: #fff;
 }
 
-.main-nav.overlay .back-button,
-.main-nav.overlay .subscribe-button {
+.main-nav.overlay .menu-button {
     border-color: rgba(255,255,255,0.6);
 }
 
@@ -650,14 +842,12 @@ margin on the iframe, cause it breaks stuff. */
     color: #222;
     border-color: #fff;
     background: #fff;
-    transition: all 0.1s ease;
 }
 
 /* Add a border to the buttons on hover */
-.back-button:hover,
-.subscribe-button:hover {
-    border-color: #bfc8cd;
-    color: #9EABB3;
+.menu-button:hover {
+    border-color: #555;
+    color: #555;
 }
 
 /* The details of your blog. Defined in ghost/settings/ */
@@ -682,7 +872,7 @@ margin on the iframe, cause it breaks stuff. */
 
 .no-cover.main-header {
     min-height: 160px;
-    max-height: 40%;
+    max-height: 40vh;
     background: #f5f8fa;
 }
 
@@ -694,8 +884,7 @@ margin on the iframe, cause it breaks stuff. */
     color: rgba(0,0,0,0.5);
 }
 
-.no-cover .main-nav.overlay .back-button,
-.no-cover .main-nav.overlay .subscribe-button {
+.no-cover .main-nav.overlay .menu-button {
     color: rgba(0,0,0,0.4);
     border-color: rgba(0,0,0,0.3);
 }
@@ -722,7 +911,10 @@ margin on the iframe, cause it breaks stuff. */
     margin: 4rem auto;
     padding-bottom: 4rem;
     border-bottom: #EBF2F6 1px solid;
-    word-break: break-word;
+    word-wrap: break-word;
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
+    -webkit-hyphens: auto;
     hyphens: auto;
 }
 
@@ -739,8 +931,6 @@ margin on the iframe, cause it breaks stuff. */
     left: 50%;
     margin-left: -5px;
     background: #FFF;
-    -webkit-border-radius: 100%;
-    -moz-border-radius: 100%;
     border-radius: 100%;
     box-shadow: #FFF 0 0 0 5px;
 }
@@ -865,8 +1055,9 @@ body:not(.post-template) .post-title {
     border: none;
 }
 
-/* Stop .full-img from creating horizontal scroll - slight hack due to
-   imperfections with browser width % calculations and rounding */
+/* Stop elements, such as img wider than the post content, from
+   creating horizontal scroll - slight hack due to imperfections
+   with browser width % calculations and rounding */
 .post-template .content {
     overflow: hidden;
 }
@@ -883,21 +1074,22 @@ body:not(.post-template) .post-title {
     display: none;
 }
 
-/* Keep images centred and within the bounds of the post-width */
+/* Keep images centered, and allow images wider than the main
+   text column to break out. */
 .post-content img {
     display: block;
-    max-width: 100%;
+    max-width: 126%;
     height: auto;
-    margin: 0 auto;
     padding: 0.6em 0;
-}
-
-/* Break out larger images to be wider than the main text column
-   the class is applied with jQuery */
-.post-content .full-img {
-    width: 126%;
-    max-width: none;
-    margin: 0 -13%;
+    /* Centers an image by (1) pushing its left edge to the
+       center of its container and (2) shifting the entire image
+       in the opposite direction by half its own width.
+       Works for images that are larger than their containers. */
+    position: relative;
+    left: 50%;
+    -webkit-transform: translateX(-50%); /* for Safari and iOS */
+    -ms-transform: translateX(-50%); /* for IE9 */
+    transform: translateX(-50%);
 }
 
 /* The author credit area after the post */
@@ -974,89 +1166,13 @@ body:not(.post-template) .post-title {
     color: #50585D;
 }
 
-/* The subscribe icon on the footer */
-.subscribe {
-    width: 28px;
-    height: 28px;
-    position: absolute;
-    top: -14px;
-    left: 50%;
-    margin-left: -15px;
-    border: #EBF2F6 1px solid;
-    text-align: center;
-    line-height: 2.4rem;
-    border-radius: 50px;
-    background: #FFF;
-    transition: box-shadow 0.5s;
-}
-
-/* The RSS icon, inserted via icon font */
-.subscribe:before {
-    color: #D2DEE3;
-    font-size: 10px;
-    position: absolute;
-    top: 2px;
-    left: 9px;
-    font-weight: 700;
-    transition: color 0.5s ease;
-}
-
-/* Add a box shadow to on hover */
-.subscribe:hover {
-    box-shadow: rgba(0,0,0,0.05) 0 0 0 3px;
-    transition: box-shadow 0.25s;
-}
-
-.subscribe:hover:before {
-    color: #50585D;
-}
-
-/* CSS tooltip saying "Subscribe!" - initially hidden */
-.tooltip {
-    opacity: 0;
-    display: block;
-    width: 53px;
-    padding: 4px 8px 5px 8px;
-    position:absolute;
-    top: -23px;
-    left: -21px;
-    color: rgba(255,255,255,0.9);
-    font-size: 1.1rem;
-    line-height: 1em;
-    text-align: center;
-    background: #50585D;
-    border-radius: 20px;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
-    transition: opacity 0.3s ease, top 0.3s ease;
-}
-
-/* The little chiclet arrow under the tooltip, pointing down */
-.tooltip:after {
-    content: " ";
-    border-width: 5px 5px 0 5px;
-    border-style: solid;
-    border-color: #50585D transparent;
-    display: block;
-    position: absolute;
-    bottom: -4px;
-    left: 50%;
-    margin-left: -5px;
-    z-index: 220;
-    width: 0;
-}
-
-/* On hover, show the tooltip! */
-.subscribe:hover .tooltip {
-    opacity: 1;
-    top: -33px;
-}
 
 /* ==========================================================================
    6. Author profile
    ========================================================================== */
 
 .post-head.main-header {
-    height: 65%;
+    height: 65vh;
     min-height: 180px;
 }
 
@@ -1068,17 +1184,17 @@ body:not(.post-template) .post-title {
 }
 
 .tag-head.main-header {
-    height: 40%;
+    height: 40vh;
     min-height: 180px;
 }
 
 .author-head.main-header {
-    height: 40%;
+    height: 40vh;
     min-height: 180px;
 }
 
 .no-cover.author-head.main-header {
-    height: 10%;
+    height: 10vh;
     min-height: 100px;
     background: transparent;
 }
@@ -1101,8 +1217,6 @@ body:not(.post-template) .post-title {
     left: 50%;
     margin-left: -5px;
     background: #FFF;
-    -webkit-border-radius: 100%;
-    -moz-border-radius: 100%;
     border-radius: 100%;
     box-shadow: #FFF 0 0 0 5px;
 }
@@ -1194,11 +1308,17 @@ body:not(.post-template) .post-title {
     margin: 0;
     font-size: 1.4rem;
 }
+.gist td {
+    line-height: 1.4;
+}
 .gist .line-number {
     min-width: 25px;
-    font-size: 1.1rem;
 }
 
+/* Pastebin */
+.content .embedPastebin {
+    margin-bottom: 1.75em;
+}
 
 /* ==========================================================================
    8. Pagination - Tools to let you flick between pages
@@ -1230,7 +1350,7 @@ body:not(.post-template) .post-title {
     border: #bfc8cd 1px solid;
     text-decoration: none;
     border-radius: 4px;
-    transition: border ease 0.3s;
+    transition: border 0.3s ease;
 }
 
 .older-posts {
@@ -1268,8 +1388,6 @@ body:not(.post-template) .post-title {
     left: 50%;
     margin-left: -5px;
     background: #FFF;
-    -webkit-border-radius: 100%;
-    -moz-border-radius: 100%;
     border-radius: 100%;
     box-shadow: #FFF 0 0 0 5px;
 }
@@ -1279,7 +1397,7 @@ body:not(.post-template) .post-title {
 
 /* On page2+ make all the headers smaller */
 .archive-template .main-header {
-    max-height: 30%;
+    max-height: 30vh;
 }
 
 /* On page2+ show extra pagination controls at the top of post list */
@@ -1333,10 +1451,6 @@ body:not(.post-template) .post-title {
 
 @media only screen and (max-width: 900px) {
 
-    .main-nav {
-        padding: 15px;
-    }
-
     blockquote {
         margin-left: 0;
     }
@@ -1347,7 +1461,7 @@ body:not(.post-template) .post-title {
         box-sizing: border-box;
         height: auto;
         min-height: 240px;
-        height: 60%;
+        height: 60vh;
         padding: 15% 0;
     }
 
@@ -1431,12 +1545,12 @@ body:not(.post-template) .post-title {
     }
 
     .post-head.main-header {
-        height:45%;
+        height:45vh;
     }
 
     .tag-head.main-header,
     .author-head.main-header {
-        height: 30%;
+        height: 30vh;
     }
 
     .no-cover.post-head.main-header {
@@ -1459,54 +1573,47 @@ body:not(.post-template) .post-title {
 
     .main-header {
         margin-bottom: 15px;
-        height: 40%;
+        height: 40vh;
     }
 
     .no-cover.main-header {
-        height: 30%;
+        height: 30vh;
     }
 
     .archive-template .main-header {
-        max-height: 20%;
+        max-height: 20vh;
         min-height: 160px;
         padding: 10% 0;
     }
 
     .main-nav {
-        padding: 0;
+        padding: 5px;
         margin-bottom: 2rem;
-        border-bottom: #e0e4e7 1px solid;
     }
 
     .blog-logo {
-        padding: 10px 10px;
+        padding: 5px;
     }
 
     .blog-logo img {
-        height: 26px;
+        height: 30px;
     }
 
-    .back-button,
-    .subscribe-button {
-        height: 44px;
-        line-height: 41px;
+    .menu-button {
+        padding: 0 5px;
         border-radius: 0;
+        border-color: transparent;
         color: #2e2e2e;
         background: transparent;
     }
-    .back-button:hover,
-    .subscribe-button:hover {
-        border-color: #ebeef0;
+    .menu-button:hover {
         color: #2e2e2e;
-        background: #ebeef0;
+        border-color: transparent;
+        background: none;
     }
-
-    .back-button {
-        padding: 0 15px 0 10px;
-    }
-
-    .subscribe-button {
-        padding: 0 12px;
+    body.nav-opened .menu-button {
+        background: none !important;
+        border: transparent !important;
     }
 
     .main-nav.overlay a:hover {
@@ -1518,18 +1625,26 @@ body:not(.post-template) .post-title {
     .no-cover .main-nav.overlay {
         background: none;
     }
-    .no-cover .main-nav.overlay .back-button,
-    .no-cover .main-nav.overlay .subscribe-button {
+    .no-cover .main-nav.overlay .menu-button {
         border: none;
     }
 
-    .main-nav.overlay .back-button,
-    .main-nav.overlay .subscribe-button {
+    .main-nav.overlay .menu-button {
         border-color: transparent;
     }
 
-    .blog-logo img {
-        max-height: 80px;
+    .nav-title {
+        top: 25px;
+
+    }
+
+    .nav-close {
+        position: absolute;
+        top: 18px;
+    }
+
+    .nav ul {
+        padding: 60px 9% 5%;
     }
 
     .inner,
@@ -1627,12 +1742,7 @@ body:not(.post-template) .post-title {
 
     .post-content img {
         padding: 0;
-    }
-
-    .post-content .full-img {
-        width: auto;
         width: calc(100% + 32px); /* expand with to image + margins */
-        margin: 0 -16px; /* get rid of margins */
         min-width: 0;
         max-width: 112%; /* fallback when calc doesn't work */
     }
@@ -1691,12 +1801,12 @@ body:not(.post-template) .post-title {
     }
 
     .post-head.main-header {
-        height: 30%;
+        height: 30vh;
     }
 
     .tag-head.main-header,
     .author-head.main-header {
-        height: 20%;
+        height: 20vh;
     }
 
     .author-profile .author-image {

assets/js/index.js

@@ -3,66 +3,24 @@
  */
 
 /* globals jQuery, document */
-(function ($, sr, undefined) {
+(function ($, undefined) {
     "use strict";
 
-    var $document = $(document),
-
-        // debouncing function from John Hann
-        // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
-        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);
-            };
-        };
+    var $document = $(document);
 
     $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");
+        });
 
-    // smartresize
-    jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
+    });
 
     // Arctic Scroll by Paul Adam Davis
     // https://github.com/PaulAdamDavis/Arctic-Scroll
@@ -95,4 +53,4 @@
         });
 
     };
-})(jQuery, 'smartresize');
+})(jQuery);

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>
-            <a class="subscribe-button icon-feed" href="{{url}}rss/">{{name}}</a>
+            {{#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>
 
@@ -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

@@ -21,15 +21,21 @@
     {{! 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 }}
-    {{{body}}}
+    {{navigation}}
 
-    <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 class="site-wrapper">
+
+        {{! Everything else gets inserted here }}
+        {{{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,4 +1,4 @@
 {
   "name": "Casper",
-  "version": "1.1.0"
+  "version": "1.1.7"
 }

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">
-    <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
-    <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
-</nav>
+{{! 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 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/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

@@ -8,13 +8,14 @@
 
 <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">
-        <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
-        <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
+        {{#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}}">
 
         <header class="post-header">
@@ -74,7 +75,6 @@
         </footer>
 
     </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 }}
-<header class="main-header tag-head {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
+{{! 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">
-        <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
-        <a class="subscribe-button icon-feed" href="{{@blog.url}}/tag/{{tag.slug}}/rss/">{{tag.name}}</a>
+        {{#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>
     <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>