Merge pull request #8 from angular/site-updates

Site updates

README.md

@@ -1,5 +1,28 @@
-# Setup
+# Angular.io
-1. `sudo npm install -g harp`
+Angular.io is currently the preview site for Angular 2. This site also includes links to other helpful angular resources including Angular 1.X, Angular Material, and AngularFire.
-2. cd into root directory
+
+## How you can help
+- [File an issue on github](https://github.com/angular/angular.io/issues)
+- [Contribute to Angular.io](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md)
+
+
+## Development Setup
+1. Install Harp `sudo npm install -g harp`
+2. cd into root directory `angular.io/`
 3. run `harp server`
-4. open [http://localhost:9000/](http://localhost:9000/)
+4. Open this url in the browser: [http://localhost:9000/](http://localhost:9000/)
+
+
+## Technology Used
+- Angular 1.x: The production ready version of Angular
+- Angular Material: An implementation of Material Design in Angular.js
+- Harp: The static web server with built-in preprocessing.
+- Sass: A professional grade CSS extension language
+- Normalize: A modern, HTML5-ready alternative to CSS resets
+- Grids: A highly customizable CSS Grid Framework built with Sass
+- Prettify: A JS module and CSS for syntax highlighting of source code snippets.
+- Icomoon: Custom built icon fonts
+
+
+## License
+Powered by Google ©2010-2015. Code licensed under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0). Documentation licensed under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0/).

public/_includes/_head-include.jade

@@ -14,7 +14,6 @@ else if language
 else
   title #{title} - Angular
 
-
 meta(charset="utf-8")
 meta(http-equiv="X-UA-Compatible" content="IE=edge")
 meta(name="description" content="#{description}")
@@ -23,13 +22,37 @@ meta(name="robots" content="all")
 meta(name="referrer" content="origin")
 meta(name="viewport" id="viewport" content="width=device-width, initial-scale=1")
 
+meta(property="og:title" content="Angular")
 meta(property="og:image" content="/resources/images/logos/standard/shield-large.png")
 meta(property="og:image:type" content="image/png")
 meta(property="og:image:width" content="184")
 meta(property="og:image:height" content="200")
+meta(property="og:description" content="#{description}")
+
+meta(itemprop="name" content="Angular")
+meta(itemprop="description" content="#{description}")
+meta(itemprop="image" content="https://angular.io/resources/images/logos/standard/shield-large.png")
 
 link(rel="icon" type="image/x-icon" href="/resources/images/icons/favicon.ico")
 link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css")
 link(href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700' rel='stylesheet' type='text/css')
 link(rel="stylesheet" href="/resources/css/vendor/icomoon/style.css")
 link(rel="stylesheet" href="/resources/css/main.css")
+
+<!-- MOBILE ICONS -->
+<link rel="apple-touch-icon" sizes="57x57" href="/resources/images/favicons/apple-touch-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/resources/images/favicons/apple-touch-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/resources/images/favicons/apple-touch-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/resources/images/favicons/apple-touch-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/resources/images/favicons/apple-touch-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/resources/images/favicons/apple-touch-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/resources/images/favicons/apple-touch-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/resources/images/favicons/apple-touch-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/resources/images/favicons/apple-touch-icon-180x180.png">
+
+<link rel="icon" type="image/png" href="/resources/images/favicons/favicon-32x32.png" sizes="32x32">
+<link rel="icon" type="image/png" href="/resources/images/favicons/favicon-194x194.png" sizes="194x194">
+<link rel="icon" type="image/png" href="/resources/images/favicons/favicon-96x96.png" sizes="96x96">
+<link rel="icon" type="image/png" href="/resources/images/favicons/android-chrome-192x192.png" sizes="192x192">
+<link rel="icon" type="image/png" href="/resources/images/favicons/favicon-16x16.png" sizes="16x16">
+<link rel="manifest" href="/resources/images/favicons/manifest.json">

public/_layout.jade

@@ -1,5 +1,5 @@
 doctype
-html(lang="en" ng-app="angularIOApp")
+html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
   head
     != partial("/_includes/_head-include")
 

public/about/index.jade

@@ -12,19 +12,26 @@
   .c2  
   .clear
 
-.grid-fluid.l-space-bottom-8
+.grid-fluid.l-space-bottom-6
+
   h3.text-headline.text-uppercase.text-center Current Contributors
+
+  <!-- BIO CARDS -->
   for person, name in bios
-    div.c3
+    .c3
-      md-card.bio-card
+      md-card(class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}"  data-name="#{person.name}" ng-click="showBio($event)")
-        img(src="#{person.picture}" class="md-card-image" alt="#{name}")
+        header
-        md-card-content
+          image(src="#{person.picture}" alt="#person.name")
-          h3.text-headline #{person.name}
+
+          nav
+            button(aria-label="View Bio") View Bio
 
             if person.twitter
-            a(href="https://twitter.com/#{person.twitter}" class="bio-link") @#{person.twitter}
+              a(title="twitter" href="https://twitter.com/#{person.twitter}" ng-click="$event.stopPropagation()") <span class="icon-twitter"></span>
 
             if person.website
-            a(href="#{person.website}" class="bio-link") Website
+              a(title="website" href="#{person.website}"  ng-click="$event.stopPropagation()") <span class="icon-publ"></span>
 
-          p(class="text-body" data-pic="#{person.picture}"  data-name="#{person.name}" ng-click="showBio($event)") #{person.bio}
+        md-card-content
+          h3.text-headline.bio-card-name #{person.name}
+          p(class="bio-card-content text-body") #{person.bio}

public/docs/dart/latest/_data.json

@@ -24,7 +24,6 @@
 
   "help": {
     "icon": "chat",
-    "title": "Help & Support",
+    "title": "Help & Support"
-    "subtitle": "Developers passionate about solving problems"
   }
 }

public/docs/js/latest/_data.json

@@ -24,7 +24,6 @@
 
   "help": {
     "icon": "chat",
-    "title": "Help & Support",
+    "title": "Help & Support"
-    "subtitle": "Developers passionate about solving problems"
   }
 }

