christiaangoossens/chrg.nl
1
0
Fork 0
Code Releases 1 Activity

Finalizing template for deployment on chrg.nl

Browse Source
This commit is contained in:
Christiaan Goossens 2017-07-17 17:01:40 +02:00
parent cf23e30989
commit d650943618
12 changed files with 980 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

830
amp.hbs Normal file
View File

@ -0,0 +1,830 @@
<!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>

6
assets/css/screen.css
View File

@ -117,7 +117,7 @@ td, th{ padding: 0; }
/* Apply these base styles to all icons */
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "casper-icons", "Open Sans", sans-serif;
font-family: "casper-icons", "Lato", sans-serif;
speak: none;
font-style: normal;
font-weight: normal;
@ -369,7 +369,7 @@ textarea, select, input {
padding: 6px 9px;
margin: 0 0 5px 0;
outline: 0;
font-family: 'Open Sans', sans-serif;
font-family: 'Lato', sans-serif;
font-size: 1.6rem;
font-weight: 100;
line-height: 1.4em;
@ -423,7 +423,7 @@ button {
outline: none;
text-decoration: none;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-family: 'Lato', sans-serif;
font-size: 11px; /* Hacks targeting Firefox. */
line-height: 13px; /* Hacks targeting Firefox. */
font-weight: 300;

128
assets/scss/main.scss
View File

@ -101,6 +101,11 @@ a {
}
}
.site-wrapper {
display: flex;
flex-direction: column;
}
/**
* ===================
@ -456,7 +461,6 @@ a {
display: table;
height: 100vh;
margin-bottom: 5rem;
overflow: hidden;
position: relative;
@ -538,7 +542,8 @@ $button-shadow: rgba(0, 0, 0, .1);
text-align: center;
}
.content {
.index-content {
margin-top: 0;
position: relative;
z-index: 52;
}
@ -550,16 +555,9 @@ $button-shadow: rgba(0, 0, 0, .1);
background: $footer-color;
min-height: 5vh;
.footer-content {
.container {
@include respond-to(handhelds) {
text-align: center;
width: 90vw;
}
@include respond-to(semi-large-screens) {
width: 80vw;
}
@include respond-to(medium-screens) {
width: 80vw;
}
color: $white;
@ -567,19 +565,7 @@ $button-shadow: rgba(0, 0, 0, .1);
font-size: .6em;
height: auto;
line-height: 1.8em;
margin: auto;
max-width: 1140px;
padding: 2vh 0;
width: 60vw;
.right {
@include respond-to(handhelds) {
display: block;
float: none;
}
float: right;
}
a {
color: $white;
@ -597,6 +583,32 @@ $button-shadow: rgba(0, 0, 0, .1);
}
}
.container {
@include respond-to(handhelds) {
width: 90vw;
}
@include respond-to(semi-large-screens) {
width: 80vw;
}
@include respond-to(medium-screens) {
width: 80vw;
}
height: auto;
margin: auto;
max-width: 1140px;
width: 60vw;
.right {
@include respond-to(handhelds) {
display: block;
float: none;
}
float: right;
}
}
/**
* =================
* DEFAULT PAGE DESIGN
@ -609,6 +621,41 @@ $post-after-border: #e7eef2;
$post-meta: #9eabb3;
$post-meta-link: #9eabb3;
main {
flex-grow: 1;
margin-top: 5rem;
}
// HEADER
.top-header {
background: $page-bg;
height: auto;
.container {
@include respond-to(handhelds) {
text-align: center;
}
color: $white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.2em;
font-weight: 600;
line-height: 1.5em;
padding: 2vh 0;
a {
color: $white;
text-decoration: none;
&:hover {
border-bottom: 2px solid $white;
}
}
}
}
// This class is applied to all posts
.post {
border-bottom: $post-border 1px solid;
@ -621,6 +668,8 @@ $post-meta-link: #9eabb3;
}
.post-title {
line-height: 1.2em;
a {
text-decoration: none;
}
@ -677,6 +726,14 @@ $post-date-border: #d5dbde;
width: 24px;
}
.author-profile .author-image {
margin-top: 50px;
}
.author-image-cover {
margin-top: -100px;
}
.user-meta {
min-height: 77px;
padding: .3rem 40px 0 100px;
@ -719,3 +776,30 @@ $post-date-border: #d5dbde;
font-size: 1.4rem;
line-height: 1.5rem;
}
.no-cover {
display: none;
}
.page-title {
line-height: 1.2em;
.description {
color: $post-meta;
display: block;
font-size: .5em;
font-weight: 300;
}
}
.main-header-content {
hr {
margin: 2em 0;
}
}
.extra-pagination {
&:after {
display: none;
}
}

3
author.hbs
View File

@ -2,6 +2,7 @@
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
{{!-- The big featured header --}}
{{> "header" }}
{{!-- Everything inside the #author tags pulls data from the author --}}
{{#author}}
@ -10,7 +11,7 @@
<section class="author-profile inner">
{{#if image}}
<figure class="author-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>
</figure>
{{/if}}

2
default.hbs
View File

@ -37,7 +37,7 @@
{{{body}}}
<footer class="footer">
<div class="footer-content">
<div class="container">
Copyright Christiaan Goossens 2017.
<span class="right"><a href="/privacy">Privacy Policy and Terms of Service</a></span>
</div>

4
index.hbs
View File

@ -75,9 +75,9 @@
</header>
{{!-- The main content area on the homepage --}}
<main id="content" class="content" role="main">
<main id="content" class="content index-content" role="main">
<div class="blog-title-container">
<h4 class="blog-title">Some articles I wrote</h4>
<h4 class="blog-title">Articles</h4>
</div>
{{!-- The tag below includes the post loop - partials/loop.hbs --}}
{{> "loop"}}

1
page.hbs
View File

@ -2,6 +2,7 @@
{{!-- This is a page template. A page outputs content just like any other post, and has all the same
attributes by default, but you can also customise it to behave differently if you prefer. --}}
{{> "header" }}
{{!-- Everything inside the #post tags pulls data from the page --}}
{{#post}}

3
partials/header.hbs Normal file
View File

@ -0,0 +1,3 @@
<header class="top-header">
<div class="container"><a href="{{@blog.url}}">{{@blog.title}}</a></div>
</header>

1
partials/loop.hbs
View File

@ -6,7 +6,6 @@
{{!-- This is the post loop - each post will be output using this markup --}}
{{#foreach posts}}
<article class="{{post_class}}">
<pre>{{image}}</pre>
<header class="post-header">
<h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
</header>

9
partials/pagination.hbs Normal file
View File

@ -0,0 +1,9 @@
<nav class="pagination" role="navigation">
{{#if prev}}
<a class="newer-posts" href="{{page_url prev}}#content">&larr; Newer Posts</a>
{{/if}}
<span class="page-number">Page {{page}} of {{pages}}</span>
{{#if next}}
<a class="older-posts" href="{{page_url next}}#content">Older Posts &rarr;</a>
{{/if}}
</nav>

4
post.hbs
View File

@ -3,13 +3,15 @@
{{!-- The comment above "< default" means - insert everything in this file into
the {{{body}}} of the default.hbs template, containing the blog header/footer. --}}
{{> "header" }}
{{!-- 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>
<main class="content" role="main">
<article class="{{post_class}}">
<article class="container {{post_class}}">
<header class="post-header">
<h1 class="post-title">{{title}}</h1>

44
tag.hbs
View File

@ -1,35 +1,31 @@
{{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
{{> "header" }}
{{!-- If we have a tag cover, display that - else blog cover - else nothing --}}
<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
<nav class="main-nav overlay clearfix">
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
{{#if @blog.navigation}}
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
{{/if}}
</nav>
<div class="vertical">
{{#tag}}
<div class="main-header-content inner">
<h1 class="page-title">{{name}}</h1>
<h2 class="page-description">
{{#if description}}
{{description}}
{{else}}
A {{../pagination.total}}-post collection
{{/if}}
</h2>
</div>
{{/tag}}
</div>
<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}no-cover{{/if}}">
</header>
{{!-- The main content area on the homepage --}}
<main class="content" role="main">
{{#tag}}
<div class="main-header-content inner">
<h1 class="page-title">
{{name}}
{{#if description}}
<span class="description">{{description}}</span>
{{/if}}
</h1>
<hr/>
</div>
{{/tag}}
{{!-- The tag below includes the post loop - partials/loop.hbs --}}
{{> "loop"}}
{{#if pagination.total}}
{{> "loop"}}
{{else}}
<div class="inner"><p>There are no items in this collection.</p></div>
{{/if}}
</main>