Author profile

assets/built/global.css

@@ -1,2 +1,2 @@
-a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#35373a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.8rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.3rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
+a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{color:#35373a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.8rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.3rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
 /*# sourceMappingURL=global.css.map */

assets/css/global.css

@@ -255,14 +255,11 @@ th {
    ========================================================================== */
 
 html {
-    overflow-x: hidden;
-    overflow-y: scroll;
     font-size: 62.5%;
 
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 body {
-    overflow-x: hidden;
     color: #35373A;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     font-size: 1.6rem;

assets/css/screen.css

@@ -49,7 +49,6 @@ production stylesheet in assets/built/screen.css
     --ghost-accent-color: {value};
 
     You can use this variale throughout your styles
-
      */
 
     /* Fonts */
@@ -332,8 +331,11 @@ production stylesheet in assets/built/screen.css
     padding: 5px 0;
 }
 
-.gh-social a {
+.gh-social {
     margin: 0 1.5vmin 0 0;
+}
+
+.gh-social a {
     opacity: 0.8
 }
 .gh-social a:hover {
@@ -967,6 +969,7 @@ is the very first element in the post content */
 /* A larger margin before/after HRs and blockquotes */
 .gh-content > hr,
 .gh-content > blockquote {
+    position: relative;
     margin-top: 6vmin;
 }
 .gh-content > hr + *,
@@ -997,19 +1000,20 @@ is the very first element in the post content */
     padding-left: 1.9em;
 }
 
-.gh-content blockquote {
+.gh-content > blockquote {
     position: relative;
     font-style: italic;
+    padding: 0;
 }
 
-.gh-content blockquote::before {
+.gh-content > blockquote::before {
     content: "";
     position: absolute;
     left: -1.5em;
     top: 0;
     bottom: 0;
     width: 0.3rem;
-    background: var(--color-primary);
+    background: var(--ghost-accent-color);
 }
 
 .gh-content :not(pre) code {
@@ -1470,6 +1474,10 @@ Ghost editor. */
     color: rgba(255, 255, 255, 0.6);
 }
 
+.read-more .post-card-byline-content a {
+    color: #fff;
+}
+
 
 @media (max-width: 1000px) {
     .read-more {
@@ -1492,154 +1500,92 @@ Ghost editor. */
 
 /* 8. Author Template
 /* ---------------------------------------------------------- */
-.author-header {
+
-    display: flex;
+.author-template .posts {
-    flex-direction: row;
+    position: relative;
-    justify-content: flex-start;
+    height: 100%;
-    align-items: flex-start;
+    display: grid;
-    padding: 10vw 0 10px;
+    grid-template-columns: 200px 1fr 1fr;
+    grid-gap: 4vmin;
 }
 
-.site-archive-header .author-header {
+.author-template .posts .post-feed {
-    align-items: center;
+    grid-column: 2 / 4;
+    grid-template-columns: 1fr 1fr;
 }
 
-.site-archive-header .no-image .author-header {
+.author-profile {
-    padding-bottom: 20px;
+    padding: 4vmin 0;
 }
 
-.author-header-content {
+.author-profile-content {
-    display: flex;
+    height: auto;
-    flex-direction: column;
+    position: sticky;
-    justify-content: center;
+    top: 4vmin;
-    margin: 5px 0 0 30px;
-}
-
-.site-header-content .author-profile-image {
-    z-index: 10;
-    flex-shrink: 0;
-    margin: -4px 0 0;
-    width: 110px;
-    height: 110px;
-    box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
-}
-
-.author-header-content .author-bio {
-    z-index: 10;
-    flex-shrink: 0;
-    margin: 6px 0 0;
-    max-width: 46em;
-    font-size: 2.0rem;
-    line-height: 1.3em;
-    font-weight: 400;
-    opacity: 0.8;
-}
-
-.author-header-content .author-meta {
-    z-index: 10;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    margin: 0 0 0 1px;
     font-size: 1.4rem;
-    font-weight: 400;
+    line-height:  1.4em;
-    letter-spacing: 0.2px;
+}
+
+.author-profile-pic {
+    display: block;
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+    margin: 0 0 2rem;
+}
+
+.author-profile h1 {
+    margin: 0 0 0.3em;
+    font-size: 2rem;
+}
+
+.author-profile p {
+    color: color-mod(var(--color-midgrey) l(-8%));
+}
+
+.author-profile-location {
+    margin: 0 0 1.5em;
+    font-weight: 700;
+}
+
+.author-profile-social-link {
+    display: block;
+    padding: 0 0 5px;
+    font-size: 1.3rem;
+    color: color-mod(var(--color-midgrey) l(-8%));
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
     white-space: nowrap;
 }
 
-.author-header-content .social-link:first-of-type {
+.author-profile-social-link:hover {
-    padding-left: 4px;
-}
-
-.no-image .author-header-content .author-bio {
-    color: var(--color-midgrey);
-    opacity: 1.0;
-}
-
-.no-image .author-header-content .author-meta {
-    color: var(--color-midgrey);
-    opacity: 1.0;
-}
-
-.author-social-link a {
-    color: #fff;
-    font-weight: 600;
-}
-
-.no-image .author-social-link a {
     color: var(--color-darkgrey);
 }
 
-.author-social-link a:hover {
+@media (max-width: 900px) {
-    opacity: 1;
+    .author-template .posts .post-feed {
-}
+        grid-template-columns: 1fr;
-
-.author-social-link {
-    display: inline-block;
-    margin: 0;
-    padding: 6px 0;
-}
-
-.author-location + .author-stats:before,
-.author-stats + .author-social-link:before,
-.author-social-link + .author-social-link:before {
-    content: "\2022";
-    display: inline-block;
-    margin: 0 12px;
-    color: #fff;
-    opacity: 0.6;
-}
-
-.no-image .author-location + .author-stats:before,
-.no-image .author-stats + .author-social-link:before,
-.no-image .author-social-link + .author-social-link:before {
-    color: var(--color-midgrey);
-}
-
-@media (max-width: 700px) {
-    .author-location,
-    .author-stats,
-    .author-stats + .author-social-link:first-of-type:before {
-        display: none;
     }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 650px) {
-    .author-header {
+    .author-template .posts {
-        padding: 10px 0 0;
+        grid-template-columns: 1fr;
+        grid-gap: 0;
     }
-
+    .author-template .posts .post-feed {
-    .no-image .author-header {
+        grid-column: 1 / auto;
-        padding-bottom: 10px;
     }
-
+    .author-profile {
-    .author-header-content {
+        padding-right: 0;
+    }
+    .author-profile-content {
+        display: flex;
+        flex-direction: column;
         align-items: center;
-        margin: 16px 0 0 0;
-    }
-
-    .site-header-content .author-profile-image {
-        width: 96px;
-        height: 96px;
-    }
-
-    .author-header-content .author-bio {
-        font-size: 1.8rem;
-        line-height: 1.3em;
-        letter-spacing: 0;
         text-align: center;
     }
-
-    .author-header-content .author-meta {
-        margin-top: 8px;
-    }
-
-    .author-location + .author-stats:before,
-    .author-stats + .author-social-link:before,
-    .author-social-link + .author-social-link:before {
-        display: inline;
-        margin: 0 6px;
-    }
 }
 
 
@@ -1650,37 +1596,23 @@ Ghost editor. */
     padding: 14vw 4vw 6vw;
 }
 
-.site-nav-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 10px 0;
-    text-align: center;
-}
-
-.site-nav-center .site-nav-logo {
-    margin-right: 0;
-}
-
 .error-message {
     padding-bottom: 10vw;
-    border-bottom: 1px solid color-mod(var(--color-lightgrey) l(+10%));
     text-align: center;
 }
 
 .error-code {
     margin: 0;
-    color: var(--color-lightgrey);
+    color: var(--ghost-accent-color);
     font-size: 12vw;
     line-height: 1em;
     letter-spacing: -5px;
-    opacity: 0.75;
 }
 
 .error-description {
     margin: 0;
     color: var(--color-midgrey);
-    font-size: 3rem;
+    font-size: 3.2rem;
     line-height: 1.3em;
     font-weight: 400;
 }
@@ -1730,62 +1662,79 @@ Ghost editor. */
 .site-footer {
     position: relative;
     margin: 40px 0 0 0;
-    padding-top: 40px;
+    padding: 40px 4vmin 140px;
-    padding-bottom: 140px;
     color: #fff;
     background: color-mod(var(--color-darkgrey) l(-5%));
 }
 
-.site-footer-content {
+.site-footer .inner {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-gap: 40px;
-    justify-content: space-between;
+    grid-template-columns: auto 1fr auto;
-    align-items: center;
     color: rgba(255,255,255,0.7);
     font-size: 1.3rem;
 }
 
-.site-footer-content a {
+.site-footer .copyright a {
+    color: #fff;
+    letter-spacing: -0.015em;
+    font-weight: 500;
+}
+
+.site-footer a {
     color: rgba(255,255,255,0.7);
 }
 
-.site-footer-content a:hover {
+.site-footer a:hover {
     color: rgba(255,255,255,1);
     text-decoration: none;
 }
 
-.site-footer-nav {
+.site-footer-nav ul {
     display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: 0 0 20px;
+    padding: 0;
+    list-style: none;
+}
+
+.site-footer-nav li {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    line-height: 2em;
 }
 
 .site-footer-nav a {
     position: relative;
-    margin-left: 20px;
+    display: inline-flex;
+    align-items: center;
+    margin-left: 10px;
 }
 
-.site-footer-nav a:before {
+.site-footer-nav li:not(:first-child) a:before {
     content: "";
-    position: absolute;
-    top: 11px;
-    left: -11px;
     display: block;
     width: 2px;
     height: 2px;
+    margin: 0 10px 0 0;
     background: #fff;
     border-radius: 100%;
 }
 
-.site-footer-nav a:first-of-type:before {
+@media (max-width: 800px) {
-    display: none;
+    .site-footer .inner {
+        max-width: 500px;
+        grid-template-columns: 1fr;
+        grid-gap: 0;
+        text-align: center;
     }
-
+    .site-footer .copyright,
-@media (max-width: 650px) {
+    .site-footer .copyright a {
-    .site-footer-content {
+        color: #fff;
-        flex-direction: column;
+        font-size: 1.5rem;
-    }
-
-    .site-footer-nav a:first-child {
-        margin-left: 0;
     }
 }
 
@@ -1818,10 +1767,6 @@ html.dark-mode .post-card:hover {
     border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
 }
 
-html.dark-mode .author-profile-image {
-    background: var(--color-darkmode);
-}
-
 html.dark-mode .post-card-byline-content a {
     color: rgba(255, 255, 255, 0.75);
 }
@@ -1958,10 +1903,6 @@ html.dark-mode .site-archive-header .no-image {
     background: var(--color-darkmode);
 }
 
-html.dark-mode .site-header-content .author-profile-image {
-    box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);
-}
-
 html.dark-mode .subscribe-form {
     border: none;
     background: linear-gradient(color-mod(var(--color-darkmode) l(-6%)), color-mod(var(--color-darkmode) l(-3%)));
@@ -1997,3 +1938,18 @@ html.dark-mode .subscribe-form .error .message-error {
 html.dark-mode .subscribe-form .success .message-success {
     color: color-mod(var(--color-green) l(+5%) s(-5%));
 }
+
+/*
+
+Hey! You reached the end.
+
+Hope you enjoyed this CSS file, if you have any suggestions
+for improvements that might be useful for everyone who uses
+this theme, you can find the open source repository for it
+here: https://github.com/tryghost/casper
+
+Or, if you've just scrolled all the way to the bottom of the
+file to add some of your own styles. Well, you've come to
+the right place. Onward!
+
+ */

author.hbs

@@ -2,56 +2,48 @@
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
 
-{{#author}}
-{{!-- Everything inside the #author tags pulls data from the author --}}
-
-<div class="outer site-header-background no-image">
-    <div class="inner">
-        <div class="site-header-content author-header">
-            {{#if profile_image}}
-            <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
-            {{else}}
-            <span class="author-profile-image">{{> "icons/avatar"}}</span>
-            {{/if}}
-            <div class="author-header-content">
-                <h1 class="site-title">{{name}}</h1>
-                {{#if bio}}
-                <h2 class="author-bio">{{bio}}</h2>
-                {{/if}}
-                <div class="author-meta">
-                    {{#if location}}
-                    <div class="author-location">{{location}}</div>
-                    {{/if}}
-                    <div class="author-stats">
-                        {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
-                    </div>
-                    {{#if website}}
-                    <span class="author-social-link"><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
-                    {{/if}}
-                    {{#if twitter}}
-                    <span class="author-social-link"><a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a></span>
-                    {{/if}}
-                    {{#if facebook}}
-                    <span class="author-social-link"><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
-                    {{/if}}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-{{/author}}
-
-{{!-- The main content area --}}
 <section class="outer">
     <div class="inner posts">
 
+        <header class="author-profile">
+            {{#author}}
+            {{!-- Everything inside the #author tags pulls data from the author --}}
+
+            <div class="author-profile-content">
+
+                {{#if profile_image}}
+                <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
+                {{else}}
+                <span class="author-profile-pic">{{> "icons/avatar"}}</span>
+                {{/if}}
+
+                <h1>{{name}}</h1>
+                {{#if bio}}<p>{{bio}}</p>{{/if}}
+
+                <div class="author-profile-meta">
+                    {{#if location}}
+                        <div class="author-profile-location">📍 {{location}}</div>
+                    {{/if}}
+                    {{#if website}}
+                        <a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
+                    {{/if}}
+                    {{#if twitter}}
+                        <a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a>
+                    {{/if}}
+                    {{#if facebook}}
+                        <a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a>
+                    {{/if}}
+                </div>
+
+            </div>
+
+            {{/author}}
+        </header>
+
         <div class="post-feed">
             {{#foreach posts}}
-
                 {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                 {{> "post-card"}}
-
             {{/foreach}}
         </div>
 

default.hbs

@@ -64,14 +64,12 @@
 
     {{!-- The global footer at the very bottom of the screen --}}
     <footer class="site-footer outer">
-        <div class="site-footer-content inner">
+        <div class="inner">
             <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
             <nav class="site-footer-nav">
-                <a href="{{@site.url}}">Latest Posts</a>
+                {{navigation type="secondary"}}
-                {{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
-                {{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
-                <a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a>
             </nav>
+            <div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
         </div>
     </footer>
 
@@ -92,6 +90,8 @@ $(document).ready(function () {
     $('.gh-burger').click(function () {
         $('body').toggleClass('gh-head-open');
     });
+    // FitVids - Makes video embeds responsive
+    $(".gh-content").fitVids();
 });
 </script>
 

error-404.hbs

@@ -19,13 +19,19 @@ Keep this template as lightweight as you can!
             <p class="error-description">{{message}}</p>
             <a class="error-link" href="{{@site.url}}">Go to the front page →</a>
         </section>
-
-        {{#get "posts" limit="3" include="authors,tags"}}
-            <div class="post-feed">
-                {{#foreach posts}}
-                {{> "post-card"}}
-                {{/foreach}}
-            </div>
-        {{/get}}
     </div>
 </section>
+
+{{!-- Given that people landing on this page didn't find what they
+were looking for, let's give them some alternative stuff to read. --}}
+<aside class="read-more-wrap">
+    <div class="read-more inner">
+        {{#get "posts" include="authors" limit="3" as |more_posts|}}
+            {{#if more_posts}}
+                {{#foreach more_posts}}
+                    {{> "post-card"}}
+                {{/foreach}}
+            {{/if}}
+        {{/get}}
+    </div>
+</aside>

page.hbs

@@ -41,13 +41,3 @@ into the {body} tag of the default.hbs template --}}
 </article>
 
 {{/post}}
-
-
-{{!-- Scripts - Extra functionality for the post template --}}
-<script>
-$(document).ready(function () {
-    // FitVids - Makes video embeds responsive
-    var $postContent = $(".gh-content");
-    $postContent.fitVids();
-});
-</script>

post.hbs

@@ -114,22 +114,4 @@ into the {body} tag of the default.hbs template --}}
     </div>
 </aside>
 
-
 {{/post}}
-
-
-{{!-- Scripts - Extra functionality for the post template --}}
-<script>
-$(document).ready(function () {
-    // FitVids - Makes video embeds responsive
-    var $postContent = $(".gh-content");
-    $postContent.fitVids();
-
-    // StickyNavTitle - Shows post title in navbar when scrolling
-    Casper.stickyNavTitle({
-        navSelector: '.site-nav-main',
-        titleSelector: '.article-title',
-        activeClass: 'nav-post-title-active'
-    });
-});
-</script>