build custom homepage + featured posts pages
inc. wave separator on homepage + linking both layouts to render page content
This commit is contained in:
parent
d38b3cc685
commit
83bcf454c6
GPG Key ID:
7998D08F7D7BD7A8
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
"use strict";(self.webpackChunkliebling=self.webpackChunkliebling||[]).push([[571],{769:(e,t,n)=>{n.d(t,{dZ:()=>a,e:()=>o,eS:()=>s,ej:()=>r,tq:()=>i});var a=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},o=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"),i=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(i," 1 0%")}},s=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")}))},r=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),i=n.n(a),o=n(557),s=n(729),r=n.n(s),l=n(433),c=n(911),u=(n(350),n(769)),d=null,h=null,f=window.pageYOffset,m=0,p=0,g=0,w=!1,v=function(){f=window.pageYOffset,y()},k=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")},b=function(){C(),k(100),setTimeout((function(){x(),y()}),200)},y=function(){w||requestAnimationFrame(j),w=!0},j=function(){var e=p-m,t=Math.ceil(f/e*100);t<=100&&T(t),w=!1},C=function(){m=window.innerHeight,p=i()(document).height()},x=function(){var e=h.parent().width(),t=e/2,n=(0,u.tq)()?2:3;h.parent().attr("viewBox","0 0 ".concat(e," ").concat(e)),h.attr("stroke-width",n),h.attr("r",t-(n-1)),h.attr("cx",t),h.attr("cy",t),g=2*t*Math.PI,h[0].style.strokeDasharray="".concat(g," ").concat(g),h[0].style.strokeDashoffset=g},T=function(e){if(e<=100){var t=g-e/100*g;h[0].style.strokeDashoffset=t}};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)(),k(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(),o.Z),window.addEventListener("scroll",v,{passive:!0}),window.addEventListener("resize",b,{passive:!0})})),i()(window).on("load",(function(){h=i()(".js-progress"),C(),x(),j(),setTimeout((function(){h.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:()=>i,e:()=>a,eS:()=>s,ej:()=>l,tq:()=>o});var i=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},a=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var i=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;i.style.flex="".concat(o," 1 0%")}},s=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 i=n(755),o=n.n(i),a=n(557),s=n(729),l=n.n(s),r=n(433),c=n(911),u=(n(350),n(769)),d=null,h=null,f=window.pageYOffset,m=0,p=0,v=0,g=!1,w=function(){f=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(){g||requestAnimationFrame(j),g=!0},j=function(){var e=p-m,t=Math.ceil(f/e*100);t<=100&&T(t),g=!1},C=function(){m=window.innerHeight,p=o()(document).height()},x=function(){var e,t;if(null!==(e=h)&&void 0!==e&&null!==(t=e[0])&&void 0!==t&&t.style){var n=h.parent().width(),i=n/2,o=(0,u.tq)()?2:3;h.parent().attr("viewBox","0 0 ".concat(n," ").concat(n)),h.attr("stroke-width",o),h.attr("r",i-(o-1)),h.attr("cx",i),h.attr("cy",i),v=2*i*Math.PI,h[0].style.strokeDasharray="".concat(v," ").concat(v),h[0].style.strokeDashoffset=v}},T=function(e){var t,n;if(null!==(t=h)&&void 0!==t&&null!==(n=t[0])&&void 0!==n&&n.style&&e<=100){var i=v-e/100*v;h[0].style.strokeDashoffset=i}};o()((function(){d=o()(".js-animation-wrapper");var e=o()(".js-scrolltop"),t=o()(".js-recommended-slider");if(l()(".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,r.Z)(".js-article-card-title",100),(0,r.Z)(".js-article-card-title-no-image",250)}}});(0,r.Z)(".js-article-card-title",100),(0,r.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(),a.Z),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",k,{passive:!0})})),o()(window).on("load",(function(){(h=o()(".js-progress"))&&(C(),x(),j(),setTimeout((function(){h.parent().css("opacity",1)}),300))}))}},e=>{e.O(0,[898],(()=>{return t=717,e(e.s=t);var t}));e.O()}]);
|
||||
131
featured.hbs
Normal file
131
featured.hbs
Normal file
@ -0,0 +1,131 @@
|
||||
{{!--
|
||||
This template is used for the posts that are marked as pages.
|
||||
--}}
|
||||
|
||||
{{#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>
|
||||
{{!-- pyv --}}
|
||||
<div class="l-grid centered">
|
||||
{{#get "posts" filter="featured:true" include="authors,tags" 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}}
|
||||
<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>
|
||||
{{#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>
|
||||
{{!-- /pyv --}}
|
||||
</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}}
|
||||
119
index.hbs
119
index.hbs
@ -1,19 +1,16 @@
|
||||
{{!--
|
||||
This template is used for the index page.
|
||||
It can be used also as the home page or the default page.
|
||||
This template is used for the posts that are marked as pages.
|
||||
--}}
|
||||
|
||||
{{!-- 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 +18,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 +39,32 @@ 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>•</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>
|
||||
{{!-- pyv --}}
|
||||
{{#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}}
|
||||
{{!-- /pyv --}}
|
||||
</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}}
|
||||
|
||||
@ -59,6 +59,11 @@
|
||||
"default": "/newsletter",
|
||||
"group": "homepage"
|
||||
},
|
||||
"use_wave_separator": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"group": "homepage"
|
||||
},
|
||||
"youtube_url": {
|
||||
"type": "text"
|
||||
},
|
||||
|
||||
36
post.hbs
36
post.hbs
@ -48,15 +48,19 @@ into the {body} of the default.hbs template --}}
|
||||
<header class="m-heading">
|
||||
<h1 class="m-heading__title in-post">{{title}}</h1>
|
||||
<div class="m-heading__meta">
|
||||
{{!-- pyv --}}
|
||||
{{#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">•</span>
|
||||
<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>
|
||||
{{!-- <span class="m-heading__meta__time">{{date published_at}}</span> --}}
|
||||
{{!-- /pyv --}}
|
||||
</div>
|
||||
</header>
|
||||
<div class="pos-relative js-post-content">
|
||||
<div class="m-share">
|
||||
{{!-- pyv --}}
|
||||
{{!-- <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">
|
||||
@ -66,6 +70,10 @@ into the {body} of the default.hbs template --}}
|
||||
class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Twitter">
|
||||
<span class="icon-twitter" aria-hidden="true"></span>
|
||||
</a>
|
||||
<button id="open-share-menu"
|
||||
class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Share">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" fill="none"/><polyline points="16 6 12 2 8 6" fill="none"/><line x1="12" x2="12" y1="2" y2="15" fill="none"/></svg>
|
||||
</button>
|
||||
<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">
|
||||
@ -73,10 +81,10 @@ into the {body} of the default.hbs template --}}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
{{content}}
|
||||
{{!-- List of tags --}}
|
||||
{{#if tags}}
|
||||
{{!-- {{#if tags}}
|
||||
<section class="m-tags in-post">
|
||||
<h3 class="m-submenu-title">{{t "Tags"}}</h3>
|
||||
<ul>
|
||||
@ -87,7 +95,8 @@ into the {body} of the default.hbs template --}}
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/if}} --}}
|
||||
{{!-- /pyv --}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -109,7 +118,8 @@ into the {body} of the default.hbs template --}}
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
<section class="m-author">
|
||||
{{!-- pyv --}}
|
||||
{{!-- <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}}">
|
||||
@ -157,7 +167,8 @@ into the {body} of the default.hbs template --}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section> --}}
|
||||
{{!-- /pyv --}}
|
||||
{{!-- Native comments --}}
|
||||
{{#if comments}}
|
||||
<div class="m-comments">
|
||||
@ -176,7 +187,8 @@ into the {body} of the default.hbs template --}}
|
||||
--}}
|
||||
{{/post}}
|
||||
{{!-- Related posts --}}
|
||||
{{#if post.tags.length}}
|
||||
{{!-- pyv --}}
|
||||
{{!-- {{#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">
|
||||
@ -185,7 +197,6 @@ into the {body} of the default.hbs template --}}
|
||||
<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"}}">
|
||||
@ -200,7 +211,8 @@ into the {body} of the default.hbs template --}}
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
{{/if}}
|
||||
{{/if}} --}}
|
||||
{{!-- /pyv --}}
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
@ -70,6 +70,7 @@ const setHeights = () => {
|
||||
};
|
||||
|
||||
const setCircleStyles = () => {
|
||||
/* pyv */if (!$progressCircle?.[0]?.style) return;/* /pyv */
|
||||
const svgWidth = $progressCircle.parent().width();
|
||||
const radiusCircle = svgWidth / 2;
|
||||
const borderWidth = isMobile() ? 2 : 3;
|
||||
@ -87,6 +88,7 @@ const setCircleStyles = () => {
|
||||
};
|
||||
|
||||
const setProgress = percent => {
|
||||
/* pyv */if (!$progressCircle?.[0]?.style) return;/* /pyv */
|
||||
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');
|
||||
/* pyv */if (!$progressCircle) return;/* /pyv */
|
||||
|
||||
setHeights();
|
||||
setCircleStyles();
|
||||
@ -168,4 +171,20 @@ $(() => {
|
||||
|
||||
$(window).on('load', () => {
|
||||
prepareProgressCircle();
|
||||
/* pyv */
|
||||
// const $openShareMenu = $('#open-share-menu');
|
||||
// if ($openShareMenu) {
|
||||
// if (navigator?.share) {
|
||||
// $openShareMenu.on('click', () => {
|
||||
// navigator.share({
|
||||
// title: document.title,
|
||||
// text: $('.js-post-content')
|
||||
// .text().split(' ').slice(0, 42)
|
||||
// .join(' ') + '...',
|
||||
// url: location.href,
|
||||
// });
|
||||
// });
|
||||
// } else $openShareMenu.remove();
|
||||
// }
|
||||
/* /pyv */
|
||||
});
|
||||
|
||||
@ -5,7 +5,10 @@
|
||||
--primary-subtle-color: #0470ee;
|
||||
--secondary-subtle-color: #f4f8fd;
|
||||
--titles-color: #333;
|
||||
--link-color: #133467;
|
||||
/* pyv */
|
||||
// --link-color: #133467;
|
||||
--link-color: #1d3c85;
|
||||
/* /pyv */
|
||||
--primary-border-color: #9b9b9b;
|
||||
--secondary-border-color: aliceblue;
|
||||
--article-shadow-normal: 0 10px 10px rgba(0, 0, 0, 0.08);
|
||||
@ -32,7 +35,10 @@
|
||||
--primary-subtle-color: #2c2fe6;
|
||||
--secondary-subtle-color: #141920;
|
||||
--titles-color: #b4b4b4;
|
||||
--link-color: #b6b7f6;
|
||||
/* pyv */
|
||||
// --link-color: #b6b7f6;
|
||||
--link-color: #5bbaeb;
|
||||
/* /pyv */
|
||||
--primary-border-color: #1d1d1d;
|
||||
--secondary-border-color: #0f0f0f;
|
||||
--article-shadow-normal: 0 4px 5px 5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@ -8,9 +8,12 @@
|
||||
.columns > *:empty {
|
||||
display: contents;
|
||||
}
|
||||
.columns > .kg-image-card:first-child,
|
||||
.columns > * > .kg-image-card:first-child {
|
||||
.columns > .kg-image-card:first-child {
|
||||
padding-top: 0;
|
||||
& + p,
|
||||
& + * > p:first-child {
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 48rem) {
|
||||
@ -66,6 +69,101 @@ html:not([data-theme]) {
|
||||
}
|
||||
}
|
||||
|
||||
/* add wave shape divider to homepage */
|
||||
.m-hero__waves {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
& svg {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: calc(100% + 1.3px);
|
||||
height: 100px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
& path {
|
||||
fill: var(--background-color);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 48rem) {
|
||||
.with-wave-separator .m-hero.with-picture {
|
||||
height: 500px;
|
||||
}
|
||||
.with-wave-separator .m-hero__content {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.with-wave-separator.with-custom-cta .m-hero__content {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 48rem) {
|
||||
.m-hero__waves {
|
||||
width: 200%;
|
||||
& svg {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
.with-wave-separator.with-custom-cta .m-hero__content {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* expand + shrink post cards to fill 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;
|
||||
}
|
||||
@media only screen and (min-width: 48rem) {
|
||||
.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 calc(50% - 430px);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 35.5rem) and (max-width: 48rem) {
|
||||
.l-grid > :nth-child(2n + 1 of .m-article-card):last-child {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 48rem) {
|
||||
.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: 25px !important;
|
||||
top: 31px !important;
|
||||
}
|
||||
.m-article-card__featured span,
|
||||
.m-featured-article__ribbon span {
|
||||
margin: 0 4px;
|
||||
color: var(--primary-subtle-color);
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* social media icons */
|
||||
.m-nav__right .m-icon-button:not([data-ghost-search]) {
|
||||
display: flex;
|
||||
@ -112,7 +210,7 @@ html:not([data-theme]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* restyle audio cards: make them rounder + more compact */
|
||||
/* restyle audio cards: rounder + more compact */
|
||||
.m-header,
|
||||
.kg-audio-card {
|
||||
box-shadow: 0 4px 8px var(--button-shadow-color-hover), 0 0 0 transparent;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user