Add header overlay sample posts

_includes/page__hero.html

@@ -4,18 +4,24 @@
   {% capture img_path %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
 {% endif %}
 
-{% if page.header.background_image contains "http" %}
+{% if page.header.overlay_image contains "http" %}
-  {% capture background_img_path %}{{ page.header.background_image }}{% endcapture %}
+  {% capture overlay_img_path %}{{ page.header.overlay_image }}{% endcapture %}
-{% else %}
+{% elsif page.header.overlay_image %}
-  {% capture background_img_path %}{{ page.header.background_image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
+  {% capture overlay_img_path %}{{ page.header.overlay_image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
 {% endif %}
 
-<div class="page__hero{% if page.header.splash %}--splash{% endif %}"
+<div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
-  style="background: {{ page.header.background_color | default: 'transparent' }} {% if background_img_path %}url('{{ background_img_path }}'){% endif %};"
+  style="background: {{ page.header.overlay_color | default: 'transparent' }} {% if overlay_img_path %}url('{{ overlay_img_path }}'){% endif %};"
 >
-  {% if page.header.splash %}
+  {% if page.header.overlay_color or page.header.overlay_image %}
     <div class="wrapper">
-      <h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
+      <h1 class="page__title" itemprop="headline">
+        {% if paginator %}
+          {{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page }} {{ paginator.page }}{% endunless %}
+        {% else %}
+          {{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}
+        {% endif %}
+      </h1>
       {% 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 %}
     </div>
   {% else %}

_layouts/archive.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-{% if page.header.image %}
+{% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
   {% include page__hero.html %}
 {% endif %}
 
@@ -14,7 +14,9 @@ layout: default
   {% include sidebar.html %}
 
   <div class="archive">
-    <h1 class="page__title">{{ page.title }}</h1>
+    {% unless page.header.overlay_color or page.header.overlay_image %}
+      <h1 class="page__title">{{ page.title }}</h1>
+    {% endunless %}
     {{ content }}
   </div>
 </div>

_layouts/single.html

@@ -4,7 +4,7 @@ layout: default
 
 {% include base_path %}
 
-{% if page.header.image %}
+{% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
   {% include page__hero.html %}
 {% endif %}
 
@@ -16,15 +16,18 @@ layout: default
   {% include sidebar.html %}
 
   <article class="page" itemscope itemtype="http://schema.org/CreativeWork">
+    {% if page.title %}<meta itemprop="headline" content="{{ page.title | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
     {% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
     {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
     {% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
 
     <div class="page__inner-wrap">
-      <header>
+      {% unless page.header.overlay_color or page.header.overlay_image %}
-        <h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
+        <header>
-        {% 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 %}
+          <h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
-      </header>
+          {% 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>
+      {% endunless %}
 
       <section class="page__content" itemprop="text">
         {{ content }}

_layouts/splash.html

@@ -4,7 +4,7 @@ layout: default
 
 {% include base_path %}
 
-{% if page.header.splash %}
+{% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
   {% include page__hero.html %}
 {% endif %}
 

_posts/2012-03-15-template-header-image-external.md

@@ -1,5 +1,5 @@
 ---
-title: "Template: Featured Image (External URL)"
+title: "Template: Header Image (External URL)"
 header:
   image: https://farm5.staticflickr.com/4140/4939863887_84705982fd_b.jpg
 categories:
@@ -12,6 +12,6 @@ tags:
   - template
 ---
 
-This post should display a **featured image**, if the theme supports it.
+This post should display a **header image**, if the theme supports it.
 
 Featured image is an external asset and should load.

_posts/2012-03-15-template-header-image-horizontal.md

@@ -1,5 +1,5 @@
 ---
-title: "Template: Featured Image (Horizontal)"
+title: "Template: Header Image (Horizontal)"
 header:
   image: unsplash-image-1.jpg
   caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
@@ -13,8 +13,8 @@ tags:
   - template
 ---
 
-This post should display a **featured image**, if the theme supports it.
+This post should display a **header image**, if the theme supports it.
 
 Non-square images can provide some unique styling issues.
 
-This post tests a horizontal featured image.
+This post tests a horizontal header image.

_posts/2012-03-15-template-header-image-text-readability.md

@@ -1,5 +1,5 @@
 ---
-title: "Template: Featured Image and Text Readability"
+title: "Template: Header Image and Text Readability"
 header:
   image: unsplash-image-4.jpg
   caption: "Photo credit: [**Unsplash**](https://unsplash.com)"

_posts/2012-03-15-template-header-image-vertical.md

@@ -1,5 +1,5 @@
 ---
-title: "Template: Featured Image (Vertical)"
+title: "Template: Header Image (Vertical)"
 header:
   image: unsplash-image-6.jpg
   caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
@@ -14,8 +14,8 @@ tags:
   - template
 ---
 
-This post should display a **featured image**, if the theme supports it.
+This post should display a **header image**, if the theme supports it.
 
 Non-square images can provide some unique styling issues.
 
-This post tests a vertical featured image.
+This post tests a vertical header image.

_posts/2012-03-15-template-header-overlay-color.md

@@ -0,0 +1,18 @@
+---
+title: "Template: Header Overlay with Background Fill"
+header:
+  overlay_color: "#333"
+categories:
+  - Template
+  - Uncategorized
+tags:
+  - edge case
+  - image
+  - template
+---
+
+This post should display a **header with a solid background color**, if the theme supports it.
+
+Non-square images can provide some unique styling issues.
+
+This post tests overlay headers.

_posts/2012-03-15-template-header-overlay-image.md

@@ -0,0 +1,18 @@
+---
+title: "Template: Header Image Overlay"
+header:
+  overlay_image: unsplash-image-1.jpg
+categories:
+  - Template
+  - Uncategorized
+tags:
+  - edge case
+  - image
+  - template
+---
+
+This post should display a **header with an overlay image**, if the theme supports it.
+
+Non-square images can provide some unique styling issues.
+
+This post tests overlay header images.

assets/_scss/_page.scss

@@ -64,6 +64,19 @@
   position: relative;
   margin-bottom: 2em;
   @include clearfix;
+
+  &--overlay {
+    position: relative;
+    margin-bottom: 2em;
+    padding: 3em 0;
+    @include clearfix;
+    text-align: center;
+
+    .page__title {
+      color: #fff;
+      text-shadow: 1px 1px 4px rgba(#000, 0.5);
+    }
+  }
 }
 
 .page__hero-image {

assets/_scss/_splash.scss

@@ -2,19 +2,6 @@
    SPLASH
    ========================================================================== */
 
-.page__hero--splash {
-  position: relative;
-  margin-bottom: 2em;
-  padding: 3em 0;
-  @include clearfix;
-  text-align: center;
-
-  .page__title {
-    color: #fff;
-    text-shadow: 1px 1px 4px rgba(#000, 0.5);
-  }
-}
-
 .splash__item {
   margin-bottom: 2em;