public/docs/js/latest/quickstart.jade

@@ -273,6 +273,4 @@ p.
 
 // WHAT'S NEXT... ##########################
 .l-main-section
-  h2#section-transpile Great job! Next step...
+  h2#section-transpile Great job! We'll have the next steps out soon.
-
-  p Learn some template syntax for extra credit.

public/docs/styleguide.jade

@@ -11,6 +11,14 @@
           var name = "Alex Wolfe";
           alert(name);
 
+  .l-sub-section
+    h3 Specify starting line number
+
+    pre(class="prettyprint linenums:4")
+      code.
+        pre.prettyprint.linenums:4
+          var title = "This starts on line four";
+
 .l-main-section
   h2 Alerts
 

public/features.jade

@@ -20,7 +20,7 @@
   .c7
     h3.text-headline.text-uppercase  Future Ready
     p.text-body.
-      Angular 2 is written in written in ECMAScript 6 (ES6),
+      Angular 2 is written in ECMAScript 6 (ES6),
       with the addition of types and annotations.
       ES6 allows Angular to benefit from the best of JavaScript,
       while maintaining clean and easy-to-read code.

public/resources/css/_state.scss

@@ -1,6 +1,24 @@
+/*
+* States
+*
+* Utility classes for different element states
+*/
+
 .is-hidden {
   display: none !important;
 }
+
 .is-visible {
   display: block !important;
 }
+
+.is-visually-hidden {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  opacity: 0.01;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  z-index: $layer-1;
+}

public/resources/css/layout/_layout.scss

@@ -50,6 +50,7 @@
   screen and (max-device-width: $phone-breakpoint),
   screen and (max-width: $tablet-breakpoint) {
     padding-left: 0px;
+    padding-top: 104px;
   }
 }
 

public/resources/css/main.scss

@@ -30,6 +30,7 @@
 @import 'module/overlay';
 @import 'module/alert';
 @import 'module/card';
