Changes to pass the w3c validator

author.hbs

@@ -55,14 +55,14 @@
   </header>
   {{/author}}
   
-  <main role="main">
-    <section class="l-content">
+  <main>
+    <div class="l-content">
       <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
-        <section class="l-grid centered">
+        <div class="l-grid centered">
           {{> "loop"}}
-        </section>
+        </div>
       </div>
       {{pagination}}
-    </section>
+    </div>
   </main>
 </div>

default.hbs

@@ -13,6 +13,8 @@
     {{!-- Styles'n'Scripts --}}
     <link rel="stylesheet" type="text/css" href="{{asset "css/app.css"}}" />
 
+    {{{block "herobackground"}}}
+
     {{!-- This tag outputs SEO meta+structured data and other important settings --}}
     {{ghost_head}}
     <script>

error-404.hbs

@@ -2,7 +2,7 @@
 
 {{> header}}
 
-<main class="l-fullscreen" role="main">
+<main class="l-fullscreen">
   <section class="l-fullscreen__content" data-aos="fade-up" data-aos-delay="300">
     <h1 class="m-404-title">404</h1>
     <p class="m-404-subtitle">Page not found</p>

index.hbs

@@ -15,10 +15,10 @@
   </div>
   </header>
   
-  <main role="main">
-    <section class="l-content">
+  <main>
+    <div class="l-content">
       <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
-        <section class="l-grid centered">
+        <div class="l-grid centered">
           {{#get "posts" filter="featured:true" include="authors,tags" limit="5" as |featured|}}
           {{#if featured}}
           <div class="m-featured-slider">
@@ -68,10 +68,10 @@
           {{/if}}
           {{/get}}
           {{> "loop"}}
-        </section>
+        </div>
       </div>
       {{pagination}}
-    </section>
+    </div>
   </main>
 </div>
 

page-authors.hbs

@@ -12,11 +12,11 @@
       {{/if}}
     </div>
     </header>
-    <main role="main">
-      <section class="l-content">
+    <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'}}
-          <section class="l-grid centered">
+          <div class="l-grid centered">
             {{#foreach authors}}
             <article class="m-article-card as-author">
               {{#if profile_image}}
@@ -65,10 +65,10 @@
                 </div>
             </article>
             {{/foreach}}
-          </section>
+          </div>
           {{/get}}
         </div>
-      </section>
+      </div>
     </main>
   </div>
 {{/post}}

page.hbs

@@ -12,17 +12,17 @@
       {{/if}}
     </div>
     </header>
-    <main role="main">
+    <main>
       <article>
-        <section class="l-content">
+        <div class="l-content">
           <div class="l-wrapper in-post" data-aos="fade-up" data-aos-delay="300">
             <div class="l-post-content">
-              <section class="pos-relative js-post-content">
+              <div class="pos-relative js-post-content">
                 {{content}}
-              </section>
               </div>
             </div>
-        </section>
+          </div>
+        </div>
       </article>
     </main>
   </div>

partials/hero.hbs

@@ -1,5 +1,6 @@
 {{#if background}}
-  <style type="text/css">
+  {{#contentFor "herobackground"}}
+  <style>
     .m-hero__picture {
       background-image: url({{img_url background size='xl'}});
     }
@@ -7,23 +8,16 @@
     @media(max-width: 1000px) {
       .m-hero__picture {
         background-image: url({{img_url background size='l'}});
-        background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
-        url({{img_url background size='xl'}}) 2x);
-        background-image: image-set(url({{img_url background size='l'}}) 1x,
-        url({{img_url background size='xl'}}) 2x);
       }
     }
   
     @media(max-width: 600px) {
       .m-hero__picture {
         background-image: url({{img_url background size='m'}});
-        background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
-        url({{img_url background size='l'}}) 2x);
-        background-image: image-set(url({{img_url background size='m'}}) 1x,
-        url({{img_url background size='l'}}) 2x);
       }
     }
   </style>
+  {{/contentFor}}
 
   <header class="m-hero with-picture" data-aos="fade">
     {{#is "post"}}

partials/pagination.hbs

@@ -1,5 +1,5 @@
 <div class="l-wrapper">
-  <nav class="m-pagination" role="navigation">
+  <nav class="m-pagination">
     {{#if prev}}
       <a href="{{page_url prev}}" class="m-icon-button filled in-pagination-left" aria-label="Newer posts">
         <span class="icon-arrow-left"></span>

partials/search.hbs

@@ -1,4 +1,4 @@
-<section class="m-search js-search">
+<div class="m-search js-search">
   <button class="m-icon-button outlined as-close-search js-close-search" aria-label="Close search">
     <span class="icon-close"></span>
   </button>
@@ -11,4 +11,4 @@
     </form>
     <div class="js-search-results"></div>
   </div>
-</section>
+</div>

post.hbs

@@ -8,23 +8,23 @@
   </header>
   {{/post}}
   
-  <main role="main">
+  <main>
     <article>
-      <section class="l-content">
+      <div class="l-content">
         {{#post}}
         <div class="l-wrapper in-post js-wrapper-aos" data-aos="fade-up" data-aos-delay="300">
           <div class="l-post-content js-progress-content">
             <header class="m-heading">
               <h1 class="m-heading__title in-post">{{title}}</h1>
-              <section class="m-heading__meta">
+              <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>
                 {{/if}}
                 <time class="m-heading__meta__time">{{date published_at}}</time>
-              </section>
+              </div>
             </header>
-            <section class="pos-relative js-post-content">
+            <div class="pos-relative js-post-content">
               <div class="m-share">
                 <div class="m-share__content js-sticky">
                   <a href="#" class="m-icon-button filled in-share">
@@ -42,7 +42,7 @@
                 </div>
               </div>
               {{content}}
-            </section>
+            </div>
           </div>
         </div>
         <section class="m-subscribe-section">
@@ -152,7 +152,7 @@
           </div>
         </section>
         {{/get}}
-      </section>
+      </div>
     </article>
   </main>
 </div>

subscribe.hbs

@@ -7,7 +7,7 @@
   </a>
 </div>
 
-<main class="l-fullscreen" role="main">
+<main class="l-fullscreen">
   <section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300">
     {{^if success}}
       <div>

tag.hbs

@@ -14,14 +14,14 @@
   </header>
   {{/tag}}
   
-  <main role="main">
-    <section class="l-content">
+  <main>
+    <div class="l-content">
       <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
-        <section class="l-grid centered">
+        <div class="l-grid centered">
           {{> "loop"}}
-        </section>
+        </div>
       </div>
       {{pagination}}
-    </section>
+    </div>
   </main>
 </div>