From 5f17dcd4d15792a3cf2e8772e812a27e017980b1 Mon Sep 17 00:00:00 2001
From: John Mulhausen <johndylan@johndylan-macpro.roam.corp.google.com>
Date: Fri, 27 May 2016 19:28:42 -0700
Subject: [PATCH] Added Landing Page

---
 _includes/templates/landing-page.md | 121 ++++++++++++++++++++++++++++
 docs/templatedemos/blanklanding.md  |   3 +
 docs/templatedemos/index.md         |  15 +++-
 docs/templatedemos/landingpage.md   |  53 ++++++++++++
 4 files changed, 191 insertions(+), 1 deletion(-)
 create mode 100644 _includes/templates/landing-page.md
 create mode 100644 docs/templatedemos/blanklanding.md
 create mode 100644 docs/templatedemos/landingpage.md

diff --git a/_includes/templates/landing-page.md b/_includes/templates/landing-page.md
new file mode 100644
index 0000000000..28bf9cebe5
--- /dev/null
+++ b/_includes/templates/landing-page.md
@@ -0,0 +1,121 @@
+{% if page.cards %}<!-- check for this before going any further; if not present, skip to else at bottom -->
+<style>
+h2, h3, h4 {
+  border-bottom: 0px !important;
+  font-size: 22px !important;
+  padding-bottom: 20px !important;
+}
+.colContainer {
+  padding-top:2px;
+  padding-left: 2px;
+  overflow: auto;
+}
+#samples a {
+  color: #000;
+}
+.col3rd {
+  display: block;
+  float: left;
+  margin-right: 30px;
+  margin-bottom: 30px;
+  overflow: hidden;
+}
+.col3rd h3, .col2nd h3 {
+  margin-bottom: 0px !important;
+}
+.col3rd .button, .col2nd .button {
+  margin-top: 20px;
+  border-radius: 2px;
+}
+.col3rd p, .col2nd p {
+  margin-left: 2px;
+}
+.col2nd {
+  display: block;
+  width: 400px;
+  float: left;
+  margin-right: 30px;
+  margin-bottom: 30px;
+  overflow: hidden;
+}
+.shadowbox {
+  width: 250px;
+  display: inline;
+  float: left;
+  text-transform: none;
+  font-weight: bold;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  line-height: 24px;
+  position: relative;
+  display: block;
+  cursor: pointer;
+  box-shadow: 0 2px 2px rgba(0,0,0,.24),0 0 2px rgba(0,0,0,.12);
+  border-radius: 5px;
+  background: #fff;
+  transition: all .3s;
+  padding: 16px;
+  margin: 0 16px 16px 0;
+  text-decoration: none;
+  letter-spacing: .01em;
+  height: 220px;
+}
+.shadowbox img {
+    min-width: 100px;
+    max-width: 100px;
+    max-height: 50px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    float: left;
+}
+</style>
+
+<div class="colContainer">
+{% for card in page.cards %}{% if card.title %}
+  <div class="col3rd shadowbox">
+    <h3>{{card.title}}</h3>
+    <p>{% if card.image %}<img src="{{card.image}}">{% endif %}{{card.description}}</p>
+  </div>
+{% endif %}{% endfor %}
+</div>
+
+{% else %}
+
+### ERROR: You must define "cards" front-matter YAML
+{: style="color:red" }
+
+This template requires that you insert YAML at the top of your document
+that defines the "cards" you'd like to display on the page. The cards will
+render in clickable boxes. 
+
+To get rid of this message and take advantage of this template, define `cards`:
+
+```yaml
+---
+cards:
+- progression: no
+- card:
+  title: Mean Stack
+  image: /docs/meanstack/image_0.png
+  description: Lorem ipsum dolor it verberum.
+- card:
+  title: Guestbook + Redis
+  image: /images/docs/redis.svg
+  description: Lorem ipsum dolor it verberum.
+- card:
+  title: Cloud Native Cassandra
+  image: /images/docs/cassandra.svg
+  description: Lorem ipsum dolor it verberum.
+- card:
+  title: WordPress + MySQL
+  image: /images/docs/wordpress.svg
+  description: Lorem ipsum dolor it verberum. 
+---
+```
+
+**Note:** If `progression` is set to `yes` then a "Start Here!" icon will be
+placed on the first card and arrows suggesting linear reading will be overlayed
+between the other cards, telling the reader that they should explore the content
+in a certain order. 
+
+{% endif %}
diff --git a/docs/templatedemos/blanklanding.md b/docs/templatedemos/blanklanding.md
new file mode 100644
index 0000000000..1225f1b8c5
--- /dev/null
+++ b/docs/templatedemos/blanklanding.md
@@ -0,0 +1,3 @@
+---
+---
+{% include templates/landing-page.md %}
\ No newline at end of file
diff --git a/docs/templatedemos/index.md b/docs/templatedemos/index.md
index b2cdef4aea..d199e6d074 100644
--- a/docs/templatedemos/index.md
+++ b/docs/templatedemos/index.md
@@ -1,6 +1,19 @@
 ---
 ---
 
+# Template Demos
+
+This page demonstrates new doc templates being worked on. 
+
+Click the headings to see the source of the template in GitHub.
+
+## [Concept Overviews](https://github.com/kubernetes/kubernetes.github.io/blob/master/_includes/templates/concept-overview.md)
+
 - [Blank page that is trying to use template](blank/)
 - [Partially filled out page](partial/)
-- [Completely filled out page](filledout/)
\ No newline at end of file
+- [Completely filled out page](filledout/)
+
+## [Landing Pages](https://github.com/kubernetes/kubernetes.github.io/blob/master/_includes/templates/landing-page.md)
+
+- [Blank](blanklanding/)
+- [Filled Out](landingpage/)
\ No newline at end of file
diff --git a/docs/templatedemos/landingpage.md b/docs/templatedemos/landingpage.md
new file mode 100644
index 0000000000..58ff8bebbc
--- /dev/null
+++ b/docs/templatedemos/landingpage.md
@@ -0,0 +1,53 @@
+---
+cards:
+- progression: no
+- card:
+  title: Mean Stack
+  image: /images/docs/meanstack/image_0.png
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+- card:
+  title: Guestbook + Redis
+  image: /images/docs/redis.svg
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+- card:
+  title: Cassandra
+  image: /images/docs/cassandra.svg
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+- card:
+  title: WordPress + MySQL
+  image: /images/docs/wordpress.svg
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+- card:
+  title: Mean Stack
+  image: /images/docs/meanstack/image_0.png
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+- card:
+  title: Guestbook + Redis
+  image: /images/docs/redis.svg
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+- card:
+  title: Cassandra
+  image: /images/docs/cassandra.svg
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+- card:
+  title: WordPress + MySQL
+  image: /images/docs/wordpress.svg
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+- card:
+  title: Mean Stack
+  image: /images/docs/meanstack/image_0.png
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+- card:
+  title: Guestbook + Redis
+  image: /images/docs/redis.svg
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+- card:
+  title: Cassandra
+  image: /images/docs/cassandra.svg
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+- card:
+  title: WordPress + MySQL
+  image: /images/docs/wordpress.svg
+  description: Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum. Lorem ipsum dolor it verberum.
+---
+{% include templates/landing-page.md %}
\ No newline at end of file