chore: add build ident to version

rely on git to compare with upstream instead of comments

assets/js/app.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

assets/js/post.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkliebling=self.webpackChunkliebling||[]).push([[571],{769:(e,t,n)=>{n.d(t,{dZ:()=>a,e:()=>s,eS:()=>r,ej:()=>l,p6:()=>i,tq:()=>o});var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},r=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).closest("figure").hasClass("kg-nft-card")||e(this).parent().is("a")||e(this).hasClass("kg-product-card-image")||e(this).hasClass("kg-audio-thumbnail")||e(this).addClass("js-zoomable")}))},l=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},717:(e,t,n)=>{var a=n(755),o=n.n(a),i=n(557),s=n(729),r=n.n(s),l=n(433),c=n(911),u=(n(350),n(769)),d=null,m=null,h=window.pageYOffset,f=0,g=0,p=0,w=!1,v=function(){h=window.pageYOffset,b()},y=function(e){(0,u.tq)("1023px")?(o()("body").addClass("share-menu-displayed"),setTimeout((function(){d.removeAttr("data-animate")}),e)):o()("body").removeClass("share-menu-displayed")},k=function(){C(),y(100),setTimeout((function(){x(),b()}),200)},b=function(){w||requestAnimationFrame(j),w=!0},j=function(){var e=g-f,t=Math.ceil(h/e*100);t<=100&&T(t),w=!1},C=function(){f=window.innerHeight,g=o()(document).height()},x=function(){var e=m.parent().width(),t=e/2,n=(0,u.tq)()?2:3;m.parent().attr("viewBox","0 0 ".concat(e," ").concat(e)),m.attr("stroke-width",n),m.attr("r",t-(n-1)),m.attr("cx",t),m.attr("cy",t),p=2*t*Math.PI,m[0].style.strokeDasharray="".concat(p," ").concat(p),m[0].style.strokeDashoffset=p},T=function(e){if(e<=100){var t=p-e/100*p;m[0].style.strokeDashoffset=t}};o()((function(){d=o()(".js-animation-wrapper");var e=o()(".js-scrolltop"),t=o()(".js-recommended-slider");if(r()(".js-post-content"),(0,u.e)(),y(1e3),t.length>0)new c.ZP(".js-recommended-slider",{modules:[c.W_,c.s5],navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},slidesPerView:1,allowTouchMove:!0,loop:!0,a11y:!0,breakpoints:{720:{slidesPerView:2,allowTouchMove:!0,loop:!0},1024:{slidesPerView:3,allowTouchMove:!1,loop:!1}},on:{init:function(){(0,l.Z)(".js-article-card-title",100),(0,l.Z)(".js-article-card-title-no-image",250)}}});(0,l.Z)(".js-article-card-title",100),(0,l.Z)(".js-article-card-title-no-image",250),e.on("click",(function(){o()("html, body").animate({scrollTop:0},500)})),(0,u.eS)(o()),(0,u.ej)(o(),i.Z),window.addEventListener("scroll",v,{passive:!0}),window.addEventListener("resize",k,{passive:!0})})),o()(window).on("load",(function(){m=o()(".js-progress"),C(),x(),j(),setTimeout((function(){m.parent().css("opacity",1)}),300)}))}},e=>{e.O(0,[898],(()=>{return t=717,e(e.s=t);var t}));e.O()}]);
+"use strict";(self.webpackChunkliebling=self.webpackChunkliebling||[]).push([[571],{769:(e,t,n)=>{n.d(t,{dZ:()=>o,e:()=>s,eS:()=>r,ej:()=>l,p6:()=>a,tq:()=>i});var o=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},a=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var o=e[t].closest(".kg-gallery-image"),i=e[t].attributes.width.value/e[t].attributes.height.value;o.style.flex="".concat(i," 1 0%")}},r=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).closest("figure").hasClass("kg-nft-card")||e(this).parent().is("a")||e(this).hasClass("kg-product-card-image")||e(this).hasClass("kg-audio-thumbnail")||e(this).addClass("js-zoomable")}))},l=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},717:(e,t,n)=>{var o=n(755),i=n.n(o),a=n(557),s=n(729),r=n.n(s),l=n(433),c=n(911),u=(n(350),n(769)),d=null,m=null,h=window.pageYOffset,f=0,g=0,p=0,v=!1,w=function(){h=window.pageYOffset,b()},y=function(e){(0,u.tq)("1023px")?(i()("body").addClass("share-menu-displayed"),setTimeout((function(){d.removeAttr("data-animate")}),e)):i()("body").removeClass("share-menu-displayed")},k=function(){C(),y(100),setTimeout((function(){x(),b()}),200)},b=function(){v||requestAnimationFrame(j),v=!0},j=function(){var e=g-f,t=Math.ceil(h/e*100);t<=100&&T(t),v=!1},C=function(){f=window.innerHeight,g=i()(document).height()},x=function(){var e,t;if(null!==(e=m)&&void 0!==e&&null!==(t=e[0])&&void 0!==t&&t.style){var n=m.parent().width(),o=n/2,i=(0,u.tq)()?2:3;m.parent().attr("viewBox","0 0 ".concat(n," ").concat(n)),m.attr("stroke-width",i),m.attr("r",o-(i-1)),m.attr("cx",o),m.attr("cy",o),p=2*o*Math.PI,m[0].style.strokeDasharray="".concat(p," ").concat(p),m[0].style.strokeDashoffset=p}},T=function(e){var t,n;if(null!==(t=m)&&void 0!==t&&null!==(n=t[0])&&void 0!==n&&n.style&&e<=100){var o=p-e/100*p;m[0].style.strokeDashoffset=o}};i()((function(){d=i()(".js-animation-wrapper");var e=i()(".js-scrolltop"),t=i()(".js-recommended-slider");if(r()(".js-post-content"),(0,u.e)(),y(1e3),t.length>0)new c.ZP(".js-recommended-slider",{modules:[c.W_,c.s5],navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},slidesPerView:1,allowTouchMove:!0,loop:!0,a11y:!0,breakpoints:{720:{slidesPerView:2,allowTouchMove:!0,loop:!0},1024:{slidesPerView:3,allowTouchMove:!1,loop:!1}},on:{init:function(){(0,l.Z)(".js-article-card-title",100),(0,l.Z)(".js-article-card-title-no-image",250)}}});(0,l.Z)(".js-article-card-title",100),(0,l.Z)(".js-article-card-title-no-image",250),e.on("click",(function(){i()("html, body").animate({scrollTop:0},500)})),(0,u.eS)(i()),(0,u.ej)(i(),a.Z),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",k,{passive:!0})})),i()(window).on("load",(function(){(m=i()(".js-progress"))&&(C(),x(),j(),setTimeout((function(){m.parent().css("opacity",1)}),300))}))}},e=>{e.O(0,[898],(()=>{return t=717,e(e.s=t);var t}));e.O()}]);

assets/js/vendor.js.LICENSE.txt

@@ -0,0 +1,35 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * headroom.js v0.12.0 - Give your page some headroom. Hide your header until you need it
+ * Copyright (c) 2020 Nick Williams - http://wicky.nillia.ms/headroom.js
+ * License: MIT
+ */
+
+/*!
+ * jQuery JavaScript Library v3.7.0
+ * https://jquery.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2023-05-11T18:29Z
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/*! medium-zoom 1.0.8 | MIT License | https://github.com/francoischalifour/medium-zoom */
+
+/**
+  shave - Shave is a javascript plugin that truncates multi-line text within a html element based on set max height
+  @version v2.5.10
+  @link https://github.com/yowainwright/shave#readme
+  @author Jeff Wainwright <yowainwright@gmail.com> (jeffry.in)
+  @license MIT
+**/

default.hbs

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     {{!-- Base Meta --}}
-    <title>{{meta_title}}</title>
+		<title>{{^is "home"}}{{meta_title}} - {{/is}}{{@site.title}}</title>
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 

featured.hbs

@@ -0,0 +1,124 @@
+{{#contentFor "preload"}}
+  {{!-- This block preloads specific assets for the post page --}}
+  <link rel="preload" href="{{asset "css/post.css"}}" as="style" />
+  <link rel="preload" href="{{asset "js/page.js"}}" as="script" />
+  {{!-- This block preloads specific assets for the index page --}}
+  <link rel="preload" href="{{asset "css/home.css"}}" as="style" />
+  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
+  <link rel="preload" href="{{asset "js/home.js"}}" as="script" />
+{{/contentFor}}
+
+{{#contentFor "styles"}}
+  {{!-- This block loads specific styles for the post page --}}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
+  {{!-- This block loads specific styles for the index page --}}
+  <link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" />
+  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
+{{/contentFor}}
+
+{{!-- The tag below means: insert everything in this file
+into the {body} of the default.hbs template --}}
+{{!< default}}
+
+{{!-- Special header.hbs partial to generate the <header> tag --}}
+{{#post}}
+  {{> header background=feature_image}}
+{{/post}}
+
+<main class="main-wrap">
+  {{!-- Everything inside the #post tags pulls data from the post --}}
+  {{#post}}
+    {{!-- Inject styles of the hero image to make it responsive --}}
+    {{> hero background=feature_image}}
+    <div class="m-hero__content" data-animate="fade-down">
+      <h1 class="m-hero-title bigger">{{title}}</h1>
+      {{#if custom_excerpt}}
+        <p class="m-hero-description">{{custom_excerpt}}</p>
+      {{/if}}
+    </div>
+    </section>
+  {{/post}}
+  <article>
+    <div class="l-content">
+      <div class="l-wrapper in-post" data-animate="fade-up">
+        <div class="l-post-content">
+          <div class="pos-relative js-post-content">
+            {{#post}}
+              {{content}}
+            {{/post}}
+          </div>
+        </div>
+        <div class="l-grid centered">
+          {{#get "posts" filter="featured:true" include="authors,tags" order="published_at asc" as |featured|}}
+            {{#if featured}}
+              <div class="m-featured-slider swiper js-featured-slider">
+                <div class="m-featured-slider__list swiper-wrapper">
+                  {{#foreach featured to="1"}}
+                    <div class="m-featured-slider__list__item swiper-slide">
+                      <article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}">
+                        <div class="m-featured-article__picture">
+                          {{#if feature_image}}
+                            <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="(max-width: 600px) 600px, (max-width: 1000px) 1000px, 2000px"
+                              src="{{img_url feature_image size="l"}}"
+                            />
+                          {{/if}}
+                        </div>
+                        {{#if primary_tag}}
+                          <div class="m-featured-article__ribbon">
+                            <span>{{primary_tag.name}}</span>
+                          </div>
+                        {{/if}}
+                        <a href="{{url}}" class="m-featured-article__content">
+                          <h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
+                            {{title}}
+                          </h2>
+                        </a>
+                      </article>
+                    </div>
+                  {{/foreach}}
+                </div>
+              </div>
+              {{#foreach featured from="2"}}
+                <article class="m-article-card {{#unless feature_image}}no-picture{{/unless}} {{post_class}}">
+                  <div class="m-article-card__picture">
+                    <a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a>
+                    {{#if feature_image}}
+                      <img class="m-article-card__picture-background" src="{{img_url feature_image size="m"}}" loading="lazy" alt="">
+                    {{/if}}
+                    {{#if primary_tag}}
+                      <div class="m-article-card__featured">
+                        <span>{{primary_tag.name}}</span>
+                      </div>
+                    {{/if}}
+                  </div>
+                  <div class="m-article-card__info no-tag">
+                    <a href="{{url}}" class="m-article-card__info-link" aria-label="{{title}}">
+                      <div>
+                        <h2 class="m-article-card__title js-article-card-title {{#unless feature_image}}js-article-card-title-no-image{{/unless}}" title="{{title}}">
+                          {{title}}
+                        </h2>
+                      </div>
+                    </a>
+                  </div>
+                </article>
+              {{/foreach}}
+            {{/if}}
+          {{/get}}
+        </div>
+      </div>
+    </div>
+  </article>
+</main>
+
+{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
+{{#contentFor "scripts"}}
+  <script defer src="{{asset "js/page.js"}}"></script>
+  <script defer src="{{asset "js/home.js"}}"></script>
+{{/contentFor}}

index.hbs

@@ -1,19 +1,12 @@
-{{!--
-This template is used for the index page.
-It can be used also as the home page or the default page.
---}}
-
-{{!-- This block preloads specific assets for the index page --}}
+{{!-- This block preloads specific assets for the post page --}}
 {{#contentFor "preload"}}
-  <link rel="preload" href="{{asset "css/home.css"}}" as="style" />
-  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
-  <link rel="preload" href="{{asset "js/home.js"}}" as="script" />
+  <link rel="preload" href="{{asset "css/post.css"}}" as="style" />
+  <link rel="preload" href="{{asset "js/page.js"}}" as="script" />
 {{/contentFor}}
 
-{{!-- This block loads specific styles for the index page --}}
+{{!-- This block loads specific styles for the post page --}}
 {{#contentFor "styles"}}
-  <link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" />
-  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
+  <link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
 {{/contentFor}}
 
 {{!-- The tag below means: insert everything in this file
@@ -21,10 +14,13 @@ into the {body} of the default.hbs template --}}
 {{!< default}}
 
 {{!-- Special header.hbs partial to generate the <header> tag --}}
-{{> header background=@site.cover_image}}
+{{#post}}
+  {{> header background=@site.cover_image}}
+{{/post}}
 
-<main class="main-wrap">
-  {{!-- Inject styles of the hero image to make it responsive --}}
+<main class="main-wrap{{#if @custom.use_custom_cta}} with-custom-cta{{/if}}{{#if @custom.use_wave_separator}} with-wave-separator{{/if}}">
+  {{!-- Everything inside the #post tags pulls data from the post --}}
+    {{!-- Inject styles of the hero image to make it responsive --}}
   {{> hero background=@site.cover_image}}
   <div class="m-hero__content" data-animate="fade-down">
     <h1 class="m-hero-title bigger">{{@site.title}}</h1>
@@ -39,81 +35,30 @@ into the {body} of the default.hbs template --}}
       {{/if}}
     {{/if}}
   </div>
-  </section>
-  <div class="l-content">
-    <div class="l-wrapper" data-animate="fade-up">
-      <div class="l-grid centered">
-        {{#get "posts" filter="featured:true" include="authors,tags" limit="5" as |featured|}}
-          {{#if featured}}
-            <div class="m-featured-slider swiper js-featured-slider">
-              <div class="m-featured-slider__list swiper-wrapper">
-                {{#foreach featured}}
-                  <div class="m-featured-slider__list__item swiper-slide">
-                    <article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}">
-                      <div class="m-featured-article__picture">
-                        {{#if feature_image}}
-                          <style>
-                            #featured-bg-{{id}} {
-                              background-image: url({{{img_url feature_image size='l'}}});
-                            }
-                            @media(max-width: 768px) {
-                              #featured-bg-{{id}} {
-                                background-image: url({{{img_url feature_image size='m'}}});
-                              }
-                            }
-                          </style>
-                          <div id="featured-bg-{{id}}"></div>
-                        {{/if}}
-                      </div>
-                      <div class="m-featured-article__meta">
-                        <a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="{{primary_author.name}}" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
-                          {{#if primary_author.profile_image}}
-                            <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
-                          {{else}}
-                            <div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
-                          {{/if}}
-                        </a>
-                        {{#if primary_tag}}
-                          <a href="{{primary_tag.url}}" class="m-featured-article__tag">{{primary_tag.name}}</a>
-                        {{/if}}
-                      </div>
-                      <div class="m-featured-article__ribbon">
-                        <span class="icon-star"></span>
-                        <span>{{t "Featured"}}</span>
-                      </div>
-                      <a href="{{url}}" class="m-featured-article__content">
-                        <h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
-                          {{title}}
-                        </h2>
-                        <div class="m-featured-article__timestamp">
-                          <span>{{date published_at timeago="true"}}</span>
-                          <span>&bull;</span>
-                          <span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
-                        </div>
-                      </a>
-                    </article>
-                  </div>
-                {{/foreach}}
-              </div>
-              <button class="m-icon-button in-featured-articles swiper-button-prev js-featured-slider-button" aria-label="{{t "Previous"}}">
-                <span class="icon-arrow-left" aria-hidden="true"></span>
-              </button>
-              <button class="m-icon-button in-featured-articles swiper-button-next js-featured-slider-button" aria-label="{{t "Next"}}">
-                <span class="icon-arrow-right" aria-hidden="true"></span>
-              </button>
-            </div>
-          {{/if}}
-        {{/get}}
-        {{!-- The tag below iterates over all the posts --}}
-        {{> "loop"}}
-      </div>
+  {{#if @custom.use_wave_separator}}
+    <div class="m-hero__waves">
+      <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+        <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z"></path>
+      </svg>
     </div>
-    {{!-- Links to Previous/Next posts --}}
-    {{pagination}}
-  </div>
+  {{/if}}
+  </section>
+  {{#post}}
+    <article>
+      <div class="l-content">
+        <div class="l-wrapper in-post" data-animate="fade-up">
+          <div class="l-post-content">
+            <div class="pos-relative js-post-content">
+              {{content}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  {{/post}}
 </main>
 
 {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
 {{#contentFor "scripts"}}
-  <script defer src="{{asset "js/home.js"}}"></script>
+  <script defer src="{{asset "js/page.js"}}"></script>
 {{/contentFor}}

package.json

@@ -58,6 +58,17 @@
         "type": "text",
         "default": "/newsletter",
         "group": "homepage"
+      },
+      "use_wave_separator": {
+        "type": "boolean",
+        "default": true,
+        "group": "homepage"
+      },
+      "youtube_url": {
+        "type": "text"
+      },
+      "instagram_url": {
+        "type": "text"
       }
     }
   },
@@ -87,5 +98,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "2.1.7"
+  "version": "2.1.7+2312"
 }

page.hbs

@@ -25,14 +25,16 @@ into the {body} of the default.hbs template --}}
 <main class="main-wrap">
   {{!-- Everything inside the #post tags pulls data from the post --}}
   {{#post}}
-    {{!-- Inject styles of the hero image to make it responsive --}}
-    {{> hero background=feature_image}}
-    <div class="m-hero__content" data-animate="fade-down">
-      <h1 class="m-hero-title bigger">{{title}}</h1>
-      {{#if custom_excerpt}}
-        <p class="m-hero-description">{{custom_excerpt}}</p>
-      {{/if}}
-    </div>
+    {{#match @page.show_title_and_feature_image}}
+      {{!-- Inject styles of the hero image to make it responsive --}}
+      {{> hero background=feature_image}}
+      <div class="m-hero__content" data-animate="fade-down">
+        <h1 class="m-hero-title bigger">{{title}}</h1>
+        {{#if custom_excerpt}}
+          <p class="m-hero-description">{{custom_excerpt}}</p>
+        {{/if}}
+      </div>
+    {{/match}}
     </section>
     <article>
       <div class="l-content">

partials/footer.hbs

@@ -10,6 +10,16 @@ This footer template is shared across all the pages.
       </nav>
     {{/if}}
     <nav class="m-footer-social">
+      {{#if @custom.youtube_url}}
+        <a href="{{@custom.youtube_url}}" target="_blank" rel="noopener" aria-label="YouTube">
+          <span class="icon-youtube" aria-hidden="true"></span>
+        </a>
+      {{/if}}
+      {{#if @custom.instagram_url}}
+        <a href="{{@custom.instagram_url}}" target="_blank" rel="noopener" aria-label="Instagram">
+          <span class="icon-instagram" aria-hidden="true"></span>
+        </a>
+      {{/if}}
       {{#if @site.facebook}}
         <a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
           <span class="icon-facebook" aria-hidden="true"></span>
@@ -20,17 +30,18 @@ This footer template is shared across all the pages.
           <span class="icon-twitter" aria-hidden="true"></span>
         </a>
       {{/if}}
-      <a href="{{@site.url}}/rss" aria-label="RSS">
+      {{!-- <a href="{{@site.url}}/rss" aria-label="RSS">
         <span class="icon-rss" aria-hidden="true"></span>
-      </a>
+      </a> --}}
     </nav>
     <p class="m-footer-copyright">
-      <span>{{@site.title}} &copy; {{date format="YYYY"}}</span>
-      <span>&nbsp; &bull; &nbsp;</span>
-      <span>{{t "Published with"}} <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a></span>
+      <span>{{@site.title}} &copy; {{date format="YYYY"}}</span><br>
+      <span>{{t "Published with"}} <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
+      &amp; <a href="https://github.com/eddiesigner/liebling" target="_blank" rel="noopener">Liebling</a>
+      &#x2022; {{t "by"}} <a href="https://dragonwocky.me/">Tom Vines</a></span>
     </p>
-    <p class="m-footer-copyright jslicense">
+    {{!-- <p class="m-footer-copyright jslicense">
       <a href="{{asset "html/javascript.html"}}" rel="jslicense">{{t "JavaScript license information"}}</a>
-    </p>
+    </p> --}}
   </div>
 </footer>

partials/header.hbs

@@ -53,6 +53,7 @@ This header template is shared across all the pages.
                 {{navigation}}
               {{/if}}
               {{#if @site.secondary_navigation}}
+                {{navigation type="secondary"}}
                 <li class="more">
                   <span>
                     <a href="javascript:void(0);" class="js-open-secondary-menu">
@@ -118,6 +119,24 @@ This header template is shared across all the pages.
             </ul>
           </nav>
           <div class="m-nav__right">
+            {{#if @custom.youtube_url}}
+              <a href="{{@custom.youtube_url}}" target="_blank" rel="noopener" aria-label="YouTube"
+                class="m-icon-button in-menu-main">
+                <span class="icon-youtube" aria-hidden="true"></span>
+              </a>
+            {{/if}}
+            {{#if @custom.instagram_url}}
+              <a href="{{@custom.instagram_url}}" target="_blank" rel="noopener" aria-label="Instagram"
+                class="m-icon-button in-menu-main">
+                <span class="icon-instagram" aria-hidden="true"></span>
+              </a>
+            {{/if}}
+            {{#if @site.facebook}}
+              <a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener" aria-label="Facebook"
+                class="m-icon-button in-menu-main">
+                <span class="icon-facebook" aria-hidden="true"></span>
+              </a>
+            {{/if}}
             <button class="m-icon-button in-menu-main {{^if @custom.enable_native_search}}js-open-search{{/if}}" {{#if @custom.enable_native_search}}data-ghost-search{{/if}} aria-label="{{t "Open search"}}">
               <span class="icon-search" aria-hidden="true"></span>
             </button>

post.hbs

@@ -49,45 +49,12 @@ into the {body} of the default.hbs template --}}
               <h1 class="m-heading__title in-post">{{title}}</h1>
               <div class="m-heading__meta">
                 {{#if primary_tag}}
-                  <a href="{{primary_tag.url}}" class="m-heading__meta__tag">{{primary_tag.name}}</a>
-                  <span class="m-heading__meta__divider" aria-hidden="true">&bull;</span>
+                  <span class="m-heading__meta__tag">{{primary_tag.name}}</span>
                 {{/if}}
-                <span class="m-heading__meta__time">{{date published_at}}</span>
               </div>
             </header>
             <div class="pos-relative js-post-content">
-              <div class="m-share">
-                <div class="m-share__content js-sticky">
-                  <a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute='true'}}"
-                    class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Facebook">
-                    <span class="icon-facebook" aria-hidden="true"></span>
-                  </a>
-                  <a href="https://twitter.com/intent/tweet?text={{encode title}}&url={{url absolute='true'}}"
-                    class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Twitter">
-                    <span class="icon-twitter" aria-hidden="true"></span>
-                  </a>
-                  <button class="m-icon-button filled in-share progress js-scrolltop" aria-label="{{t "Scroll to top"}}">
-                    <span class="icon-arrow-top" aria-hidden="true"></span>
-                    <svg aria-hidden="true">
-                      <circle class="progress-ring__circle js-progress" fill="transparent" r="0" />
-                    </svg>
-                  </button>
-                </div>
-              </div>
               {{content}}
-              {{!-- List of tags  --}}
-              {{#if tags}}
-                <section class="m-tags in-post">
-                  <h3 class="m-submenu-title">{{t "Tags"}}</h3>
-                  <ul>
-                    {{#foreach tags}}
-                      <li>
-                        <a href="{{url}}" title="{{name}}">{{name}}</a>
-                      </li>
-                    {{/foreach}}
-                  </ul>
-                </section>
-              {{/if}}
             </div>
           </div>
         </div>
@@ -109,55 +76,6 @@ into the {body} of the default.hbs template --}}
             </div>
           </section>
         {{/if}}
-        <section class="m-author">
-          <div class="m-author__content">
-            <div class="m-author__picture">
-              <a href="{{primary_author.url}}" class="m-author-picture" aria-label="{{primary_author.name}}">
-                {{#if primary_author.profile_image}}
-                  <div style="background-image: url({{primary_author.profile_image}});"></div>
-                {{else}}
-                  <div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
-                {{/if}}
-              </a>
-            </div>
-            <div class="m-author__info">
-              <h4 class="m-author__name">
-                <a href="{{primary_author.url}}">{{primary_author.name}}</a>
-              </h4>
-              {{#has author="count:>1"}}
-                <p class="m-small-text in-author-along-with">
-                  {{authors separator=", " prefix=(t "Among with no break line") from="2"}}
-                </p>
-              {{/has}}
-              {{#if primary_author.bio}}
-                <p class="m-author__bio">{{primary_author.bio}}</p>
-              {{/if}}
-              <ul class="m-author-links">
-                {{#if primary_author.website}}
-                  <li>
-                    <a href="{{primary_author.website}}" target="_blank" rel="noopener" aria-label="{{t "Website"}}">
-                      <span class="icon-globe" aria-hidden="true"></span>
-                    </a>
-                  </li>
-                {{/if}}
-                {{#if primary_author.facebook}}
-                  <li>
-                    <a href="https://facebook.com/{{primary_author.facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
-                      <span class="icon-facebook" aria-hidden="true"></span>
-                    </a>
-                  </li>
-                {{/if}}
-                {{#if primary_author.twitter}}
-                  <li>
-                    <a href="https://twitter.com/{{primary_author.twitter}}" target="_blank" rel="noopener" aria-label="Twitter">
-                      <span class="icon-twitter" aria-hidden="true"></span>
-                    </a>
-                  </li>
-                {{/if}}
-              </ul>
-            </div>
-          </div>
-        </section>
         {{!-- Native comments --}}
         {{#if comments}}
           <div class="m-comments">
@@ -175,32 +93,6 @@ into the {body} of the default.hbs template --}}
           </section>
         --}}
       {{/post}}
-      {{!-- Related posts --}}
-      {{#if post.tags.length}}
-        {{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags,authors" order="published_at desc" as |related|}}
-          {{#if related}}
-            <section class="m-recommended">
-              <div class="l-wrapper in-recommended">
-                <h3 class="m-section-title in-recommended">{{t "Recommended for you"}}</h3>
-                <div class="m-recommended-articles">
-                  <div class="m-recommended-slider swiper js-recommended-slider">
-                    <div class="swiper-wrapper">
-                      {{!-- The tag below iterates over all the related posts --}}
-                      {{> "loop"}}
-                    </div>
-                    <button class="m-icon-button filled in-recommended-articles swiper-button-prev" aria-label="{{t "Previous"}}">
-                      <span class="icon-arrow-left" aria-hidden="true"></span>
-                    </button>
-                    <button class="m-icon-button filled in-recommended-articles swiper-button-next" aria-label="{{t "Next"}}">
-                      <span class="icon-arrow-right" aria-hidden="true"></span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </section>
-          {{/if}}
-        {{/get}}
-      {{/if}}
     </div>
   </article>
 </main>

src/js/app.js

@@ -339,4 +339,4 @@ $(() => {
 
   tryToRemoveNewsletter();
   trySearchFeature();
-});
+});

src/js/post.js

@@ -70,6 +70,7 @@ const setHeights = () => {
 };
 
 const setCircleStyles = () => {
+  if (!$progressCircle?.[0]?.style) return;
   const svgWidth = $progressCircle.parent().width();
   const radiusCircle = svgWidth / 2;
   const borderWidth = isMobile() ? 2 : 3;
@@ -87,6 +88,7 @@ const setCircleStyles = () => {
 };
 
 const setProgress = percent => {
+  if (!$progressCircle?.[0]?.style) return;
   if (percent <= 100) {
     const offset = circumference - (percent / 100) * circumference;
     $progressCircle[0].style.strokeDashoffset = offset;
@@ -95,6 +97,7 @@ const setProgress = percent => {
 
 const prepareProgressCircle = () => {
   $progressCircle = $('.js-progress');
+  if (!$progressCircle) return;
 
   setHeights();
   setCircleStyles();

src/sass/app.scss

@@ -45,3 +45,5 @@
 @import "components/search/icon";
 @import "components/search/result";
 @import "components/footer";
+
+@import "pyv";

src/sass/common/_themes.scss

@@ -1,3 +1,4 @@
+html:not([data-theme]),
 [data-theme="light"] {
   --background-color: #fff;
   --primary-foreground-color: #4a4a4a;
@@ -5,7 +6,7 @@
   --primary-subtle-color: #0470ee;
   --secondary-subtle-color: #f4f8fd;
   --titles-color: #333;
-  --link-color: #133467;
+  --link-color: #1d3c85;
   --primary-border-color: #9b9b9b;
   --secondary-border-color: aliceblue;
   --article-shadow-normal: 0 10px 10px rgba(0, 0, 0, 0.08);
@@ -32,7 +33,7 @@
   --primary-subtle-color: #2c2fe6;
   --secondary-subtle-color: #141920;
   --titles-color: #b4b4b4;
-  --link-color: #b6b7f6;
+  --link-color: #5bbaeb;
   --primary-border-color: #1d1d1d;
   --secondary-border-color: #0f0f0f;
   --article-shadow-normal: 0 4px 5px 5px rgba(0, 0, 0, 0.1);

src/sass/pyv.scss

@@ -0,0 +1,437 @@
+/* wrap content in columns on desktop */
+@include respond-to("medium") {
+  .columns .kg-image-card img {
+    width: 100% !important;
+    margin: 0 !important;
+  }
+}
+@include respond-to("large") {
+  .columns {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .columns:not(.no-gap) {
+    grid-gap: 24px;
+  }
+  .columns > *:empty {
+    display: none;
+  }
+  .columns > :is(.kg-embed-card, .kg-image-card) {
+    &:nth-child(2n - 1 of :not(:empty)) {
+      padding-top: 0;
+      // & + p,
+      // & + * > p:first-child {
+      //   margin-top: -8px;
+      // }
+    }
+  }
+  .buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+  }
+}
+.columns.no-gap > :not(:last-child) ul {
+  margin-bottom: 0;
+}
+.columns > * > .kg-embed-card + h3,
+.columns > * > .kg-image-card + h3,
+.columns > * > .kg-audio-card + h3 {
+  margin-bottom: 0;
+  & ~ p {
+    margin-bottom: 1em;
+  }
+}
+.columns > * > h3:first-child + p,
+.columns > * > .kg-embed-card + h3,
+.columns > * > .kg-image-card + h3 {
+  margin-top: -40px;
+}
+.columns > * > .kg-embed-card + .kg-embed-card {
+  margin-top: -50px;
+}
+.buttons {
+  .kg-button-card a {
+    width: 100%;
+  }
+  @media screen and (max-width: $break-large) {
+    & > *:not(:last-child) {
+      margin-bottom: 14px !important;
+    }
+  }
+}
+.kg-button-card {
+  padding: 0 !important;
+}
+
+/* transparent nav on homepage until scroll */
+.home-template {
+  .in-mobile-topbar {
+    --titles-color: white;
+  }
+  .m-header {
+    &,
+    .m-nav__right::before {
+      transition: background 200ms;
+    }
+    /* prefer :not() to default to transparent onload */
+    &:not(.headroom--not-top) {
+      &,
+      .m-nav__right::before {
+        background: transparent;
+      }
+      .m-logo__image-light {
+        display: none;
+      }
+      .m-logo__image-dark {
+        display: block;
+      }
+      @include respond-to("medium") {
+        --titles-color: white;
+      }
+    }
+  }
+}
+
+/* correctly position announcements bar */
+body:not(.home-template) {
+  --announcement-bar-height: 0 !important;
+}
+
+/* keep footer lines tight */
+.m-footer-copyright {
+  line-height: 1 !important;
+}
+
+/* disable fade down animation on nav */
+.m-header {
+  --show-fade-animation: 0;
+}
+
+/* hide nav shadow if at top of content */
+.m-header.headroom--top {
+  box-shadow: none !important;
+}
+
+/* sticky nav to avoid overlap with page cover */
+body:not(.home-template) {
+  .m-hero {
+    margin-top: 50px;
+  }
+  @include respond-to("medium") {
+    .m-header {
+      position: sticky;
+    }
+    .m-hero {
+      margin-top: 0;
+      &:not(.post-template .m-hero.with-picture) {
+        padding-top: 75px;
+      }
+    }
+  }
+}
+
+/* add "Home" to nav on mobile */
+@include respond-to("medium") {
+  .m-menu .nav-home {
+    display: none;
+  }
+}
+
+/* concat primary & secondary nav on mobile */
+.m-nav__left .m-secondary-menu {
+  @include respond-to("medium") {
+    display: none;
+  }
+}
+@media only screen and (max-width: $break-medium) {
+  .m-nav__left .m-secondary-menu + .more {
+    display: none;
+  }
+  .m-nav__left .m-secondary-menu li {
+    font-size: 1.125rem;
+    a {
+      padding: 0;
+      &:hover {
+        background: none;
+      }
+    }
+  }
+  .m-nav__right {
+    justify-content: flex-start;
+    .m-icon-button:first-child {
+      margin-left: -6px;
+    }
+  }
+}
+
+/* add wave shape divider to homepage */
+.m-hero__waves {
+  position: absolute;
+  bottom: -1.3px;
+  left: 0;
+  overflow: hidden;
+  z-index: 1;
+  width: 200%;
+  & svg {
+    position: relative;
+    display: block;
+    width: calc(100% + 1.3px);
+    height: 50px;
+    transform: rotateY(180deg);
+  }
+  & path {
+    fill: var(--background-color);
+  }
+  @include respond-to("medium") {
+    width: 150%;
+    & svg {
+      height: 100px;
+    }
+  }
+}
+.with-wave-separator {
+  &.with-custom-cta .m-hero__content {
+    margin-bottom: 25px;
+  }
+  @include respond-to("medium") {
+    .m-hero.with-picture {
+      height: 500px;
+    }
+    .m-hero__content {
+      margin-bottom: 80px;
+    }
+    &.with-custom-cta .m-hero__content {
+      margin-bottom: 100px;
+    }
+  }
+}
+
+/* newsletter signup form */
+@include respond-to("medium") {
+  .newsletter-subscription {
+    display: flex;
+    > div {
+      flex-grow: 1;
+      .m-input {
+        margin: 0 !important;
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+      }
+    }
+    .m-button {
+      width: 10rem !important;
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+  }
+}
+
+/* featured post cards with images: avoid cropping + hide titles */
+.m-featured-article:not(.no-picture) {
+  .m-featured-article__picture {
+    background-color: transparent;
+    position: static;
+    display: flex;
+    img {
+      width: 100%;
+      height: 100%;
+      margin: auto;
+      object-fit: cover;
+    }
+  }
+  & > a {
+    position: absolute;
+    top: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    .m-featured-article__title {
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      margin-bottom: -1px;
+    }
+  }
+}
+
+/* resize post cards to fill horizontal space */
+.l-post-content {
+  min-height: auto !important;
+}
+.m-article-card,
+.m-article-card__info,
+.m-featured-slider.swiper {
+  height: auto !important;
+}
+.m-article-card__info .m-article-card__info-link {
+  padding-top: 25px !important;
+}
+@include respond-to("large") {
+  .l-grid > :nth-child(3n of .m-article-card):last-child {
+    width: calc(66.66666% - 40px);
+  }
+  .l-grid > :nth-child(3n - 1 of .m-article-card):last-child {
+    width: 100%;
+  }
+  .l-post-content + .l-grid.centered {
+    margin: 0 max(calc(50% - 430px), 0px);
+  }
+}
+@media only screen and (min-width: $break-small) and (max-width: $break-large) {
+  .l-grid > :nth-child(2n + 1 of .m-article-card):last-child {
+    width: 100%;
+  }
+}
+@media only screen and (max-width: $break-medium) {
+  .l-post-content + .l-grid.centered {
+    margin-top: 40px;
+  }
+}
+
+/* use featured ribbon as year tag */
+.m-article-card__featured,
+.m-featured-article__ribbon {
+  border-radius: 15px !important;
+  font-size: 0.875rem;
+  font-weight: 600;
+  height: 22px !important;
+  padding: 0 7px;
+  width: auto !important;
+  right: 11.2px !important;
+  top: 14px !important;
+}
+.m-article-card__featured span,
+.m-featured-article__ribbon span {
+  margin: 0 4px;
+  color: var(--primary-subtle-color);
+  display: block !important;
+}
+
+/* cardlike galleries used on merch page */
+.kg-gallery-card.kg-card-hascaption {
+  margin: 0 !important;
+  display: flex;
+  flex-direction: column;
+  padding: 20px !important;
+  border-radius: 5px;
+  box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25),
+    0 4px 8px var(--button-shadow-color-hover), 0 0 0 transparent;
+  .kg-gallery-container {
+    margin: auto;
+  }
+  figcaption p {
+    margin-bottom: 0;
+  }
+}
+
+/* social media icons */
+.m-nav__right .m-icon-button:not([data-ghost-search]) {
+  display: flex;
+  height: 32px;
+  width: 32px;
+}
+.m-nav__right .m-icon-button:not(:first-child) {
+  margin-left: 4px;
+}
+
+/* page cover sizing & readability (inc. uncropped post covers) */
+.m-hero-title.bigger,
+.m-hero-description.bigger {
+  text-shadow: 1px 1px 1px black;
+}
+.post-template .m-hero.with-picture {
+  padding: 0;
+  min-height: initial;
+  height: max-content;
+  background: transparent;
+  .m-hero__picture {
+    position: static;
+    height: max-content;
+    img {
+      height: auto;
+      -o-object-fit: initial;
+      object-fit: initial;
+      @include respond-to("large") {
+        border-radius: 16px;
+        margin-top: 40px;
+        max-height: 40vh;
+        width: auto;
+      }
+    }
+  }
+}
+
+/* pad table titles */
+.l-post-content table th {
+  padding: 0 10px;
+}
+
+/* default full width iframes */
+.l-post-content iframe {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  height: auto;
+}
+
+/* hide "recent articles" and "tags" modal trigger */
+.js-submenu-option {
+  display: none;
+}
+.js-main-nav-left::-webkit-scrollbar {
+  display: none;
+}
+
+/* restyle audio cards: rounder + more compact */
+.kg-audio-card {
+  position: relative;
+  min-height: 64px;
+  margin-bottom: 20px !important;
+  box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25),
+    0 4px 8px var(--button-shadow-color-hover), 0 0 0 transparent;
+}
+.kg-audio-title {
+  margin: 0 !important;
+  min-height: 58px;
+  padding: 8px 12px 8px 56px !important;
+}
+.kg-audio-title a {
+  text-decoration: none !important;
+}
+.kg-audio-player {
+  padding-bottom: 12px;
+  padding-right: 14px;
+}
+.kg-audio-seek-slider {
+  width: 100%;
+}
+.kg-audio-thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 42px !important;
+  width: 42px !important;
+}
+.kg-audio-thumbnail.placeholder {
+  background: transparent !important;
+}
+.kg-file-card-icon:before,
+.kg-audio-thumbnail.placeholder::before {
+  background: currentColor;
+  opacity: 0.06;
+  transition: opacity ease-in-out 0.35s;
+  position: absolute;
+  display: block;
+  content: "";
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 5px;
+}
+.kg-file-card-icon svg,
+.kg-audio-thumbnail.placeholder svg {
+  fill: currentColor !important;
+  color: currentColor !important;
+}