Add reading time to archive layout and include icon

_includes/archive-single.html

@@ -23,6 +23,7 @@
         </div>
         {% endif %}
       <h2 class="archive__item-title" itemprop="headline">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</h2>
+      {% if site.read_time and post.read_time %}<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>{% endif %}
       {% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
     </article>
   </a>

_includes/read-time.html

@@ -1,4 +1,8 @@
+{% if post.read_time %}
+  {% assign words = post.content | strip_html | number_of_words %}
+{% elsif page.read_time %}
   {% assign words = page.content | strip_html | number_of_words %}
+{% endif %}
 
 {% if words < 180 %}
   {{ site.data.ui-text[site.locale].less_than }} 1 {{ site.data.ui-text[site.locale].minute_read }}

_layouts/single.html

@@ -12,7 +12,7 @@ layout: default
   <div class="page__inner-wrap">
     <header>
       <h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
-      {% if site.read_time and page.read_time %}<p class="page__meta">{{ page.date | date: "%b %d, %Y" }} <span class="sep">·</span> {% include read-time.html %}</p>{% endif %}
+      {% if site.read_time and page.read_time %}<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>{% endif %}
     </header>
 
     <section class="page__content" itemprop="text">

assets/_scss/_archive.scss

@@ -71,6 +71,10 @@ a:hover {
   @include breakpoint($x-large) {
     padding-right: $right-sidebar-width-wide;
   }
+
+  .page__meta {
+    margin: 0 0 4px;
+  }
 }
 
 
@@ -81,6 +85,10 @@ a:hover {
 .grid__item {
   margin-bottom: 2em;
 
+  .page__meta {
+    margin: 0 0 4px;
+  }
+
   .archive__item-excerpt {
     display: none;
   }