Introduce new post loop partial + new multi-author post meta

assets/css/screen.css

@@ -217,7 +217,6 @@ h1 {
 h2 {
     font-size: 4.4rem;
     letter-spacing: -1px;
-    text-indent: -2px;
 }
 
 h3 {
@@ -245,11 +244,6 @@ a:hover {
     color: #111;
 }
 
-h1 a, h2 a, h3 a,
-h4 a, h5 a, h6 a {
-    color: #50585D;
-}
-
 .post-template .post-title {
     margin-bottom: 3.4rem;
 }
@@ -672,6 +666,10 @@ margin on the iframe, cause it breaks stuff. */
     box-shadow: #FFF 0 0 0 5px;
 }
 
+body:not(.post-template) .post-title {
+    font-size: 4rem;
+}
+
 .post-title a {
     text-decoration: none;
 }
@@ -685,13 +683,22 @@ margin on the iframe, cause it breaks stuff. */
 }
 
 .post-meta {
-    display: inline-block;
+    display: block;
-    margin: 0 0 5px 0;
+    margin: 2rem 0 0.6rem 0;
     font-family: "Open Sans", sans-serif;
     font-size: 1.5rem;
+    line-height: 2.2rem;
     color: #9EABB3;
 }
 
+.author-thumb {
+    width: 24px;
+    height: 24px;
+    float: left;
+    margin-right: 9px;
+    border-radius: 100%;
+}
+
 .post-meta a {
     color: #9EABB3;
     text-decoration: none;
@@ -707,6 +714,15 @@ margin on the iframe, cause it breaks stuff. */
     min-height: 77px;
 }
 
+.post-date {
+    display: inline-block;
+    margin-left: 8px;
+    padding-left: 12px;
+    border-left: #d5dbde 1px solid;
+    text-transform: uppercase;
+    font-size: 1.3rem;
+}
+
 .user-image {
     position: absolute;
     top: 0;
@@ -1240,6 +1256,10 @@ margin on the iframe, cause it breaks stuff. */
         font-size: 2rem;
     }
 
+    body:not(.post-template) .post-title {
+        font-size: 3.6rem;
+    }
+
 }
 
 
@@ -1290,6 +1310,10 @@ margin on the iframe, cause it breaks stuff. */
         font-size: 0.8em
     }
 
+    body:not(.post-template) .post-title {
+        font-size: 3.2rem;
+    }
+
     .post-template .post {
         padding-bottom: 1rem;
     }
@@ -1441,6 +1465,10 @@ margin on the iframe, cause it breaks stuff. */
         line-height: 1.55em;
     }
 
+    .post-date {
+        display: none;
+    }
+
     .post-template .post-title {
         margin-bottom: 2rem;
     }
@@ -1493,6 +1521,10 @@ margin on the iframe, cause it breaks stuff. */
         font-size: 1.7rem;
     }
 
+    body:not(.post-template) .post-title {
+        font-size: 2.6rem;
+    }
+
     .post-template .post {
         padding-bottom: 0;
         margin-bottom: 0;

author.hbs

@@ -1,9 +1,7 @@
 {{!< default}}
+{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
 
-{{! The comment above "< default" means - insert everything in this file into
+{{! The big featured header }}
-    the {body} of the default.hbs template, which contains our header/footer. }}
-
-{{! The big featured header on the homepage, with the site logo and description }}
 <header class="main-header author-head" {{#if @blog.cover}}style="background-image: url({{author.cover}})"{{/if}}>
     <nav class="main-nav overlay clearfix">
         <a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
@@ -29,26 +27,7 @@
 {{! The main content area on the homepage }}
 <main class="content" role="main">
 
-    {{! Previous/next page links - only displayed on page 2+ }}
+    {{! The tag below includes the post loop - partials/loop.hbs }}
-    <div class="extra-pagination inner">
+    {{> "loop"}}
-        {{pagination}}
-    </div>
-
-    {{! Each post will be output using this markup }}
-    {{#foreach posts}}
-    <article class="{{post_class}}">
-        <header class="post-header">
-            <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
-            <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
-
-        </header>
-        <section class="post-excerpt">
-            <p>{{excerpt}} <a class="read-more" href="{{url}}">&raquo;</a></p>
-        </section>
-    </article>
-    {{/foreach}}
-
-    {{! After all the posts, we have the previous/next pagination links }}
-    {{pagination}}
 
 </main>

index.hbs

@@ -1,9 +1,7 @@
 {{!< default}}
+{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
 
-{{! The comment above "< default" means - insert everything in this file into
+{{! The big featured header }}
-    the {body} of the default.hbs template, which contains our header/footer. }}
-
-{{! The big featured header on the homepage, with the site logo and description }}
 <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}}
@@ -20,25 +18,7 @@
 {{! The main content area on the homepage }}
 <main class="content" role="main">
 
-    {{! Previous/next page links - only displayed on page 2+ }}
+    {{! The tag below includes the post loop - partials/loop.hbs }}
-    <div class="extra-pagination inner">
+    {{> "loop"}}
-        {{pagination}}
-    </div>
-
-    {{! Each post will be output using this markup }}
-    {{#foreach posts}}
-    <article class="{{post_class}}">
-        <header class="post-header">
-            <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
-            <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
-        </header>
-        <section class="post-excerpt">
-            <p>{{excerpt}} <a class="read-more" href="{{url}}">&raquo;</a></p>
-        </section>
-    </article>
-    {{/foreach}}
-
-    {{! Previous/next page links - only displayed on every page }}
-    {{pagination}}
 
 </main>

partials/loop.hbs

@@ -0,0 +1,25 @@
+{{! Previous/next page links - only displayed on page 2+ }}
+<div class="extra-pagination inner">
+    {{pagination}}
+</div>
+
+{{! This is the post loop - each post will be output using this markup }}
+{{#foreach posts}}
+<article class="{{post_class}}">
+    <header class="post-header">
+        <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
+    </header>
+    <section class="post-excerpt">
+        <p>{{excerpt words="30"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
+    </section>
+    <footer class="post-meta">
+        <img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />
+        <a href="{{@blog.url}}/author/{{author.slug}}">{{author.name}}</a>
+        {{tags prefix=" on "}} 
+        <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time> 
+    </footer>
+</article>
+{{/foreach}}
+
+{{! Previous/next page links - displayed on every page }}
+{{pagination}}

tag.hbs

@@ -1,13 +1,11 @@
 {{!< default}}
+{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
 
-{{! The comment above "< default" means - insert everything in this file into
+{{! The big featured header }}
-    the {body} of the default.hbs template, which contains our header/footer. }}
-
-{{! The big featured header on the homepage, with the site logo and description }}
 <header class="tag-head main-header" {{#if @blog.cover}}style="background-image: url({{@blog.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="{{@blog.url}}/rss/">Subscribe</a>
+        <a class="subscribe-button icon-feed" href="{{@blog.url}}/tag/{{tag.slug}}/rss/">{{tag.name}}</a>
     </nav>
     <div class="vertical">
         <div class="main-header-content inner">
@@ -20,26 +18,7 @@
 {{! The main content area on the homepage }}
 <main class="content" role="main">
 
-    {{! Previous/next page links - only displayed on page 2+ }}
+    {{! The tag below includes the post loop - partials/loop.hbs }}
-    <div class="extra-pagination inner">
+    {{> "loop"}}
-        {{pagination}}
-    </div>
-
-    {{! Each post will be output using this markup }}
-    {{#foreach posts}}
-    <article class="{{post_class}}">
-        <header class="post-header">
-            <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
-            <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
-
-        </header>
-        <section class="post-excerpt">
-            <p>{{excerpt}} <a class="read-more" href="{{url}}">&raquo;</a></p>
-        </section>
-    </article>
-    {{/foreach}}
-
-    {{! After all the posts, we have the previous/next pagination links }}
-    {{pagination}}
 
 </main>