Improve accessibility (#221)

assets/css/home.css

@@ -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}

assets/js/home.js

@@ -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]]]);

author.hbs

@@ -4,18 +4,23 @@ This template is used for the author page.
 
 {{!-- This block loads specific styles for the author page --}}
 {{#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}}
 
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< 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 --}}
   {{#author}}
-    {{!-- Special header.hbs partial to generate the <header> tag --}}
-    {{> header background=cover_image}}
     {{!-- Inject styles of the hero image to make it responsive --}}
     {{> hero background=cover_image}}
       <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">
               {{#if website}}
                 <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>
                   </a>
                 </li>
@@ -68,7 +73,6 @@ into the {body} of the default.hbs template --}}
     </section>
   {{/author}}
   
-  <main>
   <div class="l-content">
     <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
       <div class="l-grid centered">
@@ -80,4 +84,3 @@ into the {body} of the default.hbs template --}}
     {{pagination}}
   </div>
 </main>
-</div>

default.hbs

@@ -10,7 +10,20 @@
     <meta name="HandheldFriendly" content="True" />
     <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>
       /* This font-face is here to make icons work if the Ghost instance is installed in a subdirectory */
       @font-face {
@@ -25,7 +38,8 @@
         font-display: swap;
       }
     </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 --}}
     {{{block "styles"}}}

error-404.hbs

@@ -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 --}}
 {{#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}}
 
 {{!-- The tag below means: insert everything in this file

index.hbs

@@ -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.
 --}}
 
+{{!-- 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 --}}
 {{#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}}
 
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}
 
-<div class="main-wrap">
 {{!-- Special header.hbs partial to generate the <header> tag --}}
 {{> header background=@site.cover_image}}
+
+<main class="main-wrap">
   {{!-- Inject styles of the hero image to make it responsive --}}
   {{> hero background=@site.cover_image}}
   <div class="m-hero__content" data-aos="fade-down">
@@ -31,8 +39,6 @@ into the {body} of the default.hbs template --}}
     {{/if}}
   </div>
   </section>
-  
-  <main>
   <div class="l-content">
     <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
       <div class="l-grid centered">
@@ -50,7 +56,7 @@ into the {body} of the default.hbs template --}}
                           {{/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=" , "}}">
+                          <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}}
@@ -80,11 +86,11 @@ into the {body} of the default.hbs template --}}
                   {{/foreach}}
                 </div>
               </div>
-                <div data-glide-el="controls" class="glide__arrows js-controls">
+              <div data-glide-el="controls" class="glide__arrows js-featured-slider-controls">
-                  <button data-glide-dir="<" class="m-icon-button in-featured-articles glide-prev" aria-label="Previous">
+                <button data-glide-dir="<" class="m-icon-button in-featured-articles glide-prev js-featured-slider-previous" aria-label="{{t "Previous"}}">
                   <span class="icon-arrow-left" aria-hidden="true"></span>
                 </button>
-                  <button data-glide-dir=">" class="m-icon-button in-featured-articles glide-next" aria-label="Next">
+                <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>
@@ -99,7 +105,6 @@ into the {body} of the default.hbs template --}}
     {{pagination}}
   </div>
 </main>
