Style refresh
This commit is contained in:
John O'Nolan
parent
609507d22d
commit
6c7cf02111
15 changed files with 866 additions and 1728 deletions
|
|
@ -1,2 +1,2 @@
|
||||||
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}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;border:none}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:focus{outline:none}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]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#25272a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:5rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.6rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
|
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}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;border:none}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:focus{outline:none}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]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#35373a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:5rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.6rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
|
||||||
/*# sourceMappingURL=global.css.map */
|
/*# sourceMappingURL=global.css.map */
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -262,7 +262,7 @@ html {
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
color: #25272A;
|
color: #35373A;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
line-height: 1.6em;
|
line-height: 1.6em;
|
||||||
|
|
@ -401,10 +401,6 @@ a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -6,7 +6,11 @@
|
||||||
|
|
||||||
|
|
||||||
<header class="site-archive-header">
|
<header class="site-archive-header">
|
||||||
{{> site-header}}
|
<div class="outer site-nav-main">
|
||||||
|
<div class="inner">
|
||||||
|
{{> "site-nav"}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
{{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<div class="site-header-content author-header">
|
<div class="site-header-content author-header">
|
||||||
|
|
|
||||||
110
default.hbs
110
default.hbs
|
|
@ -2,38 +2,31 @@
|
||||||
<html lang="{{@site.lang}}">
|
<html lang="{{@site.lang}}">
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
{{!-- Document Settings --}}
|
{{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
|
||||||
|
<title>{{meta_title}}</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
|
||||||
{{!-- Base Meta --}}
|
|
||||||
<title>{{meta_title}}</title>
|
|
||||||
<meta name="HandheldFriendly" content="True" />
|
<meta name="HandheldFriendly" content="True" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
{{!-- Styles'n'Scripts --}}
|
{{!-- Theme assets - use the {asset} helper to reference styles & scripts,
|
||||||
|
this will take care of caching and cache-busting automatically --}}
|
||||||
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
|
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
|
||||||
|
|
||||||
{{#if @site.accent_color}}
|
{{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
|
||||||
<style>
|
it should always be the last tag before the closing head tag --}}
|
||||||
:root {
|
|
||||||
--brand: {{@site.accent_color}};
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{!-- This tag outputs SEO meta+structured data and other important settings --}}
|
|
||||||
{{ghost_head}}
|
{{ghost_head}}
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body class="{{body_class}}">
|
<body class="{{body_class}}">
|
||||||
|
|
||||||
|
|
||||||
<div class="site-wrapper">
|
<div class="site-wrapper">
|
||||||
|
|
||||||
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
|
{{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
|
||||||
{{{body}}}
|
{{{body}}}
|
||||||
|
|
||||||
{{!-- The footer at the very bottom of the screen --}}
|
{{!-- The global footer at the very bottom of the screen --}}
|
||||||
<footer class="site-footer outer">
|
<footer class="site-footer outer">
|
||||||
<div class="site-footer-content inner">
|
<div class="site-footer-content inner">
|
||||||
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> © {{date format="YYYY"}}</section>
|
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> © {{date format="YYYY"}}</section>
|
||||||
|
|
@ -48,58 +41,53 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{!-- jQuery, required for fitvids --}}
|
|
||||||
<script
|
|
||||||
src="https://code.jquery.com/jquery-3.5.1.min.js"
|
|
||||||
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
|
|
||||||
crossorigin="anonymous">
|
|
||||||
</script>
|
|
||||||
{{!-- Fitvids (for responsive video embeds), infinite scroll, floating header, and gallery card support --}}
|
|
||||||
<script src="{{asset "built/casper.js"}}"></script>
|
|
||||||
|
|
||||||
{{!-- Scripts for Members subscription --}}
|
{{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
|
||||||
<script>
|
<script
|
||||||
// Parse the URL parameter
|
src="https://code.jquery.com/jquery-3.5.1.min.js"
|
||||||
function getParameterByName(name, url) {
|
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
|
||||||
if (!url) url = window.location.href;
|
crossorigin="anonymous">
|
||||||
name = name.replace(/[\[\]]/g, "\\$&");
|
</script>
|
||||||
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
<script src="{{asset "built/casper.js"}}"></script>
|
||||||
results = regex.exec(url);
|
<script>
|
||||||
if (!results) return null;
|
// Parse the URL parameter
|
||||||
if (!results[2]) return '';
|
function getParameterByName(name, url) {
|
||||||
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
if (!url) url = window.location.href;
|
||||||
|
name = name.replace(/[\[\]]/g, "\\$&");
|
||||||
|
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
||||||
|
results = regex.exec(url);
|
||||||
|
if (!results) return null;
|
||||||
|
if (!results[2]) return '';
|
||||||
|
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Give the parameter a variable name
|
||||||
|
var action = getParameterByName('action');
|
||||||
|
var success = getParameterByName('success');
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
if (action == 'subscribe' && (success === null || success === 'true')) {
|
||||||
|
$('body').addClass('subscribe-success');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Give the parameter a variable name
|
if (action == 'subscribe' && success === 'false') {
|
||||||
var action = getParameterByName('action');
|
$('body').addClass('subscribe-failure');
|
||||||
var success = getParameterByName('success');
|
}
|
||||||
|
|
||||||
$(document).ready(function () {
|
$('.subscribe-notification .subscribe-close-button').click(function () {
|
||||||
if (action == 'subscribe' && (success === null || success === 'true')) {
|
$('.subscribe-notification').addClass('close');
|
||||||
$('body').addClass('subscribe-success');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (action == 'subscribe' && success === 'false') {
|
|
||||||
$('body').addClass('subscribe-failure');
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.subscribe-notification .subscribe-close-button').click(function () {
|
|
||||||
$('.subscribe-notification').addClass('close');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Reset form on opening subscrion overlay
|
|
||||||
$('.subscribe-button').click(function() {
|
|
||||||
$('.subscribe-overlay form').removeClass();
|
|
||||||
$('.subscribe-email').val('');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
</script>
|
|
||||||
|
|
||||||
{{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
|
// Reset form on opening subscrion overlay
|
||||||
{{{block "scripts"}}}
|
$('.subscribe-button').click(function() {
|
||||||
|
$('.subscribe-overlay form').removeClass();
|
||||||
|
$('.subscribe-email').val('');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
{{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
|
{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}
|
||||||
{{ghost_foot}}
|
{{ghost_foot}}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,11 @@ It's a good idea to keep this template as minimal as possible in terms of both f
|
||||||
into the {body} of the default.hbs template --}}
|
into the {body} of the default.hbs template --}}
|
||||||
|
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
{{> site-header}}
|
<div class="outer site-nav-main">
|
||||||
|
<div class="inner">
|
||||||
|
{{> "site-nav"}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main id="site-main" class="site-main outer error-content">
|
<main id="site-main" class="site-main outer error-content">
|
||||||
|
|
|
||||||
93
index.hbs
93
index.hbs
|
|
@ -36,63 +36,60 @@ into the {body} of the default.hbs template --}}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{{> site-header}}
|
<div class="outer site-nav-main">
|
||||||
|
<div class="inner">
|
||||||
|
{{> "site-nav"}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
{{!-- Scripts - Sticky behaviour for the header/nav when scrolling --}}
|
||||||
{{#contentFor "scripts"}}
|
|
||||||
<script>
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
|
||||||
// NOTE: Scroll performance is poor in Safari
|
var nav = document.querySelector('.site-nav-main .site-nav');
|
||||||
// - this appears to be due to the events firing much more slowly in Safari.
|
var feed = document.querySelector('.post-feed');
|
||||||
// Dropping the scroll event and using only a raf loop results in smoother
|
|
||||||
// scrolling but continuous processing even when not scrolling
|
|
||||||
$(document).ready(function () {
|
|
||||||
|
|
||||||
var nav = document.querySelector('.site-nav-main .site-nav');
|
var lastScrollY = window.scrollY;
|
||||||
var feed = document.querySelector('.post-feed');
|
var lastWindowHeight = window.innerHeight;
|
||||||
|
var lastDocumentHeight = $(document).height();
|
||||||
|
var ticking = false;
|
||||||
|
|
||||||
var lastScrollY = window.scrollY;
|
function onScroll() {
|
||||||
var lastWindowHeight = window.innerHeight;
|
lastScrollY = window.scrollY;
|
||||||
var lastDocumentHeight = $(document).height();
|
requestTick();
|
||||||
var ticking = false;
|
}
|
||||||
|
|
||||||
function onScroll() {
|
function onResize() {
|
||||||
lastScrollY = window.scrollY;
|
lastWindowHeight = window.innerHeight;
|
||||||
requestTick();
|
lastDocumentHeight = $(document).height();
|
||||||
|
requestTick();
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestTick() {
|
||||||
|
if (!ticking) {
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
var trigger = feed.getBoundingClientRect().top + window.scrollY;
|
||||||
|
var progressMax = lastDocumentHeight - lastWindowHeight;
|
||||||
|
|
||||||
|
// show/hide nav
|
||||||
|
if (lastScrollY >= trigger - 20) {
|
||||||
|
nav.classList.add('fixed-nav-active');
|
||||||
|
} else {
|
||||||
|
nav.classList.remove('fixed-nav-active');
|
||||||
}
|
}
|
||||||
|
|
||||||
function onResize() {
|
ticking = false;
|
||||||
lastWindowHeight = window.innerHeight;
|
}
|
||||||
lastDocumentHeight = $(document).height();
|
|
||||||
requestTick();
|
|
||||||
}
|
|
||||||
|
|
||||||
function requestTick() {
|
window.addEventListener('scroll', onScroll, { passive: true });
|
||||||
if (!ticking) {
|
window.addEventListener('resize', onResize, false);
|
||||||
requestAnimationFrame(update);
|
|
||||||
}
|
|
||||||
ticking = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function update() {
|
update();
|
||||||
var trigger = feed.getBoundingClientRect().top + window.scrollY;
|
|
||||||
var progressMax = lastDocumentHeight - lastWindowHeight;
|
|
||||||
|
|
||||||
// show/hide nav
|
});
|
||||||
if (lastScrollY >= trigger - 20) {
|
|
||||||
nav.classList.add('fixed-nav-active');
|
|
||||||
} else {
|
|
||||||
nav.classList.remove('fixed-nav-active');
|
|
||||||
}
|
|
||||||
|
|
||||||
ticking = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', onScroll, { passive: true });
|
|
||||||
window.addEventListener('resize', onResize, false);
|
|
||||||
|
|
||||||
update();
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
{{/contentFor}}
|
|
||||||
12
page.hbs
12
page.hbs
|
|
@ -54,12 +54,10 @@ into the {body} of the default.hbs template --}}
|
||||||
|
|
||||||
{{/post}}
|
{{/post}}
|
||||||
|
|
||||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
|
||||||
{{#contentFor "scripts"}}
|
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
var $postContent = $(".post-full-content");
|
var $postContent = $(".gh-content");
|
||||||
$postContent.fitVids();
|
$postContent.fitVids();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{{/contentFor}}
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
<div class="outer site-nav-main">
|
|
||||||
<div class="inner">
|
|
||||||
{{> "site-nav"}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
<section class="subscribe-form">
|
|
||||||
<h3 class="subscribe-form-title">Subscribe to {{@site.title}}</h3>
|
|
||||||
<p class="subscribe-form-description">Get the latest posts delivered right to your inbox</p>
|
|
||||||
<form data-members-form="subscribe">
|
|
||||||
<div class="form-group">
|
|
||||||
<input class="subscribe-email" data-members-email placeholder="youremail@example.com" autocomplete="false" />
|
|
||||||
<button class="button primary" type="submit">
|
|
||||||
<span class="button-content">Subscribe</span>
|
|
||||||
<span class="button-loader">{{> "icons/loader"}}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="message-success">
|
|
||||||
<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.
|
|
||||||
</div>
|
|
||||||
<div class="message-error">
|
|
||||||
Please enter a valid email address!
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
291
post.hbs
291
post.hbs
|
|
@ -1,212 +1,129 @@
|
||||||
{{!< default}}
|
{{!< default}}
|
||||||
|
|
||||||
{{!-- The tag above means: insert everything in this file
|
{{!-- The tag above means: insert everything in this file
|
||||||
into the {body} of the default.hbs template --}}
|
into the {body} tag of the default.hbs template --}}
|
||||||
|
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
{{> site-header}}
|
<div class="outer site-nav-main">
|
||||||
|
<div class="inner">
|
||||||
|
{{> "site-nav"}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{{!-- Everything inside the #post tags pulls data from the post --}}
|
|
||||||
{{#post}}
|
{{#post}}
|
||||||
|
{{!-- Everything inside the #post block pulls data from the post --}}
|
||||||
|
|
||||||
<main id="site-main" class="site-main outer">
|
<article class="article {{post_class}}">
|
||||||
<div class="inner">
|
|
||||||
|
|
||||||
<article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
|
<header class="article-header gh-canvas">
|
||||||
|
|
||||||
<header class="post-full-header">
|
{{#if primary_tag}}
|
||||||
|
<section class="article-tag">
|
||||||
|
<a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
|
||||||
|
</section>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
{{#if primary_tag}}
|
<h1 class="article-title">{{title}}</h1>
|
||||||
<section class="post-full-tags">
|
|
||||||
{{#primary_tag}}
|
|
||||||
<a href="{{url}}">{{name}}</a>
|
|
||||||
{{/primary_tag}}
|
|
||||||
</section>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
<h1 class="post-full-title">{{title}}</h1>
|
{{#if custom_excerpt}}
|
||||||
|
<p class="article-excerpt">{{custom_excerpt}}</p>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
{{#if custom_excerpt}}
|
<div class="article-byline">
|
||||||
<p class="post-full-custom-excerpt">{{custom_excerpt}}</p>
|
<section class="article-byline-content">
|
||||||
{{/if}}
|
<ul class="author-list">
|
||||||
|
{{#foreach authors}}
|
||||||
<div class="post-full-byline">
|
<li class="author-list-item">
|
||||||
|
{{#if profile_image}}
|
||||||
<section class="post-full-byline-content">
|
<a href="{{url}}" class="author-avatar">
|
||||||
|
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||||
<ul class="author-list">
|
</a>
|
||||||
{{#foreach authors}}
|
{{else}}
|
||||||
<li class="author-list-item">
|
<a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
|
||||||
|
{{/if}}
|
||||||
<div class="author-card">
|
</li>
|
||||||
{{#if profile_image}}
|
{{/foreach}}
|
||||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
</ul>
|
||||||
{{else}}
|
<div class="article-byline-meta">
|
||||||
<div class="author-profile-image">{{> "icons/avatar"}}</div>
|
<h4 class="author-name">{{authors}}</h4>
|
||||||
{{/if}}
|
<div class="byline-meta-content">
|
||||||
<div class="author-info">
|
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
|
||||||
{{#if bio}}
|
<span class="byline-reading-time"><span class="bull">•</span> {{reading_time}}</span>
|
||||||
<div class="bio">
|
|
||||||
<h2>{{name}}</h2>
|
|
||||||
<p>{{bio}}</p>
|
|
||||||
<p><a href="{{url}}">More posts</a> by {{name}}.</p>
|
|
||||||
</div>
|
|
||||||
{{else}}
|
|
||||||
<h2>{{name}}</h2>
|
|
||||||
<p>Read <a href="{{url}}">more posts</a> by this author.</p>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{#if profile_image}}
|
|
||||||
<a href="{{url}}" class="author-avatar">
|
|
||||||
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
|
||||||
</a>
|
|
||||||
{{else}}
|
|
||||||
<a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
</li>
|
|
||||||
{{/foreach}}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<section class="post-full-byline-meta">
|
|
||||||
<h4 class="author-name">{{authors}}</h4>
|
|
||||||
<div class="byline-meta-content">
|
|
||||||
<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
|
|
||||||
<span class="byline-reading-time"><span class="bull">•</span> {{reading_time}}</span>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{{#if feature_image}}
|
|
||||||
<figure class="post-full-image">
|
|
||||||
{{!-- This is a responsive image, it loads different sizes depending on device
|
|
||||||
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
|
||||||
<img
|
|
||||||
srcset="{{img_url feature_image size="s"}} 300w,
|
|
||||||
{{img_url feature_image size="m"}} 600w,
|
|
||||||
{{img_url feature_image size="l"}} 1000w,
|
|
||||||
{{img_url feature_image size="xl"}} 2000w"
|
|
||||||
sizes="(max-width: 800px) 400px,
|
|
||||||
(max-width: 1170px) 1170px,
|
|
||||||
2000px"
|
|
||||||
src="{{img_url feature_image size="xl"}}"
|
|
||||||
alt="{{title}}"
|
|
||||||
/>
|
|
||||||
</figure>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
<section class="post-full-content">
|
|
||||||
<div class="post-content">
|
|
||||||
{{content}}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{{!-- Email subscribe form at the bottom of the page --}}
|
|
||||||
{{> subscribe-form}}
|
|
||||||
|
|
||||||
{{!--
|
|
||||||
<section class="post-full-comments">
|
|
||||||
If you want to embed comments, this is a good place to do it!
|
|
||||||
</section>
|
|
||||||
--}}
|
|
||||||
|
|
||||||
</article>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
{{!-- Links to Previous/Next posts --}}
|
|
||||||
<aside class="read-next outer">
|
|
||||||
<div class="inner">
|
|
||||||
<div class="read-next-feed">
|
|
||||||
{{#if primary_tag}}
|
|
||||||
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
|
|
||||||
{{#if related_posts}}
|
|
||||||
<article class="read-next-card">
|
|
||||||
<header class="read-next-card-header">
|
|
||||||
{{#../primary_tag}}
|
|
||||||
<h3><span>More in</span> <a href="{{url}}">{{name}}</a></h3>
|
|
||||||
{{/../primary_tag}}
|
|
||||||
</header>
|
|
||||||
<div class="read-next-card-content">
|
|
||||||
<ul>
|
|
||||||
{{#foreach related_posts}}
|
|
||||||
<li>
|
|
||||||
<h4><a href="{{url}}">{{title}}</a></h4>
|
|
||||||
<div class="read-next-card-meta">
|
|
||||||
<p><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> –
|
|
||||||
{{reading_time}}</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
{{/foreach}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<footer class="read-next-card-footer">
|
</div>
|
||||||
<a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}}
|
</section>
|
||||||
→</a>
|
|
||||||
</footer>
|
|
||||||
</article>
|
|
||||||
{{/if}}
|
|
||||||
{{/get}}
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
|
|
||||||
{{#next_post}}
|
|
||||||
{{> "post-card"}}
|
|
||||||
{{/next_post}}
|
|
||||||
|
|
||||||
{{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
|
|
||||||
{{#prev_post}}
|
|
||||||
{{> "post-card"}}
|
|
||||||
{{/prev_post}}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{#if feature_image}}
|
||||||
|
<figure class="article-image">
|
||||||
|
{{!-- This is a responsive image, it loads different sizes depending on device
|
||||||
|
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
|
||||||
|
<img
|
||||||
|
srcset="{{img_url feature_image size="s"}} 300w,
|
||||||
|
{{img_url feature_image size="m"}} 600w,
|
||||||
|
{{img_url feature_image size="l"}} 1000w,
|
||||||
|
{{img_url feature_image size="xl"}} 2000w"
|
||||||
|
sizes="(min-width: 1400px) 1400px, 92vw"
|
||||||
|
src="{{img_url feature_image size="xl"}}"
|
||||||
|
alt="{{title}}"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
{{/if}}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="gh-content gh-canvas">
|
||||||
|
{{content}}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{{!--
|
||||||
|
|
||||||
|
<section class="post-full-comments">
|
||||||
|
If you want to embed comments, this is a good place to do it!
|
||||||
|
</section>
|
||||||
|
|
||||||
|
--}}
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
{{!-- Read more links, just above the footer --}}
|
||||||
|
<aside class="read-more-wrap">
|
||||||
|
<div class="read-more inner">
|
||||||
|
|
||||||
|
{{!-- The {#get} helper fetches some of the latest posts here
|
||||||
|
so that people have something else to read when they finish this one.
|
||||||
|
|
||||||
|
This query gets the latest 3 posts on the site, but adds a filter to
|
||||||
|
exclude the post we're currently on from being included. --}}
|
||||||
|
|
||||||
|
{{#get "posts" filter="id:-{{id}}" limit="3" as |more_posts|}}
|
||||||
|
{{#if more_posts}}
|
||||||
|
{{#foreach more_posts}}
|
||||||
|
{{> "post-card"}}
|
||||||
|
{{/foreach}}
|
||||||
|
{{/if}}
|
||||||
|
{{/get}}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
{{/post}}
|
{{/post}}
|
||||||
|
|
||||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
|
||||||
{{#contentFor "scripts"}}
|
{{!-- Scripts - Extra functionality for the post template --}}
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
// FitVids - start
|
// FitVids - Makes video embeds responsive
|
||||||
var $postContent = $(".post-full-content");
|
var $postContent = $(".gh-content");
|
||||||
$postContent.fitVids();
|
$postContent.fitVids();
|
||||||
// FitVids - end
|
|
||||||
|
|
||||||
// Replace nav with title on scroll - start
|
// StickyNavTitle - Shows post title in navbar when scrolling
|
||||||
Casper.stickyNavTitle({
|
Casper.stickyNavTitle({
|
||||||
navSelector: '.site-nav-main',
|
navSelector: '.site-nav-main',
|
||||||
titleSelector: '.post-full-title',
|
titleSelector: '.article-title',
|
||||||
activeClass: 'nav-post-title-active'
|
activeClass: 'nav-post-title-active'
|
||||||
});
|
|
||||||
// Replace nav with title on scroll - end
|
|
||||||
|
|
||||||
// Hover on avatar
|
|
||||||
var hoverTimeout;
|
|
||||||
$('.author-list-item').hover(function () {
|
|
||||||
var $this = $(this);
|
|
||||||
|
|
||||||
clearTimeout(hoverTimeout);
|
|
||||||
|
|
||||||
$('.author-card').removeClass('hovered');
|
|
||||||
$(this).children('.author-card').addClass('hovered');
|
|
||||||
|
|
||||||
}, function () {
|
|
||||||
var $this = $(this);
|
|
||||||
|
|
||||||
hoverTimeout = setTimeout(function () {
|
|
||||||
$this.children('.author-card').removeClass('hovered');
|
|
||||||
}, 800);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
{{/contentFor}}
|
|
||||||
|
|
|
||||||
6
tag.hbs
6
tag.hbs
|
|
@ -3,7 +3,11 @@
|
||||||
|
|
||||||
{{#tag}}
|
{{#tag}}
|
||||||
<header class="site-archive-header">
|
<header class="site-archive-header">
|
||||||
{{> site-header}}
|
<div class="outer site-nav-main">
|
||||||
|
<div class="inner">
|
||||||
|
{{> "site-nav"}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||||
<div class="inner site-header-content">
|
<div class="inner site-header-content">
|
||||||
<h1 class="site-title">{{name}}</h1>
|
<h1 class="site-title">{{name}}</h1>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue