WIP: adding examples setup

Index.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Jekyll • Simple, blog-aware, static sites
+title: N1 | Presented by Nylas
 overview: true
 ---
 

_config.yml

@@ -4,4 +4,5 @@ description: "An extensible, open-source mail client built on the modern web."
 google_analytics_id: "UA-60022049-2"
 
 collections:
-- examples
+  examples:
+    output: true

_examples/example-1.html

@@ -0,0 +1,6 @@
+---
+title: "phishing-detection"
+description: "Finding and showing you a warning if an email is a possible phishing scam."
+assumed_experience: "No experience with React, Flux, Electron, or N1."
+---
+<div>example-1 balh balhb lahdl;k asdf</div>

_examples/example-2.html

@@ -0,0 +1,6 @@
+---
+title: "send-availability"
+description: "Send calendar availabilities via email for easier appointment scheduling."
+assumed_experience: "Experience with React and Flux, but none with Electron or N1."
+---
+<div>example-2 balh balhb lahdl;k asdf</div>

_sass/_main.scss

@@ -393,3 +393,23 @@ p {
     background: linear-gradient(to bottom, #3878fa 0%, #0a80ff 100%);
   }
 }
+
+.example-item {
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.example-item-description {
+  font-size: 14px;
+  line-height: 20px;
+  color: #555;
+  margin: 5px 0;
+}
+
+.example-item-assumed-experience-badge {
+  padding: 2px 4px;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  background: #f7f7f7;
+}

examples/index.html

@@ -7,6 +7,37 @@ title: Examples
   <div class="hero-bg-left"></div>
   <div class="hero-bg-right"></div>
   <div class="copy">
-    <img class="screenshot" src="images/hero_screenshot.png" width="100%">
+    <img class="screenshot" src="./../images/hero_screenshot.png" width="100%">
   </div>
 </div>
+
+<div class="container">
+
+  <div class="grid" style="margin-top:60px;">
+    <div class="whole unit">
+      <h1 style="font-size:80px; line-height:80px; text-align:center;">Featured examples</h1>
+    </div>
+  </div>
+
+  <div class="grid">
+    {% for example in site.collections.examples.docs %}
+      <div class="half unit" style="padding-left:10px;">
+        <div class="example-item">
+          <div>
+            <h4 style="margin-top:0;">
+              <a href="{{ example.url }}">{{ example.title }}</a>
+            </h4>
+          </div>
+          <div class="example-item-description">
+            {{ example.description }}
+          </div>
+          <div class="example-item-assumed-experience">
+            <span class="example-item-assumed-experience-badge">Assumed experience:</span>
+            {{ example.assumed_experience }}
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+
+</div>