Tag archive

assets/css/screen.css

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

assets/js/sticky-nav-title.js

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

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>
 

partials/post-card.hbs

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

partials/site-nav.hbs

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

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>