Global templates and 404
This commit is contained in:
John O'Nolan
parent
5e970154fa
commit
9fac3beb29
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -27,20 +27,30 @@ production stylesheet in assets/built/screen.css using: gulp dev
|
|||
|
||||
html,
|
||||
.gh-viewport {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.gh-main {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Global */
|
||||
|
||||
.gh-page {
|
||||
padding: 0 4vw;
|
||||
}
|
||||
|
||||
.gh-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* .gh-main {
|
||||
padding: 0 4vw;
|
||||
} */
|
||||
|
||||
|
||||
.gh-head-actions a {
|
||||
display: inline-flex;
|
||||
|
|
@ -62,6 +72,39 @@ html,
|
|||
height: 2rem;
|
||||
}
|
||||
|
||||
/* Errors
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-error {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-bottom: 2vmin;
|
||||
}
|
||||
|
||||
.gh-error-content {
|
||||
flex: 1 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-error-code {
|
||||
margin: 0;
|
||||
font-size: 14vmin;
|
||||
}
|
||||
|
||||
.gh-error-description {
|
||||
font-size: 4vmin;
|
||||
font-weight: 300;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.gh-error-link {
|
||||
display: block;
|
||||
margin-top: 4vmin;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
|
||||
/* Footer
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
|
|||
66
author.hbs
66
author.hbs
|
|
@ -1,35 +1,41 @@
|
|||
{{!< default}}
|
||||
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
|
||||
|
||||
{{#author}}
|
||||
{{!-- Everything inside the #author tags pulls data from the author --}}
|
||||
<header class="page-head">
|
||||
<h1 class="page-head-title">{{name}}</h1>
|
||||
{{#if bio}}<p class="page-head-description">{{bio}}</p>{{/if}}
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
<div class="author-meta">
|
||||
<div class="author-links">
|
||||
{{#if website}}
|
||||
<a href="{{website}}" target="_blank" rel="noopener">Website</a> <span class="divider">/</span>
|
||||
{{/if}}
|
||||
{{#if twitter}}
|
||||
<a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a> <span class="divider">/</span>
|
||||
{{/if}}
|
||||
{{#if facebook}}
|
||||
<a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a> <span class="divider">/</span>
|
||||
{{/if}}
|
||||
<a href="https://feedly.com/i/subscription/feed/{{url absolute="true"}}rss/" target="_blank" rel="noopener">RSS</a>
|
||||
{{#author}}
|
||||
{{!-- Everything inside the #author tags pulls data from the author --}}
|
||||
|
||||
<header class="page-head">
|
||||
<h1 class="page-head-title">{{name}}</h1>
|
||||
{{#if bio}}<p class="page-head-description">{{bio}}</p>{{/if}}
|
||||
|
||||
<div class="author-meta">
|
||||
<div class="author-links">
|
||||
{{#if website}}
|
||||
<a href="{{website}}" target="_blank" rel="noopener">Website</a> <span class="divider">/</span>
|
||||
{{/if}}
|
||||
{{#if twitter}}
|
||||
<a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a> <span class="divider">/</span>
|
||||
{{/if}}
|
||||
{{#if facebook}}
|
||||
<a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a> <span class="divider">/</span>
|
||||
{{/if}}
|
||||
<a href="https://feedly.com/i/subscription/feed/{{url absolute="true"}}rss/" target="_blank" rel="noopener">RSS</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{/author}}
|
||||
|
||||
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{> "post-card"}} {{!-- partials/post-card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
{{/author}}
|
||||
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{> "post-card"}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
22
default.hbs
22
default.hbs
|
|
@ -66,6 +66,8 @@
|
|||
|
||||
</div>
|
||||
|
||||
{{!-- <foot> --}}
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
|
||||
{{#if pagination.pages}}
|
||||
|
|
@ -84,8 +86,24 @@ $(document).ready(function () {
|
|||
});
|
||||
</script>
|
||||
|
||||
{{{block "scripts"}}}
|
||||
{{!-- The #block helper will pull in data from the #contentFor other template files --}}
|
||||
{{#is "post, page"}}
|
||||
<script src="{{asset "built/jquery.fitvids.js"}}"></script>
|
||||
<script>
|
||||
var images = document.querySelectorAll('.kg-gallery-image img');
|
||||
images.forEach(function (image) {
|
||||
var container = image.closest('.kg-gallery-image');
|
||||
var width = image.attributes.width.value;
|
||||
var height = image.attributes.height.value;
|
||||
var ratio = width / height;
|
||||
container.style.flex = ratio + ' 1 0%';
|
||||
});
|
||||
$(document).ready(function () {
|
||||
// FitVids - start
|
||||
var $postContent = $(".gh-content");
|
||||
$postContent.fitVids();
|
||||
});
|
||||
</script>
|
||||
{{/is}}
|
||||
|
||||
{{ghost_foot}}
|
||||
{{!-- Outputs important scripts - should always be included before closing body tag --}}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,13 @@
|
|||
{{!--
|
||||
{{!< default}}
|
||||
|
||||
A 404 error template, served whenever someone tries to access a page which does not exist.
|
||||
<section class="gh-page gh-error">
|
||||
<div class="gh-container">
|
||||
|
||||
--}}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>{{meta_title}}</title>
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
|
||||
</head>
|
||||
<body class="error-template">
|
||||
<div class="site-wrapper">
|
||||
|
||||
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-image{{/if}}">
|
||||
<div class="inner">
|
||||
<nav class="site-nav-center">
|
||||
{{#if @site.logo}}
|
||||
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{img_url @site.logo size="xs"}}" alt="{{@site.title}}" /></a>
|
||||
{{else}}
|
||||
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="site-main" class="site-main outer">
|
||||
<div class="inner">
|
||||
<section class="error-message">
|
||||
<h1 class="error-code">{{statusCode}}</h1>
|
||||
<p class="error-description">{{message}}</p>
|
||||
<a class="error-link" href="{{@site.url}}">Go to the front page →</a>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<section class="gh-error-content">
|
||||
<h1 class="gh-error-code">{{statusCode}}</h1>
|
||||
<p class="gh-error-description">{{message}}</p>
|
||||
<p class="gh-error-link"><a href="{{@site.url}}">Go to the front page →</a></p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</section>
|
||||
|
|
|
|||
21
index.hbs
21
index.hbs
|
|
@ -1,22 +1,15 @@
|
|||
{{!< default}}
|
||||
|
||||
<div class="gh-container">
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
{{#is "home"}}
|
||||
{{#if @site.description}}
|
||||
<header class="page-head">
|
||||
<h2 class="page-head-title">{{@site.description}}</h2>
|
||||
</header>
|
||||
{{/if}}
|
||||
{{/is}}
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
{{> "post-card"}} {{!-- partials/post-card.hbs --}}
|
||||
|
||||
{{> "post-card"}}
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
19
page.hbs
19
page.hbs
|
|
@ -1,7 +1,8 @@
|
|||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
<article class="gh-page {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
|
||||
|
||||
<article class="{{post_class}}">
|
||||
|
||||
<header class="gh-header gh-canvas">
|
||||
{{#if feature_image}}
|
||||
|
|
@ -20,19 +21,5 @@
|
|||
</div>
|
||||
|
||||
</article>
|
||||
{{/post}}
|
||||
|
||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
// Layout Script for Ghost Gallery Cards
|
||||
var images = document.querySelectorAll('.kg-gallery-image img');
|
||||
images.forEach(function (image) {
|
||||
var container = image.closest('.kg-gallery-image');
|
||||
var width = image.attributes.width.value;
|
||||
var height = image.attributes.height.value;
|
||||
var ratio = width / height;
|
||||
container.style.flex = ratio + ' 1 0%';
|
||||
})
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
{{/post}}
|
||||
|
|
|
|||
27
post.hbs
27
post.hbs
|
|
@ -1,7 +1,7 @@
|
|||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
<article class="gh-post {{post_class}}">
|
||||
<article class="{{post_class}}">
|
||||
|
||||
<header class="gh-header gh-canvas">
|
||||
{{#if feature_image}}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
{{content}}
|
||||
</div>
|
||||
|
||||
<footer class="gh-post-footer gh-canvas">
|
||||
<footer class="gh-footer gh-canvas">
|
||||
|
||||
<div class="gh-post-authors">
|
||||
Written by {{#foreach authors}}<a href="{{url}}">{{name}}</a>{{/foreach}}
|
||||
|
|
@ -35,26 +35,3 @@
|
|||
|
||||
</article>
|
||||
{{/post}}
|
||||
|
||||
|
||||
{{#contentFor "scripts"}}
|
||||
<script src="{{asset "built/jquery.fitvids.js"}}"></script>
|
||||
<script>
|
||||
var images = document.querySelectorAll('.kg-gallery-image img');
|
||||
images.forEach(function (image) {
|
||||
var container = image.closest('.kg-gallery-image');
|
||||
var width = image.attributes.width.value;
|
||||
var height = image.attributes.height.value;
|
||||
var ratio = width / height;
|
||||
container.style.flex = ratio + ' 1 0%';
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
// FitVids - start
|
||||
var $postContent = $(".gh-content");
|
||||
$postContent.fitVids();
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
|
||||
{{!-- The #contentFor helper sends everything in it to the matching #block helper in default.hbs --}}
|
||||
|
|
|
|||
43
tag.hbs
43
tag.hbs
|
|
@ -1,25 +1,28 @@
|
|||
{{!< default}}
|
||||
{{!-- The tag above means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
|
||||
{{#tag}}
|
||||
<header class="page-head">
|
||||
<h1 class="page-head-title">{{name}}</h1>
|
||||
<p class="page-head-description">
|
||||
{{#if description}}
|
||||
{{description}}
|
||||
{{else}}
|
||||
A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
||||
{{/if}}
|
||||
</p>
|
||||
</header>
|
||||
{{/tag}}
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
{{#tag}}
|
||||
<header class="page-head">
|
||||
<h1 class="page-head-title">{{name}}</h1>
|
||||
<p class="page-head-description">
|
||||
{{#if description}}
|
||||
{{description}}
|
||||
{{else}}
|
||||
A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
||||
{{/if}}
|
||||
</p>
|
||||
</header>
|
||||
{{/tag}}
|
||||
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{> "post-card"}}
|
||||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{> "post-card"}} {{!-- partials/post-card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue