snipette/weflock
snipette/weflock
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Tag archive

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/built/screen.css
View file

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View file

File diff suppressed because one or more lines are too long

53
assets/css/screen.css
View file

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

61
assets/js/sticky-nav-title.js
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);

16
author.hbs
View file

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

8
partials/post-card.hbs
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}}
<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">

37
partials/site-nav.hbs
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 --}}
{{#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>