Rough out splash page _layout with styles and test content

_data/ui-text.yml

@@ -16,6 +16,7 @@ en: &DEFAULT_EN
   categories_label    : "Categories:"
   date_label          :
   comments_label      : "Leave a Comment"
+  more_label          : "Learn More"
   related_label       : "You May Also Enjoy"
   follow_label        : "Follow:"
   feed_label          : "Feed"

_includes/page__hero.html

@@ -1,12 +1,27 @@
-<div class="page__hero">
-  <img src=
 {% if page.header.image contains "http" %}
-      "{{ page.header.image }}"
+  {% capture img_path %}{{ page.header.image }}{% endcapture %}
 {% else %}
-      "{{ page.header.image | prepend: "/images/" | prepend: base_path }}"
+  {% capture img_path %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
 {% endif %}
-    alt="{{ page.title }}" class="page__hero-image">
+
+{% 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 %}
+  {% 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>

_layouts/splash.html

@@ -0,0 +1,22 @@
+---
+layout: default
+---
+
+{% include base_path %}
+
+{% if page.header.splash %}
+  {% include page__hero.html %}
+{% endif %}
+
+<div id="main" role="main">
+  <article class="splash" 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 %}
+
+    <section class="page__content" itemprop="text">
+      {{ content }}
+    </section>
+  </article>
+</div>

_pages/splash-page.md

@@ -0,0 +1,31 @@
+---
+title: "Splash Page"
+layout: splash
+permalink: /splash-page/
+date: 2016-03-23T11:48:41-04:00
+header:
+  splash: true
+  background_color: "#000"
+  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
+splash_row:
+  - image_path: unsplash-gallery-image-1-th.jpg
+    alt: "placeholder image 1"
+    title: "Placeholder 1"
+    excerpt: "This is some sample content that goes here with **Markdown** formatting."
+  - image_path: unsplash-gallery-image-2-th.jpg
+    alt: "placeholder image 2"
+    title: "Placeholder 2"
+    excerpt: "This is some sample content that goes here with **Markdown** formatting."
+    url: "#test-link"
+    btn_label: "Read More"
+    btn_class: "btn--inverse"
+  - image_path: unsplash-gallery-image-3-th.jpg
+    title: "Placeholder 3"
+    excerpt: "This is some sample content that goes here with **Markdown** formatting."
+---
+
+## Introductory Headline for the Splash Page Goes Here
+
+Bacon ipsum dolor sit amet salami ham hock ham, hamburger corned beef short ribs kielbasa biltong t-bone drumstick tri-tip tail sirloin pork chop. 
+
+{% include splash-row %}

assets/_scss/_splash.scss

@@ -0,0 +1,35 @@
+/* ==========================================================================
+   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;
+
+  @include breakpoint($small) {
+    text-align: center;
+    @include gallery(4 of 12);
+
+    .splash__item-teaser {
+      max-height: 200px;
+      overflow: hidden;
+    }
+  }
+
+  .archive__item-excerpt {
+    margin-bottom: 1em;
+  }
+}
+

assets/_scss/main.scss

@@ -30,6 +30,7 @@
 @import "page";
 @import "archive";
 @import "sidebar";
+@import "splash";
 
 @import "vendor/font-awesome/font-awesome";
 @import "vendor/magnific-popup/magnific-popup";