more updates

harp.json

@@ -1,6 +1,6 @@
 {
   "globals": {
-    "title": "Some Title",
+    "title": "Angular",
     "description"  : "some description"
   }
 }

public/_data.json

@@ -1,5 +0,0 @@
-{
-  "index": {
-    "hero": "home"
-  }
-}

public/_includes/_docs-nav.jade

@@ -1,4 +1,7 @@
-nav
+nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
-  ul
+  .side-nav-search
+    input(type="search" placeholder="Search Docs...")
+
+  ul.side-nav-primary
     li <a href="/docs/quickstart.html">Quick Start</a>
     li <a href="/docs/guide.html">Guide</a>

public/_includes/_head-include.jade

@@ -1,4 +1,4 @@
-link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.css")
+link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css")
 link(href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700' rel='stylesheet' type='text/css')
 link(rel="stylesheet" href="/resources/css/vendor/icomoon/icons.css")
 link(rel="stylesheet" href="/resources/css/main.css")

public/_includes/_hero-home.jade

@@ -1,9 +1,10 @@
-header(class="hero is-large background-sky")
+header(class="background-sky")
+  div.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 Angular is a modern javascript framework for building professional web applications.
 
-  .hero-cta
+    .hero-cta
-    a(href="/docs/quickstart.html") Learn in 5 mins
+      a(href="/docs/quickstart.html" class="md-raised button button-large button-plain" md-button) Learn in 5 mins
-    a(href="/download.html" class="md-font icon-home") Download
+      a(href="/download.html" class="button button-large button-heavy"  md-button) Download
 
-    != partial("_social-icons")
+      != partial("_social-icons")

public/_includes/_hero.jade

@@ -0,0 +1,5 @@
+header(class="hero background-sky")
+  h1.hero-title.text-display-1 #{title}
+  h2.hero-subtitle.text-subhead #{subtitle}
+
+  != partial("_social-icons")

public/_includes/_main-nav.jade

@@ -6,6 +6,6 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5")
       li <a class="main-nav-button" href="/features.html">Features</a>
       li <a class="main-nav-button" href="/docs/">Docs</a>
       li <a class="main-nav-button" href="/about/">About</a>
-      li <a class="main-nav-button" href="/about/">Contribute</a>
+      li <a class="main-nav-button" href="/contribute.html">Contribute</a>
 
-    a(class="cta main-nav-button has-icon" href="/download/")  <span class="icon icon-cloud-download"></span> Download
+    a(class="cta main-nav-button has-icon" href="/download.html")  <span class="icon icon-cloud-download"></span> Download

public/about/_data.json

@@ -0,0 +1,11 @@
+{
+  "index": {
+    "title": "Moving the Web Foward",
+    "subtitle": "The Vision For Angular"
+  },
+
+  "presskit": {
+    "title": "Features & Benefits",
+    "subtitle": "Production Grade Features"
+  }
+}

public/contribute.jade

@@ -0,0 +1 @@
+adsads

public/docs/_layout.jade

@@ -3,7 +3,7 @@ html(lang="en"  layout="column" ng-app="myApp")
   head
     != partial("..//_includes/_head-include")
 
-  body(layout="column" ng-controller="AppCtrl")
+  body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl")
     != partial("../_includes/_main-nav")
     != partial("../_includes/_docs-nav")
     != yield

public/download.jade

@@ -0,0 +1 @@
+asdfas

public/features.jade

@@ -1 +1,24 @@
-h1 features
+section(class="l-content-block" layout="row")
+  div(flex="20")
+    .sticker <span class="sticker-icon icon-stay-current-portrait"></span>
+  div(flex="80")
+    h3.text-headline  LIGHTWEIGHT &amp; MOBILE READY
+    p.text-body High Life mustache bitters flannel paleo, Vice chia mumblecore tousled Williamsburg. Scenester whatever farm-to-table Kickstarter hella, lo-fi lumbersexual street art lomo swag Echo Park. High Life leggings tofu Intelligentsia bespoke, American Apparel selfies ennui.
+
+section(class="l-content-block" layout="row")
+  div(flex="20")
+    .sticker <span class="sticker-icon icon-filter-list"></span>
+  div(flex="80")
+    h3.text-headline  ADVANCED FILTERING
+    p.text-body High Life mustache bitters flannel paleo, Vice chia mumblecore tousled Williamsburg. Scenester whatever farm-to-table Kickstarter hella, lo-fi lumbersexual street art lomo swag Echo Park. High Life leggings tofu Intelligentsia bespoke, American Apparel selfies ennui.
+
+section(class="l-content-block" layout="row")
+  div(flex="20")
+    .sticker <span class="sticker-icon icon-language"></span>
+  div(flex="80")
+    h3.text-headline  INTERNATIONALIZATION (I18N &amp; L10)
+    p.text-body High Life mustache bitters flannel paleo, Vice chia mumblecore tousled Williamsburg. Scenester whatever farm-to-table Kickstarter hella, lo-fi lumbersexual street art lomo swag Echo Park. High Life leggings tofu Intelligentsia bespoke, American Apparel selfies ennui.
+
+
+
+!= partial("/_includes/_cta-bar")

public/resources/css/_layout.scss

@@ -17,10 +17,19 @@
   padding-top: 56px;
 }
 
