mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-22 19:47:38 +00:00
Tag archive
This commit is contained in:
John O'Nolan
parent
7617c7baf2
commit
f590fb029a
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%;
|
||||
}
|
||||
|
||||
/* Usage:
|
||||
|
||||
<div class="outer">
|
||||
<div class="inner">
|
||||
Centered content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/* 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
|
||||
/* ---------------------------------------------------------- */
|
||||
@ -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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
@ -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);
|
||||
14
author.hbs
14
author.hbs
@ -18,20 +18,26 @@
|
||||
{{/if}}
|
||||
|
||||
<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">
|
||||
{{#if location}}
|
||||
<div class="author-profile-location">📍 {{location}}</div>
|
||||
{{/if}}
|
||||
{{#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 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 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}}
|
||||
</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}}
|
||||
<a class="post-card-image-link" href="{{url}}">
|
||||
@ -20,7 +23,6 @@
|
||||
<div class="post-card-content">
|
||||
|
||||
<a class="post-card-content-link" href="{{url}}">
|
||||
|
||||
<header class="post-card-header">
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
@ -29,11 +31,9 @@
|
||||
{{/if}}
|
||||
<h2 class="post-card-title">{{title}}</h2>
|
||||
</header>
|
||||
|
||||
<section class="post-card-excerpt">
|
||||
<p>{{excerpt}}</p>
|
||||
</section>
|
||||
|
||||
</a>
|
||||
|
||||
<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 --}}
|
||||
|
||||
|
||||
{{#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">
|
||||
<div class="inner posts">
|
||||
<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}}
|
||||
|
||||
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
|
||||
{{> "post-card"}}
|
||||
|
||||
{{/foreach}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user