-</div>
 
 {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
 {{#contentFor "scripts"}}

locales/en.json

@@ -7,6 +7,9 @@
   "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.",
   "Back to home": "Back to home",
+  "Close": "Close",
+  "Close menu": "Close menu",
+  "Close search": "Close search",
   "Email cannot be blank.": "Email cannot be blank.",
   "Featured": "Featured",
   "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! You've successfully subscribed.": "Great! You've successfully subscribed.",
   "JavaScript license information": "JavaScript license information",
+  "Main menu": "Main menu",
   "More": "More",
+  "Newer posts": "Newer posts",
+  "Next": "Next",
   "No posts": "No posts",
   "No posts found": "No posts 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 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.",
+  "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.",
+  "Open menu": "Open menu",
+  "Open search": "Open search",
+  "Open submenu": "Open submenu",
   "Page": "Page",
   "Page not found": "Page not found",
+  "Pagination": "Pagination",
   "Please enter a valid email address": "Please enter a valid email address",
   "Posted by": "Posted by",
+  "Previous": "Previous",
   "Published with": "Published with",
   "Recent articles": "Recent articles",
   "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.",
   "Subscribe": "Subscribe",
   "Subscribe to": "Subscribe to",
@@ -39,6 +53,7 @@
   "Toggle dark mode": "Toggle dark mode",
   "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.",
+  "Website": "Website",
   "Welcome back! You've successfully signed in.": "Welcome back! You've successfully signed in.",
   "You've successfully subscribed to": "You've successfully subscribed to",
   "Your email address": "Your email address",

locales/es.json

@@ -7,6 +7,9 @@
   "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.",
   "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.",
   "Featured": "Destacado",
   "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! You've successfully subscribed.": "¡Genial! Te has suscrito con éxito.",
   "JavaScript license information": "Información de licencia JavaScript",
+  "Main menu": "Menú principal",
   "More": "Más",
+  "Newer posts": "Entradas más recientes",
+  "Next": "Siguiente",
   "No posts": "No hay artículos",
   "No posts found": "No se encontraron artículos",
   "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 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.",
+  "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.",
+  "Open menu": "Abrir menú",
+  "Open search": "Abrir búsqueda",
+  "Open submenu": "Abrir submenú",
   "Page": "Página",
   "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",
   "Posted by": "Publicado por",
+  "Previous": "Anterior",
   "Published with": "Publicado con",
   "Recent articles": "Artículos recientes",
   "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.",
   "Subscribe": "Suscríbete",
   "Subscribe to": "Suscríbete a",
@@ -39,6 +53,7 @@
   "Toggle dark mode": "Alternar modo oscuro",
   "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.",
+  "Website": "Sitio web",
   "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",
   "Your email address": "Tu dirección de correo electrónico",

package.json

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

page-authors.hbs

@@ -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 --}}
 {{#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}}
 
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}
 
-{{#post}}
-  <div class="main-wrap">
 {{!-- Special header.hbs partial to generate the <header> tag --}}
+{{#post}}
   {{> header background=feature_image}}
+{{/post}}
+
+{{#post}}
+  <main class="main-wrap">
     {{!-- Inject styles of the hero image to make it responsive --}}
     {{> hero background=feature_image}}
     <div class="m-hero__content" data-aos="fade-down">
@@ -25,7 +30,6 @@ into the {body} of the default.hbs template --}}
       {{/if}}
     </div>
     </section>
-    <main>
     <div class="l-content">
       <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
         {{#get 'authors' limit='all' include='count.posts' order='count.posts desc'}}
@@ -38,11 +42,11 @@ into the {body} of the default.hbs template --}}
                   {{else}}
                     <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="Author"></a>
+                  <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">
+                  <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}}
@@ -57,22 +61,22 @@ into the {body} of the default.hbs template --}}
                       <ul class="m-article-card__social">
                         {{#if website}}
                           <li>
-                              <a href="{{website}}" target="_blank" rel="noopener">
+                            <a href="{{website}}" target="_blank" rel="noopener" aria-label="{{t "Website"}}">
-                                <span class="icon-globe"></span>
+                              <span class="icon-globe" aria-hidden="true"></span>
                             </a>
                           </li>
                         {{/if}}
                         {{#if facebook}}
                           <li>
-                              <a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener">
+                            <a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener" aria-label="Facebook">
-                                <span class="icon-facebook"></span>
+                              <span class="icon-facebook" aria-hidden="true"></span>
                             </a>
                           </li>
                         {{/if}}
                         {{#if twitter}}
                           <li>
-                              <a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener">
+                            <a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener" aria-label="Twitter">
-                                <span class="icon-twitter"></span>
+                              <span class="icon-twitter" aria-hidden="true"></span>
                             </a>
                           </li>
                         {{/if}}
@@ -87,5 +91,4 @@ into the {body} of the default.hbs template --}}
       </div>
     </div>
   </main>
-  </div>
 {{/post}}

page-newsletter.hbs

@@ -4,13 +4,16 @@ This template is used for the subscription page.
 
 {{!-- This block loads specific styles for the newsletter page --}}
 {{#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}}
 
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}
 
+<main>
   <div class="l-wrapper" data-aos="fade-down">
     <a href="{{@site.url}}" class="m-back">
       <span class="m-back__icon icon-arrow-left"></span>
@@ -18,7 +21,7 @@ into the {body} of the default.hbs template --}}
     </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">
       <div>
         <header class="m-heading in-subscribe-page">
@@ -30,4 +33,5 @@ into the {body} of the default.hbs template --}}
         {{> "newsletter-form"}}
       </div>
     </section>
+  </div>
 </main>

page.hbs

@@ -2,20 +2,29 @@
 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 --}}
 {{#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}}
 
 {{!-- 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}}
-  <div class="main-wrap">
-    {{!-- Special header.hbs partial to generate the <header> tag --}}
-    {{> header background=feature_image}}
     {{!-- Inject styles of the hero image to make it responsive --}}
     {{> hero background=feature_image}}
     <div class="m-hero__content" data-aos="fade-down">
@@ -25,7 +34,6 @@ into the {body} of the default.hbs template --}}
       {{/if}}
     </div>
     </section>
-    <main>
     <article>
       <div class="l-content">
         <div class="l-wrapper in-post" data-aos="fade-up" data-aos-delay="300">
@@ -37,9 +45,8 @@ into the {body} of the default.hbs template --}}
         </div>
       </div>
     </article>
