From 2a4c04fdb1ec3e178e036b12b77d3ec696353189 Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Fri, 27 Feb 2015 21:21:20 -0800
Subject: [PATCH] layout spacers

---
 public/_data.json                        | 3 ++-
 public/_includes/_hero-home.jade         | 2 +-
 public/index.jade                        | 8 ++++----
 public/resources/css/layout/_layout.scss | 8 +++++++-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/public/_data.json b/public/_data.json
index 1814b953df..8f39e45722 100644
--- a/public/_data.json
+++ b/public/_data.json
@@ -1,6 +1,7 @@
 {
   "index": {
-    "hero": "home"
+    "hero": "home",
+    "title": "Angular is a development platform for building mobile and desktop web applications"
   },
 
   "features": {
diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade
index faf2251404..d0ce07055d 100644
--- a/public/_includes/_hero-home.jade
+++ b/public/_includes/_hero-home.jade
@@ -1,6 +1,6 @@
 header(class="background-sky")
   .hero.background-sf-paper.is-large
-    h1.text-headline.hero-logo Angular is a modern javascript framework for building professional web applications.
+    h1.text-headline.hero-logo #{title}
 
     .hero-cta
       a(href="/docs/quickstart.html" class="md-raised button button-large button-plain" md-button) Learn in 5 mins
diff --git a/public/index.jade b/public/index.jade
index e8cb827aa2..291c2cb5c8 100644
--- a/public/index.jade
+++ b/public/index.jade
@@ -1,19 +1,19 @@
-section.grid-fluid
+.grid-fluid.l-space-bottom-6
   .c8.a4
     h3.text-headline  Build Incredible Applications
     p.text-body Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.
 
-section.grid-fluid
+.grid-fluid.l-space-bottom-6
   .c8.a4
     h3.text-headline  Start Quick, Build Fast
     p.text-body Express your ideas with clean, understandable code. Angular is simple to build on, easy to change, and friendly to the way UX designers work. Create a UI that is beautiful by default, with material design and support for web components.
 
-section.grid-fluid
+.grid-fluid.l-space-bottom-6
   .c8.a4
     h3.text-headline  Open Source &amp;  MIT Licensed
     p.text-body Angular is built by you, for you. Our community shapes Angular's direction: core contributions come from big companies and small ones, from students and independent experts. We do our work in the open so that you can help Angular improve, or extend and modify what we've built.
 
-section.grid-fluid.text-center
+.grid-fluid.text-center
   .c8.a2.b2
     h3.text-headline Loved by Millions of Developers
     p.text-body But don’t take our word for it. Ramp up in minutes, and build an app today.
diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss
index 9cf0729446..d17da876dc 100644
--- a/public/resources/css/layout/_layout.scss
+++ b/public/resources/css/layout/_layout.scss
@@ -23,7 +23,6 @@
   padding-left: 224px;
 }
 
-
 .l-content {
   padding: ($unit * 8) ($unit * 12);
 }
@@ -32,6 +31,13 @@
   margin: 0px 0px ($unit * 8) 0px;
 }
 
+@for $i from 1 through 10 {
+  .l-space-bottom-#{$i} {
+    margin-bottom: $i * 8px;
+  }
+}
+
+
 /*
 * Pinned Layouts (fixed)
 *