Whatever pass I lost count

assets/css/components/global.css

@@ -8,7 +8,7 @@
     --purple: #ad26b4;
     --yellow: #fecd35;
     --red: #f05230;
-    --darkgrey: #343f44;
+    --darkgrey: #15171A;
     --midgrey: #738a94;
     --lightgrey: #c5d2d9;
     --whitegrey: #e5eff5;

assets/css/screen.css

@@ -72,7 +72,7 @@ body {
     padding-top: 12px;
     padding-bottom: 12px;
     color: #fff;
-    background: color(var(--darkgrey) l(-15%)) no-repeat center center;
+    background: color(var(--darkgrey) l(-5%)) no-repeat center center;
     background-size: cover;
 }
 
@@ -177,6 +177,14 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     flex-shrink: 0;
     display: block;
     margin-right: 24px;
+    font-size: 1.7rem;
+    font-weight: bold;
+    color: #fff;
+    letter-spacing: -0.5px;
+}
+
+.site-nav-logo:hover {
+    text-decoration: none;
 }
 
 .site-nav-logo img {
@@ -892,8 +900,8 @@ Super neat trick courtesy of @JoelDrapper
 .read-next-feed {
     display: flex;
     flex-wrap: wrap;
-    margin: 0 -15px;
+    margin: 0 -20px;
-    padding: 30px 0 0 0;
+    padding: 40px 0 0 0;
 }
 
 .read-next-card {
@@ -901,7 +909,7 @@ Super neat trick courtesy of @JoelDrapper
     flex: 1 1 300px;
     display: flex;
     flex-direction: column;
-    margin: 0 15px 30px;
+    margin: 0 20px 40px;
     padding: 25px;
     color: #fff;
     background: var(--darkgrey) center center;
@@ -935,11 +943,23 @@ Super neat trick courtesy of @JoelDrapper
     margin: 0;
     font-size: 3rem;
     line-height: 1.2em;
-    font-weight: 200;
+    font-weight: 300;
     letter-spacing: 1px;
     color: #fff;
 }
 
+.read-next-divider {
+    display: flex;
+    justify-content: center;
+    height: 80px;
+}
+
+.read-next-divider svg {
+    width: 50px;
+    stroke: #fff;
+    fill: transparent;
+}
+
 .read-next-card-content {
     flex-grow: 1;
     display: flex;
@@ -948,31 +968,32 @@ Super neat trick courtesy of @JoelDrapper
     font-size: 1.7rem;
 }
 
-.read-next-card-content a {
-    color: #fff;
-}
-
 .read-next-card-content ol {
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
+    margin: 0 auto;
-    margin: 0;
+    padding: 0 1em 0 2em;
-    padding: 0 0 0 2em;
 }
 
 .read-next-card-content li {
     padding-left: 5px;
     margin: 20px 0;
     font-size: 1.8rem;
-    line-height: 1.8rem;
+    line-height: 1.25em;
     font-weight: 200;
 }
 
 .read-next-card-content li a {
     display: inline-block;
     vertical-align: top;
-    font-size: 1.6rem;
+    font-weight: 600;
-    font-weight: 500;
+    color: #fff;
+    opacity: 0.8;
+    transition: opacity 0.3s ease;
+}
+
+.read-next-card-content li a:hover {
+    opacity: 1;
 }
 
 
@@ -1064,6 +1085,7 @@ Super neat trick courtesy of @JoelDrapper
     margin: 0 0 0 15px;
     font-size: 1.5rem;
     line-height: 1.3em;
+    letter-spacing: -0.5px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

author.hbs

@@ -15,9 +15,9 @@
     </header>
 
     <section class="author-profile inner">
-        {{#if image}}
+        {{#if feature_image}}
         <figure class="author-image">
-            <div class="img" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></div>
+            <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>

index.hbs

@@ -45,8 +45,14 @@ into the {body} of the default.hbs template --}}
 <main id="site-main" class="site-main outer" 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>

page.hbs

@@ -61,3 +61,13 @@ into the {body} of the default.hbs template --}}
 </main>
 
 {{/post}}
+
+{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
+{{#contentFor "scripts"}}
+<script>
+$(function() {
+    var $postContent = $(".post-full-content");
+    $postContent.fitVids();
+});
+</script>
+{{/contentFor}}

partials/icons/infinity.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"/></svg>

partials/loop.hbs

@@ -1,36 +0,0 @@
-<div class="post-feed">
-    {{!-- This is the post loop - each post will be output using this markup --}}
-
-    {{!-- <aside class="post-card number-3">
-        <h1>SUBSCRIBE</h1>
-    </aside> --}}
-
-    {{#foreach posts}}
-    <article class="post-card {{post_class}}">
-        {{#if feature_image}}
-            <a class="post-card-image-link" href="{{url}}">
-                <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
-            </a>
-        {{/if}}
-        <div class="post-card-content">
-            <a class="post-card-content-link" href="{{url}}">
-                <header class="post-card-header">
-                    {{#if tags}}
-                        <span class="post-card-tags">{{tags.[0].name}}</span>
-                    {{/if}}
-                    <h2 class="post-card-title">{{title}}</h2>
-                </header>
-                <section class="post-card-excerpt">
-                    <p>{{excerpt words="33"}}</p>
-                </section>
-            </a>
-            <footer class="post-card-meta">
-                {{#if author.profile_image}}
-                    <img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" nopin="nopin" />
-                {{/if}}
-                <span class="post-card-author">{{author}}</span>
-            </footer>
-        </div>
-    </article>
-    {{/foreach}}
-</div>

partials/post-card.hbs

@@ -0,0 +1,26 @@
+<article class="post-card {{post_class}}">
+    {{#if feature_image}}
+        <a class="post-card-image-link" href="{{url}}">
+            <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
+        </a>
+    {{/if}}
+    <div class="post-card-content">
+        <a class="post-card-content-link" href="{{url}}">
+            <header class="post-card-header">
+                {{#if tags}}
+                    <span class="post-card-tags">{{tags.[0].name}}</span>
+                {{/if}}
+                <h2 class="post-card-title">{{title}}</h2>
+            </header>
+            <section class="post-card-excerpt">
+                <p>{{excerpt words="33"}}</p>
+            </section>
+        </a>
+        <footer class="post-card-meta">
+            {{#if author.profile_image}}
+                <img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" />
+            {{/if}}
+            <span class="post-card-author">{{author}}</span>
+        </footer>
+    </div>
+</article>

post.hbs

@@ -9,6 +9,8 @@ into the {body} of the default.hbs template --}}
             <div class="site-nav-left">
                 {{#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}}
                 {{#if @blog.navigation}}
                     {{!-- The blog navigation links from /ghost/settings/design --}}
@@ -137,77 +139,36 @@ into the {body} of the default.hbs template --}}
         <div class="read-next-feed">
 
             {{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}}
-            <article class="read-next-card"
+                <article class="read-next-card"
-                {{#if ../tags.[0].feature_image}}
+                    {{#if ../tags.[0].feature_image}}
-                    style="background-image: url({{../tags.[0].feature_image}})"
+                        style="background-image: url({{../tags.[0].feature_image}})"
-                {{else}}
+                    {{else}}
-                    {{#if @blog.cover_image}}
+                        {{#if @blog.cover_image}}
-                        style="background-image: url({{@blog.cover_image}})"{{/if}}
+                            style="background-image: url({{@blog.cover_image}})"{{/if}}
-                {{/if}}
+                    {{/if}}
-            >
+                >
-                <header class="read-next-card-header">
+                    <header class="read-next-card-header">
-                    <h3 class="read-next-card-header-title">Read more posts like this</h3>
+                        <h3 class="read-next-card-header-title">Read more posts like this</h3>
-                </header>
+                    </header>
-                <div class="read-next-card-content">
+                    <div class="read-next-divider">{{> "icons/infinity"}}</div>
-                    <ol>
+                    <div class="read-next-card-content">
-                        {{#foreach posts}}
+                        <ol>
-                        <li><a href="{{url}}">{{title}}</a></li>
+                            {{#foreach posts}}
-                        {{/foreach}}
+                            <li><a href="{{url}}">{{title}}</a></li>
-                    </ol>
+                            {{/foreach}}
-                </div>
+                        </ol>
-            </article>
+                    </div>
+                </article>
             {{/get}}
 
+            {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
             {{#next_post}}
-            <article class="post-card {{post_class}}">
+                {{> "post-card"}}
-                {{#if feature_image}}
-                    <a class="post-card-image-link" href="{{url}}">
-                        <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
-                    </a>
-                {{/if}}
-                <div class="post-card-content">
-                    <a class="post-card-content-link" href="{{url}}">
-                        <header class="post-card-header">
-                            <h2 class="post-card-title">{{title}}</h2>
-                        </header>
-                        <section class="post-card-excerpt">
-                            <p>{{excerpt words="28"}}</p>
-                        </section>
-                    </a>
-                    <footer class="post-card-meta">
-                        {{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
-                        {{author}}
-                        {{tags prefix=" on "}}
-                        <time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
-                    </footer>
-                </div>
-            </article>
             {{/next_post}}
 
+            {{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
             {{#prev_post}}
-            <article class="post-card {{post_class}}">
+                {{> "post-card"}}
-                {{#if feature_image}}
-                    <a class="post-card-image-link" href="{{url}}">
-                        <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
-                    </a>
-                {{/if}}
-                <div class="post-card-content">
-                    <a class="post-card-content-link" href="{{url}}">
-                        <header class="post-card-header">
-                            <h2 class="post-card-title">{{title}}</h2>
-                        </header>
-                        <section class="post-card-excerpt">
-                            <p>{{excerpt words="28"}}</p>
-                        </section>
-                    </a>
-                    <footer class="post-card-meta">
-                        {{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
-                        {{author}}
-                        {{tags prefix=" on "}}
-                        <time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
-                    </footer>
-                </div>
-            </article>
             {{/prev_post}}
 
         </div>

tag.hbs

@@ -49,8 +49,14 @@
 <main id="site-main" class="site-main outer" 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>