New error template and author template

assets/css/screen.css

@@ -3,7 +3,7 @@
 @import "components/global.css";
 
 body {
-    background: #F4F8FB;
+    background: #f4f8fb;
 }
 
 .img {
@@ -53,7 +53,8 @@ body {
 
 @media (min-width: 900px) {
     .home-template .post-feed,
-    .tag-template .post-feed {
+    .tag-template .post-feed,
+    .author-template .post-feed {
         margin-top: -100px;
     }
     .home-template .site-nav {
@@ -92,12 +93,13 @@ body {
     display: block;
     content: "";
     position: absolute;
-    bottom: 0;
+    top: 0;
-    left: 0;
     right: 0;
+    bottom: auto;
+    left: 0;
     z-index: 10;
-    height: 60px;
+    height: 80px;
-    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));
+    background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0));
 }
 
 .site-header.no-cover:before,
@@ -111,6 +113,7 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
     padding: 10vw 0;
     min-height: 200px;
     max-height: 450px;
@@ -260,6 +263,18 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     height: 1.5rem;
 }
 
+.social-link-wb svg {
+    height: 1.6rem;
+}
+
+.social-link-wb svg path {
+    stroke: #fff;
+}
+
+.social-link-rss svg {
+    height: 1.9rem;
+}
+
 .subscribe-button {
     display: block;
     padding: 4px 10px;
@@ -433,22 +448,11 @@ The first (most recent) post in the list is styled to be bigger than the others
         padding: 0 40px 30px;
     }
 
-    /* Special Styling for Subscribe box
-
-    We've got a special subscribe box, this allows it to appear in the middle of the loop of posts without actually needing to interrupt the loop. Neat trickery courtesy of David Darnes.
-
-
-
-    .post-card:nth-of-type(2),
-    .post-card:nth-of-type(3) {
-      order: -1;
-    }
-
-    */
-
 }
 
-
+.home-template .site-header:after {
+    display: none;
+}
 
 
 
@@ -490,6 +494,7 @@ The first (most recent) post in the list is styled to be bigger than the others
 }
 
 .post-full-title {
+    margin: 0;
     color: color(var(--darkgrey) l(-5%));
 }
 
@@ -500,7 +505,7 @@ The first (most recent) post in the list is styled to be bigger than the others
 
 .post-full-image {
     height: 800px;
-    margin: -5vw -10vw -165px;
+    margin: 0 -10vw -165px;
     background: var(--lightgrey) center center;
     background-size: cover;
     border-radius: 5px;
@@ -509,7 +514,7 @@ The first (most recent) post in the list is styled to be bigger than the others
 @media (max-width: 1170px) {
     .post-full-image {
         height: 600px;
-        margin: -5vw -4vw -100px;
+        margin: 0 -4vw -100px;
         border-radius: 0;
     }
 }
@@ -564,6 +569,10 @@ The first (most recent) post in the list is styled to be bigger than the others
     filter: blur(5px);
 }
 
