Update to guide icons and landing page

public/_includes/_hover-card.jade

@@ -0,0 +1,8 @@
+a(class="hover-card is-button has-icon" href="#{url}" md-button)
+  span(class="hover-card-icon #{classes}")
+  h3 #{name}
+
+  if cta
+    p #{cta}
+  else
+    p View #{name} Docs

public/docs/js/latest/_data.json

@@ -12,7 +12,7 @@
   },
 
   "guide": {
-    "icon": "play-circle-fill",
+    "icon": "list",
     "title": "Guide",
     "banner": "Angular 2 is currently in Alpha Preview. For <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>."
   },

public/docs/js/latest/guide.jade

@@ -1,6 +1,10 @@
+number = 0;
 ul
   for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
-    name = page.menuTitle || page.title
-    selected =  current.path[4] == slug ? 'is-selected':''
     if slug != '_listtype'
-      li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html" md-button> #{slug}</a>
+      url = "/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{current.path[4]}/#{slug}.html"
+      num = number++
+      name = number + ' ' + page.title
+
+      li.c8
+        != partial("../../../_includes/_hover-card", { classes: 'icon', name: name, url: url })

public/docs/js/latest/index.jade

@@ -12,11 +12,11 @@ div.c4
 div.c4
   md-card.card
     md-card-content
-      h3.text-headline.text-uppercase <span class="icon-play-circle-outline"></span> Guide
+      h3.text-headline.text-uppercase <span class="icon-list"></span> Guide
       p.text-body Step by Step Guide
 
       footer
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Resources
+        a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide.html" class="button button-primary" md-button) View Guide
 
 
 div.c4

public/resources/css/main.scss

@@ -33,6 +33,7 @@
 @import 'module/alert';
 @import 'module/callout';
 @import 'module/card';
+@import 'module/hover-card';
 @import 'module/modal';
 @import 'module/shadow';
 @import 'module/showcase';

public/resources/css/module/_hover-card.scss

@@ -0,0 +1,161 @@
+.hover-card {
+  position: relative;
+  display: block;
+  cursor: pointer;
+  box-shadow: 0px 2px 2px rgba($coal, 0.24), 0px 0px 2px rgba($coal, 0.12);
+  border-radius: 2px;
+  background: $snow;
+  transition: all .3s;
+  padding: ($unit * 2) - 1;
+  margin: 0px 0px ($unit * 2) 0px;
+  border: $snow solid 1px;
+  text-decoration: none;
+
+  @media handheld and (max-width: $phone-breakpoint),
+  screen and (max-device-width: $phone-breakpoint),
+  screen and (max-width: $tablet-breakpoint) {
+    margin: ($unit * 2) 0px;
+    display: block;
+  }
+
+  /*
+  * Hover Transitions
+  *
+  */
+
+  &:hover {
+    transform: translate3d(0,-2px,0);
+    box-shadow: 0px 4px 4px rgba($coal, 0.24), 0px 0px 4px rgba($coal, 0.12), 0px 6px 18px rgba($blueberry, 0.12);
+    border: rgba($blueberry, 0.56) solid 1px;
+
+    .hover-card-icon {
+      color: rgba($blueberry, .87);
+    }
+
+    h3 {
+      color: $silver;
+    }
+
+    .icon-ruby {
+      background: url('/resources/images/icons/languages/ruby-icon-large-hover.png') 0px 0px no-repeat;
+    }
+    .icon-go {
+      background: url('/resources/images/icons/languages/go-icon-large-hover.png') 0px 0px no-repeat;
+    }
+  }
+
+
+  /*
+  * Icon Styles
+  *
+  */
+
+  &.has-icon {
+    padding-left: ($unit * 9) - 1;
+  }
+
+  .hover-card-icon {
+    transition: all .4s;
+    position: absolute;
+    top:  18px;
+    left: 18px;
+    z-index: $layer-1;
+    font-size: 36px;
+    color: rgba($cloud, .56);
+  }
+
+  .icon-Java {
+    top: 16px;
+    left: 20px;
+    font-size: 40px;
+  }
+
+  .icon-python {
+    top: 22px;
+    left: 20px;
+    font-size: 34px;
+  }
+
+  .icon-Nodejs {
+    top: 20px;
+    left: 20px;
+    font-size: 38px;
+  }
+
+  .icon-go {
+    background: url('/resources/images/icons/languages/go-icon-large.png') 0px 0px no-repeat;
+    height: 32px;
+    width: 24px;
+    left: 23px;
+    top: 21px;
+  }
+
+  .icon-ruby {
+    background: url('/resources/images/icons/languages/ruby-icon-large.png') 0px 0px no-repeat;
+    height: 30px;
+    width: 30px;
+    left: 21px;
+    top: 22px;
+  }
+
+  .icon-php {
+    top: 26px;
+    left: 14px;
+    font-size: 25px;
+  }
+
+  .icon-C {
+    top: 26px;
+    font-size: 24px;
+  }
+
+  .icon-connection {
+    top: 24px;
+    font-size: 28px;
+  }
+
+
+  /*
+  * Text Styles
+  *
+  */
+
+  h3,
+  p {
+    transition: all .4s;
+    line-height: 24px;
+    margin: 0;
+    padding: 0px;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  h3 {
+    color: $metal;
+    text-transform: none;
+    font-size: 20px;
+  }
+
+  p {
+    font-size: 11px;
+    text-transform: uppercase;
+    color: $blueberry;
+  }
+
+
+  /*
+  * Material Button Overrides
+  *
+  */
+
+  .md-ripple-container {
+    opacity: .48;
+  }
+
+  &.md-button.md-default-theme:not([disabled]):hover,
+  &.md-button.md-default-theme:not([disabled]):focus {
+    background-color: $snow;
+  }
+}