Add tag.hbs template
Adds a tag.hbs template and some styles to correspond with it.
This commit is contained in:
polygonix
parent
fdb52484b5
commit
381cdc7e29
|
|
@ -10,11 +10,12 @@
|
|||
3. Utilities
|
||||
4. General
|
||||
5. Single Post
|
||||
6. Third Party Elements
|
||||
7. Pagination
|
||||
8. Footer
|
||||
9. Media Queries (Tablet)
|
||||
10. Media Queries (Mobile)
|
||||
6. Tag Archive
|
||||
7. Third Party Elements
|
||||
8. Pagination
|
||||
9. Footer
|
||||
10. Media Queries (Tablet)
|
||||
11. Media Queries (Mobile)
|
||||
|
||||
*/
|
||||
|
||||
|
|
@ -731,7 +732,56 @@ margin on the iframe, cause it breaks stuff. */
|
|||
|
||||
|
||||
/* ==========================================================================
|
||||
6. Third Party Elements - Embeds from other services
|
||||
6. Tag archive
|
||||
========================================================================== */
|
||||
|
||||
.archive-template .site-head {
|
||||
height: auto;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.archive-template .site-head a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.archive-template .blog-logo {
|
||||
display: block;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.tag-archive-header {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 4rem auto;
|
||||
border-bottom: 1px solid #EBF2F6;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag-archive-header:after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border: #E7EEF2 1px solid;
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
background: #fff;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
box-shadow: #fff 0 0 0 5px;
|
||||
}
|
||||
|
||||
.archive-template .blog-title {
|
||||
display: inline-block;
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
7. Third Party Elements - Embeds from other services
|
||||
========================================================================== */
|
||||
|
||||
/* Github */
|
||||
|
|
@ -748,7 +798,7 @@ margin on the iframe, cause it breaks stuff. */
|
|||
|
||||
|
||||
/* ==========================================================================
|
||||
7. Pagination - Tools to let you flick between pages
|
||||
8. Pagination - Tools to let you flick between pages
|
||||
========================================================================== */
|
||||
|
||||
/* The main wrapper for our pagination links */
|
||||
|
|
@ -799,7 +849,7 @@ margin on the iframe, cause it breaks stuff. */
|
|||
|
||||
|
||||
/* ==========================================================================
|
||||
8. Footer - The bottom of every page
|
||||
9. Footer - The bottom of every page
|
||||
========================================================================== */
|
||||
|
||||
.site-footer {
|
||||
|
|
@ -916,7 +966,7 @@ margin on the iframe, cause it breaks stuff. */
|
|||
|
||||
|
||||
/* ==========================================================================
|
||||
9. Media Queries - Smaller than 900px
|
||||
10. Media Queries - Smaller than 900px
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
|
|
@ -977,7 +1027,7 @@ margin on the iframe, cause it breaks stuff. */
|
|||
}
|
||||
|
||||
/* ==========================================================================
|
||||
10. Media Queries - Smaller than 500px
|
||||
11. Media Queries - Smaller than 500px
|
||||
========================================================================== */
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
{{!< default}}
|
||||
|
||||
{{! The comment above "< default" means - insert everything in this file into
|
||||
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="site-head" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
|
||||
<div class="vertical">
|
||||
<div class="site-head-content inner">
|
||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
|
||||
<h1 class="blog-title">{{@blog.title}}</h1>
|
||||
<h2 class="blog-description">{{@blog.description}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{! The main content area on the homepage }}
|
||||
<main class="content" role="main">
|
||||
|
||||
<header class="tag-archive-header">
|
||||
<h1>{{tag.name}}</h1>
|
||||
</header>
|
||||
|
||||
{{! 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}}…</p>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
{{/foreach}}
|
||||
|
||||
{{!! After all the posts, we have the previous/next pagination links }}
|
||||
{{pagination}}
|
||||
|
||||
</main>
|
||||
Loading…
Reference in New Issue