+.l-offset-side-nav {
+  padding-left: 224px;
+}
+
+
 .l-content {
   padding: ($unit * 8) ($unit * 12);
 }
 
+.l-content-block {
+  margin: 0px 0px ($unit * 8) 0px;
+}
+
 /*
 * Pinned Layouts (fixed)
 *
@@ -33,6 +42,13 @@
   right: 0px;
 }
 
+.l-pinned-left {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+}
+
 
 /*
 * Layer Order (z-index)

public/resources/css/_options.scss

@@ -25,6 +25,7 @@ $coal: #000000;
 $steel: #253238;
 $silver: #36474F;
 $platinum: #445A64;
+$tin: #8FA4AE;
 
 // LIGHT GRAY COLORS
 $cloud: #AFBEC5;

public/resources/css/_theme.scss

@@ -30,6 +30,20 @@
 }
 
 
+/*
+* Background Images
+*
+*/
+
+.background-sf-paper {
+  background: url('/resources/images/backgrounds/sf-paper.png') bottom center no-repeat;
+  background-size: 100%;
+  background-position: fixed;
+}
+
+
+
+
 /*
 * Text Colors
 *

public/resources/css/main.scss

@@ -18,4 +18,7 @@
 
 @import 'module/main-nav';
 @import 'module/main-footer';
-@import 'module/hero';
+@import 'module/side-nav';
+@import 'module/hero';
+@import 'module/buttons';
+@import 'module/sticker';

public/resources/css/module/_buttons.scss

@@ -0,0 +1,34 @@
+/*
+* Button Styles
+*
+*/
+
+.button {
+  display: inline-block;
+  line-height: $unit * 4;
+  padding: 0px ($unit * 2);
+  font-size: 14px;
+  font-weight: 400;
+  border-radius: 3px;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  // SIZES
+  &.button-large {
+    font-size: 15px;
+    line-height: $unit * 6;
+    padding: 0px ($unit * 3);
+  }
+
+  // COLORS
+  &.button-plain {
+    background: $snow;
+    color: rgba($steel, .87);
+  }
+
+  &.button-heavy {
+    background: $ocean;
+    color: rgba($snow, .87);
+  }
+}
+

public/resources/css/module/_hero.scss

@@ -3,23 +3,39 @@ $hero-padding: $unit * 2;
 .hero {
   position: relative;
   padding: $hero-padding;
-  height: 192px - ($hero-padding * 2);
+  height: 192px;
 
   &.is-large {
-    height: 478px - ($hero-padding * 2);
+    height: 478px;
     text-align: center;
   }
 
+  .hero-title {
+    text-transform: uppercase;
+    margin: ($unit * 9) 0px 0px ($unit * 10);
+    opacity: .87;
+  }
+
+  .hero-subtitle {
+    margin: 0px 0px 0px ($unit * 10);
+    opacity: .87;
+  }
+
   // LARGE SHEILD LOGO
   .hero-logo {
     background: url('/resources/images/logos/standard/shield-large.png') top center no-repeat;
     padding-top: 224px;
     opacity: 1;
     width: $unit * 70;
-    margin: ($unit * 5) auto ($unit * 5) auto;
+    margin: ($unit * 3) auto ($unit * 5) auto;
     font-weight: 300;
   }
 
+  // CTA BUTTONS
+  .button {
+    margin: 0px $unit;
+  }
+
   // SOCIAL ICONS
   .social-icons {
     position: absolute;

public/resources/css/module/_side-nav.scss

@@ -0,0 +1,45 @@
+.side-nav {
+  background: $mist;
+  box-shadow: 3px 0px 6px rgba($coal, .3);
+  width: 224px;
+
+  a {
+    text-decoration: none;
+    display: block;
+  }
+
+  .side-nav-search {
+    background: $tin;
+    padding: 0px ($unit * 2);
+    height: $unit * 6;
+    border-bottom: 1px solid $fog;
+
+    input {
+      border: none;
+      border-radius: 200px;
+      width: 100%;
+      box-sizing: border-box;
+      height: $unit * 4;
+      padding: 0px $unit;
+      margin-top: $unit;
+    }
+  }
+
+  .side-nav-primary {
+    list-style-type: none;
+    margin: 0px;
+    padding: 0px;
+
+    > li {
+      margin: 0px;
+      padding: 0px;
+      border-bottom: 1px solid $fog;
+
+      > a {
+        line-height: $unit * 6;
+        padding: 0px ($unit * 2);
+        color: $steel;
+      }
+    }
+  }
+}

public/resources/css/module/_sticker.scss

@@ -0,0 +1,20 @@
+.sticker {
+  box-shadow: 0px 1px 2px rgba($coal, .3);
+  position: relative;
+  font-size: 80px;
+  color: $fog;
+  line-height: 128px;
+  height: 128px;
+  width: 128px;
+  border-radius: 1000px;
+  text-align: center;
+  background: $mist;
+
+  .sticker-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: $layer-1;
+    margin: -40px 0px 0px -40px;
+  }
+}