-    </main>
-  </div>
   {{/post}}
+</main>
 
 {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
 {{#contentFor "scripts"}}

partials/header.hbs

@@ -4,8 +4,8 @@ This header template is shared across all the pages.
 
 <header class="m-header {{#if background}}with-picture{{/if}} js-header">
   <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>
     {{#if @site.logo}}
       <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}}
       </a>
     {{/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>
   </div>
 
   <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>
     </button>
     <div class="m-menu__main" data-aos="fade-down">
       <div class="l-wrapper">
         <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}}
-                <li class="only-desktop" role="menuitem">
+                <li class="only-desktop">
                   <a href="{{@site.url}}" class="m-logo">
                     <img src="{{@site.logo}}" alt="{{@site.title}}">
                   </a>
                 </li>
                 {{else}}
-                <li class="only-desktop" role="menuitem">
+                <li class="only-desktop">
                   <a href="{{@site.url}}" class="m-site-name in-desktop-menu">
                     {{@site.title}}
                   </a>
@@ -47,16 +47,16 @@ This header template is shared across all the pages.
                 {{navigation}}
               {{/if}}
               {{#if @site.secondary_navigation}}
-                <li class="more" role="menuitem">
+                <li class="more">
                   <a href="javascript:void(0);" class="js-open-secondary-menu">
                     {{t "More"}}
-                    <span class="icon-chevron-down"></span>
+                    <span class="icon-chevron-down" aria-hidden="true"></span>
                   </a>
                 </li>
               {{/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>
                 <div class="m-submenu js-submenu">
                   <div class="l-wrapper in-submenu">
@@ -112,11 +112,14 @@ This header template is shared across all the pages.
             </ul>
           </nav>
           <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>
-            <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>

partials/loop.hbs

@@ -10,11 +10,11 @@
     <article class="m-article-card no-picture {{post_class}}">
   {{/if}}
     <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}}
         <img clasS="m-article-card__picture-background" src="{{img_url feature_image size="m"}}" loading="lazy" alt="">
       {{/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}}
           <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
         {{else}}
@@ -22,8 +22,8 @@
         {{/if}}
       </a>
       {{#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>
       {{/if}}
     </div>
@@ -33,7 +33,7 @@
     {{else}}
       <div class="m-article-card__info no-tag">
     {{/if}}
-      <a href="{{url}}" class="m-article-card__info-link">
+      <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}}

partials/navigation.hbs

@@ -4,16 +4,16 @@ Also it includes the big submenu.
 --}}
 
 {{#if isSecondary}}
-  <ul class="m-secondary-menu" role="menu">
+  <ul class="m-secondary-menu">
     {{#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>
       </li>
     {{/foreach}}
   </ul>
 {{else}}
   {{#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>
     </li>
   {{/foreach}}

partials/newsletter-form.hbs

@@ -6,12 +6,12 @@ You need to enable the members feature first.
 <div class="m-subscribe-section__form">
   <form data-members-form="subscribe" id="newsletter-form" class="m-subscribe-section__container">
     <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"
           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 class="m-subscribe__success">
       <header class="m-heading no-margin">

partials/notifications.hbs

@@ -1,27 +1,27 @@
 <div class="m-alert success subscribe js-alert" data-notification="subscribe">
   {{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>
   </button>
 </div>
 
 <div class="m-alert success signup js-alert" data-notification="signup">
   {{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>
   </button>
 </div>
 
 <div class="m-alert success signin js-alert" data-notification="signin">
   {{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>
   </button>
 </div>
 
 <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."}}
-  <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>
   </button>
 </div>

partials/pagination.hbs

@@ -3,15 +3,15 @@ This pagination template is used to navigate through newer and older articles.
 --}}
 
 <div class="l-wrapper">
-  <nav class="m-pagination">
+  <nav class="m-pagination" aria-label="{{t "Pagination"}}">
     {{#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>
       </a>
     {{/if}}
     <span class="m-pagination__text">{{t "Page"}} {{page}} {{t "of"}} {{pages}}</span>
     {{#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>
       </a>
     {{/if}}

partials/search.hbs

@@ -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.
 --}}
 
-<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">
-    <span class="icon-close"></span>
+    <span class="icon-close" aria-hidden="true"></span>
   </button>
   <div class="m-search__content">
     <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>
     <div class="js-search-results hide"></div>
     <p class="m-not-found align-center hide js-no-results">

partials/subscribe_form.hbs

@@ -6,10 +6,10 @@ You need to enable the subscription feature first.
 <form method="post" action="{{action}}" id="{{form_id}}" class="{{form_class}}">
   {{hidden}}
 
-  <fieldset>
+  <div class="pos-relative">
     <label for="{{input_id}}" class="sr-only">{{placeholder}}</label>
     {{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>
 
   {{script}}

post.hbs

@@ -2,38 +2,47 @@
 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 --}}
 {{#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}}
 
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}
 
-<div class="main-wrap">
-  {{!-- Everything inside the #post tags pulls data from the post --}}
-  {{#post}}
 {{!-- Special header.hbs partial to generate the <header> tag --}}
+{{#post}}
   {{> header background=feature_image}}
+{{/post}}
+
+<main class="main-wrap">
+  {{#post}}
     {{!-- Inject styles of the hero image to make it responsive --}}
     {{> hero background=feature_image}}
     </section>
   {{/post}}
   
-  <main>
   <article>
     <div class="l-content in-post">
       {{!-- Everything inside the #post tags pulls data from the post --}}
       {{#post}}
-          <div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-aos-wrapper" data-aos="fade-up" data-aos-delay="300">
+        <div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-aos-wrapper" data-aos="fade-up"
-            <div class="l-post-content {{#if @labs.subscribers}}has-subscribe-form{{/if}} {{#if @labs.members}}has-subscribe-form{{/if}} js-progress-content">
+          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">
             <header class="m-heading">
               <h1 class="m-heading__title in-post">{{title}}</h1>
               <div class="m-heading__meta">
                 {{#if primary_tag}}
                   <a href="{{primary_tag.url}}" class="m-heading__meta__tag">{{primary_tag.name}}</a>
-                    <span class="m-heading__meta__divider">&bull;</span>
+                  <span class="m-heading__meta__divider" aria-hidden="true">&bull;</span>
                 {{/if}}
                 <span class="m-heading__meta__time">{{date published_at}}</span>
               </div>
@@ -41,15 +50,17 @@ into the {body} of the default.hbs template --}}
             <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">
+                  <a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute='true'}}"
-                      <span class="icon-facebook"></span>
+                    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">
+                  <a href="https://twitter.com/intent/tweet?text={{encode title}}&url={{url absolute='true'}}"
-                      <span class="icon-twitter"></span>
+                    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="Scroll to top">
+                  <button class="m-icon-button filled in-share progress js-scrolltop" aria-label="{{t "Scroll to top"}}">
-                      <span class="icon-arrow-top"></span>
+                    <span class="icon-arrow-top" aria-hidden="true"></span>
-                      <svg>
+                    <svg aria-hidden="true">
                       <circle class="progress-ring__circle js-progress" fill="transparent" r="0" />
                     </svg>
                   </button>
@@ -105,7 +116,7 @@ into the {body} of the default.hbs template --}}
         <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">
+              <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}}
@@ -128,22 +139,22 @@ into the {body} of the default.hbs template --}}
               <ul class="m-author-links">
                 {{#if primary_author.website}}
                   <li>
-                      <a href="{{primary_author.website}}" target="_blank" rel="noopener" aria-label="Website">
+                    <a href="{{primary_author.website}}" target="_blank" rel="noopener" aria-label="{{t "Website"}}">
-                        <span class="icon-globe"></span>
+                      <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"></span>
+                      <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"></span>
+                      <span class="icon-twitter" aria-hidden="true"></span>
                     </a>
                   </li>
                 {{/if}}
@@ -192,10 +203,10 @@ into the {body} of the default.hbs template --}}
                   </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">
+                  <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="Next">
+                  <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>
@@ -207,7 +218,6 @@ into the {body} of the default.hbs template --}}
     </div>
   </article>
 </main>
-</div>
 
 {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
 {{#contentFor "scripts"}}

src/js/home.js

@@ -13,7 +13,7 @@ $(document).ready(() => {
   if ($featuredSlider.length > 0) {
     const numSlides = $featuredSlider.find('.js-featured-slide').length
     const featuredSlider = new Glide('.js-featured-slider', {
-      type: numSlides === 1 ? 'slider' : 'carousel',
+      type: 'slider',
       rewind: false,
       gap: 0,
       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) {
-      $featuredSlider.find('.js-controls').remove()
+      $featuredSlider.find('.js-featured-slider-controls').remove()
     }
 
     featuredSlider.on('mount.after', () => {
       shave('.js-featured-article-title', 200)
     })
     
-    featuredSlider.mount({ Controls, Swipe, Breakpoints })
+    featuredSlider.mount({ Controls, Swipe, Breakpoints, ArrowDisabler })
 
     setTimeout(() => {
       window.dispatchEvent(new Event('resize'))

src/sass/common/_global.scss

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

src/sass/common/_helpers.scss

@@ -14,19 +14,10 @@
   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 {

src/sass/common/_themes.scss

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

src/sass/components/articles/_article-card.scss

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

src/sass/components/articles/_featured-article.scss

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

src/sass/components/articles/_featured-slider.scss

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

src/sass/components/header/_toggle-darkmode.scss

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

src/sass/components/ui/_button.scss

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

src/sass/components/ui/_icon-button.scss

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

src/sass/components/ui/_input.scss

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

src/sass/components/ui/_small-text.scss

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

src/sass/layouts/_post-content.scss

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

subscribe.hbs

@@ -4,13 +4,16 @@ This template is used for the subscription page.
 
 {{!-- This block loads specific styles for the newsletter page --}}
 {{#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}}
 
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< default}}
 
+<main>
   <div class="l-wrapper" data-aos="fade-down">
     <a href="{{@site.url}}" class="m-back">
       <span class="m-back__icon icon-arrow-left"></span>
@@ -18,7 +21,7 @@ into the {body} of the default.hbs template --}}
     </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">
       {{^if success}}
         <div>
@@ -44,11 +47,13 @@ into the {body} of the default.hbs template --}}
           <header class="m-heading in-subscribe-page">
             <h1 class="m-heading__title">{{t "Subscribed!"}}</h1>
             <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"}}
+              <strong>{{email}}</strong>
             </p>
           </header>
           <a href="{{@site.url}}" class="m-button outlined">{{t "Back to home"}}</a>
         </div>
       {{/if}}
     </section>
+  </div>
 </main>

tag.hbs

@@ -4,18 +4,23 @@ This template is used for the tag page.
 
 {{!-- This block loads specific styles for the tag page --}}
 {{#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}}
 
 {{!-- The tag below means: insert everything in this file
 into the {body} of the default.hbs template --}}
 {{!< 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 --}}
   {{#tag}}
-    {{!-- Special header.hbs partial to generate the <header> tag --}}
-    {{> header background=feature_image}}
     {{!-- Inject styles of the hero image to make it responsive --}}
     {{> hero background=feature_image}}
     <div class="m-hero__content" data-aos="fade-down">
@@ -36,7 +41,6 @@ into the {body} of the default.hbs template --}}
     </section>
   {{/tag}}
   
-  <main>
   <div class="l-content">
     <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
       <div class="l-grid centered">
@@ -48,4 +52,3 @@ into the {body} of the default.hbs template --}}
     {{pagination}}
   </div>
 </main>
-</div>