+@import 'module/modal';
 
 
 /*

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

@@ -1,31 +1,74 @@
 .bio-card {
-  max-width: 360px;
+  margin: 0px 0px ($unit * 4) 0px;
-  height: 420px;
+  position: relative;
-  margin-bottom: $unit * 4;
+  cursor: pointer;
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
+  background: $snow;
+  transition: all .3s;
+
+  &:hover {
+    transform: translate3d(0,-3px,0);
+    box-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.4);
+
+    nav {
+      opacity: 1;
+    }
+  }
+
+
+  // HEADER
+
+  header {
+    position: relative;
     overflow: hidden;
+    border-radius: 2px 2px 0px 0px;
+
+    nav {
+      transition: opacity .5s;
+      position: absolute;
+      bottom: 3px;
+      left: 0;
+      right: 0;
+      z-index: $layer-1;
+      padding: $unit;
+      background: rgba($steel, .4);
+      opacity: 0;
+
+      button {
+        font-size: 14px;
+        color: $snow;
+        text-transform: uppercase;
+        opacity: .87;
+        background: none;
+        border: none;
+      }
+
+      a {
+        color: $snow;
+        font-size: 20px;
+        text-decoration: none;
+        opacity: .87;
+        margin-right: $unit;
+        float: right;
+      }
+    }
+  }
+
+
+  // MAIN CONTENT
 
   h3 {
-    margin: 0px 0px $unit 0px;
     white-space: nowrap;
-  }
+    overflow: hidden;
-
+    text-overflow: ellipsis;
-  .bio-link {
+    color: $metal;
-    font-size: 14px;
+    text-transform: uppercase;
-    text-decoration: none;
+    font-size: 18px;
-    display: inline-block;
+    margin-bottom: $unit;
-    margin: 0px $unit $unit 0px;
-
-    &:last-child {
-      margin: 0px 0px $unit 0px
-    }
-  }
-
-  img {
-    width: 100%;
   }
 
   p {
-    height: 72px;
+    white-space: nowrap;
     overflow: hidden;
     cursor: pointer;
     font-size: 14px;

public/resources/css/module/_buttons.scss

@@ -16,6 +16,12 @@
 
 
   // SIZES
+  &.button-small {
+    font-size: 12px;
+    line-height: $unit * 3;
+    padding: 0px ($unit * 1);
+  }
+
   &.button-large {
     font-size: 15px;
     line-height: $unit * 6;
@@ -41,6 +47,11 @@
     color: rgba($steel, .87);
   }
 
+  &.button-subtle {
+    background: $mist;
+    color: darken($cloud, 10%);
+  }
+
   &.button-navy {
     background: $ocean;
     color: rgba($snow, .87);

public/resources/css/module/_code.scss

@@ -37,7 +37,9 @@
   box-shadow: 0px 2px 5px rgba($coal, .3);
   padding: ($unit * 2) ($unit * 4);
 
-  &.linenums {
+  &.linenums,
+  &[class^="linenums:"],
+  &[class*=" linenums:"]  {
     padding: 0px;
   }
 

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

@@ -75,8 +75,9 @@
       box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
       float: none;
       position: absolute;
-      top: 0px;
+      top: 56px;
-      right: $unit;
+      right: 0px;
+      left: 0px;
       z-index: $layer-6;
       background: $ocean;
       display: none;

public/resources/css/module/_modal.scss

@@ -0,0 +1,17 @@
+.modal {
+  h3 {
+    margin-bottom: $unit;
+  }
+
+  img {
+    float: left;
+    margin: 0px ($unit * 3) ($unit * 3) 0px;
+    border-radius: 4px;
+  }
+
+  .button {
+    margin-bottom: $unit * 3;
+    margin-right: $unit;
+    color: $blueberry;
+  }
+}

public/resources/css/vendor/icomoon/fonts/icomoon.svg

@@ -14,11 +14,10 @@
 <glyph unicode="&#xe604;" d="M128 384h85.333v85.333h-85.333v-85.333zM128 213.334h85.333v85.333h-85.333v-85.333zM128 554.667h85.333v85.333h-85.333v-85.333zM298.667 384h597.333v85.333h-597.333v-85.333zM298.667 213.334h597.333v85.333h-597.333v-85.333zM298.667 640v-85.333h597.333v85.333h-597.333z" />
 <glyph unicode="&#xe605;" d="M768 597.334h-42.667v85.333c0 117.76-95.573 213.333-213.333 213.333s-213.333-95.573-213.333-213.333v-85.333h-42.667c-47.147 0-85.333-38.187-85.333-85.333v-426.667c0-47.147 38.187-85.333 85.333-85.333h512c47.147 0 85.333 38.187 85.333 85.333v426.667c0 47.147-38.187 85.333-85.333 85.333zM512 213.334c-47.147 0-85.333 38.187-85.333 85.333s38.187 85.333 85.333 85.333 85.333-38.187 85.333-85.333-38.187-85.333-85.333-85.333zM644.267 597.334h-264.533v85.333c0 72.96 59.307 132.267 132.267 132.267s132.267-59.307 132.267-132.267v-85.333z" />
 <glyph unicode="&#xe606;" d="M511.787 853.334c-235.733 0-426.453-190.933-426.453-426.667s190.72-426.667 426.453-426.667c235.733 0 426.88 190.933 426.88 426.667s-191.147 426.667-426.88 426.667zM512 85.334c-188.587 0-341.333 152.747-341.333 341.333s152.747 341.333 341.333 341.333 341.333-152.747 341.333-341.333-152.747-341.333-341.333-341.333zM533.333 640h-64v-256l223.787-134.4 32.213 52.48-192 113.92z" />
-<glyph unicode="&#xe607;" d="M128 298.667h768v85.333h-768v-85.333zM128 128h768v85.333h-768v-85.333zM128 469.334h768v85.333h-768v-85.333zM128 725.334v-85.333h768v85.333h-768z" />
+<glyph unicode="&#xe607;" d="M853.333 768h-682.667c-46.933 0-84.907-38.4-84.907-85.333l-0.427-512c0-46.933 38.4-85.333 85.333-85.333h682.667c46.933 0 85.333 38.4 85.333 85.333v512c0 46.933-38.4 85.333-85.333 85.333zM640 170.667h-469.333v170.667h469.333v-170.667zM640 384h-469.333v170.667h469.333v-170.667zM853.333 170.667h-170.667v384h170.667v-384z" />
 <glyph unicode="&#xe608;" d="M661.333 341.334h-33.92l-11.733 11.733c41.813 48.427 66.987 111.36 66.987 180.267 0 153.173-124.16 277.333-277.333 277.333s-277.333-124.16-277.333-277.333 124.16-277.333 277.333-277.333c68.907 0 131.84 25.173 180.267 66.773l11.733-11.733v-33.707l213.333-212.907 63.573 63.573-212.907 213.333zM405.333 341.334c-106.027 0-192 85.973-192 192s85.973 192 192 192 192-85.973 192-192-85.973-192-192-192z" />
 <glyph unicode="&#xe609;" d="M682.667 682.667v85.333c0 47.147-38.187 85.333-85.333 85.333h-170.667c-47.147 0-85.333-38.187-85.333-85.333v-85.333h-256v-554.667c0-47.147 38.187-85.333 85.333-85.333h682.667c47.147 0 85.333 38.187 85.333 85.333v554.667h-256zM426.667 768h170.667v-85.333h-170.667v85.333zM384 170.667v384l320-170.667-320-213.333z" />
 <glyph unicode="&#xe60a;" d="M768 725.334v85.333c0 47.147-38.187 85.333-85.333 85.333h-170.667c-47.147 0-85.333-38.187-85.333-85.333v-85.333h-213.333v-469.333c0-47.147 38.187-85.333 85.333-85.333h597.333c47.147 0 85.333 38.187 85.333 85.333v469.333h-213.333zM512 810.667h170.667v-85.333h-170.667v85.333zM512 298.667v298.667l234.667-128-234.667-170.667zM128 554.667h-85.333v-469.333c0-47.147 38.187-85.333 85.333-85.333h597.333c47.147 0 85.333 38.187 85.333 85.333h-682.667v469.333z" />
-<glyph unicode="&#xe60b;" d="M512 896l-384-170.667v-256c0-237.013 163.627-458.027 384-512 220.373 53.973 384 274.987 384 512v256l-384 170.667zM426.667 213.334l-170.667 170.667 60.373 60.373 110.293-110.293 280.96 280.96 60.373-60.373-341.333-341.333z" />
 <glyph unicode="&#xe60c;" d="M512 853.334c-235.733 0-426.667-190.933-426.667-426.667s190.933-426.667 426.667-426.667 426.667 190.933 426.667 426.667-190.933 426.667-426.667 426.667zM426.667 234.667v384l256-192-256-192z" />
 <glyph unicode="&#xe60d;" d="M426.667 234.667l256 192-256 192v-384zM512 853.334c-235.733 0-426.667-190.933-426.667-426.667s190.933-426.667 426.667-426.667 426.667 190.933 426.667 426.667-190.933 426.667-426.667 426.667zM512 85.334c-188.16 0-341.333 153.173-341.333 341.333s153.173 341.333 341.333 341.333 341.333-153.173 341.333-341.333-153.173-341.333-341.333-341.333z" />
 <glyph unicode="&#xe60e;" d="M853.333 853.334h-682.667c-47.147 0-84.907-38.187-84.907-85.333l-0.427-768 170.667 170.667h597.333c47.147 0 85.333 38.187 85.333 85.333v512c0 47.147-38.187 85.333-85.333 85.333zM256 554.667h512v-85.333h-512v85.333zM597.333 341.334h-341.333v85.333h341.333v-85.333zM768 597.334h-512v85.333h512v-85.333z" />
@@ -50,11 +49,11 @@
 <glyph unicode="&#xe628;" d="M426.667 85.334h170.667v682.667h-170.667v-682.667zM170.667 85.334h170.667v341.333h-170.667v-341.333zM682.667 554.667v-469.333h170.667v469.333h-170.667z" />
 <glyph unicode="&#xe629;" d="M298.667 512l213.333-213.333 213.333 213.333z" />
 <glyph unicode="&#xe62a;" d="M298.667 341.334l213.333 213.333 213.333-213.333z" />
-<glyph unicode="&#xe62b;" d="M853.333 768h-682.667c-46.933 0-84.907-38.4-84.907-85.333l-0.427-512c0-46.933 38.4-85.333 85.333-85.333h682.667c46.933 0 85.333 38.4 85.333 85.333v512c0 46.933-38.4 85.333-85.333 85.333zM640 170.667h-469.333v170.667h469.333v-170.667zM640 384h-469.333v170.667h469.333v-170.667zM853.333 170.667h-170.667v384h170.667v-384z" />
 <glyph unicode="&#xea80;" d="M832 224l96-96 320 320-320 320-96-96 224-224zM448 672l-96 96-320-320 320-320 96 96-224 224zM701.298 809.481l69.468-18.944-191.987-704.026-69.468 18.944 191.987 704.026z" horiz-adv-x="1280" />
 <glyph unicode="&#xea81;" d="M0 896v-896h1024v896h-1024zM960 64h-896v768h896v-768zM896 768h-768v-640h768v640zM448 448h-64v-64h-64v-64h-64v64h64v64h64v64h-64v64h-64v64h64v-64h64v-64h64v-64zM704 320h-192v64h192v-64z" />
 <glyph unicode="&#xea89;" d="M0.806 90.336c-0.244 2.532-0.452 5.070-0.584 7.63 0.13-2.56 0.34-5.098 0.584-7.63zM235.908 394.852c92.010-2.738 153.734 92.698 137.862 213.198-15.894 120.48-103.396 217.168-195.408 219.922-92.026 2.73-153.74-89.482-137.852-210 15.882-120.468 103.352-220.374 195.398-223.12zM1024 704v85.31c0 93.88-76.782 170.69-170.658 170.69h-682.656c-92.276 0-168.012-74.232-170.564-165.926 58.362 51.386 139.324 94.316 222.874 94.316 89.304 0 357.244 0 357.244 0l-79.948-67.618h-113.268c75.13-28.804 115.156-116.124 115.156-205.722 0-75.248-41.81-139.954-100.888-185.968-57.644-44.902-68.572-63.708-68.572-101.878 0-32.578 61.746-88 94.032-110.788 94.382-66.538 124.916-128.312 124.916-231.456 0-16.428-2.042-32.83-6.066-48.96h307.742c93.874 0 170.656 76.75 170.656 170.69v533.308h-192v-191.998h-64v192h-191.998v64h191.998v192h64v-192h192zM185.886 194.064c21.614 0 41.422 0.59 61.936 0.59-27.146 26.334-48.626 58.6-48.626 98.38 0 23.608 7.564 46.336 18.134 66.52-10.782-0.77-21.79-0.994-33.126-0.994-74.356 0-137.506 24.076-184.204 63.854v-67.242l0.006-201.73c53.44 25.374 116.888 40.622 185.88 40.622zM3.42 72.742c-1.112 5.458-1.966 11.006-2.542 16.634 0.574-5.628 1.43-11.176 2.542-16.634zM455.45 7.154c-15.058 58.806-68.454 87.964-142.888 139.568-27.072 8.732-56.894 13.874-88.894 14.208-89.618 0.964-173.108-34.942-220.216-88.372 15.92-77.706 85.034-136.558 167.234-136.558h286.444c1.816 11.128 2.696 22.632 2.696 34.432 0 12.534-1.534 24.792-4.376 36.722z" />
 <glyph unicode="&#xea8d;" d="M853.35 960h-682.702c-94.25 0-170.648-76.42-170.648-170.686v-682.63c0-94.266 76.398-170.684 170.648-170.684h341.352v448h-128v128h128v96c0 88.366 71.634 160 160 160h160v-128h-160c-17.674 0-32-14.328-32-32v-96h176l-32-128h-144v-448h213.35c94.25 0 170.65 76.418 170.65 170.684v682.63c0 94.266-76.4 170.686-170.65 170.686z" />
+<glyph unicode="&#xea91;" d="M1024 765.582c-37.676-16.708-78.164-28.002-120.66-33.080 43.372 26 76.686 67.17 92.372 116.23-40.596-24.078-85.556-41.56-133.41-50.98-38.32 40.83-92.922 66.34-153.346 66.34-116.022 0-210.088-94.058-210.088-210.078 0-16.466 1.858-32.5 5.44-47.878-174.6 8.764-329.402 92.4-433.018 219.506-18.084-31.028-28.446-67.116-28.446-105.618 0-72.888 37.088-137.192 93.46-174.866-34.438 1.092-66.832 10.542-95.154 26.278-0.020-0.876-0.020-1.756-0.020-2.642 0-101.788 72.418-186.696 168.522-206-17.626-4.8-36.188-7.372-55.348-7.372-13.538 0-26.698 1.32-39.528 3.772 26.736-83.46 104.32-144.206 196.252-145.896-71.9-56.35-162.486-89.934-260.916-89.934-16.958 0-33.68 0.994-50.116 2.94 92.972-59.61 203.402-94.394 322.042-94.394 386.422 0 597.736 320.124 597.736 597.744 0 9.108-0.206 18.168-0.61 27.18 41.056 29.62 76.672 66.62 104.836 108.748z" />
 <glyph unicode="&#xea92;" d="M853.342 960h-682.656c-93.874 0-170.686-76.81-170.686-170.69v-682.624c0-93.936 76.812-170.686 170.686-170.686h682.656c93.876 0 170.658 76.75 170.658 170.69v682.62c0 93.88-76.782 170.69-170.658 170.69zM766.478 578.52c0.252-5.632 0.38-11.296 0.38-16.988 0-173.51-132.070-373.588-373.584-373.588-74.15 0-143.168 21.738-201.276 58.996 10.272-1.218 20.724-1.84 31.322-1.84 61.518 0 118.134 20.992 163.072 56.21-57.458 1.054-105.948 39.020-122.658 91.184 8.018-1.532 16.244-2.36 24.704-2.36 11.976 0 23.578 1.61 34.592 4.61-60.064 12.066-105.326 65.132-105.326 128.75 0 0.554 0 1.104 0.012 1.652 17.7-9.834 37.948-15.742 59.47-16.424-35.232 23.546-58.414 63.736-58.414 109.292 0 24.064 6.476 46.62 17.78 66.010 64.76-79.44 161.51-131.712 270.634-137.19-2.238 9.612-3.4 19.632-3.4 29.924 0 72.512 58.792 131.298 131.304 131.298 37.766 0 71.892-15.944 95.842-41.462 29.908 5.886 58.008 16.814 83.38 31.862-9.804-30.662-30.624-56.394-57.732-72.644 26.56 3.174 51.866 10.232 75.412 20.674-17.594-26.328-39.854-49.454-65.514-67.966z" />
 <glyph unicode="&#xeac8;" d="M852 960h-680c-94.6 0-172-77.4-172-172v-680c0-94.6 77.4-172 172-172h680c94.6 0 172 77.4 172 172v680c0 94.6-77.4 172-172 172zM384 128h-128v448h128v-448zM320 640c-35.346 0-64 28.654-64 64s28.654 64 64 64 64-28.654 64-64-28.654-64-64-64zM832 128h-128v256c0 35.346-28.654 64-64 64s-64-28.654-64-64v-256h-128v448h128v-79.472c26.398 36.264 66.752 79.472 112 79.472 79.53 0 144-71.634 144-160v-288z" />
 </font></defs></svg>

public/resources/css/vendor/icomoon/selection.json

@@ -114,6 +114,34 @@
 			"setIdx": 0,
 			"iconIdx": 397
 		},
+		{
+			"icon": {
+				"paths": [
+					"M1024 194.418c-37.676 16.708-78.164 28.002-120.66 33.080 43.372-26 76.686-67.17 92.372-116.23-40.596 24.078-85.556 41.56-133.41 50.98-38.32-40.83-92.922-66.34-153.346-66.34-116.022 0-210.088 94.058-210.088 210.078 0 16.466 1.858 32.5 5.44 47.878-174.6-8.764-329.402-92.4-433.018-219.506-18.084 31.028-28.446 67.116-28.446 105.618 0 72.888 37.088 137.192 93.46 174.866-34.438-1.092-66.832-10.542-95.154-26.278-0.020 0.876-0.020 1.756-0.020 2.642 0 101.788 72.418 186.696 168.522 206-17.626 4.8-36.188 7.372-55.348 7.372-13.538 0-26.698-1.32-39.528-3.772 26.736 83.46 104.32 144.206 196.252 145.896-71.9 56.35-162.486 89.934-260.916 89.934-16.958 0-33.68-0.994-50.116-2.94 92.972 59.61 203.402 94.394 322.042 94.394 386.422 0 597.736-320.124 597.736-597.744 0-9.108-0.206-18.168-0.61-27.18 41.056-29.62 76.672-66.62 104.836-108.748z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"twitter",
+					"brand",
+					"tweet",
+					"social"
+				],
+				"defaultCode": 58525,
+				"grid": 16
+			},
+			"attrs": [],
+			"properties": {
+				"id": 1302,
+				"order": 55,
+				"prevSize": 32,
+				"code": 60049,
+				"ligatures": "twitter, brand11",
+				"name": "twitter"
+			},
+			"setIdx": 0,
+			"iconIdx": 401
+		},
 		{
 			"icon": {
 				"paths": [
@@ -159,7 +187,7 @@
 			},
 			"attrs": [],
 			"properties": {
-				"order": 55,
+				"order": 57,
 				"id": 1581,
 				"prevSize": 32,
 				"code": 60104,
@@ -414,7 +442,7 @@
 			"attrs": [],
 			"properties": {
 				"id": 85,
-				"order": 35,
+				"order": 56,
 				"prevSize": 24,
 				"code": 58904,
 				"name": "polymer"
@@ -446,29 +474,6 @@
 			"setIdx": 1,
 			"iconIdx": 87
 		},
-		{
-			"icon": {
-				"paths": [
-					"M128 640h768v-85.333h-768v85.333zM128 810.667h768v-85.333h-768v85.333zM128 469.333h768v-85.333h-768v85.333zM128 213.333v85.333h768v-85.333h-768z"
-				],
-				"attrs": [],
-				"isMulticolor": false,
-				"tags": [
-					"reorder"
-				],
-				"grid": 24
-			},
-			"attrs": [],
-			"properties": {
-				"id": 91,
-				"order": 8,
-				"prevSize": 24,
-				"code": 58887,
-				"name": "reorder"
-			},
-			"setIdx": 1,
-			"iconIdx": 91
-		},
 		{
 			"icon": {
 				"paths": [
@@ -561,29 +566,6 @@
 			"setIdx": 1,
 			"iconIdx": 115
 		},
-		{
-			"icon": {
-				"paths": [
-					"M512 42.667l-384 170.667v256c0 237.013 163.627 458.027 384 512 220.373-53.973 384-274.987 384-512v-256l-384-170.667zM426.667 725.333l-170.667-170.667 60.373-60.373 110.293 110.293 280.96-280.96 60.373 60.373-341.333 341.333z"
-				],
-				"attrs": [],
-				"isMulticolor": false,
-				"tags": [
-					"verified-user"
-				],
-				"grid": 24
-			},
-			"attrs": [],
-			"properties": {
-				"id": 144,
-				"order": 12,
-				"prevSize": 24,
-				"code": 58891,
-				"name": "verified-user"
-			},
-			"setIdx": 1,
-			"iconIdx": 144
-		},
 		{
 			"icon": {
 				"paths": [
@@ -760,9 +742,9 @@
 			"attrs": [],
 			"properties": {
 				"id": 213,
-				"order": 56,
+				"order": 58,
 				"prevSize": 24,
-				"code": 58923,
+				"code": 58887,
 				"name": "web"
 			},
 			"setIdx": 1,

public/resources/css/vendor/icomoon/style.css

@@ -1,10 +1,10 @@
 @font-face {
 	font-family: 'icomoon';
-	src:url('fonts/icomoon.eot?ff1o1p');
+	src:url('fonts/icomoon.eot?-k7kbva');
-	src:url('fonts/icomoon.eot?#iefixff1o1p') format('embedded-opentype'),
+	src:url('fonts/icomoon.eot?#iefix-k7kbva') format('embedded-opentype'),
-		url('fonts/icomoon.woff?ff1o1p') format('woff'),
+		url('fonts/icomoon.woff?-k7kbva') format('woff'),
-		url('fonts/icomoon.ttf?ff1o1p') format('truetype'),
+		url('fonts/icomoon.ttf?-k7kbva') format('truetype'),
-		url('fonts/icomoon.svg?ff1o1p#icomoon') format('svg');
+		url('fonts/icomoon.svg?-k7kbva#icomoon') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -39,6 +39,10 @@
 	content: "\ea8d";
 }
 
+.icon-twitter:before {
+	content: "\ea91";
+}
+
 .icon-twitter2:before {
 	content: "\ea92";
 }
@@ -95,10 +99,6 @@
 	content: "\e606";
 }
 
-.icon-reorder:before {
-	content: "\e607";
-}
-
 .icon-search:before {
 	content: "\e608";
 }
@@ -115,10 +115,6 @@
 	content: "\e60a";
 }
 
-.icon-verified-user:before {
-	content: "\e60b";
-}
-
 .icon-view-module:before {
 	content: "\e61a";
 }
@@ -148,7 +144,7 @@
 }
 
 .icon-web:before {
-	content: "\e62b";
+	content: "\e607";
 }
 
 .icon-call-split:before {

public/resources/images/favicons/manifest.json

@@ -0,0 +1,41 @@
+{
+	"name": "Angular.io",
+	"icons": [
+		{
+			"src": "\/android-chrome-36x36.png",
+			"sizes": "36x36",
+			"type": "image\/png",
+			"density": "0.75"
+		},
+		{
+			"src": "\/android-chrome-48x48.png",
+			"sizes": "48x48",
+			"type": "image\/png",
+			"density": "1.0"
+		},
+		{
+			"src": "\/android-chrome-72x72.png",
+			"sizes": "72x72",
+			"type": "image\/png",
+			"density": "1.5"
+		},
+		{
+			"src": "\/android-chrome-96x96.png",
+			"sizes": "96x96",
+			"type": "image\/png",
+			"density": "2.0"
+		},
+		{
+			"src": "\/android-chrome-144x144.png",
+			"sizes": "144x144",
+			"type": "image\/png",
+			"density": "3.0"
+		},
+		{
+			"src": "\/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image\/png",
+			"density": "4.0"
+		}
+	]
+}

public/resources/js/site.js

@@ -37,21 +37,47 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDial
     $scope.showMenu = !$scope.showMenu;
   };
 
-  // SHOW FULL ABOUT US PAGE BIO
+  // BIO MODAL
-  $scope.showBio = function (event) {
+  $scope.showBio = function($event) {
-    var person = angular.element(event.currentTarget);
+    var parentEl = angular.element(document.body);
-    var bio = person.text();
+    var person = angular.element($event.currentTarget);
     var name = person.attr('data-name');
-    //var pic = person.data('data-pic');
+    var bio = person.attr('data-bio');
+    var pic = person.attr('data-pic');
+    var twitter = person.attr('data-twitter');
+    var website =  person.attr('data-website');
+    var $twitter = twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' +  person.attr('data-twitter') + '" md-button>Twitter</a>' : '';
+    var $website = website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + person.attr('data-website') + '" md-button>Website</a>' : '';
 
-    $mdDialog.show(
+    $mdDialog.show({
-      $mdDialog.alert()
+      parent: parentEl,
-        .title(name)
+      targetEvent: $event,
-        .content(bio)
+      template:
-        .ariaLabel('Biography')
+        '<md-dialog class="modal" aria-label="List dialog">' +
-        .ok('Close Bio')
+        '  <md-content>' +
-        .targetEvent(event)
+        '     <img class="left" src="' + pic + '" />' +
-    );
+        '     <h3 class="text-headline">' + name + '</h3>' +
+        '     <div class="modal-social">' + $twitter + $website + '</div>' +
+        '     <p class="text-body">' + bio + '</p>' +
+        '  </md-content>' +
+        '  <div class="md-actions">' +
+        '    <md-button ng-click="closeDialog()">' +
+        '      Close Bio' +
+        '    </md-button>' +
+        '  </div>' +
+        '</md-dialog>',
+      locals: {
+        items: $scope.items
+      },
+    controller: DialogController
+    });
+
+    function DialogController(scope, $mdDialog, items) {
+      scope.items = items;
+      scope.closeDialog = function() {
+        $mdDialog.hide();
+      };
+    }
   };
 
   // INITIALIZE PRETTY PRINT
@@ -59,3 +85,5 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDial
 }]);
 
 
+
+