+.no-image .post-full-content {
+    padding-top: 0;
+}
+
 .no-image .post-full-content:before,
 .no-image .post-full-content:after {
     display: none;
@@ -949,6 +958,7 @@ Super neat trick courtesy of @JoelDrapper
 }
 
 .read-next-divider {
+    position: relative;
     display: flex;
     justify-content: center;
     height: 80px;
@@ -957,6 +967,7 @@ Super neat trick courtesy of @JoelDrapper
 .read-next-divider svg {
     width: 50px;
     stroke: #fff;
+    stroke-opacity: 0.65;
     fill: transparent;
 }
 
@@ -1203,3 +1214,108 @@ Super neat trick courtesy of @JoelDrapper
 @media (max-width: 450px) {
     .floating-header-share-label { display: none; }
 }
+
+
+/* ==========================================================================
+   Author Template / author.hbs
+   ========================================================================== */
+
+.site-header-content .author-profile-image {
+    flex-shrink: 0;
+    width: 100px;
+    height: 100px;
+    margin: 0 0 20px 0;
+    box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
+}
+
+.site-header-content .author-bio {
+    flex-shrink: 0;
+    max-width: 600px;
+    margin: 5px 0 10px 0;
+    font-size: 2rem;
+    line-height: 1.3em;
+    font-weight: 300;
+    letter-spacing: 0.5px;
+    opacity: 0.8;
+}
+
+.site-header-content .author-meta {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 0 10px 0;
+    font-family: Georgia, serif;
+    font-style: italic;
+}
+
+.site-header-content .author-location svg {
+    height: 1.9rem;
+    stroke: #fff;
+}
+
+.site-header-content .bull {
+    display: inline-block;
+    margin: 0 12px;
+    opacity: 0.5;
+}
+
+.site-header-content .social-link:first-of-type {
+    padding-left: 4px;
+}
+
+
+/* ==========================================================================
+   Error Template / error.hbs
+   ========================================================================== */
+
+.error-template .site-main {
+    padding: 7vw 4vw;
+}
+
+.site-nav-center {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   text-align: center;
+}
+
+.site-nav-center .site-nav-logo {
+   margin-right: 0;
+}
+
+.error-message {
+    text-align: center;
+}
+
+.error-code {
+    margin: 0;
+    font-size: 12vw;
+    line-height: 1em;
+    letter-spacing: -5px;
+    opacity: 0.3;
+}
+
+.error-description {
+    margin: 0;
+    font-size: 3rem;
+    line-height: 1.3em;
+    font-weight: 400;
+    color: var(--midgrey);
+}
+
+@media (max-width: 800px) {
+    .error-description {
+        margin: 5px 0 0 0;
+        font-size: 1.8rem;
+    }
+}
+
+.error-link {
+    display: inline-block;
+    margin-top: 5px;
+}
+
+.error-template .post-feed {
+    padding-top: 0;
+}

author.hbs

@@ -5,37 +5,77 @@
 
 {{!-- Everything inside the #author tags pulls data from the author --}}
 {{#author}}
-    <header class="main-header author-head {{#if cover}}" style="background-image: url({{cover}}){{else}}no-cover{{/if}}">
+<header class="site-header outer {{#if cover_image}}" style="background-image: url({{cover_image}}){{else}}no-cover{{/if}}">
-        <nav class="main-nav overlay clearfix">
+    <div class="inner">
-            {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
+        <nav class="site-nav">
+            <div class="site-nav-left">
+                {{#if @blog.logo}}
+                    <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+                {{/if}}
                 {{#if @blog.navigation}}
-                <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
+                    {{!-- The blog navigation links from /ghost/settings/design --}}
+                    {{navigation}}
                 {{/if}}
+            </div>
+            <div class="site-nav-right">
+                <div class="social-links">
+                    {{#if @blog.facebook}}
+                        <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
+                    {{/if}}
+                    {{#if @blog.twitter}}
+                        <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
+                    {{/if}}
+                </div>
+                {{#if @labs.subscribers}}
+                    <a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
+                {{else}}
+                    <a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
+                {{/if}}
+            </div>
         </nav>
-    </header>
+        <div class="site-header-content">
-
+            {{#if profile_image}}
-    <section class="author-profile inner">
+                <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
-        {{#if feature_image}}
-        <figure class="author-image">
-            <div class="img" style="background-image: url({{feature_image}})"><span class="hidden">{{name}}'s Picture</span></div>
-        </figure>
             {{/if}}
-        <h1 class="author-title">{{name}}</h1>
+            <h1 class="site-title">{{name}}</h1>
             {{#if bio}}
                 <h2 class="author-bio">{{bio}}</h2>
             {{/if}}
             <div class="author-meta">
-            {{#if location}}<span class="author-location icon-location">{{location}}</span>{{/if}}
+                {{#if location}}
-            {{#if website}}<span class="author-link icon-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
+                    <div class="author-location">{{location}} <span class="bull">&bull;</span></div>
-            <span class="author-stats"><i class="icon-stats"></i> {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}</span>
+                {{/if}}
+                <div class="author-stats">
+                    {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} <span class="bull">&bull;</span>
                 </div>
-    </section>
+                {{#if website}}
+                    <a class="social-link social-link-wb" href="{{website}}" target="_blank">{{> "icons/website"}}</a>
+                {{/if}}
+                {{#if twitter}}
+                    <a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank">{{> "icons/twitter"}}</a>
+                {{/if}}
+                {{#if facebook}}
+                    <a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank">{{> "icons/facebook"}}</a>
+                {{/if}}
+                <a class="social-link social-link-rss" href="http://cloud.feedly.com/#subscription/feed/{{url absolute="true"}}rss/" target="_blank">{{> "icons/rss"}}</a>
+            </div>
+        </div>
+    </div>
+</header>
 {{/author}}
 
 {{!-- The main content area on the homepage --}}
 <main class="content" role="main">
+    <div class="inner">
 
-    {{!-- The tag below includes the post loop - partials/loop.hbs --}}
+        <div class="post-feed">
-    {{> "loop"}}
+            {{#foreach posts}}
 
+                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+                {{> "post-card"}}
+
+            {{/foreach}}
+        </div>
+
+    </div>
 </main>

default.hbs

@@ -31,8 +31,8 @@
                 <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
                 <nav class="site-footer-nav">
                     <a href="{{@blog.url}}">Latest Posts</a>
-                    {{#if @blog.facebook}}<a href="{{facebook_url}}" target="_blank">Facebook</a>{{/if}}
+                    {{#if @blog.facebook}}<a href="{{facebook_url @blog.facebook}}" target="_blank">Facebook</a>{{/if}}
-                    {{#if @blog.twitter}}<a href="{{twitter_url}}" target="_blank">Twitter</a>{{/if}}
+                    {{#if @blog.twitter}}<a href="{{twitter_url @blog.twitter}}" target="_blank">Twitter</a>{{/if}}
                     <a href="https://ghost.org" target="_blank">Ghost</a>
                 </nav>
             </div>

error.hbs

@@ -8,11 +8,66 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="{{asset "assets/public/screen.css"}}" />
 </head>
-<body class="{{body_class}}">
+<body class="error-template">
-
     <div class="site-wrapper">
-        ERROR
-    </div>
 
+        <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
+            <div class="inner">
+                <nav class="site-nav-center">
+                    {{#if @blog.logo}}
+                        <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+                    {{else}}
+                        <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
+                    {{/if}}
+                </nav>
+            </div>
+        </header>
+
+        {{!-- The main content area --}}
+        <main id="site-main" class="site-main outer" role="main">
+            <div class="inner">
+
+                <section class="error-message">
+                    <h1 class="error-code">{{code}}</h1>
+                    <p class="error-description">{{message}}</p>
+                    <a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
+                </section>
+
+                {{#if errorDetails}}
+                <section class="error-stack">
+                    <h3>Theme errors</h3>
+
+                    <ul class="error-stack-list">
+                        {{#each errorDetails}}
+                            <li>
+                                <em class="error-stack-function">{{{rule}}}</em>
+
+                                {{#each failures}}
+                                    <p><span class="error-stack-file">Ref: {{ref}}</span></p>
+                                    <p><span class="error-stack-file">Message: {{message}}</span></p>
+                                {{/each}}
+                            </li>
+                        {{/each}}
+                    </ul>
+                </section>
+                {{/if}}
+
+            </div>
+        </main>
+
+        {{#get "posts" limit="3"}}
+        <aside class="outer">
+            <div class="inner">
+                <div class="post-feed">
+                    {{#foreach posts}}
+                        {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+                        {{> "post-card"}}
+                    {{/foreach}}
+                </div>
+            </div>
+        </aside>
+        {{/get}}
+
+    </div>
 </body>
 </html>

index.hbs

@@ -25,10 +25,10 @@ into the {body} of the default.hbs template --}}
             <div class="site-nav-right">
                 <div class="social-links">
                     {{#if @blog.facebook}}
-                        <a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank">{{> "icons/facebook"}}</a>
+                        <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
                     {{/if}}
                     {{#if @blog.twitter}}
-                        <a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank">{{> "icons/twitter"}}</a>
+                        <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
                     {{/if}}
                 </div>
                 {{#if @labs.subscribers}}

page.hbs

@@ -18,10 +18,10 @@ into the {body} of the default.hbs template --}}
             <div class="site-nav-right">
                 <div class="social-links">
                     {{#if @blog.facebook}}
-                        <a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
+                        <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}">{{> "icons/facebook"}}</a>
                     {{/if}}
                     {{#if @blog.twitter}}
-                        <a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
+                        <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}">{{> "icons/twitter"}}</a>
                     {{/if}}
                 </div>
                 {{#if @labs.subscribers}}

partials/icons/location.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M19.5 8c0 4.144-7.5 15.5-7.5 15.5S4.5 12.144 4.5 8C4.5 3.858 7.857.5 12 .5c4.142 0 7.5 3.358 7.5 7.5z"/><circle cx="12" cy="8" r="3"/></svg>

partials/icons/website.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 11.957c0 6.375-5.163 11.544-11.532 11.544C5.599 23.5.5 18.125.5 11.75.5 5.542 5.37.758 11.505.511l.5-.011C18.374.5 23.5 5.582 23.5 11.957zM11.505.511c-6 6.5-6 14.98 0 22.98m1-22.98c6 6.5 6 14.977 0 22.977M2 17.479h20.063m-19.657-12h19.062m-20.968 6h22.938" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10" fill="none"/></svg>

post.hbs

@@ -20,10 +20,10 @@ into the {body} of the default.hbs template --}}
             <div class="site-nav-right">
                 <div class="social-links">
                     {{#if @blog.facebook}}
-                        <a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
+                        <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}">{{> "icons/facebook"}}</a>
                     {{/if}}
                     {{#if @blog.twitter}}
-                        <a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
+                        <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}">{{> "icons/twitter"}}</a>
                     {{/if}}
                 </div>
                 {{#if @labs.subscribers}}

tag.hbs

@@ -18,10 +18,10 @@
             <div class="site-nav-right">
                 <div class="social-links">
                     {{#if @blog.facebook}}
-                        <a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank">{{> "icons/facebook"}}</a>
+                        <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
                     {{/if}}
                     {{#if @blog.twitter}}
-                        <a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank">{{> "icons/twitter"}}</a>
+                        <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
                     {{/if}}
                 </div>
                 {{#if @labs.subscribers}}