yann/liebling
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Improve accessibility (#221)

Browse source
This commit is contained in:
Eduardo Gómez 2020-07-07 17:13:29 +02:00 committed by GitHub
parent 7ce1faca6f
commit 42d726ec5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 628 additions and 499 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/app.css
View file

File diff suppressed because one or more lines are too long

2
assets/css/home.css
View file

@ -1 +1 @@
.m-featured-slider{position:relative;overflow:hidden!important;height:350px;margin:-40px -20px 40px;transition:all .25s cubic-bezier(.02,.01,.47,1)}@media only screen and (min-width:48rem){.m-featured-slider:hover{transform:translateY(-5px);box-shadow:var(--article-shadow-hover),0 0 0 transparent}}@media only screen and (min-width:48rem){.m-featured-slider{width:100%;height:420px;margin:-40px 10px 20px;border-radius:10px}}@media only screen and (min-width:64rem){.m-featured-slider{width:calc(66.66667% - 40px);margin:0 20px 40px;overflow:unset}}.m-featured-slider:not(:root:root){overflow:hidden!important}.m-featured-slider__list{list-style-type:none;padding:0;margin:0;height:100%}@media only screen and (min-width:48rem){.m-featured-slider__list{border-radius:10px;overflow:hidden}}.m-featured-slider__list .slick-list,.m-featured-slider__list .slick-slide>div,.m-featured-slider__list .slick-track,.m-featured-slider__list__item{height:100%}.m-featured-article{position:relative;height:100%;overflow:hidden;background-color:var(--primary-subtle-color);z-index:1}.m-featured-article:hover .m-featured-article__author{box-shadow:0 4px 8px rgba(0,0,0,.3),0 0 0 transparent}.m-featured-article.no-picture .m-featured-article__picture{background-color:var(--link-color)}.m-featured-article__picture{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1}.m-featured-article__picture img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;opacity:.7}.m-featured-article__meta{position:absolute;top:20px;left:20px;z-index:4}@media only screen and (min-width:48rem){.m-featured-article__meta{top:40px;left:40px}}.rtl .m-featured-article__meta{left:auto;right:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__meta{left:auto;right:40px}}.m-featured-article__author{display:block;width:35px;height:35px;background-color:#fff;border:2px solid #fff;border-radius:50%;margin-bottom:20px;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-featured-article__author div{width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;border-radius:50%}.m-featured-article__tag{color:#fff;letter-spacing:.3px;font-weight:700;font-size:1rem}.m-featured-article__ribbon{display:flex;align-items:center;justify-content:center;position:absolute;top:26px;right:20px;width:24px;height:24px;color:#000;background-color:#fff;border-radius:50%;z-index:2}@media only screen and (min-width:48rem){.m-featured-article__ribbon{justify-content:flex-start;top:47px;right:40px;width:auto;height:22px;padding:0 7px;font-size:.875rem;font-weight:600;border-radius:15px}}.m-featured-article__ribbon span{display:inline-block}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:first-of-type{font-size:.75rem;margin-right:4px}}.m-featured-article__ribbon span:last-of-type{display:none}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:last-of-type{display:block}}.rtl .m-featured-article__ribbon{right:auto;left:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon{right:auto;left:40px}}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon span:first-of-type{margin-right:0;margin-left:4px}}.m-featured-article__content{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:120px 20px 20px;position:relative;z-index:3}@media only screen and (min-width:48rem){.m-featured-article__content{padding:125px 40px 40px}}.m-featured-article__title{color:#fff;letter-spacing:.4px;line-height:1.3;font-size:1.625rem;font-weight:600;margin:0}@media only screen and (min-width:48rem){.m-featured-article__title{letter-spacing:.5px;font-size:2.25em;max-width:80%}}.m-featured-article__timestamp{display:flex;align-items:center;color:#fff;letter-spacing:.2px;font-size:.875rem;font-weight:600}.m-featured-article__timestamp span:nth-child(2){padding:0 10px} .m-featured-slider{position:relative;overflow:hidden!important;height:350px;margin:-40px -20px 40px;transition:all .25s cubic-bezier(.02,.01,.47,1)}@media only screen and (min-width:48rem){.m-featured-slider:hover{transform:translateY(-5px);box-shadow:var(--article-shadow-hover),0 0 0 transparent}}@media only screen and (min-width:48rem){.m-featured-slider{width:100%;height:420px;margin:-40px 10px 20px;border-radius:10px}}@media only screen and (min-width:64rem){.m-featured-slider{width:calc(66.66667% - 40px);margin:0 20px 40px;overflow:unset}}.m-featured-slider:not(:root:root){overflow:hidden!important}.m-featured-slider__list{list-style-type:none;padding:0;margin:0;height:100%}@media only screen and (min-width:48rem){.m-featured-slider__list{border-radius:10px;overflow:hidden}}.m-featured-slider__list__item{height:100%;overflow:hidden}@media only screen and (min-width:48rem){.m-featured-slider__list__item{border-radius:10px}}.m-featured-article{position:relative;height:100%;overflow:hidden;background-color:var(--primary-subtle-color);z-index:1}.m-featured-article:hover .m-featured-article__author{box-shadow:0 4px 8px rgba(0,0,0,.3),0 0 0 transparent}.m-featured-article.no-picture .m-featured-article__picture{background-color:var(--primary-subtle-color)}.m-featured-article__picture{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1}.m-featured-article__picture img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;opacity:.7}.m-featured-article__meta{position:absolute;top:20px;left:20px;z-index:4}@media only screen and (min-width:48rem){.m-featured-article__meta{top:40px;left:40px}}.rtl .m-featured-article__meta{left:auto;right:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__meta{left:auto;right:40px}}.m-featured-article__author{display:block;width:35px;height:35px;background-color:#fff;border:2px solid #fff;border-radius:50%;margin-bottom:20px;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-featured-article__author div{width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;border-radius:50%}.m-featured-article__tag{color:#fff;letter-spacing:.3px;font-weight:700;font-size:1rem}.m-featured-article__ribbon{display:flex;align-items:center;justify-content:center;position:absolute;top:26px;right:20px;width:24px;height:24px;color:#000;background-color:#fff;border-radius:50%;z-index:2}@media only screen and (min-width:48rem){.m-featured-article__ribbon{justify-content:flex-start;top:47px;right:40px;width:auto;height:22px;padding:0 7px;font-size:.875rem;font-weight:600;border-radius:15px}}.m-featured-article__ribbon span{display:inline-block}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:first-of-type{font-size:.75rem;margin-right:4px}}.m-featured-article__ribbon span:last-of-type{display:none}@media only screen and (min-width:48rem){.m-featured-article__ribbon span:last-of-type{display:block}}.rtl .m-featured-article__ribbon{right:auto;left:20px}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon{right:auto;left:40px}}@media only screen and (min-width:48rem){.rtl .m-featured-article__ribbon span:first-of-type{margin-right:0;margin-left:4px}}.m-featured-article__content{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:120px 20px 20px;position:relative;z-index:3}@media only screen and (min-width:48rem){.m-featured-article__content{padding:125px 40px 40px}}.m-featured-article__title{color:#fff;letter-spacing:.4px;line-height:1.3;font-size:1.625rem;font-weight:600;margin:0}@media only screen and (min-width:48rem){.m-featured-article__title{letter-spacing:.5px;font-size:2.25em;max-width:80%}}.m-featured-article__timestamp{display:flex;align-items:center;color:#fff;letter-spacing:.2px;font-size:.875rem;font-weight:600}.m-featured-article__timestamp span:nth-child(2){padding:0 10px}

2
assets/css/post.css
View file

File diff suppressed because one or more lines are too long

2
assets/js/home.js
View file

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return r})),n.d(t,"isDarkMode",(function(){return o})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return c})),n.d(t,"managePostImages",(function(){return l})),n.d(t,"makeImagesZoomable",(function(){return u}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},r=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},o=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=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"),r=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(r," 1 0%")}},l=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},u=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){r()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),r=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),o=n.substr(n.indexOf(" ")+1),i=parseFloat(o.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?r*i+i:r*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){r()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},16:function(e,t,n){e.exports=n(17)},17:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(3),i=n(2),s=n(1);r()(document).ready((function(){var e=r()(".js-featured-slider");if(e.length>0){var t=e.find(".js-featured-slide").length,n=new i.d(".js-featured-slider",{type:1===t?"slider":"carousel",rewind:!1,gap:0,swipeThreshold:!1,dragThreshold:!1,direction:Object(s.isRTL)()?"rtl":"ltr",breakpoints:{768:{swipeThreshold:1!==t&&80,dragThreshold:1!==t&&120}}});1===t&&e.find(".js-controls").remove(),n.on("mount.after",(function(){Object(o.a)(".js-featured-article-title",200)})),n.mount({Controls:i.b,Swipe:i.c,Breakpoints:i.a}),setTimeout((function(){window.dispatchEvent(new Event("resize"))}),350)}Object(o.a)(".js-featured-article-title",200)}))}},[[16,0,1]]]); (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return r})),n.d(t,"isMobile",(function(){return a})),n.d(t,"isDarkMode",(function(){return i})),n.d(t,"formatDate",(function(){return o})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return l})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return d}));var r=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},i=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},o=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},l=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var r=e[t].closest(".kg-gallery-image"),a=e[t].attributes.width.value/e[t].attributes.height.value;r.style.flex="".concat(a," 1 0%")}},u=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},d=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){a()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,r=n.substr(0,n.indexOf(" ")),a=parseFloat(r.substr(r.indexOf("(")+1).split(")")[0]),i=n.substr(n.indexOf(" ")+1),o=parseFloat(i.split(",")[1]),s="scale(1) translate3d(0, ".concat(o<0?a*o+o:a*o-o,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){a()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},16:function(e,t,n){e.exports=n(17)},17:function(e,t,n){"use strict";n.r(t);var r=n(0),a=n.n(r),i=n(3),o=n(2),s=n(1);a()(document).ready((function(){var e=a()(".js-featured-slider");if(e.length>0){var t=e.find(".js-featured-slide").length,n=new o.d(".js-featured-slider",{type:"slider",rewind:!1,gap:0,swipeThreshold:!1,dragThreshold:!1,direction:Object(s.isRTL)()?"rtl":"ltr",breakpoints:{768:{swipeThreshold:1!==t&&80,dragThreshold:1!==t&&120}}});1===t&&e.find(".js-featured-slider-controls").remove(),n.on("mount.after",(function(){Object(i.a)(".js-featured-article-title",200)})),n.mount({Controls:o.b,Swipe:o.c,Breakpoints:o.a,ArrowDisabler:function(e,n){var r="js-featured-slider-controls",a="js-featured-slider-previous",i="js-featured-slider-next";return{mount:function(){e.settings.rewind||1===t||e.on(["mount.after","run"],(function(){var t=!0,o=!1,s=void 0;try{for(var l,u=n.Controls.items[Symbol.iterator]();!(t=(l=u.next()).done);t=!0){var d=l.value;if(d.className.includes(r)){var c=d.querySelector(".".concat(a));c&&(0===e.index?c.setAttribute("disabled",""):c.removeAttribute("disabled"));var m=d.querySelector(".".concat(i));if(m)(e.settings.bound?e.index+(e.settings.perView-1):e.index)===n.Sizes.length-1?m.setAttribute("disabled",""):m.removeAttribute("disabled")}}}catch(e){o=!0,s=e}finally{try{t||null==u.return||u.return()}finally{if(o)throw s}}}))}}}}),setTimeout((function(){window.dispatchEvent(new Event("resize"))}),350)}Object(i.a)(".js-featured-article-title",200)}))}},[[16,0,1]]]);

35
author.hbs
View file

@ -4,18 +4,23 @@ This template is used for the author page.
{{!-- This block loads specific styles for the author page --}} {{!-- This block loads specific styles for the author page --}}
{{#contentFor "styles"}} {{#contentFor "styles"}}
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" rel="preload" as="style" /> <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
{{/contentFor}} {{/contentFor}}
{{!-- The tag below means: insert everything in this file {{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
{{!< default}} {{!< default}}
<div class="main-wrap"> {{!-- Special header.hbs partial to generate the <header> tag --}}
{{#author}}
{{> header background=cover_image}}
{{/author}}
<main class="main-wrap">
{{!-- Everything inside the #author tags pulls data from the author --}} {{!-- Everything inside the #author tags pulls data from the author --}}
{{#author}} {{#author}}
{{!-- Special header.hbs partial to generate the <header> tag --}}
{{> header background=cover_image}}
{{!-- Inject styles of the hero image to make it responsive --}} {{!-- Inject styles of the hero image to make it responsive --}}
{{> hero background=cover_image}} {{> hero background=cover_image}}
<div class="m-hero__content" data-aos="fade-down"> <div class="m-hero__content" data-aos="fade-down">
@ -33,7 +38,7 @@ into the {body} of the default.hbs template --}}
<ul class="m-hero-social"> <ul class="m-hero-social">
{{#if website}} {{#if website}}
<li> <li>
<a href="{{website}}" target="_blank" rel="noopener" aria-label="Website"> <a href="{{website}}" target="_blank" rel="noopener" aria-label="{{t "Website"}}">
<span class="icon-globe"></span> <span class="icon-globe"></span>
</a> </a>
</li> </li>
@ -68,16 +73,14 @@ into the {body} of the default.hbs template --}}
</section> </section>
{{/author}} {{/author}}
<main> <div class="l-content">
<div class="l-content"> <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300"> <div class="l-grid centered">
<div class="l-grid centered"> {{!-- The tag below iterates over all the posts --}}
{{!-- The tag below iterates over all the posts --}} {{> "loop"}}
{{> "loop"}}
</div>
</div> </div>
{{!-- Links to Previous/Next posts --}}
{{pagination}}
</div> </div>
</main> {{!-- Links to Previous/Next posts --}}
</div> {{pagination}}
</div>
</main>

18
default.hbs
View file

@ -10,7 +10,20 @@
<meta name="HandheldFriendly" content="True" /> <meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{!-- Styles'n'Scripts --}} {{!-- Preload assets --}}
<link rel="preload" href="{{asset "css/app.css"}}" as="style" />
<link rel="preload" href="{{asset 'fonts/icomoon.woff?vukg2s'}}" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="{{asset "js/vendor/content-api.min.js"}}" as="script" />
<link rel="preload" href="{{asset "js/manifest.js"}}" as="script" />
<link rel="preload" href="{{asset "js/vendor.js"}}" as="script" />
<link rel="preload" href="{{asset "js/app.js"}}" as="script" />
<link rel="preconnect" href="https://polyfill.io">
<link rel="dns-prefetch" href="https://polyfill.io">
{{!-- This #block helper will try to preload page-specific assets --}}
{{{block "preload"}}}
{{!-- Styles & Scripts --}}
<style> <style>
/* This font-face is here to make icons work if the Ghost instance is installed in a subdirectory */ /* This font-face is here to make icons work if the Ghost instance is installed in a subdirectory */
@font-face { @font-face {
@ -25,7 +38,8 @@
font-display: swap; font-display: swap;
} }
</style> </style>
<link rel="stylesheet" type="text/css" href="{{asset "css/app.css"}}" media="screen" rel="preload" as="style" />
<link rel="stylesheet" type="text/css" href="{{asset "css/app.css"}}" media="screen" />
{{!-- This #block helper will inject a stylesheet for a specific page --}} {{!-- This #block helper will inject a stylesheet for a specific page --}}
{{{block "styles"}}} {{{block "styles"}}}

4
error-404.hbs
View file

@ -4,7 +4,9 @@ This error template is used for all 404 errors, which might occur on your site.
{{!-- This block loads specific styles for the 404 page --}} {{!-- This block loads specific styles for the 404 page --}}
{{#contentFor "styles"}} {{#contentFor "styles"}}
<link rel="stylesheet" type="text/css" href="{{asset "css/404.css"}}" media="screen" rel="preload" as="style" /> <link rel="preload" href="{{asset "css/404.css"}}" as="style" />
<link rel="stylesheet" type="text/css" href="{{asset "css/404.css"}}" media="screen" />
{{/contentFor}} {{/contentFor}}
{{!-- The tag below means: insert everything in this file {{!-- The tag below means: insert everything in this file

141
index.hbs
View file

@ -3,19 +3,27 @@ This template is used for the index page.
It can be used also as the home page or the default 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/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 index page --}} {{!-- This block loads specific styles for the index page --}}
{{#contentFor "styles"}} {{#contentFor "styles"}}
<link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" rel="preload" as="style" /> <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" rel="preload" as="style" /> <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
{{/contentFor}} {{/contentFor}}
{{!-- The tag below means: insert everything in this file {{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
{{!< default}} {{!< default}}
<div class="main-wrap"> {{!-- Special header.hbs partial to generate the <header> tag --}}
{{!-- Special header.hbs partial to generate the <header> tag --}} {{> header background=@site.cover_image}}
{{> header background=@site.cover_image}}
<main class="main-wrap">
{{!-- Inject styles of the hero image to make it responsive --}} {{!-- Inject styles of the hero image to make it responsive --}}
{{> hero background=@site.cover_image}} {{> hero background=@site.cover_image}}
<div class="m-hero__content" data-aos="fade-down"> <div class="m-hero__content" data-aos="fade-down">
@ -31,75 +39,72 @@ into the {body} of the default.hbs template --}}
{{/if}} {{/if}}
</div> </div>
</section> </section>
<div class="l-content">
<main> <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
<div class="l-content"> <div class="l-grid centered">
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300"> {{#get "posts" filter="featured:true" include="authors,tags" limit="5" as |featured|}}
<div class="l-grid centered"> {{#if featured}}
{{#get "posts" filter="featured:true" include="authors,tags" limit="5" as |featured|}} <div class="m-featured-slider glide js-featured-slider">
{{#if featured}} <div class="glide__track" data-glide-el="track">
<div class="m-featured-slider glide js-featured-slider"> <div class="m-featured-slider__list glide__slides">
<div class="glide__track" data-glide-el="track"> {{#foreach featured}}
<div class="m-featured-slider__list glide__slides"> <div class="m-featured-slider__list__item glide__slide js-featured-slide">
{{#foreach featured}} <article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}">
<div class="m-featured-slider__list__item glide__slide js-featured-slide"> <div class="m-featured-article__picture">
<article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}"> {{#if feature_image}}
<div class="m-featured-article__picture"> <img src="{{img_url feature_image size="l"}}" loading="lazy" alt="">
{{#if feature_image}} {{/if}}
<img src="{{img_url feature_image size="l"}}" loading="lazy" alt=""> </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}} {{/if}}
</div>
<div class="m-featured-article__meta">
<a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="Authors" 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> </a>
</article> {{#if primary_tag}}
</div> <a href="{{primary_tag.url}}" class="m-featured-article__tag">{{primary_tag.name}}</a>
{{/foreach}} {{/if}}
</div> </div>
</div> <div class="m-featured-article__ribbon">
<div data-glide-el="controls" class="glide__arrows js-controls"> <span class="icon-star"></span>
<button data-glide-dir="<" class="m-icon-button in-featured-articles glide-prev" aria-label="Previous"> <span>{{t "Featured"}}</span>
<span class="icon-arrow-left" aria-hidden="true"></span> </div>
</button> <a href="{{url}}" class="m-featured-article__content">
<button data-glide-dir=">" class="m-icon-button in-featured-articles glide-next" aria-label="Next"> <h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
<span class="icon-arrow-right" aria-hidden="true"></span> {{title}}
</button> </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> </div>
</div> </div>
{{/if}} <div data-glide-el="controls" class="glide__arrows js-featured-slider-controls">
{{/get}} <button data-glide-dir="<" class="m-icon-button in-featured-articles glide-prev js-featured-slider-previous" aria-label="{{t "Previous"}}">
{{!-- The tag below iterates over all the posts --}} <span class="icon-arrow-left" aria-hidden="true"></span>
{{> "loop"}} </button>
</div> <button data-glide-dir=">" class="m-icon-button in-featured-articles glide-next js-featured-slider-next" aria-label="{{t "Next"}}">
<span class="icon-arrow-right" aria-hidden="true"></span>
</button>
</div>
</div>
{{/if}}
{{/get}}
{{!-- The tag below iterates over all the posts --}}
{{> "loop"}}
</div> </div>
{{!-- Links to Previous/Next posts --}}
{{pagination}}
</div> </div>
</main> {{!-- Links to Previous/Next posts --}}
</div> {{pagination}}
</div>
</main>
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}} {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}} {{#contentFor "scripts"}}

15
locales/en.json
View file

@ -7,6 +7,9 @@
"Among with no break line": "Among with ", "Among with no break line": "Among with ",
"Apparently there are no posts at the moment, check again later.": "Apparently there are no posts at the moment, check again later.", "Apparently there are no posts at the moment, check again later.": "Apparently there are no posts at the moment, check again later.",
"Back to home": "Back to home", "Back to home": "Back to home",
"Close": "Close",
"Close menu": "Close menu",
"Close search": "Close search",
"Email cannot be blank.": "Email cannot be blank.", "Email cannot be blank.": "Email cannot be blank.",
"Featured": "Featured", "Featured": "Featured",
"Get the latest posts delivered right to your inbox.": "Get the latest posts delivered right to your inbox.", "Get the latest posts delivered right to your inbox.": "Get the latest posts delivered right to your inbox.",
@ -14,21 +17,32 @@
"Great! Next, complete checkout for full access.": "Great! Next, complete checkout for full access.", "Great! Next, complete checkout for full access.": "Great! Next, complete checkout for full access.",
"Great! You've successfully subscribed.": "Great! You've successfully subscribed.", "Great! You've successfully subscribed.": "Great! You've successfully subscribed.",
"JavaScript license information": "JavaScript license information", "JavaScript license information": "JavaScript license information",
"Main menu": "Main menu",
"More": "More", "More": "More",
"Newer posts": "Newer posts",
"Next": "Next",
"No posts": "No posts", "No posts": "No posts",
"No posts found": "No posts found", "No posts found": "No posts found",
"No recent articles found :(": "No recent articles found :(", "No recent articles found :(": "No recent articles found :(",
"No results for your search, try something different.": "No results for your search, please try with something else.", "No results for your search, try something different.": "No results for your search, please try with something else.",
"No tags found :(": "No tags found :(", "No tags found :(": "No tags found :(",
"Now check your inbox and click the link to confirm your subscription.": "Now check your inbox and click the link to confirm your subscription.", "Now check your inbox and click the link to confirm your subscription.": "Now check your inbox and click the link to confirm your subscription.",
"Older posts": "Older posts",
"Oops! There was an error sending the email, please try later.": "Oops! There was an error sending the email, please try later.", "Oops! There was an error sending the email, please try later.": "Oops! There was an error sending the email, please try later.",
"Open menu": "Open menu",
"Open search": "Open search",
"Open submenu": "Open submenu",
"Page": "Page", "Page": "Page",
"Page not found": "Page not found", "Page not found": "Page not found",
"Pagination": "Pagination",
"Please enter a valid email address": "Please enter a valid email address", "Please enter a valid email address": "Please enter a valid email address",
"Posted by": "Posted by", "Posted by": "Posted by",
"Previous": "Previous",
"Published with": "Published with", "Published with": "Published with",
"Recent articles": "Recent articles", "Recent articles": "Recent articles",
"Recommended for you": "Recommended for you", "Recommended for you": "Recommended for you",
"Scroll to top": "Scroll to top",
"Search": "Search",
"Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.", "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.",
"Subscribe": "Subscribe", "Subscribe": "Subscribe",
"Subscribe to": "Subscribe to", "Subscribe to": "Subscribe to",
@ -39,6 +53,7 @@
"Toggle dark mode": "Toggle dark mode", "Toggle dark mode": "Toggle dark mode",
"Type to search": "Type to search", "Type to search": "Type to search",
"Unfortunately the page you were looking for could not be found.": "Unfortunately the page you were looking for could not be found.", "Unfortunately the page you were looking for could not be found.": "Unfortunately the page you were looking for could not be found.",
"Website": "Website",
"Welcome back! You've successfully signed in.": "Welcome back! You've successfully signed in.", "Welcome back! You've successfully signed in.": "Welcome back! You've successfully signed in.",
"You've successfully subscribed to": "You've successfully subscribed to", "You've successfully subscribed to": "You've successfully subscribed to",
"Your email address": "Your email address", "Your email address": "Your email address",

15
locales/es.json
View file

@ -7,6 +7,9 @@
"Among with no break line": "Junto con ", "Among with no break line": "Junto con ",
"Apparently there are no posts at the moment, check again later.": "Aparentemente no hay artículos en este momento, revisa más tarde.", "Apparently there are no posts at the moment, check again later.": "Aparentemente no hay artículos en este momento, revisa más tarde.",
"Back to home": "Regresar al inicio", "Back to home": "Regresar al inicio",
"Close": "Cerrar",
"Close menu": "Cerrar menú",
"Close search": "Cerrar búsqueda",
"Email cannot be blank.": "El correo electrónico no puede estar vacío.", "Email cannot be blank.": "El correo electrónico no puede estar vacío.",
"Featured": "Destacado", "Featured": "Destacado",
"Get the latest posts delivered right to your inbox.": "Recibe los últimos artículos directamente en tu bandeja de entrada.", "Get the latest posts delivered right to your inbox.": "Recibe los últimos artículos directamente en tu bandeja de entrada.",
@ -14,21 +17,32 @@
"Great! Next, complete checkout for full access.": "¡Genial! Ahora, completa el checkout para tener acceso completo.", "Great! Next, complete checkout for full access.": "¡Genial! Ahora, completa el checkout para tener acceso completo.",
"Great! You've successfully subscribed.": "¡Genial! Te has suscrito con éxito.", "Great! You've successfully subscribed.": "¡Genial! Te has suscrito con éxito.",
"JavaScript license information": "Información de licencia JavaScript", "JavaScript license information": "Información de licencia JavaScript",
"Main menu": "Menú principal",
"More": "Más", "More": "Más",
"Newer posts": "Entradas más recientes",
"Next": "Siguiente",
"No posts": "No hay artículos", "No posts": "No hay artículos",
"No posts found": "No se encontraron artículos", "No posts found": "No se encontraron artículos",
"No recent articles found :(": "No se han encontrado artículos recientes :(", "No recent articles found :(": "No se han encontrado artículos recientes :(",
"No results for your search, try something different.": "No hay resultados para tu búsqueda, prueba algo diferente.", "No results for your search, try something different.": "No hay resultados para tu búsqueda, prueba algo diferente.",
"No tags found :(": "No se encontraron etiquetas :(", "No tags found :(": "No se encontraron etiquetas :(",
"Now check your inbox and click the link to confirm your subscription.": "Ahora revisa tu bandeja de entrada y haz click en el enlace para confirmar tu suscripción.", "Now check your inbox and click the link to confirm your subscription.": "Ahora revisa tu bandeja de entrada y haz click en el enlace para confirmar tu suscripción.",
"Older posts": "Entradas más antiguas",
"Oops! There was an error sending the email, please try later.": "Oops! Ha ocurrido un error, por favor inténtalo más tarde.", "Oops! There was an error sending the email, please try later.": "Oops! Ha ocurrido un error, por favor inténtalo más tarde.",
"Open menu": "Abrir menú",
"Open search": "Abrir búsqueda",
"Open submenu": "Abrir submenú",
"Page": "Página", "Page": "Página",
"Page not found": "Página no encontrada", "Page not found": "Página no encontrada",
"Pagination": "Paginación",
"Please enter a valid email address": "Por favor introduce una dirección de correo electrónico válida", "Please enter a valid email address": "Por favor introduce una dirección de correo electrónico válida",
"Posted by": "Publicado por", "Posted by": "Publicado por",
"Previous": "Anterior",
"Published with": "Publicado con", "Published with": "Publicado con",
"Recent articles": "Artículos recientes", "Recent articles": "Artículos recientes",
"Recommended for you": "Recomendado para ti", "Recommended for you": "Recomendado para ti",
"Scroll to top": "Ir arriba",
"Search": "Búsqueda",
"Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Mantente al día! Recibe todos los mejores y más recientes artículos directamente en tu bandeja de entrada.", "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Mantente al día! Recibe todos los mejores y más recientes artículos directamente en tu bandeja de entrada.",
"Subscribe": "Suscríbete", "Subscribe": "Suscríbete",
"Subscribe to": "Suscríbete a", "Subscribe to": "Suscríbete a",
@ -39,6 +53,7 @@
"Toggle dark mode": "Alternar modo oscuro", "Toggle dark mode": "Alternar modo oscuro",
"Type to search": "Escribe para buscar", "Type to search": "Escribe para buscar",
"Unfortunately the page you were looking for could not be found.": "Desafortunadamente, la página que estabas buscando no pudo ser encontrada.", "Unfortunately the page you were looking for could not be found.": "Desafortunadamente, la página que estabas buscando no pudo ser encontrada.",
"Website": "Sitio web",
"Welcome back! You've successfully signed in.": "¡Bienvenido de nuevo! Has iniciado sesión con éxito.", "Welcome back! You've successfully signed in.": "¡Bienvenido de nuevo! Has iniciado sesión con éxito.",
"You've successfully subscribed to": "Te has suscrito con éxito a", "You've successfully subscribed to": "Te has suscrito con éxito a",
"Your email address": "Tu dirección de correo electrónico", "Your email address": "Tu dirección de correo electrónico",

2
package.json
View file

@ -54,5 +54,5 @@
"desktop": "assets/screenshot-desktop.jpg", "desktop": "assets/screenshot-desktop.jpg",
"mobile": "assets/screenshot-mobile.jpg" "mobile": "assets/screenshot-mobile.jpg"
}, },
"version": "0.7.4" "version": "0.7.5"
} }

131
page-authors.hbs
View file

@ -5,17 +5,22 @@ You must first create a page called Authors in the dashboard to enable it.
{{!-- This block loads specific styles for the authors page --}} {{!-- This block loads specific styles for the authors page --}}
{{#contentFor "styles"}} {{#contentFor "styles"}}
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" rel="preload" as="style" /> <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
{{/contentFor}} {{/contentFor}}
{{!-- The tag below means: insert everything in this file {{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
{{!< default}} {{!< default}}
{{!-- Special header.hbs partial to generate the <header> tag --}}
{{#post}} {{#post}}
<div class="main-wrap"> {{> header background=feature_image}}
{{!-- Special header.hbs partial to generate the <header> tag --}} {{/post}}
{{> header background=feature_image}}
{{#post}}
<main class="main-wrap">
{{!-- Inject styles of the hero image to make it responsive --}} {{!-- Inject styles of the hero image to make it responsive --}}
{{> hero background=feature_image}} {{> hero background=feature_image}}
<div class="m-hero__content" data-aos="fade-down"> <div class="m-hero__content" data-aos="fade-down">
@ -25,67 +30,65 @@ into the {body} of the default.hbs template --}}
{{/if}} {{/if}}
</div> </div>
</section> </section>
<main> <div class="l-content">
<div class="l-content"> <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300"> {{#get 'authors' limit='all' include='count.posts' order='count.posts desc'}}
{{#get 'authors' limit='all' include='count.posts' order='count.posts desc'}} <div class="l-grid centered">
<div class="l-grid centered"> {{#foreach authors}}
{{#foreach authors}} <article class="m-article-card as-author">
<article class="m-article-card as-author"> <div class="m-article-card__picture">
<div class="m-article-card__picture"> {{#if profile_image}}
{{#if profile_image}} <img clasS="m-article-card__picture-background" src="{{img_url profile_image size="m"}}" loading="lazy" alt="">
<img clasS="m-article-card__picture-background" src="{{img_url profile_image size="m"}}" loading="lazy" alt=""> {{else}}
{{else}} <img clasS="m-article-card__picture-background" src="{{asset "images/default-avatar-rectangle.jpg"}}" loading="lazy" alt="">
<img clasS="m-article-card__picture-background" src="{{asset "images/default-avatar-rectangle.jpg"}}" loading="lazy" alt=""> {{/if}}
<a href="{{url}}" class="m-article-card__picture-link" aria-label="{{name}}"></a>
<h3 class="m-article-card__name">{{name}}</h3>
</div>
<div class="m-article-card__info">
<a href="{{url}}" class="m-article-card__info-link" aria-hidden="true" tabindex="-1">
{{#if bio}}
<p class="m-article-card__excerpt js-article-card-title">
{{bio}}
</p>
{{/if}} {{/if}}
<a href="{{url}}" class="m-article-card__picture-link" aria-label="Author"></a> </a>
<h3 class="m-article-card__name">{{name}}</h3> <div class="m-article-card__author-stats">
<span>
{{plural count.posts empty=(t "No posts") singular=(t "1 post") plural=(t "% posts")}}
</span>
{{#has any="twitter, facebook, website"}}
<ul class="m-article-card__social">
{{#if website}}
<li>
<a href="{{website}}" target="_blank" rel="noopener" aria-label="{{t "Website"}}">
<span class="icon-globe" aria-hidden="true"></span>
</a>
</li>
{{/if}}
{{#if facebook}}
<li>
<a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
<span class="icon-facebook" aria-hidden="true"></span>
</a>
</li>
{{/if}}
{{#if twitter}}
<li>
<a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener" aria-label="Twitter">
<span class="icon-twitter" aria-hidden="true"></span>
</a>
</li>
{{/if}}
</ul>
{{/has}}
</div> </div>
<div class="m-article-card__info"> </div>
<a href="{{url}}" class="m-article-card__info-link"> </article>
{{#if bio}} {{/foreach}}
<p class="m-article-card__excerpt js-article-card-title"> </div>
{{bio}} {{/get}}
</p>
{{/if}}
</a>
<div class="m-article-card__author-stats">
<span>
{{plural count.posts empty=(t "No posts") singular=(t "1 post") plural=(t "% posts")}}
</span>
{{#has any="twitter, facebook, website"}}
<ul class="m-article-card__social">
{{#if website}}
<li>
<a href="{{website}}" target="_blank" rel="noopener">
<span class="icon-globe"></span>
</a>
</li>
{{/if}}
{{#if facebook}}
<li>
<a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener">
<span class="icon-facebook"></span>
</a>
</li>
{{/if}}
{{#if twitter}}
<li>
<a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener">
<span class="icon-twitter"></span>
</a>
</li>
{{/if}}
</ul>
{{/has}}
</div>
</div>
</article>
{{/foreach}}
</div>
{{/get}}
</div>
</div> </div>
</main> </div>
</div> </main>
{{/post}} {{/post}}

42
page-newsletter.hbs
View file

@ -4,30 +4,34 @@ This template is used for the subscription page.
{{!-- This block loads specific styles for the newsletter page --}} {{!-- This block loads specific styles for the newsletter page --}}
{{#contentFor "styles"}} {{#contentFor "styles"}}
<link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" media="screen" rel="preload" as="style" /> <link rel="preload" href="{{asset "css/newsletter.css"}}" as="style" />
<link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" media="screen" />
{{/contentFor}} {{/contentFor}}
{{!-- The tag below means: insert everything in this file {{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
{{!< default}} {{!< default}}
<div class="l-wrapper" data-aos="fade-down"> <main>
<a href="{{@site.url}}" class="m-back"> <div class="l-wrapper" data-aos="fade-down">
<span class="m-back__icon icon-arrow-left"></span> <a href="{{@site.url}}" class="m-back">
<span>{{t "Back to home"}}</span> <span class="m-back__icon icon-arrow-left"></span>
</a> <span>{{t "Back to home"}}</span>
</div> </a>
</div>
<main class="l-fullscreen"> <div class="l-fullscreen">
<section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300"> <section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300">
<div> <div>
<header class="m-heading in-subscribe-page"> <header class="m-heading in-subscribe-page">
<h1 class="m-heading__title">{{t "Subscribe to"}} {{@site.title}}</h1> <h1 class="m-heading__title">{{t "Subscribe to"}} {{@site.title}}</h1>
<p class="m-heading__description in-subscribe-page"> <p class="m-heading__description in-subscribe-page">
{{t "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox."}} {{t "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox."}}
</p> </p>
</header> </header>
{{> "newsletter-form"}} {{> "newsletter-form"}}
</div> </div>
</section> </section>
</div>
</main> </main>

41
page.hbs
View file

@ -2,20 +2,29 @@
This template is used for the posts that are marked as pages. This template is used for the posts that are marked as pages.
--}} --}}
{{!-- This block preloads specific assets for the post page --}}
{{#contentFor "preload"}}
<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 post page --}} {{!-- This block loads specific styles for the post page --}}
{{#contentFor "styles"}} {{#contentFor "styles"}}
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" rel="preload" as="style" /> <link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
{{/contentFor}} {{/contentFor}}
{{!-- The tag below means: insert everything in this file {{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
{{!< default}} {{!< default}}
{{!-- Everything inside the #post tags pulls data from the post --}} {{!-- Special header.hbs partial to generate the <header> tag --}}
{{#post}} {{#post}}
<div class="main-wrap"> {{> header background=feature_image}}
{{!-- Special header.hbs partial to generate the <header> tag --}} {{/post}}
{{> header background=feature_image}}
<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 --}} {{!-- Inject styles of the hero image to make it responsive --}}
{{> hero background=feature_image}} {{> hero background=feature_image}}
<div class="m-hero__content" data-aos="fade-down"> <div class="m-hero__content" data-aos="fade-down">
@ -25,21 +34,19 @@ into the {body} of the default.hbs template --}}
{{/if}} {{/if}}
</div> </div>
</section> </section>
<main> <article>
<article> <div class="l-content">
<div class="l-content"> <div class="l-wrapper in-post" data-aos="fade-up" data-aos-delay="300">
<div class="l-wrapper in-post" data-aos="fade-up" data-aos-delay="300"> <div class="l-post-content">
<div class="l-post-content"> <div class="pos-relative js-post-content">
<div class="pos-relative js-post-content"> {{content}}
{{content}}
</div>
</div> </div>
</div> </div>
</div> </div>
</article> </div>
</main> </article>
</div> {{/post}}
{{/post}} </main>
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}} {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}} {{#contentFor "scripts"}}

39
partials/header.hbs
View file

@ -4,8 +4,8 @@ This header template is shared across all the pages.
<header class="m-header {{#if background}}with-picture{{/if}} js-header"> <header class="m-header {{#if background}}with-picture{{/if}} js-header">
<div class="m-mobile-topbar" data-aos="fade-down"> <div class="m-mobile-topbar" data-aos="fade-down">
<button class="m-icon-button in-mobile-topbar js-open-menu" aria-label="Open menu"> <button class="m-icon-button in-mobile-topbar js-open-menu" aria-label="{{t "Open menu"}}">
<span class="icon-menu"></span> <span class="icon-menu" aria-hidden="true"></span>
</button> </button>
{{#if @site.logo}} {{#if @site.logo}}
<a href="{{@site.url}}" class="m-logo in-mobile-topbar"> <a href="{{@site.url}}" class="m-logo in-mobile-topbar">
@ -16,28 +16,28 @@ This header template is shared across all the pages.
{{@site.title}} {{@site.title}}
</a> </a>
{{/if}} {{/if}}
<button class="m-icon-button in-mobile-topbar js-open-search" aria-label="Open search"> <button class="m-icon-button in-mobile-topbar js-open-search" aria-label="{{t "Open search"}}">
<span class="icon-search"></span> <span class="icon-search" aria-hidden="true"></span>
</button> </button>
</div> </div>
<div class="m-menu js-menu"> <div class="m-menu js-menu">
<button class="m-icon-button outlined as-close-menu js-close-menu" aria-label="Close menu"> <button class="m-icon-button outlined as-close-menu js-close-menu" aria-label="{{t "Close menu"}}">
<span class="icon-close"></span> <span class="icon-close"></span>
</button> </button>
<div class="m-menu__main" data-aos="fade-down"> <div class="m-menu__main" data-aos="fade-down">
<div class="l-wrapper"> <div class="l-wrapper">
<div class="m-nav"> <div class="m-nav">
<nav class="m-nav__left"> <nav class="m-nav__left" role="navigation" aria-label="{{t "Main menu"}}">
<ul role="submenu"> <ul>
{{#if @site.logo}} {{#if @site.logo}}
<li class="only-desktop" role="menuitem"> <li class="only-desktop">
<a href="{{@site.url}}" class="m-logo"> <a href="{{@site.url}}" class="m-logo">
<img src="{{@site.logo}}" alt="{{@site.title}}"> <img src="{{@site.logo}}" alt="{{@site.title}}">
</a> </a>
</li> </li>
{{else}} {{else}}
<li class="only-desktop" role="menuitem"> <li class="only-desktop">
<a href="{{@site.url}}" class="m-site-name in-desktop-menu"> <a href="{{@site.url}}" class="m-site-name in-desktop-menu">
{{@site.title}} {{@site.title}}
</a> </a>
@ -47,16 +47,16 @@ This header template is shared across all the pages.
{{navigation}} {{navigation}}
{{/if}} {{/if}}
{{#if @site.secondary_navigation}} {{#if @site.secondary_navigation}}
<li class="more" role="menuitem"> <li class="more">
<a href="javascript:void(0);" class="js-open-secondary-menu"> <a href="javascript:void(0);" class="js-open-secondary-menu">
{{t "More"}} {{t "More"}}
<span class="icon-chevron-down"></span> <span class="icon-chevron-down" aria-hidden="true"></span>
</a> </a>
</li> </li>
{{/if}} {{/if}}
<li role="menuitem" class="js-submenu-option"> <li class="js-submenu-option">
<button class="m-icon-button in-menu-main more js-toggle-submenu" aria-label="Toggle submenu"> <button class="m-icon-button in-menu-main more js-toggle-submenu" aria-label="{{t "Open submenu"}}">
<span class="icon-more"></span> <span class="icon-more" aria-hidden="true"></span>
</button> </button>
<div class="m-submenu js-submenu"> <div class="m-submenu js-submenu">
<div class="l-wrapper in-submenu"> <div class="l-wrapper in-submenu">
@ -112,11 +112,14 @@ This header template is shared across all the pages.
</ul> </ul>
</nav> </nav>
<div class="m-nav__right"> <div class="m-nav__right">
<button class="m-icon-button in-menu-main js-open-search" aria-label="Open search"> <button class="m-icon-button in-menu-main js-open-search" aria-label="{{t "Open search"}}">
<span class="icon-search"></span> <span class="icon-search" aria-hidden="true"></span>
</button> </button>
<div class="m-toggle-darkmode js-tooltip" data-tippy-content="{{t "Toggle dark mode"}}"> <div class="m-toggle-darkmode js-tooltip" data-tippy-content="{{t "Toggle dark mode"}}" tabindex="0">
<input type="checkbox" class="js-toggle-darkmode"> <label for="toggle-darkmode" class="sr-only">
{{t "Toggle dark mode"}}
</label>
<input id="toggle-darkmode" type="checkbox" class="js-toggle-darkmode">
<div></div> <div></div>
</div> </div>
</div> </div>

10
partials/loop.hbs
View file

@ -10,11 +10,11 @@
<article class="m-article-card no-picture {{post_class}}"> <article class="m-article-card no-picture {{post_class}}">
{{/if}} {{/if}}
<div class="m-article-card__picture"> <div class="m-article-card__picture">
<a href="{{url}}" class="m-article-card__picture-link" aria-label="Article"></a> <a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a>
{{#if feature_image}} {{#if feature_image}}
<img clasS="m-article-card__picture-background" src="{{img_url feature_image size="m"}}" loading="lazy" alt=""> <img clasS="m-article-card__picture-background" src="{{img_url feature_image size="m"}}" loading="lazy" alt="">
{{/if}} {{/if}}
<a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}"> <a href="{{primary_author.url}}" class="m-article-card__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}} {{#if primary_author.profile_image}}
<div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div> <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
{{else}} {{else}}
@ -22,8 +22,8 @@
{{/if}} {{/if}}
</a> </a>
{{#if featured}} {{#if featured}}
<a href="{{url}}" class="m-article-card__featured js-tooltip" data-tippy-content="{{t "Featured"}}" aria-label="Article"> <a href="{{url}}" class="m-article-card__featured js-tooltip" data-tippy-content="{{t "Featured"}}" aria-label="{{t "Featured"}}">
<span class="icon-star"></span> <span class="icon-star" aria-hidden="true"></span>
</a> </a>
{{/if}} {{/if}}
</div> </div>
@ -33,7 +33,7 @@
{{else}} {{else}}
<div class="m-article-card__info no-tag"> <div class="m-article-card__info no-tag">
{{/if}} {{/if}}
<a href="{{url}}" class="m-article-card__info-link"> <a href="{{url}}" class="m-article-card__info-link" aria-label="{{title}}">
<div> <div>
<h2 class="m-article-card__title js-article-card-title {{#unless feature_image}}js-article-card-title-no-image{{/unless}}" title="{{title}}"> <h2 class="m-article-card__title js-article-card-title {{#unless feature_image}}js-article-card-title-no-image{{/unless}}" title="{{title}}">
{{title}} {{title}}

6
partials/navigation.hbs
View file

@ -4,16 +4,16 @@ Also it includes the big submenu.
--}} --}}
{{#if isSecondary}} {{#if isSecondary}}
<ul class="m-secondary-menu" role="menu"> <ul class="m-secondary-menu">
{{#foreach navigation}} {{#foreach navigation}}
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="menuitem"> <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
<a href="{{url absolute="true"}}">{{label}}</a> <a href="{{url absolute="true"}}">{{label}}</a>
</li> </li>
{{/foreach}} {{/foreach}}
</ul> </ul>
{{else}} {{else}}
{{#foreach navigation}} {{#foreach navigation}}
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="menuitem"> <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
<a href="{{url absolute="true"}}">{{label}}</a> <a href="{{url absolute="true"}}">{{label}}</a>
</li> </li>
{{/foreach}} {{/foreach}}

8
partials/newsletter-form.hbs
View file

@ -6,12 +6,12 @@ You need to enable the members feature first.
<div class="m-subscribe-section__form"> <div class="m-subscribe-section__form">
<form data-members-form="subscribe" id="newsletter-form" class="m-subscribe-section__container"> <form data-members-form="subscribe" id="newsletter-form" class="m-subscribe-section__container">
<div class="m-subscribe__form"> <div class="m-subscribe__form">
<fieldset> <div class="pos-relative">
<label for="newsletter_input" class="sr-only">{{t "Your email address"}}</label> <label for="newsletter-input" class="sr-only">{{t "Your email address"}}</label>
<input data-members-email id="newsletter-input" class="m-input in-subscribe-section" type="email" <input data-members-email id="newsletter-input" class="m-input in-subscribe-section" type="email"
placeholder="{{t "Your email address"}}" required /> placeholder="{{t "Your email address"}}" required />
</fieldset> </div>
<button id="newsletter_button" class="m-button primary block" type="submit">{{t "Subscribe"}}</button> <button id="newsletter-button" class="m-button primary block" type="submit">{{t "Subscribe"}}</button>
</div> </div>
<div class="m-subscribe__success"> <div class="m-subscribe__success">
<header class="m-heading no-margin"> <header class="m-heading no-margin">

8
partials/notifications.hbs
View file

@ -1,27 +1,27 @@
<div class="m-alert success subscribe js-alert" data-notification="subscribe"> <div class="m-alert success subscribe js-alert" data-notification="subscribe">
{{t "Great! You've successfully subscribed."}} {{t "Great! You've successfully subscribed."}}
<button class="m-alert__close js-notification-close" aria-label="Close"> <button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
<span class="icon-close"></span> <span class="icon-close"></span>
</button> </button>
</div> </div>
<div class="m-alert success signup js-alert" data-notification="signup"> <div class="m-alert success signup js-alert" data-notification="signup">
{{t "Great! Next, complete checkout for full access."}} {{t "Great! Next, complete checkout for full access."}}
<button class="m-alert__close js-notification-close" aria-label="Close"> <button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
<span class="icon-close"></span> <span class="icon-close"></span>
</button> </button>
</div> </div>
<div class="m-alert success signin js-alert" data-notification="signin"> <div class="m-alert success signin js-alert" data-notification="signin">
{{t "Welcome back! You've successfully signed in."}} {{t "Welcome back! You've successfully signed in."}}
<button class="m-alert__close js-notification-close" aria-label="Close"> <button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
<span class="icon-close"></span> <span class="icon-close"></span>
</button> </button>
</div> </div>
<div class="m-alert success checkout js-alert" data-notification="checkout"> <div class="m-alert success checkout js-alert" data-notification="checkout">
{{t "Success! Your account is fully activated, you now have access to all content."}} {{t "Success! Your account is fully activated, you now have access to all content."}}
<button class="m-alert__close js-notification-close" aria-label="Close"> <button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
<span class="icon-close"></span> <span class="icon-close"></span>
</button> </button>
</div> </div>

6
partials/pagination.hbs
View file

@ -3,15 +3,15 @@ This pagination template is used to navigate through newer and older articles.
--}} --}}
<div class="l-wrapper"> <div class="l-wrapper">
<nav class="m-pagination"> <nav class="m-pagination" aria-label="{{t "Pagination"}}">
{{#if prev}} {{#if prev}}
<a href="{{page_url prev}}" class="m-icon-button filled in-pagination-left" aria-label="Newer posts"> <a href="{{page_url prev}}" class="m-icon-button filled in-pagination-left" aria-label="{{t "Newer posts"}}">
<span class="icon-arrow-left"></span> <span class="icon-arrow-left"></span>
</a> </a>
{{/if}} {{/if}}
<span class="m-pagination__text">{{t "Page"}} {{page}} {{t "of"}} {{pages}}</span> <span class="m-pagination__text">{{t "Page"}} {{page}} {{t "of"}} {{pages}}</span>
{{#if next}} {{#if next}}
<a href="{{page_url next}}" class="m-icon-button filled in-pagination-right" aria-label="Older posts"> <a href="{{page_url next}}" class="m-icon-button filled in-pagination-right" aria-label="{{t "Older posts"}}">
<span class="icon-arrow-right"></span> <span class="icon-arrow-right"></span>
</a> </a>
{{/if}} {{/if}}

15
partials/search.hbs
View file

@ -4,16 +4,19 @@ You need to create a custom integration first to get a Content API key and then
follow the instructions to enable the search feature. follow the instructions to enable the search feature.
--}} --}}
<div class="m-search js-search"> <div class="m-search js-search" role="dialog" aria-modal="true" aria-label="Search">
<button class="m-icon-button outlined as-close-search js-close-search" aria-label="Close search"> <button class="m-icon-button outlined as-close-search js-close-search" aria-label="Close search">
<span class="icon-close"></span> <span class="icon-close" aria-hidden="true"></span>
</button> </button>
<div class="m-search__content"> <div class="m-search__content">
<form class="m-search__form"> <form class="m-search__form">
<fieldset> <div class="pos-relative">
<span class="icon-search m-search-icon"></span> <span class="icon-search m-search-icon" aria-hidden="true"></span>
<input type="text" class="m-input in-search js-input-search" placeholder="{{t "Type to search"}}" aria-label="Type to search"> <label for="search-input" class="sr-only">
</fieldset> {{t "Type to search"}}
</label>
<input id="search-input" type="text" class="m-input in-search js-input-search" placeholder="{{t "Type to search"}}">
</div>
</form> </form>
<div class="js-search-results hide"></div> <div class="js-search-results hide"></div>
<p class="m-not-found align-center hide js-no-results"> <p class="m-not-found align-center hide js-no-results">

4
partials/subscribe_form.hbs
View file

@ -6,10 +6,10 @@ You need to enable the subscription feature first.
<form method="post" action="{{action}}" id="{{form_id}}" class="{{form_class}}"> <form method="post" action="{{action}}" id="{{form_id}}" class="{{form_class}}">
{{hidden}} {{hidden}}
<fieldset> <div class="pos-relative">
<label for="{{input_id}}" class="sr-only">{{placeholder}}</label> <label for="{{input_id}}" class="sr-only">{{placeholder}}</label>
{{input_email id=input_id class=input_class placeholder=placeholder value=email autofocus=autofocus}} {{input_email id=input_id class=input_class placeholder=placeholder value=email autofocus=autofocus}}
</fieldset> </div>
<button id="{{button_id}}" class="{{button_class}}" type="submit">{{t "Subscribe"}}</button> <button id="{{button_id}}" class="{{button_class}}" type="submit">{{t "Subscribe"}}</button>
{{script}} {{script}}

326
post.hbs
View file

@ -2,157 +2,168 @@
This template is used for the post page. This template is used for the post page.
--}} --}}
{{!-- This block preloads specific assets for the post page --}}
{{#contentFor "preload"}}
<link rel="preload" href="{{asset "css/post.css"}}" as="style" />
<link rel="preload" href="{{asset "js/post.js"}}" as="script" />
{{/contentFor}}
{{!-- This block loads specific styles for the post page --}} {{!-- This block loads specific styles for the post page --}}
{{#contentFor "styles"}} {{#contentFor "styles"}}
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" rel="preload" as="style" /> <link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
{{/contentFor}} {{/contentFor}}
{{!-- The tag below means: insert everything in this file {{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
{{!< default}} {{!< default}}
<div class="main-wrap"> {{!-- Special header.hbs partial to generate the <header> tag --}}
{{!-- Everything inside the #post tags pulls data from the post --}} {{#post}}
{{> header background=feature_image}}
{{/post}}
<main class="main-wrap">
{{#post}} {{#post}}
{{!-- Special header.hbs partial to generate the <header> tag --}}
{{> header background=feature_image}}
{{!-- Inject styles of the hero image to make it responsive --}} {{!-- Inject styles of the hero image to make it responsive --}}
{{> hero background=feature_image}} {{> hero background=feature_image}}
</section> </section>
{{/post}} {{/post}}
<main> <article>
<article> <div class="l-content in-post">
<div class="l-content in-post"> {{!-- Everything inside the #post tags pulls data from the post --}}
{{!-- Everything inside the #post tags pulls data from the post --}} {{#post}}
{{#post}} <div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-aos-wrapper" data-aos="fade-up"
<div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-aos-wrapper" data-aos="fade-up" data-aos-delay="300"> data-aos-delay="300">
<div class="l-post-content {{#if @labs.subscribers}}has-subscribe-form{{/if}} {{#if @labs.members}}has-subscribe-form{{/if}} js-progress-content"> <div
<header class="m-heading"> class="l-post-content {{#if @labs.subscribers}}has-subscribe-form{{/if}} {{#if @labs.members}}has-subscribe-form{{/if}} js-progress-content">
<h1 class="m-heading__title in-post">{{title}}</h1> <header class="m-heading">
<div class="m-heading__meta"> <h1 class="m-heading__title in-post">{{title}}</h1>
{{#if primary_tag}} <div class="m-heading__meta">
<a href="{{primary_tag.url}}" class="m-heading__meta__tag">{{primary_tag.name}}</a> {{#if primary_tag}}
<span class="m-heading__meta__divider">&bull;</span> <a href="{{primary_tag.url}}" class="m-heading__meta__tag">{{primary_tag.name}}</a>
{{/if}} <span class="m-heading__meta__divider" aria-hidden="true">&bull;</span>
<span class="m-heading__meta__time">{{date published_at}}</span> {{/if}}
</div> <span class="m-heading__meta__time">{{date published_at}}</span>
</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"></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"></span>
</a>
<button class="m-icon-button filled in-share progress js-scrolltop" aria-label="Scroll to top">
<span class="icon-arrow-top"></span>
<svg>
<circle class="progress-ring__circle js-progress" fill="transparent" r="0" />
</svg>
</button>
</div>
</div>
{{content}}
</div> </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}}
</div> </div>
</div> </div>
{{!-- Email subscribe form at the bottom of the page --}} </div>
{{#if @labs.subscribers}} {{!-- Email subscribe form at the bottom of the page --}}
<section class="m-subscribe-section"> {{#if @labs.subscribers}}
<div class="l-wrapper in-post"> <section class="m-subscribe-section">
<div class="m-subscribe-section__content"> <div class="l-wrapper in-post">
<div class="m-subscribe-section__text"> <div class="m-subscribe-section__content">
<h4 class="m-subscribe-section__title">{{t "Subscribe to our newsletter"}}</h4> <div class="m-subscribe-section__text">
<p class="m-subscribe-section__description"> <h4 class="m-subscribe-section__title">{{t "Subscribe to our newsletter"}}</h4>
{{t "Get the latest posts delivered right to your inbox."}} <p class="m-subscribe-section__description">
</p> {{t "Get the latest posts delivered right to your inbox."}}
</div>
<div class="m-subscribe-section__form">
{{subscribe_form
form_id="subscribe-form"
form_class="m-subscribe-section__form"
input_id="subscribe_input"
input_class="m-input in-subscribe-section"
button_id="subscribe_button"
button_class="m-button primary block"
placeholder=(t "Your email address")
}}
</div>
</div>
</div>
</section>
{{/if}}
{{#if @labs.members}}
<section class="m-subscribe-section">
<div class="l-wrapper in-post">
<div class="m-subscribe-section__content">
<div class="m-subscribe-section__text">
<h4 class="m-subscribe-section__title">{{t "Subscribe to our newsletter"}}</h4>
<p class="m-subscribe-section__description">
{{t "Get the latest posts delivered right to your inbox."}}
</p>
</div>
<div class="m-subscribe-section__form">
{{> "newsletter-form"}}
</div>
</div>
</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="Author picture">
{{#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> </p>
{{/has}} </div>
{{#if primary_author.bio}} <div class="m-subscribe-section__form">
<p class="m-author__bio">{{primary_author.bio}}</p> {{subscribe_form
{{/if}} form_id="subscribe-form"
<ul class="m-author-links"> form_class="m-subscribe-section__form"
{{#if primary_author.website}} input_id="subscribe_input"
<li> input_class="m-input in-subscribe-section"
<a href="{{primary_author.website}}" target="_blank" rel="noopener" aria-label="Website"> button_id="subscribe_button"
<span class="icon-globe"></span> button_class="m-button primary block"
</a> placeholder=(t "Your email address")
</li> }}
{{/if}} </div>
{{#if primary_author.facebook}}
<li>
<a href="https://facebook.com/{{primary_author.facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
<span class="icon-facebook"></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"></span>
</a>
</li>
{{/if}}
</ul>
</div> </div>
</div> </div>
</section> </section>
{{!-- If you want to embed comments, this is a good place to do it! --}} {{/if}}
{{!-- {{#if @labs.members}}
<section class="m-subscribe-section">
<div class="l-wrapper in-post">
<div class="m-subscribe-section__content">
<div class="m-subscribe-section__text">
<h4 class="m-subscribe-section__title">{{t "Subscribe to our newsletter"}}</h4>
<p class="m-subscribe-section__description">
{{t "Get the latest posts delivered right to your inbox."}}
</p>
</div>
<div class="m-subscribe-section__form">
{{> "newsletter-form"}}
</div>
</div>
</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>
{{!-- If you want to embed comments, this is a good place to do it! --}}
{{!--
<section class="m-comments"> <section class="m-comments">
<div class="m-load-comments"> <div class="m-load-comments">
<div class="m-load-comments__line"></div> <div class="m-load-comments__line"></div>
@ -176,38 +187,37 @@ into the {body} of the default.hbs template --}}
</script> </script>
</div> </div>
</section> </section>
--}} --}}
{{/post}} {{/post}}
{{!-- Related posts --}} {{!-- Related posts --}}
{{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags,authors" as |related|}} {{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags,authors" as |related|}}
<section class="m-recommended"> <section class="m-recommended">
<div class="l-wrapper in-recommended"> <div class="l-wrapper in-recommended">
<h3 class="m-section-title in-recommended">{{t "Recommended for you"}}</h3> <h3 class="m-section-title in-recommended">{{t "Recommended for you"}}</h3>
<div class="m-recommended-articles"> <div class="m-recommended-articles">
<div class="m-recommended-slider glide js-recommended-slider"> <div class="m-recommended-slider glide js-recommended-slider">
<div class="glide__track" data-glide-el="track"> <div class="glide__track" data-glide-el="track">
<div class="glide__slides"> <div class="glide__slides">
{{!-- The tag below iterates over all the related posts --}} {{!-- The tag below iterates over all the related posts --}}
{{> "loop"}} {{> "loop"}}
</div>
</div>
<div data-glide-el="controls" class="glide__arrows js-controls">
<button data-glide-dir="<" class="m-icon-button filled in-recommended-articles glide-prev" aria-label="Previous">
<span class="icon-arrow-left" aria-hidden="true"></span>
</button>
<button data-glide-dir=">" class="m-icon-button filled in-recommended-articles glide-next" aria-label="Next">
<span class="icon-arrow-right" aria-hidden="true"></span>
</button>
</div> </div>
</div> </div>
<div data-glide-el="controls" class="glide__arrows js-controls">
<button data-glide-dir="<" class="m-icon-button filled in-recommended-articles glide-prev" aria-label="{{t "Previous"}}">
<span class="icon-arrow-left" aria-hidden="true"></span>
</button>
<button data-glide-dir=">" class="m-icon-button filled in-recommended-articles glide-next" aria-label="{{t "Next"}}">
<span class="icon-arrow-right" aria-hidden="true"></span>
</button>
</div>
</div> </div>
</div> </div>
</section> </div>
{{/get}} </section>
</div> {{/get}}
</article> </div>
</main> </article>
</div> </main>
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}} {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}} {{#contentFor "scripts"}}

54
src/js/home.js
View file

@ -13,7 +13,7 @@ $(document).ready(() => {
if ($featuredSlider.length > 0) { if ($featuredSlider.length > 0) {
const numSlides = $featuredSlider.find('.js-featured-slide').length const numSlides = $featuredSlider.find('.js-featured-slide').length
const featuredSlider = new Glide('.js-featured-slider', { const featuredSlider = new Glide('.js-featured-slider', {
type: numSlides === 1 ? 'slider' : 'carousel', type: 'slider',
rewind: false, rewind: false,
gap: 0, gap: 0,
swipeThreshold: false, swipeThreshold: false,
@ -27,15 +27,63 @@ $(document).ready(() => {
} }
}) })
const ArrowDisabler = (Glide, Components) => {
const controlClasses = {
'controls': 'js-featured-slider-controls',
'backArrow': 'js-featured-slider-previous',
'nextArrow': 'js-featured-slider-next',
}
return {
mount() {
if (Glide.settings.rewind || numSlides === 1) {
return
}
Glide.on(['mount.after', 'run'], () => {
for (let controlItem of Components.Controls.items) {
if (!controlItem.className.includes(controlClasses.controls)) {
continue
}
const left = controlItem.querySelector(`.${controlClasses.backArrow}`)
if (left) {
if (Glide.index === 0) {
left.setAttribute('disabled', '')
} else {
left.removeAttribute('disabled')
}
}
const right = controlItem.querySelector(`.${controlClasses.nextArrow}`)
if (right) {
const lastSlideIndex = Glide.settings.bound
? Glide.index + (Glide.settings.perView - 1)
: Glide.index
if (lastSlideIndex === Components.Sizes.length - 1) {
right.setAttribute('disabled', '')
} else {
right.removeAttribute('disabled')
}
}
}
})
}
}
}
if (numSlides === 1) { if (numSlides === 1) {
$featuredSlider.find('.js-controls').remove() $featuredSlider.find('.js-featured-slider-controls').remove()
} }
featuredSlider.on('mount.after', () => { featuredSlider.on('mount.after', () => {
shave('.js-featured-article-title', 200) shave('.js-featured-article-title', 200)
}) })
featuredSlider.mount({ Controls, Swipe, Breakpoints }) featuredSlider.mount({ Controls, Swipe, Breakpoints, ArrowDisabler })
setTimeout(() => { setTimeout(() => {
window.dispatchEvent(new Event('resize')) window.dispatchEvent(new Event('resize'))

16
src/sass/common/_global.scss
View file

@ -65,19 +65,3 @@ fieldset {
.medium-zoom-image { .medium-zoom-image {
z-index: 5; z-index: 5;
} }
::-webkit-input-placeholder {
color: $gray;
}
::-moz-placeholder {
color: $gray;
}
:-ms-input-placeholder {
color: $gray;
}
:-moz-placeholder {
color: $gray;
}

17
src/sass/common/_helpers.scss
View file

@ -14,19 +14,10 @@
white-space: nowrap; white-space: nowrap;
} }
.clearfix:before, .focusable {
.clearfix:after { &:focus {
content: " "; /* 1 */ box-shadow: 0 0 0 2px #2997ff !important;
line-height: 0; }
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
} }
.content-centered { .content-centered {

8
src/sass/common/_themes.scss
View file

@ -3,7 +3,7 @@
--background-color: #fff; --background-color: #fff;
--primary-foreground-color: #4a4a4a; --primary-foreground-color: #4a4a4a;
--secondary-foreground-color: #000; --secondary-foreground-color: #000;
--primary-subtle-color: #04aeee; --primary-subtle-color: #0470ee;
--secondary-subtle-color: #f4f8fd; --secondary-subtle-color: #f4f8fd;
--titles-color: #333; --titles-color: #333;
--link-color: #293951; --link-color: #293951;
@ -12,7 +12,7 @@
--article-shadow-normal: 0 10px 10px rgba(0,0,0,0.08); --article-shadow-normal: 0 10px 10px rgba(0,0,0,0.08);
--article-shadow-hover: 0 4px 60px 0 rgba(0,0,0,0.2); --article-shadow-hover: 0 4px 60px 0 rgba(0,0,0,0.2);
--transparent-background-color: rgba(255,255,255,0.99); --transparent-background-color: rgba(255,255,255,0.99);
--footer-background-color: #293951; --footer-background-color: #133467;
--submenu-shadow-color-opacity: 0.25; --submenu-shadow-color-opacity: 0.25;
--button-shadow-color-normal: rgba(108, 108, 108, 0.2); --button-shadow-color-normal: rgba(108, 108, 108, 0.2);
--button-shadow-color-hover: rgba(108, 108, 108, 0.3); --button-shadow-color-hover: rgba(108, 108, 108, 0.3);
@ -28,7 +28,7 @@
--primary-subtle-color: #2c2fe6; --primary-subtle-color: #2c2fe6;
--secondary-subtle-color: #141920; --secondary-subtle-color: #141920;
--titles-color: #b4b4b4; --titles-color: #b4b4b4;
--link-color: #2c2fe6; --link-color: #b6b7f6;
--primary-border-color: #1d1d1d; --primary-border-color: #1d1d1d;
--secondary-border-color: #0f0f0f; --secondary-border-color: #0f0f0f;
--article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1); --article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
@ -51,7 +51,7 @@
--primary-subtle-color: #2c2fe6; --primary-subtle-color: #2c2fe6;
--secondary-subtle-color: #141920; --secondary-subtle-color: #141920;
--titles-color: #b4b4b4; --titles-color: #b4b4b4;
--link-color: #2c2fe6; --link-color: #b6b7f6;
--primary-border-color: #1d1d1d; --primary-border-color: #1d1d1d;
--secondary-border-color: #0f0f0f; --secondary-border-color: #0f0f0f;
--article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1); --article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);

4
src/sass/components/articles/_article-card.scss
View file

@ -53,6 +53,10 @@
} }
&.as-author { &.as-author {
.m-article-card__picture {
background-color: $black;
}
.m-article-card__picture-link { .m-article-card__picture-link {
z-index: 2; z-index: 2;
} }

2
src/sass/components/articles/_featured-article.scss
View file

@ -13,7 +13,7 @@
&.no-picture { &.no-picture {
.m-featured-article__picture { .m-featured-article__picture {
background-color: var(--link-color); background-color: var(--primary-subtle-color);
} }
} }
} }

11
src/sass/components/articles/_featured-slider.scss
View file

@ -40,14 +40,13 @@
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
} }
.slick-list,
.slick-track,
.slick-slide > div {
height: 100%;
}
} }
.m-featured-slider__list__item { .m-featured-slider__list__item {
height: 100%; height: 100%;
overflow: hidden;
@include respond-to('medium') {
border-radius: 10px;
}
} }

1
src/sass/components/header/_toggle-darkmode.scss
View file

@ -28,6 +28,7 @@
cursor: pointer; cursor: pointer;
z-index: 2; z-index: 2;
@extend .no-appearance; @extend .no-appearance;
@extend .focusable;
} }
input::-moz-focus-inner { input::-moz-focus-inner {

1
src/sass/components/ui/_button.scss
View file

@ -14,6 +14,7 @@
position: relative; position: relative;
background-color: transparent; background-color: transparent;
@extend .no-appearance; @extend .no-appearance;
@extend .focusable;
@include transition(all .25s cubic-bezier(.02,.01,.47,1)); @include transition(all .25s cubic-bezier(.02,.01,.47,1));
&.outlined { &.outlined {

9
src/sass/components/ui/_icon-button.scss
View file

@ -5,18 +5,18 @@
outline: 0; outline: 0;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
border-radius: 50%;
background-color: transparent; background-color: transparent;
@extend .content-centered; @extend .content-centered;
@extend .no-appearance; @extend .no-appearance;
@extend .focusable;
&.outlined { &.outlined {
border-radius: 50%;
border: 1px solid var(--primary-foreground-color); border: 1px solid var(--primary-foreground-color);
} }
&.filled { &.filled {
background-color: var(--background-color); background-color: var(--background-color);
border-radius: 50%;
@include bs(0 2px 4px var(--button-shadow-color-normal)); @include bs(0 2px 4px var(--button-shadow-color-normal));
@include transition(all .25s cubic-bezier(.02,.01,.47,1)); @include transition(all .25s cubic-bezier(.02,.01,.47,1));
@ -25,6 +25,11 @@
} }
} }
&:disabled {
cursor: default;
opacity: 0.5;
}
&.in-mobile-topbar { &.in-mobile-topbar {
width: 65px; width: 65px;
height: 100%; height: 100%;

4
src/sass/components/ui/_input.scss
View file

@ -11,6 +11,10 @@
background-color: var(--background-color); background-color: var(--background-color);
@extend .no-appearance; @extend .no-appearance;
&:focus {
border-color: var(--primary-subtle-color);
}
&.in-search { &.in-search {
font-weight: 600; font-weight: 600;
padding-left: 40px; padding-left: 40px;

2
src/sass/components/ui/_small-text.scss
View file

@ -1,5 +1,5 @@
.m-small-text { .m-small-text {
color: $gray; color: var(--titles-color);
font-size: 0.875rem; font-size: 0.875rem;
&.in-subscribe-page { &.in-subscribe-page {

2
src/sass/layouts/_post-content.scss
View file

@ -494,7 +494,7 @@
flex-wrap: wrap; flex-wrap: wrap;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 400; font-weight: 400;
color: $gray; color: var(--titles-color);
margin-top: 14px; margin-top: 14px;
} }

85
subscribe.hbs
View file

@ -4,51 +4,56 @@ This template is used for the subscription page.
{{!-- This block loads specific styles for the newsletter page --}} {{!-- This block loads specific styles for the newsletter page --}}
{{#contentFor "styles"}} {{#contentFor "styles"}}
<link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" media="screen" rel="preload" as="style" /> <link rel="preload" href="{{asset "css/newsletter.css"}}" as="style" />
<link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" media="screen" />
{{/contentFor}} {{/contentFor}}
{{!-- The tag below means: insert everything in this file {{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
{{!< default}} {{!< default}}
<div class="l-wrapper" data-aos="fade-down"> <main>
<a href="{{@site.url}}" class="m-back"> <div class="l-wrapper" data-aos="fade-down">
<span class="m-back__icon icon-arrow-left"></span> <a href="{{@site.url}}" class="m-back">
<span>{{t "Back to home"}}</span> <span class="m-back__icon icon-arrow-left"></span>
</a> <span>{{t "Back to home"}}</span>
</div> </a>
</div>
<main class="l-fullscreen"> <div class="l-fullscreen">
<section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300"> <section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300">
{{^if success}} {{^if success}}
<div> <div>
<header class="m-heading in-subscribe-page"> <header class="m-heading in-subscribe-page">
<h1 class="m-heading__title">{{t "Subscribe to"}} {{@site.title}}</h1> <h1 class="m-heading__title">{{t "Subscribe to"}} {{@site.title}}</h1>
<p class="m-heading__description in-subscribe-page"> <p class="m-heading__description in-subscribe-page">
{{t "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox."}} {{t "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox."}}
</p> </p>
</header> </header>
{{subscribe_form {{subscribe_form
form_id="subscribe-form" form_id="subscribe-form"
form_class="m-subscribe-section__form" form_class="m-subscribe-section__form"
input_id="subscribe_input" input_id="subscribe_input"
input_class="m-input in-subscribe-section" input_class="m-input in-subscribe-section"
button_id="subscribe_button" button_id="subscribe_button"
button_class="m-button primary block" button_class="m-button primary block"
placeholder=(t "Your email address") placeholder=(t "Your email address")
autofocus="true" autofocus="true"
}} }}
</div> </div>
{{else}} {{else}}
<div> <div>
<header class="m-heading in-subscribe-page"> <header class="m-heading in-subscribe-page">
<h1 class="m-heading__title">{{t "Subscribed!"}}</h1> <h1 class="m-heading__title">{{t "Subscribed!"}}</h1>
<p class="m-heading__description in-subscribe-page"> <p class="m-heading__description in-subscribe-page">
{{t "You've successfully subscribed to"}} <strong>{{@site.title}}</strong> {{t "with the email address"}} <strong>{{email}}</strong> {{t "You've successfully subscribed to"}} <strong>{{@site.title}}</strong> {{t "with the email address"}}
</p> <strong>{{email}}</strong>
</header> </p>
<a href="{{@site.url}}" class="m-button outlined">{{t "Back to home"}}</a> </header>
</div> <a href="{{@site.url}}" class="m-button outlined">{{t "Back to home"}}</a>
{{/if}} </div>
</section> {{/if}}
</section>
</div>
</main> </main>

33
tag.hbs
View file

@ -4,18 +4,23 @@ This template is used for the tag page.
{{!-- This block loads specific styles for the tag page --}} {{!-- This block loads specific styles for the tag page --}}
{{#contentFor "styles"}} {{#contentFor "styles"}}
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" rel="preload" as="style" /> <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
<link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
{{/contentFor}} {{/contentFor}}
{{!-- The tag below means: insert everything in this file {{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
{{!< default}} {{!< default}}
<div class="main-wrap"> {{!-- Special header.hbs partial to generate the <header> tag --}}
{{#tag}}
{{> header background=feature_image}}
{{/tag}}
<main class="main-wrap">
{{!-- Everything inside the #tag tags pulls data from the tag --}} {{!-- Everything inside the #tag tags pulls data from the tag --}}
{{#tag}} {{#tag}}
{{!-- Special header.hbs partial to generate the <header> tag --}}
{{> header background=feature_image}}
{{!-- Inject styles of the hero image to make it responsive --}} {{!-- Inject styles of the hero image to make it responsive --}}
{{> hero background=feature_image}} {{> hero background=feature_image}}
<div class="m-hero__content" data-aos="fade-down"> <div class="m-hero__content" data-aos="fade-down">
@ -36,16 +41,14 @@ into the {body} of the default.hbs template --}}
</section> </section>
{{/tag}} {{/tag}}
<main> <div class="l-content">
<div class="l-content"> <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300"> <div class="l-grid centered">
<div class="l-grid centered"> {{!-- The tag below iterates over all the posts --}}
{{!-- The tag below iterates over all the posts --}} {{> "loop"}}
{{> "loop"}}
</div>
</div> </div>
{{!-- Links to Previous/Next posts --}}
{{pagination}}
</div> </div>
</main> {{!-- Links to Previous/Next posts --}}
</div> {{pagination}}
</div>
</main>