Tag archive
This commit is contained in:
John O'Nolan
parent
7617c7baf2
commit
f590fb029a
8 changed files with 73 additions and 165 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -81,16 +81,6 @@ production stylesheet in assets/built/screen.css
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Usage:
|
|
||||||
|
|
||||||
<div class="outer">
|
|
||||||
<div class="inner">
|
|
||||||
Centered content
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* 4. Site Header
|
/* 4. Site Header
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
@ -192,36 +182,6 @@ production stylesheet in assets/built/screen.css
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 4.2 Archive header (tag and author post lists)
|
|
||||||
/* ---------------------------------------------------------- */
|
|
||||||
|
|
||||||
.site-archive-header .site-header-content {
|
|
||||||
position: relative;
|
|
||||||
align-items: stretch;
|
|
||||||
padding: 12vw 0 20px;
|
|
||||||
min-height: 200px;
|
|
||||||
max-height: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-archive-header .no-image {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
color: var(--color-darkgrey);
|
|
||||||
background: #fff;
|
|
||||||
opacity: 1.0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-archive-header .no-image .site-description {
|
|
||||||
color: var(--color-midgrey);
|
|
||||||
opacity: 1.0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.site-archive-header .no-image .site-header-content {
|
|
||||||
padding: 5vw 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 5. Site Navigation
|
/* 5. Site Navigation
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
@ -1589,6 +1549,19 @@ Ghost editor. */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 8. Tag Template
|
||||||
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
|
.tag-template .post-card-large .post-card-image-link {
|
||||||
|
grid-column: 2 / span 2;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-template .post-card-large .post-card-content {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 9. Error Template
|
/* 9. Error Template
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
/* eslint-env browser */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Nav/Title replacement
|
|
||||||
* Used on invividual post pages, displays the post title in place of the nav
|
|
||||||
* bar when scrolling past the title
|
|
||||||
*
|
|
||||||
* Usage:
|
|
||||||
* ```
|
|
||||||
* Casper.stickyTitle({
|
|
||||||
* navSelector: '.site-nav-main',
|
|
||||||
* titleSelector: '.post-full-title',
|
|
||||||
* activeClass: 'nav-post-title-active'
|
|
||||||
* });
|
|
||||||
* ```
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function (window, document) {
|
|
||||||
// set up Casper as a global object
|
|
||||||
if (!window.Casper) {
|
|
||||||
window.Casper = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
window.Casper.stickyNavTitle = function stickyNavTitle(options) {
|
|
||||||
var nav = document.querySelector(options.navSelector);
|
|
||||||
var title = document.querySelector(options.titleSelector);
|
|
||||||
|
|
||||||
var lastScrollY = window.scrollY;
|
|
||||||
var ticking = false;
|
|
||||||
|
|
||||||
function onScroll() {
|
|
||||||
lastScrollY = window.scrollY;
|
|
||||||
requestTick();
|
|
||||||
}
|
|
||||||
|
|
||||||
function requestTick() {
|
|
||||||
if (!ticking) {
|
|
||||||
requestAnimationFrame(update);
|
|
||||||
}
|
|
||||||
ticking = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function update() {
|
|
||||||
var trigger = title.getBoundingClientRect().top + window.scrollY;
|
|
||||||
var triggerOffset = title.offsetHeight + 35;
|
|
||||||
|
|
||||||
// show/hide post title
|
|
||||||
if (lastScrollY >= trigger + triggerOffset) {
|
|
||||||
nav.classList.add(options.activeClass);
|
|
||||||
} else {
|
|
||||||
nav.classList.remove(options.activeClass);
|
|
||||||
}
|
|
||||||
|
|
||||||
ticking = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', onScroll, {passive: true});
|
|
||||||
|
|
||||||
update();
|
|
||||||
};
|
|
||||||
})(window, document);
|
|
||||||
16
author.hbs
16
author.hbs
|
|
@ -18,20 +18,26 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<h1>{{name}}</h1>
|
<h1>{{name}}</h1>
|
||||||
{{#if bio}}<p>{{bio}}</p>{{/if}}
|
<p>
|
||||||
|
{{#if bio}}
|
||||||
|
{{bio}}
|
||||||
|
{{else}}
|
||||||
|
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} published
|
||||||
|
{{/if}}
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="author-profile-meta">
|
<div class="author-profile-meta">
|
||||||
{{#if location}}
|
{{#if location}}
|
||||||
<div class="author-profile-location">📍 {{location}}</div>
|
<div class="author-profile-location">📍 {{location}}</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if website}}
|
{{#if website}}
|
||||||
<a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
|
<span ></span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if twitter}}
|
{{#if twitter}}
|
||||||
<a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a>
|
<span ></span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if facebook}}
|
{{#if facebook}}
|
||||||
<a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a>
|
<span ></span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
<article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#is "home"}}{{#has index="0"}}post-card-large{{/has}}{{/is}}{{/unless}}">
|
{{!-- This is a partial file used to generate a post "card"
|
||||||
|
which templates loop over to generate a list of posts. --}}
|
||||||
|
|
||||||
|
<article class="post-card {{post_class}} {{#is "home"}}{{#has index="0"}}post-card-large{{/has}}{{/is}}">
|
||||||
|
|
||||||
{{#if feature_image}}
|
{{#if feature_image}}
|
||||||
<a class="post-card-image-link" href="{{url}}">
|
<a class="post-card-image-link" href="{{url}}">
|
||||||
|
|
@ -20,7 +23,6 @@
|
||||||
<div class="post-card-content">
|
<div class="post-card-content">
|
||||||
|
|
||||||
<a class="post-card-content-link" href="{{url}}">
|
<a class="post-card-content-link" href="{{url}}">
|
||||||
|
|
||||||
<header class="post-card-header">
|
<header class="post-card-header">
|
||||||
{{#if primary_tag}}
|
{{#if primary_tag}}
|
||||||
{{#primary_tag}}
|
{{#primary_tag}}
|
||||||
|
|
@ -29,11 +31,9 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<h2 class="post-card-title">{{title}}</h2>
|
<h2 class="post-card-title">{{title}}</h2>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="post-card-excerpt">
|
<section class="post-card-excerpt">
|
||||||
<p>{{excerpt}}</p>
|
<p>{{excerpt}}</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<footer class="post-card-meta">
|
<footer class="post-card-meta">
|
||||||
|
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
<nav class="site-nav">
|
|
||||||
<div class="site-nav-left-wrapper">
|
|
||||||
<div class="site-nav-left">
|
|
||||||
{{#if @site.logo}}
|
|
||||||
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
|
|
||||||
{{else}}
|
|
||||||
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
|
|
||||||
{{/if}}
|
|
||||||
<div class="site-nav-content">
|
|
||||||
{{#if @site.navigation}}
|
|
||||||
{{navigation}}
|
|
||||||
{{/if}}
|
|
||||||
{{#is "post"}}
|
|
||||||
<span class="nav-post-title {{#unless @site.logo}}dash{{/unless}}">{{post.title}}</span>
|
|
||||||
{{/is}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="site-nav-right">
|
|
||||||
{{#if @site.secondary_navigation}}
|
|
||||||
{{navigation type="secondary"}}
|
|
||||||
{{else}}
|
|
||||||
<div class="social-links">
|
|
||||||
{{#if @site.twitter}}
|
|
||||||
<a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#unless @member}}
|
|
||||||
<a class="subscribe-button" href="#/portal">Subscribe</a>
|
|
||||||
{{else}}
|
|
||||||
<a class="subscribe-button" href="#/portal/account">Account</a>
|
|
||||||
{{/unless}}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
59
tag.hbs
59
tag.hbs
|
|
@ -2,29 +2,56 @@
|
||||||
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
|
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
|
||||||
|
|
||||||
|
|
||||||
{{#tag}}
|
|
||||||
<div class="outer">
|
|
||||||
<div class="inner site-header-content">
|
|
||||||
<h1 class="site-title">{{name}}</h1>
|
|
||||||
<h2 class="site-description">
|
|
||||||
{{#if description}}
|
|
||||||
{{description}}
|
|
||||||
{{else}}
|
|
||||||
A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
|
||||||
{{/if}}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{/tag}}
|
|
||||||
|
|
||||||
{{!-- The main content area --}}
|
|
||||||
<section class="outer">
|
<section class="outer">
|
||||||
<div class="inner posts">
|
<div class="inner posts">
|
||||||
<div class="post-feed">
|
<div class="post-feed">
|
||||||
|
|
||||||
|
{{#tag}}
|
||||||
|
<header class="post-card post-card-large">
|
||||||
|
{{#if feature_image}}
|
||||||
|
<div class="post-card-image-link">
|
||||||
|
{{!-- 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 class="post-card-image"
|
||||||
|
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: 1000px) 400px, 800px"
|
||||||
|
src="{{img_url feature_image size="m"}}"
|
||||||
|
alt="{{title}}"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
<div class="post-card-content">
|
||||||
|
<div class="post-card-content-link">
|
||||||
|
<header class="post-card-header">
|
||||||
|
<div class="post-card-primary-tag">Tagged</div>
|
||||||
|
<h2 class="post-card-title">{{name}}</h2>
|
||||||
|
</header>
|
||||||
|
<section class="post-card-excerpt">
|
||||||
|
<p>
|
||||||
|
{{#if description}}
|
||||||
|
{{description}}
|
||||||
|
{{else}}
|
||||||
|
A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
|
||||||
|
{{/if}}
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>{{!--/.post-card-content--}}
|
||||||
|
|
||||||
|
</header>
|
||||||
|
{{/tag}}
|
||||||
|
|
||||||
{{#foreach posts}}
|
{{#foreach posts}}
|
||||||
|
|
||||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||||
{{> "post-card"}}
|
{{> "post-card"}}
|
||||||
|
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue