Rough out splash page _layout with styles and test content

_includes/page__hero.html

@@ -1,12 +1,27 @@
-<div class="page__hero">
-  <img src=
-    {% if page.header.image contains "http" %}
-      "{{ page.header.image }}"
-    {% else %}
-      "{{ page.header.image | prepend: "/images/" | prepend: base_path }}"
+{% if page.header.image contains "http" %}
+  {% capture img_path %}{{ page.header.image }}{% endcapture %}
+{% else %}
+  {% capture img_path %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
+{% endif %}
+
+{% if page.header.background_image contains "http" %}
+  {% capture background_img_path %}{{ page.header.background_image }}{% endcapture %}
+{% else %}
+  {% capture background_img_path %}{{ page.header.background_image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
+{% endif %}
+
+<div class="page__hero{% if page.header.splash %}--splash{% endif %}"
+  style="background: {{ page.header.background_color | default: 'transparent' }} {% if background_img_path %}url('{{ background_img_path }}'){% endif %};"
+>
+  {% if page.header.splash %}
+    <div class="wrapper">
+      <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"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>{% endif %}
+    </div>
+  {% else %}
+    <img src="{{ img_path }}" alt="{{ page.title }}" class="page__hero-image">
+    {% if page.header.caption %}
+      <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
     {% endif %}
-    alt="{{ page.title }}" class="page__hero-image">
-  {% if page.header.caption %}
-    <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
   {% endif %}
 </div>

_includes/splash-row

@@ -0,0 +1,51 @@
+{% include base_path %}
+
+{% if include.id %}
+  {% assign splash_row = page.[include.id] %}
+{% else %}
+  {% assign splash_row = page.splash_row %}
+{% endif %}
+
+{% capture splash_size %}{{ splash_row | size }}{% endcapture %}
+
+{% if splash_size == '2' %}
+  {% assign splash_layout = 'half' %}
+{% elsif splash_size >= '3' %}
+  {% assign splash_layout = 'third' %}
+{% else %}
+  {% assign splash_layout = '' %}
+{% endif %}
+
+<div class="splash__wrapper">
+
+  {% for s in splash_row %}
+    <div class="splash__item">
+      <div class="archive__item">
+        {% if s.image_path %}
+          <div class="archive__item-teaser">
+            <img src=
+              {% if s.image_path contains "http" %}
+                "{{ s.image_path }}"
+              {% else %}
+                "{{ s.image_path | prepend: "/images/" | prepend: base_path }}"
+              {% endif %}
+            alt="{% if s.alt %}{{ s.alt }}{% endif %}">
+          </div>
+        {% endif %}
+
+        {% if s.title %}
+          <h2 class="archive__item-title">{{ s.title }}</h2>
+        {% endif %}
+
+        {% if s.excerpt %}
+          <div class="archive__item-excerpt">{{ s.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</div>
+        {% endif %}
+
+        {% if s.url %}
+          <p><a href="{{ s.url }}" class="btn {{ s.btn_class }}">{{ s.btn_label | default: site.data.ui-text[site.locale].more_label }}</a></p>
+        {% endif %}
+      </div>
+    </div>
+  {% endfor %}
+
+</div>