Author page integrated 👨🏽‍💻

author.hbs

@@ -0,0 +1,66 @@
+{{!< default}}
+
+{{> header}}
+
+{{#author}}
+  {{> hero background=cover_image}}
+    <div class="m-hero__content" data-aos="fade-down">
+      {{#if profile_image}}
+        <div class="m-hero-avatar" style="background-image: url({{profile_image}});"></div>
+      {{else}}
+        <div class="m-hero-avatar" style="background-image: url({{asset "images/default-avatar-square-normal.jpg"}});"></div>
+      {{/if}}
+      <h1 class="m-hero-title">{{name}}</h1>
+      {{#if bio}}
+        <p class="m-hero-description">{{bio}}</p>
+      {{/if}}
+      <div class="m-hero__meta">
+        {{#has any="twitter, facebook, website"}}
+          <ul class="m-hero-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}}
+        <ul class="m-hero-stats">
+          <li>
+            {{plural ../pagination.total empty="No posts" singular="% post" plural="% posts"}}
+          </li>
+          {{#if location}}
+            <li>&bull;</li>
+            <li>{{location}}</li>
+          {{/if}}
+        </ul>
+      </div>
+    </div>
+  </header>
+{{/author}}
+
+<main role="main">
+  <section class="l-content">
+    <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
+      <section class="l-grid centered">
+        {{> "loop"}}
+      </section>
+    </div>
+    {{pagination}}
+  </section>
+</main>

error-404.hbs

@@ -1,9 +1,8 @@
 {{!< default}}
 
-{{!-- The header --}}
+{{> header}}
-{{> header }}
 
-<main class="l-fullscreen">
+<main class="l-fullscreen" role="main">
   <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

@@ -1,7 +1,6 @@
 {{!< default}}
 
-{{!-- The header --}}
+{{> header}}
-{{> header background=@site.cover_image}}
 
-<main>
+<main role="main">
 </main>

page-authors.hbs

@@ -1,16 +1,15 @@
 {{!< default}}
 
-{{!-- The header --}}
+{{> header}}
-{{> header }}
 
 {{#post}}
-  <main>
+  {{> hero background=feature_image}}
-    <header class="m-hero" data-aos="fade">
     <div class="m-hero__content" data-aos="fade-down">
       <h1 class="m-hero-title">{{title}}</h1>
       <p class="m-hero-description">{{excerpt}}</p>
     </div>
   </header>
+  <main role="main">
     <section 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'}}
@@ -33,6 +32,7 @@
                       <span>
                         {{plural count.posts empty="No posts" singular="% post" plural="% posts"}}
                       </span>
+                      {{#has any="twitter, facebook, website"}}
                         <ul class="m-article-card__social">
                           {{#if website}}
                             <li>
@@ -56,6 +56,7 @@
                             </li>
                           {{/if}}
                         </ul>
+                      {{/has}}
                     </div>
                   </div>
               </article>

partials/header.hbs

@@ -1,8 +1,8 @@
-<header class="m-header js-header">
+{{#if background}}
-  {{#if background}}
+  <header class="m-header with-picture js-header">
-    <div class="m-header__shadow"></div>
+{{else}}
-  {{/if}}
+  <header class="m-header js-header">
-
+{{/if}}
   <div class="m-mobile-topbar" data-aos="fade-down">
     <button class="m-icon-button in-mobile-topbar js-open-menu" aria-label="Open menu">
       <span class="icon-menu"></span>

partials/hero.hbs

@@ -0,0 +1,32 @@
+{{#if background}}
+  <style type="text/css">
+    .m-hero__picture {
+      background-image: url({{img_url background size='xl'}});
+    }
+  
+    @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>
+
+  <header class="m-hero with-picture" data-aos="fade">
+    <div class="m-hero__picture"></div>
+{{else}}
+  <header class="m-hero" data-aos="fade">
+{{/if}}

partials/loop.hbs

@@ -0,0 +1,48 @@
+{{#foreach posts}}
+  {{#if feature_image}}
+    <article class="m-article-card {{post_class}}">
+      <div class="m-article-card__picture" style="background-image: url({{feature_image}});">
+  {{else}}
+    <article class="m-article-card no-picture {{post_class}}">
+      <div class="m-article-card__picture">
+  {{/if}}
+      <a href="{{url}}" class="m-article-card__picture-link" aria-label="Article"></a>
+      <a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" data-tippy-content="Posted by {{primary_author.name}} {{authors autolink="false" from="2" prefix="<br> Among with " separator=" , "}}">
+        {{#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>
+      {{#if featured}}
+        <a href="{{url}}" class="m-article-card__featured js-tooltip" data-tippy-content="Featured" aria-label="Article">
+          <span class="icon-star"></span>
+        </a>
+      {{/if}}
+    </div>
+    {{#if primary_tag}}
+      <div class="m-article-card__info">
+        <a href="{{primary_tag.url}}" class="m-article-card__tag">{{primary_tag.name}}</a>
+    {{else}}
+      <div class="m-article-card__info no-tag">
+    {{/if}}
+      <a href="{{url}}" class="m-article-card__info-link">
+        <div>
+          <h2 class="m-article-card__title">{{title}}</h2>
+        </div>
+        <div class="m-article-card__timestamp">
+          <time datetime="{{published_at}}">{{date published_at timeago="true"}}</time>
+          <span>&bull;</span>
+          <span>{{reading_time}}</span>
+        </div>
+      </a>
+    </div>
+  </article>
+  {{else}}
+    <header class="m-heading">
+      <h3>No posts found</h3>
+      <p>
+        Apparently there are no posts at the moment, check again later.
+      </p>
+    </header>
+{{/foreach}}

partials/pagination.hbs

@@ -0,0 +1,15 @@
+<div class="l-wrapper">
+  <nav class="m-pagination" role="navigation">
+    {{#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>
+      </a>
+    {{/if}}
+    <span class="m-pagination__text">Page {{page}} of {{pages}}</span>
+    {{#if next}}
+      <a href="{{page_url next}}" class="m-icon-button filled in-pagination-right" aria-label="Older posts">
+        <span class="icon-arrow-right"></span>
+      </a>
+    {{/if}}
+  </nav>
+</div>

subscribe.hbs

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