Tag archive

This commit is contained in:
John O'Nolan 2021-03-04 18:31:29 -05:00
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

View File

@ -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
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

View File

@ -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);

View File

@ -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>

View File

@ -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">

View File

@ -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
View File

@ -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>