Introduce new post loop partial + new multi-author post meta
This commit is contained in:
parent
088a867cea
commit
6ae074b724
5 changed files with 78 additions and 83 deletions
|
@ -217,7 +217,6 @@ h1 {
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 4.4rem;
|
font-size: 4.4rem;
|
||||||
letter-spacing: -1px;
|
letter-spacing: -1px;
|
||||||
text-indent: -2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
|
@ -245,11 +244,6 @@ a:hover {
|
||||||
color: #111;
|
color: #111;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 a, h2 a, h3 a,
|
|
||||||
h4 a, h5 a, h6 a {
|
|
||||||
color: #50585D;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-template .post-title {
|
.post-template .post-title {
|
||||||
margin-bottom: 3.4rem;
|
margin-bottom: 3.4rem;
|
||||||
}
|
}
|
||||||
|
@ -672,6 +666,10 @@ margin on the iframe, cause it breaks stuff. */
|
||||||
box-shadow: #FFF 0 0 0 5px;
|
box-shadow: #FFF 0 0 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body:not(.post-template) .post-title {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
.post-title a {
|
.post-title a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
@ -685,13 +683,22 @@ margin on the iframe, cause it breaks stuff. */
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-meta {
|
.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-family: "Open Sans", sans-serif;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
line-height: 2.2rem;
|
||||||
color: #9EABB3;
|
color: #9EABB3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.author-thumb {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
float: left;
|
||||||
|
margin-right: 9px;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.post-meta a {
|
.post-meta a {
|
||||||
color: #9EABB3;
|
color: #9EABB3;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -707,6 +714,15 @@ margin on the iframe, cause it breaks stuff. */
|
||||||
min-height: 77px;
|
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 {
|
.user-image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -1240,6 +1256,10 @@ margin on the iframe, cause it breaks stuff. */
|
||||||
font-size: 2rem;
|
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
|
font-size: 0.8em
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body:not(.post-template) .post-title {
|
||||||
|
font-size: 3.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.post-template .post {
|
.post-template .post {
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
@ -1441,6 +1465,10 @@ margin on the iframe, cause it breaks stuff. */
|
||||||
line-height: 1.55em;
|
line-height: 1.55em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-date {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.post-template .post-title {
|
.post-template .post-title {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
@ -1493,6 +1521,10 @@ margin on the iframe, cause it breaks stuff. */
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body:not(.post-template) .post-title {
|
||||||
|
font-size: 2.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
.post-template .post {
|
.post-template .post {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
29
author.hbs
29
author.hbs
|
@ -1,9 +1,7 @@
|
||||||
{{!< default}}
|
{{!< 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}}>
|
<header class="main-header author-head" {{#if @blog.cover}}style="background-image: url({{author.cover}})"{{/if}}>
|
||||||
<nav class="main-nav overlay clearfix">
|
<nav class="main-nav overlay clearfix">
|
||||||
<a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
|
<a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
|
||||||
|
@ -29,26 +27,7 @@
|
||||||
{{! The main content area on the homepage }}
|
{{! The main content area on the homepage }}
|
||||||
<main class="content" role="main">
|
<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}}">»</a></p>
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
{{/foreach}}
|
|
||||||
|
|
||||||
{{! After all the posts, we have the previous/next pagination links }}
|
|
||||||
{{pagination}}
|
|
||||||
|
|
||||||
</main>
|
</main>
|
28
index.hbs
28
index.hbs
|
@ -1,9 +1,7 @@
|
||||||
{{!< default}}
|
{{!< 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}}">
|
<header class="main-header {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
|
||||||
<nav class="main-nav overlay clearfix">
|
<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}}
|
{{#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 }}
|
{{! The main content area on the homepage }}
|
||||||
<main class="content" role="main">
|
<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}}">»</a></p>
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
{{/foreach}}
|
|
||||||
|
|
||||||
{{! Previous/next page links - only displayed on every page }}
|
|
||||||
{{pagination}}
|
|
||||||
|
|
||||||
</main>
|
</main>
|
25
partials/loop.hbs
Normal file
25
partials/loop.hbs
Normal file
|
@ -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}}">»</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}}
|
31
tag.hbs
31
tag.hbs
|
@ -1,13 +1,11 @@
|
||||||
{{!< default}}
|
{{!< 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}}>
|
<header class="tag-head main-header" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
|
||||||
<nav class="main-nav overlay clearfix">
|
<nav class="main-nav overlay clearfix">
|
||||||
<a class="back-button icon-arrow-left" href="{{@blog.url}}">Home</a>
|
<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>
|
</nav>
|
||||||
<div class="vertical">
|
<div class="vertical">
|
||||||
<div class="main-header-content inner">
|
<div class="main-header-content inner">
|
||||||
|
@ -20,26 +18,7 @@
|
||||||
{{! The main content area on the homepage }}
|
{{! The main content area on the homepage }}
|
||||||
<main class="content" role="main">
|
<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}}">»</a></p>
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
{{/foreach}}
|
|
||||||
|
|
||||||
{{! After all the posts, we have the previous/next pagination links }}
|
|
||||||
{{pagination}}
|
|
||||||
|
|
||||||
</main>
|
</main>
|
Loading…
Reference in a new issue