Global templates and 404
This commit is contained in:
John O'Nolan
parent
5e970154fa
commit
9fac3beb29
10 changed files with 149 additions and 152 deletions
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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
|
|||
12
author.hbs
12
author.hbs
|
|
@ -1,8 +1,11 @@
|
|||
{{!< default}}
|
||||
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
|
||||
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
{{#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}}
|
||||
|
|
@ -22,14 +25,17 @@
|
|||
</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"}}
|
||||
{{> "post-card"}} {{!-- partials/post-card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
</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 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>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</section>
|
||||
|
|
|
|||
13
index.hbs
13
index.hbs
|
|
@ -1,22 +1,15 @@
|
|||
{{!< default}}
|
||||
|
||||
<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}}
|
||||
|
||||
{{> "post-card"}}
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{> "post-card"}} {{!-- partials/post-card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
</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 --}}
|
||||
|
|
|
|||
11
tag.hbs
11
tag.hbs
|
|
@ -1,6 +1,7 @@
|
|||
{{!< default}}
|
||||
{{!-- The tag above means: insert everything in this file
|
||||
into the {body} of the default.hbs template --}}
|
||||
|
||||
<div class="gh-page">
|
||||
<div class="gh-container">
|
||||
|
||||
{{#tag}}
|
||||
<header class="page-head">
|
||||
|
|
@ -18,8 +19,10 @@ into the {body} of the default.hbs template --}}
|
|||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{> "post-card"}}
|
||||
{{> "post-card"}} {{!-- partials/post-card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue