Redesign templates

default.hbs

@@ -17,6 +17,11 @@
     this will take care of caching and cache-busting automatically --}}
     <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
 
+    {{!-- Prism scripts and CSS
+    <link rel="preload" as="script" href="{{asset "assets/js/prism/prism.min.js"}}" />
+    <link rel="preload" as="script" href="{{asset "assets/js/prism/prism-autoloader.min.js"}}" />
+    <link rel="stylesheet" type="text/css" href="{{asset "assets/css/prism-okaidia.min.css"}}" /> --}}
+
     {{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
     it should always be the last tag before the closing head tag --}}
     {{ghost_head}}
@@ -80,7 +85,7 @@
     {{!-- The global footer at the very bottom of the screen --}}
     <footer class="site-footer outer">
         <div class="inner">
-            <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
+            <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a></section>
             <nav class="site-footer-nav">
                 {{navigation type="secondary"}}
             </nav>

partials/post-card.hbs

@@ -33,16 +33,34 @@ which templates loop over to generate a list of posts. --}}
         {{/unless}}
 
     </a>
+    {{else}}
+        <a class="post-card-image-link" href="{{url}}">
+            {{#primary_tag}}
+            {{#if feature_image}}
+                {{!-- 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="{{#if primary_tag}}{{primary_tag}}{{else}}{{title}}{{/if}}"
+                    loading="lazy"
+                />
+            {{/if}}
+            {{/primary_tag}}
+        </a>
     {{/if}}
 
+
+
     <div class="post-card-content">
 
         <a class="post-card-content-link" href="{{url}}">
             <header class="post-card-header">
                 <div class="post-card-tags">
-                    {{#primary_tag}}
-                        <span class="post-card-primary-tag">{{name}}</span>
-                    {{/primary_tag}}
                     {{#if featured}}
                         <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
                     {{/if}}
@@ -58,16 +76,13 @@ which templates loop over to generate a list of posts. --}}
                     {{title}}
                 </h2>
             </header>
-            {{#if excerpt}}
-                <div class="post-card-excerpt">{{excerpt}}</div>
-            {{/if}}
         </a>
+        {{#if excerpt}}
+            <div class="post-card-excerpt">{{excerpt}}</div>
+        {{/if}}
 
         <footer class="post-card-meta">
-            <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+            <time class="post-card-meta-date" datetime="{{date format="D MMMM YYYY"}}">{{date format="D MMMM YYYY"}}</time>
-            {{#if reading_time}}
-                <span class="post-card-meta-length">{{reading_time}}</span>
-            {{/if}}
             {{#if @site.comments_enabled}}
                 {{comment_count}}
             {{/if}}

post.hbs

@@ -12,53 +12,6 @@ into the {body} tag of the default.hbs template --}}
 
     <header class="article-header gh-canvas">
 
-        <div class="article-tag post-card-tags">
-            {{#primary_tag}}
-                <span class="post-card-primary-tag">
-                    <a href="{{url}}">{{name}}</a>
-                </span>
-            {{/primary_tag}}
-            {{#if featured}}
-                <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
-            {{/if}}
-        </div>
-
-        <h1 class="article-title">{{title}}</h1>
-
-        {{#if custom_excerpt}}
-            <p class="article-excerpt">{{custom_excerpt}}</p>
-        {{/if}}
-
-        <div class="article-byline">
-        <section class="article-byline-content">
-
-            <ul class="author-list instapaper_ignore">
-                {{#foreach authors}}
-                <li class="author-list-item">
-                    {{#if profile_image}}
-                    <a href="{{url}}" class="author-avatar" aria-label="Read more of {{name}}">
-                        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
-                    </a>
-                    {{else}}
-                    <a href="{{url}}" class="author-avatar author-profile-image" aria-label="Read more of {{name}}">{{> "icons/avatar"}}</a>
-                    {{/if}}
-                </li>
-                {{/foreach}}
-            </ul>
-
-            <div class="article-byline-meta">
-                <h4 class="author-name">{{authors}}</h4>
-                <div class="byline-meta-content">
-                    <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
-                    {{#if reading_time}}
-                        <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
-                    {{/if}}
-                </div>
-            </div>
-
-        </section>
-        </div>
-
         {{#match @custom.post_image_style "!=" "Hidden"}}
         {{#if feature_image}}
             <figure class="article-image">
@@ -77,13 +30,66 @@ into the {body} tag of the default.hbs template --}}
                     <figcaption>{{feature_image_caption}}</figcaption>
                 {{/if}}
             </figure>
+        {{else}}
+        {{#primary_tag}}
+            {{#if feature_image}}
+
+            <figure class="article-image">
+                {{!-- 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
+                    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="(min-width: 1400px) 1400px, 92vw"
+                    src="{{img_url feature_image size="xl"}}"
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                />
+                {{#if feature_image_caption}}
+                    <figcaption>{{feature_image_caption}}</figcaption>
+                {{/if}}
+            </figure>
+            {{/if}}
+        {{/primary_tag}}
         {{/if}}
         {{/match}}
 
+        <div class="article-tag post-card-tags">
+            {{#if featured}}
+                <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
+            {{/if}}
+        </div>
+
+        <h1 class="article-title">{{title}}</h1>
+
+        {{!-- {{#if custom_excerpt}}
+            <p class="article-excerpt">{{custom_excerpt}}</p>
+        {{/if}} --}}
     </header>
 
     <section class="gh-content gh-canvas">
         {{content}}
+
+        <div class="article-byline">
+            <section class="article-byline-content">
+
+                <div class="article-byline-meta">
+                    <div class="byline-meta-content">
+                        <span>Posted </span>
+                        <time class="byline-meta-date" datetime="{{date format="D MMMM YYYY"}}">{{date format="D MMMM YYYY"}}</time>
+                    </div>
+                </div>
+
+                <div class="article-byline-meta">
+                    <div class="byline-meta-content">
+                        <span>Tags: </span>
+                        <span>{{tags separator=", "}}</span>
+                    </div>
+                </div>
+
+            </section>
+        </div>
     </section>
 
     {{#if comments}}

tag.hbs

@@ -8,22 +8,6 @@
         {{#tag}}
         <section 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}}"
-                />
-            </div>
-            {{/if}}
-
             <div class="post-card-content">
             <div class="post-card-content-link">
                 <header class="post-card-header">