Updated theme for v1

3 years ago · d05a054eef
10 changed files with 411 additions and 1210 deletions
--- a/amp.hbs
+++ b/amp.hbs
@ -1,830 +0,0 @@
 <!DOCTYPE html>
 <html ⚡>
 <head>
    {{!-- Document Settings --}}
    <meta charset="utf-8">

    {{!-- Page Meta --}}
    <title>{{meta_title}}</title>
    <meta name="description" content="{{meta_description}}" />

    {{!-- Mobile Meta --}}
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    {{!-- Brand icon --}}
    <link rel="shortcut icon" href="{{asset "favicon.ico"}}">

    {{amp_ghost_head}}

    {{!-- Styles'n'Scripts --}}
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Catamaran|Source+Sans+Pro" />
    <style amp-custom>
        /* ==========================================================================
           Table of Contents
           ========================================================================== */

        /*

            0. Normalize
            1. General
            2. Utilities
            3. AMP Post
            4. Footer

        */

        /* ==========================================================================
           0. normalize.css v3.0.3 | MIT License | git.io/normalize | (minified)
           ========================================================================== */

        html {
            font-family: sans-serif;

            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        body {
            margin: 0;
        }
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        main,
        menu,
        nav,
        section,
        summary {
            display: block;
        }
        audio,
        canvas,
        progress,
        video {
            display: inline-block;
            vertical-align: baseline;
        }
        audio:not([controls]) {
            display: none;
            height: 0;
        }
        [hidden],
        template {
            display: none;
        }
        a {
            background-color: transparent;
        }
        a:active,
        a:hover {
            outline: 0;
        }
        abbr[title] {
            border-bottom: 1px dotted;
        }
        b,
        strong {
            font-weight: bold;
        }
        dfn {
            font-style: italic;
        }
        h1 {
            margin: 0.67em 0;
            font-size: 2em;
        }
        mark {
            background: #ff0;
            color: #000;
        }
        small {
            font-size: 80%;
        }
        sub,
        sup {
            position: relative;
            vertical-align: baseline;
            font-size: 75%;
            line-height: 0;
        }
        sup {
            top: -0.5em;
        }
        sub {
            bottom: -0.25em;
        }
        img {
            border: 0;
        }
        amp-img {
            border: 0;
        }
        svg:not(:root) {
            overflow: hidden;
        }
        figure {
            margin: 1em 40px;
        }
        hr {
            box-sizing: content-box;
            height: 0;
        }
        pre {
            overflow: auto;
        }
        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;
        }
        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[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"] {
            -webkit-appearance: textfield;
        }
        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration {
            -webkit-appearance: none;
        }
        fieldset {
            margin: 0 2px;
            padding: 0.35em 0.625em 0.75em;
            border: 1px solid #c0c0c0;
        }
        legend {
            padding: 0;
            border: 0;
        }
        textarea {
            overflow: auto;
        }
        optgroup {
            font-weight: bold;
        }
        table {
            border-spacing: 0;
            border-collapse: collapse;
        }
        td,
        th {
            padding: 0;
        }


        /* ==========================================================================
           1. General - Setting up some base styles
           ========================================================================== */

        html {
            max-height: 100%;
            height: 100%;
            font-size: 62.5%;

            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        body {
            max-height: 100%;
            height: 100%;
            color: #3a4145;
            background: #f4f8fb;
            letter-spacing: 0.01rem;
            font-family: "Lato", sans-serif;
            font-size: 1.8rem;
            line-height: 1.75em;
            text-rendering: geometricPrecision;

            -webkit-font-feature-settings: "kern" 1;
            -moz-font-feature-settings: "kern" 1;
            -o-font-feature-settings: "kern" 1;
        }

        ::-moz-selection {
            background: #d6edff;
        }

        ::selection {
            background: #d6edff;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0 0 0.3em 0;
            color: #2e2e2e;
            font-family: "Catamaran", sans-serif;
            line-height: 1.15em;
            text-rendering: geometricPrecision;

            -webkit-font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
            -moz-font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
            -o-font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
        }

        h1 {
            text-indent: -2px;
            font-size: 2.6rem;
        }

        h2 {
            font-size: 2.4rem;
        }

        h3 {
            font-size: 2.1rem;
        }

        h4 {
            font-size: 1.9rem;
        }

        h5 {
            font-size: 1.8rem;
        }

        h6 {
            font-size: 1.8rem;
        }

        a {
            color: #4a4a4a;
        }

        a:hover {
            color: #111;
        }

        p,
        ul,
        ol,
        dl {
            margin: 0 0 2.5rem 0;
            font-size: 1.5rem;
            text-rendering: geometricPrecision;

            -webkit-font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
            -moz-font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
            -o-font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
        }

        ol,
        ul {
            padding-left: 2em;
        }

        ol ol,
        ul ul,
        ul ol,
        ol ul {
            margin: 0 0 0.4em 0;
            padding-left: 2em;
        }

        dl dt {
            float: left;
            clear: left;
            overflow: hidden;
            margin-bottom: 1em;
            width: 180px;
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 700;
        }

        dl dd {
            margin-bottom: 1em;
            margin-left: 200px;
        }

        li {
            margin: 0.4em 0;
        }

        li li {
            margin: 0;
        }

        hr {
            display: block;
            margin: 1.75em 0;
            padding: 0;
            height: 1px;
            border: 0;
            border-top: #efefef 1px solid;
        }

        blockquote {
            box-sizing: border-box;
            margin: 1.75em 0 1.75em 0;
            padding: 0 0 0 1.75em;
            border-left: #4a4a4a 0.4em solid;

            -moz-box-sizing: border-box;
        }

        blockquote p {
            margin: 0.8em 0;
            font-style: italic;
        }

        blockquote small {
            display: inline-block;
            margin: 0.8em 0 0.8em 1.5em;
            color: #ccc;
            font-size: 0.9em;
        }

        blockquote small:before {
            content: "\2014 \00A0";
        }

        blockquote cite {
            font-weight: 700;
        }

        blockquote cite a {
            font-weight: normal;
        }

        mark {
            background-color: #fdffb6;
        }

        code,
        tt {
            padding: 1px 3px;
            border: #e3edf3 1px solid;
            background: #f7fafb;
            border-radius: 2px;
            white-space: pre-wrap;
            font-family: Inconsolata, monospace, sans-serif;
            font-size: 0.85em;
            font-feature-settings: "liga" 0;

            -webkit-font-feature-settings: "liga" 0;
            -moz-font-feature-settings: "liga" 0;
        }

        pre {
            overflow: auto;
            box-sizing: border-box;
            margin: 0 0 1.75em 0;
            padding: 10px;
            width: 100%;
            border: #e3edf3 1px solid;
            background: #f7fafb;
            border-radius: 3px;
            white-space: pre;
            font-family: Inconsolata, monospace, sans-serif;
            font-size: 0.9em;

            -moz-box-sizing: border-box;
        }

        pre code,
        pre tt {
            padding: 0;
            border: none;
            background: transparent;
            white-space: pre-wrap;
            font-size: inherit;
        }

        kbd {
            display: inline-block;
            margin-bottom: 0.4em;
            padding: 1px 8px;
            border: #ccc 1px solid;
            background: #f4f4f4;
            border-radius: 4px;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),
            0 1px 0 0 #fff inset;
            color: #666;
            text-shadow: #fff 0 1px 0;
            font-size: 0.9em;
            font-weight: 700;
        }

        table {
            box-sizing: border-box;
            margin: 1.75em 0;
            max-width: 100%;
            width: 100%;
            background-color: transparent;

            -moz-box-sizing: border-box;
        }

        table th,
        table td {
            padding: 8px;
            border-top: #efefef 1px solid;
            vertical-align: top;
            text-align: left;
            line-height: 20px;
        }

        table th {
            color: #000;
        }

        table caption + thead tr:first-child th,
        table caption + thead tr:first-child td,
        table colgroup + thead tr:first-child th,
        table colgroup + thead tr:first-child td,
        table thead:first-child tr:first-child th,
        table thead:first-child tr:first-child td {
            border-top: 0;
        }

        table tbody + tbody {
            border-top: #efefef 2px solid;
        }

        table table table {
            background-color: #fff;
        }

        table tbody > tr:nth-child(odd) > td,
        table tbody > tr:nth-child(odd) > th {
            background-color: #f6f6f6;
        }

        table.plain tbody > tr:nth-child(odd) > td,
        table.plain tbody > tr:nth-child(odd) > th {
            background: transparent;
        }

        iframe,
        amp-iframe,
        .fluid-width-video-wrapper {
            display: block;
            margin: 1.75em 0;
        }

        /* When a video is inside the fitvids wrapper, drop the
        margin on the iframe, cause it breaks stuff. */
        .fluid-width-video-wrapper iframe,
        .fluid-width-video-wrapper amp-iframe {
            margin: 0;
        }

        textarea,
        select,
        input {
            margin: 0 0 5px 0;
            padding: 6px 9px;
            width: 260px;
            outline: 0;
            border: #e7eef2 1px solid;
            background: #fff;
            border-radius: 4px;
            box-shadow: none;
            font-family: "Lato", sans-serif;
            font-size: 1.6rem;
            line-height: 1.4em;
            font-weight: 100;

            -webkit-appearance: none;
        }

        textarea {
            min-width: 250px;
            min-height: 80px;
            max-width: 340px;
            width: 100%;
            height: auto;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="search"]:focus,
        input[type="tel"]:focus,
        input[type="url"]:focus,
        input[type="password"]:focus,
        input[type="number"]:focus,
        input[type="date"]:focus,
        input[type="month"]:focus,
        input[type="week"]:focus,
        input[type="time"]:focus,
        input[type="datetime"]:focus,
        input[type="datetime-local"]:focus,
        textarea:focus {
            outline: none;
            outline-width: 0;
            border: #bbc7cc 1px solid;
            background: #fff;
        }

        select {
            width: 270px;
            height: 30px;
            line-height: 30px;
        }

        /* ==========================================================================
           2. Utilities
           ========================================================================== */

        /* Clears shit */
        .clearfix:before,
        .clearfix:after {
            content: " ";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            zoom: 1;
        }

        /* ==========================================================================
           3. AMP Post
           ========================================================================== */



        .main-header {
            position: relative;
            display: table;
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            height: 50px;
            background: #3498db no-repeat center center;
            background-size: cover;
            text-align: left;

            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        .content {
            background: #fff;
            padding-top: 15px;
        }
        .blog-title,
        .content {
            margin: auto;
            max-width: 600px;
        }

        .blog-title a {
            display: block;
            padding-right: 16px;
            padding-left: 16px;
            height: 50px;
            color: #fff;
            text-decoration: none;
            font-family: "Source Sans Pro", sans-serif;
            font-size: 18px;
            line-height: 50px;
            font-weight: 600;
        }

        .post {
            position: relative;
            margin-top: 0;
            margin-right: 16px;
            margin-left: 16px;
            padding-bottom: 0;
            max-width: 100%;
            border-bottom: #ebf2f6 1px solid;
            word-wrap: break-word;
            font-size: 0.95em;
            line-height: 1.65em;
        }

        .post-header {
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        .post-title {
            margin-bottom: 0;
        }

        .post-title a {
            text-decoration: none;
        }

        .post-meta {
            display: block;
            margin: 3px 0 0 0;
            color: #9eabb3;
            font-family: "Lato", sans-serif;
            font-size: 1.3rem;
            line-height: 2.2rem;
        }

        .post-meta a {
            color: #9eabb3;
            text-decoration: none;
        }

        .post-meta a:hover {
            text-decoration: underline;
        }

        .post-meta .author {
            margin: 0;
            font-size: 1.3rem;
            line-height: 1.3em;
        }

        .post-date {
            display: inline-block;
            text-transform: uppercase;
            white-space: nowrap;
            font-size: 1.2rem;
            line-height: 1.2em;
        }

        .post-image {
            margin: 0;
            padding-top: 3rem;
            padding-bottom: 30px;
            border-top: 1px #E8E8E8 solid;
        }

        /* Keep images centered, and allow images wider than the main
           text column to break out. */
        .post-content amp-img,
        .post-content amp-anim {
            /* 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%;
            display: block;
            padding: 0;
            min-width: 0;
            max-width: 112%; /* fallback when calc doesn't work */
            width: calc(100% + 32px); /* expand with to image + margins */
            height: auto;
            transform: translateX(-50%);

            -webkit-transform: translateX(-50%); /* for Safari and iOS */
            -ms-transform: translateX(-50%); /* for IE9 */
        }

        .footnotes {
            font-size: 1.3rem;
            line-height: 1.6em;
            font-style: italic;
        }

        .footnotes li {
            margin: 0.6rem 0;
        }

        .footnotes p {
            margin: 0;
        }

        .footnotes p a:last-child {
            text-decoration: none;
        }

        /* ==========================================================================
           4. Footer - The bottom the AMP Post
           ========================================================================== */

        .site-footer {
            position: relative;
            margin: 0 auto 20px auto;
            padding: 1rem 15px;
            max-width: 600px;
            color: rgba(0,0,0,0.5);
            font-family: "Open Sans", sans-serif;
            font-size: 1.1rem;
            line-height: 1.75em;
        }

        .site-footer a {
            color: rgba(0,0,0,0.5);
            text-decoration: none;
            font-weight: bold;
        }

        .site-footer a:hover {
            border-bottom: #bbc7cc 1px solid;
        }

        .poweredby {
            display: block;
            float: right;
            width: 45%;
            text-align: right;
        }

        .copyright {
            display: block;
            float: left;
            width: 45%;
        }
    </style>

    {{!-- The AMP boilerplate --}}
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    {{amp_components}}

 </head>

 <body class="amp-template">
    {{#post}}
    <header class="main-header">
        <nav class="blog-title">
            <a href="{{@blog.url}}">{{@blog.title}}</a>
        </nav>
    </header>

    <main class="content" role="main">
        <article class="post">

            <header class="post-header">
                <h1 class="post-title">{{title}}</h1>
                <section class="post-meta">
                    {{#author}}
                    <p class="author">by <a href="{{url}}">{{name}}</a></p>
                    {{/author}}
                    <time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="YYYY-MM-DD"}}</time>
                </section>
            </header>
            {{#if image}}
            <figure class="post-image">
                <amp-img src="{{image absolute="true"}}" width="600" height="400" layout="responsive"></amp-img>
            </figure>
            {{/if}}
            <section class="post-content">

                {{amp_content}}

            </section>

        </article>
    </main>
    {{/post}}
    <footer class="site-footer clearfix">
        <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
        <section class="poweredby"><a href="/privacy">Privacy Policy and Terms of Service</a></section>
    </footer>
 </body>
 </html>
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@ -64,8 +64,8 @@ h4,
 h5,
 h6 {
    font-family: 'Catamaran', sans-serif;
    line-height: 2em;
    margin: 0 0 .4em;
    line-height: 1.2em;
    margin: 1.8em 0 0.5em;
 }

 h1 {
@ -623,7 +623,6 @@ $post-meta-link: #9eabb3;

 main {
    flex-grow: 1;
    margin-top: 5rem;
 }

 // HEADER
@ -726,8 +725,13 @@ $post-date-border: #d5dbde;
    width: 24px;
 }

 .author-profile {
 	margin-top: 5rem;
 }

 .author-profile .author-image {
    margin-top: 50px;
    margin-top: 0;
    margin-bottom: 20px;
 }

 .author-image-cover {
@ -784,6 +788,10 @@ $post-date-border: #d5dbde;
 .page-title {
    line-height: 1.2em;

    @media only screen and (max-width: 500px) {
 		text-align: center;
    }

    .description {
        color: $post-meta;
        display: block;
@ -803,3 +811,7 @@ $post-date-border: #d5dbde;
        display: none;
    }
 }

 .color-cover {
 	background-color: $page-bg;
 }
--- a/author.hbs
+++ b/author.hbs
@ -6,13 +6,13 @@

 {{!-- 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="main-header author-head {{#if cover_image}}" style="background-image: url({{cover_image}}){{else}}no-cover{{/if}}">
    </header>

    <section class="author-profile inner">
        {{#if image}}
        <figure class="author-image {{#if cover}}author-image-cover{{/if}}">
            <div class="img" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></div>
        {{#if profile_image}}
        <figure class="author-image {{#if cover_image}}author-image-cover{{/if}}">
            <div class="img" style="background-image: url({{profile_image}})"><span class="hidden">{{name}}'s Picture</span></div>
        </figure>
        {{/if}}
        <h1 class="author-title">{{name}}</h1>
--- a/default.hbs
+++ b/default.hbs
@ -7,7 +7,6 @@

    {{!-- Page Meta --}}
    <title>{{meta_title}}</title>
    <meta name="description" content="{{meta_description}}" />

    {{!-- Mobile Meta --}}
    <meta name="HandheldFriendly" content="True" />
@ -23,6 +22,23 @@
    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/main.css"}}" />

 	{{!-- Syntax highlighting --}}
 	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css">
 	<style>
  		pre {
    		word-wrap: normal;
    		-moz-hyphens: none;
    		-ms-hyphens: none;
    		-webkit-hyphens: none;
    		hyphens: none;
    		font-size: 0.8em;
    		line-height: 1.3em;
  		}

    	pre code, pre tt {
    		white-space: pre;
  		}
 	</style>

    {{!-- Ghost outputs important style and meta data with this tag --}}
    {{ghost_head}}
@ -38,7 +54,7 @@

        <footer class="footer">
            <div class="container">
                Copyright Christiaan Goossens 2017.
                Copyright Christiaan Goossens 2018.
                <span class="right"><a href="/privacy">Privacy Policy and Terms of Service</a></span>
            </div>
        </footer>
@ -48,6 +64,9 @@
    {{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}}
    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>

 	{{!-- Syntax highlighting --}}
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>

    {{!-- Ghost outputs important scripts and data with this tag --}}
    {{ghost_foot}}
    {{!-- Fitvids makes video embeds responsive and awesome --}}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
    "name": "@christiaangoossens/chrg.nl",
    "name": "chrg-nl-blog-theme",
    "description": "The theme for chrg.nl",
    "version": "0.0.1",
    "engines": {
--- a/page.hbs
+++ b/page.hbs
@ -6,7 +6,7 @@

 {{!-- 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}}">
 <header class="main-header post-head {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
 </header>

 <main class="content" role="main">
--- a/partials/loop.hbs
+++ b/partials/loop.hbs
@ -13,7 +13,7 @@
        <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.name}}" nopin="nopin" />{{/if}}
        {{#if author.profile_image}}<img class="author-thumb" src="{{author.profile_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
        {{author}}
        {{tags prefix=" on "}}
        <time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
--- a/post.hbs
+++ b/post.hbs
@ -7,7 +7,7 @@

 {{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
 <header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
 <header class="main-header post-head {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
 </header>

 <main class="content" role="main">
@ -29,9 +29,9 @@
        {{!-- Everything inside the #author tags pulls data from the author --}}
        {{#author}}

            {{#if image}}
            {{#if profile_image}}
            <figure class="author-image">
                <a class="img" href="{{url}}" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></a>
                <a class="img" href="{{url}}" style="background-image: url({{profile_image}})"><span class="hidden">{{name}}'s Picture</span></a>
            </figure>
            {{/if}}

@ -85,7 +85,7 @@
 {{!-- Links to Previous/Next posts --}}
 <aside class="read-next">
    {{#next_post}}
    <a class="read-next-story {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
    <a class="read-next-story {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}color-cover{{/if}}" href="{{url}}">
        <section class="post">
            <h2>{{title}}</h2>
            <p>{{excerpt words="19"}}&hellip;</p>
@ -93,7 +93,7 @@
    </a>
    {{/next_post}}
    {{#prev_post}}
    <a class="read-next-story prev {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
    <a class="read-next-story prev {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}color-cover{{/if}}" href="{{url}}">
        <section class="post">
            <h2>{{title}}</h2>
            <p>{{excerpt words="19"}}&hellip;</p>
--- a/tag.hbs
+++ b/tag.hbs
@ -2,7 +2,7 @@
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 {{> "header" }}

 <header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}no-cover{{/if}}">
 <header class="main-header tag-head {{#if tag.feature_image}}" style="background-image: url({{tag.feature_image}}){{else}}no-cover{{/if}}">
 </header>

 {{!-- The main content area on the homepage --}}