Compare commits
No commits in common. "main" and "upstream" have entirely different histories.
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
||||
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
|
||||
@ -1 +1 @@
|
||||
"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()}]);
|
||||
"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()}]);
|
||||
@ -1,35 +0,0 @@
|
||||
/*!
|
||||
* 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
|
||||
**/
|
||||
@ -6,7 +6,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
{{!-- Base Meta --}}
|
||||
<title>{{^is "home"}}{{meta_title}} - {{/is}}{{@site.title}}</title>
|
||||
<title>{{meta_title}}</title>
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
|
||||
124
featured.hbs
124
featured.hbs
@ -1,124 +0,0 @@
|
||||
{{#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}}
|
||||
115
index.hbs
115
index.hbs
@ -1,12 +1,19 @@
|
||||
{{!-- This block preloads specific assets for the post page --}}
|
||||
{{!--
|
||||
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 --}}
|
||||
{{#contentFor "preload"}}
|
||||
<link rel="preload" href="{{asset "css/post.css"}}" as="style" />
|
||||
<link rel="preload" href="{{asset "js/page.js"}}" as="script" />
|
||||
<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}}
|
||||
|
||||
{{!-- This block loads specific styles for the post page --}}
|
||||
{{!-- This block loads specific styles for the index page --}}
|
||||
{{#contentFor "styles"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
|
||||
<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
|
||||
@ -14,13 +21,10 @@ into the {body} of the default.hbs template --}}
|
||||
{{!< default}}
|
||||
|
||||
{{!-- Special header.hbs partial to generate the <header> tag --}}
|
||||
{{#post}}
|
||||
{{> header background=@site.cover_image}}
|
||||
{{/post}}
|
||||
{{> header background=@site.cover_image}}
|
||||
|
||||
<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 --}}
|
||||
<main class="main-wrap">
|
||||
{{!-- 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>
|
||||
@ -35,30 +39,81 @@ into the {body} of the default.hbs template --}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</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>
|
||||
{{/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 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>•</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>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
{{!-- The tag below iterates over all the posts --}}
|
||||
{{> "loop"}}
|
||||
</div>
|
||||
</article>
|
||||
{{/post}}
|
||||
</div>
|
||||
{{!-- Links to Previous/Next posts --}}
|
||||
{{pagination}}
|
||||
</div>
|
||||
</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}}
|
||||
|
||||
13
package.json
13
package.json
@ -58,17 +58,6 @@
|
||||
"type": "text",
|
||||
"default": "/newsletter",
|
||||
"group": "homepage"
|
||||
},
|
||||
"use_wave_separator": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"group": "homepage"
|
||||
},
|
||||
"youtube_url": {
|
||||
"type": "text"
|
||||
},
|
||||
"instagram_url": {
|
||||
"type": "text"
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -98,5 +87,5 @@
|
||||
"desktop": "assets/screenshot-desktop.jpg",
|
||||
"mobile": "assets/screenshot-mobile.jpg"
|
||||
},
|
||||
"version": "2.1.7+2312"
|
||||
"version": "2.1.7"
|
||||
}
|
||||
|
||||
18
page.hbs
18
page.hbs
@ -25,16 +25,14 @@ into the {body} of the default.hbs template --}}
|
||||
<main class="main-wrap">
|
||||
{{!-- Everything inside the #post tags pulls data from the post --}}
|
||||
{{#post}}
|
||||
{{#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}}
|
||||
{{!-- 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>
|
||||
<article>
|
||||
<div class="l-content">
|
||||
|
||||
@ -10,16 +10,6 @@ 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>
|
||||
@ -30,18 +20,17 @@ 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}} © {{date format="YYYY"}}</span><br>
|
||||
<span>{{t "Published with"}} <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
|
||||
& <a href="https://github.com/eddiesigner/liebling" target="_blank" rel="noopener">Liebling</a>
|
||||
• {{t "by"}} <a href="https://dragonwocky.me/">Tom Vines</a></span>
|
||||
<span>{{@site.title}} © {{date format="YYYY"}}</span>
|
||||
<span> • </span>
|
||||
<span>{{t "Published with"}} <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</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>
|
||||
|
||||
@ -53,7 +53,6 @@ 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">
|
||||
@ -119,24 +118,6 @@ 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>
|
||||
|
||||
110
post.hbs
110
post.hbs
@ -49,12 +49,45 @@ 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}}
|
||||
<span class="m-heading__meta__tag">{{primary_tag.name}}</span>
|
||||
<a href="{{primary_tag.url}}" class="m-heading__meta__tag">{{primary_tag.name}}</a>
|
||||
<span class="m-heading__meta__divider" aria-hidden="true">•</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>
|
||||
@ -76,6 +109,55 @@ 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">
|
||||
@ -93,6 +175,32 @@ 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>
|
||||
|
||||
@ -70,7 +70,6 @@ const setHeights = () => {
|
||||
};
|
||||
|
||||
const setCircleStyles = () => {
|
||||
if (!$progressCircle?.[0]?.style) return;
|
||||
const svgWidth = $progressCircle.parent().width();
|
||||
const radiusCircle = svgWidth / 2;
|
||||
const borderWidth = isMobile() ? 2 : 3;
|
||||
@ -88,7 +87,6 @@ const setCircleStyles = () => {
|
||||
};
|
||||
|
||||
const setProgress = percent => {
|
||||
if (!$progressCircle?.[0]?.style) return;
|
||||
if (percent <= 100) {
|
||||
const offset = circumference - (percent / 100) * circumference;
|
||||
$progressCircle[0].style.strokeDashoffset = offset;
|
||||
@ -97,7 +95,6 @@ const setProgress = percent => {
|
||||
|
||||
const prepareProgressCircle = () => {
|
||||
$progressCircle = $('.js-progress');
|
||||
if (!$progressCircle) return;
|
||||
|
||||
setHeights();
|
||||
setCircleStyles();
|
||||
|
||||
13950
src/package-lock.json
generated
13950
src/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -45,5 +45,3 @@
|
||||
@import "components/search/icon";
|
||||
@import "components/search/result";
|
||||
@import "components/footer";
|
||||
|
||||
@import "pyv";
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
html:not([data-theme]),
|
||||
[data-theme="light"] {
|
||||
--background-color: #fff;
|
||||
--primary-foreground-color: #4a4a4a;
|
||||
@ -6,7 +5,7 @@ html:not([data-theme]),
|
||||
--primary-subtle-color: #0470ee;
|
||||
--secondary-subtle-color: #f4f8fd;
|
||||
--titles-color: #333;
|
||||
--link-color: #1d3c85;
|
||||
--link-color: #133467;
|
||||
--primary-border-color: #9b9b9b;
|
||||
--secondary-border-color: aliceblue;
|
||||
--article-shadow-normal: 0 10px 10px rgba(0, 0, 0, 0.08);
|
||||
@ -33,7 +32,7 @@ html:not([data-theme]),
|
||||
--primary-subtle-color: #2c2fe6;
|
||||
--secondary-subtle-color: #141920;
|
||||
--titles-color: #b4b4b4;
|
||||
--link-color: #5bbaeb;
|
||||
--link-color: #b6b7f6;
|
||||
--primary-border-color: #1d1d1d;
|
||||
--secondary-border-color: #0f0f0f;
|
||||
--article-shadow-normal: 0 4px 5px 5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@ -1,437 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user