feat(aio): docs landing page with styles, logo res fix

aio/content/marketing/docs.html

@@ -0,0 +1,25 @@
+<h1>Angular Docs</h1>
+<h6>v 4.0.0</h6>
+<p>Learn about the latest updates to the documentation. View the Angular change log for enhancements, fixes, and breaking changes in Angular itself. If you're looking for Angular vs2 documents you'll find them at <a href="#">v2.angular.io</a></p>
+
+<div class="card-container clearfix">
+
+    <a href="../guide/quickstart" class="card">
+        <h2>Quickstart</h2>
+        <p>A short beginner guide explaining the basic concepts of Angular</p>
+        <p class="card-footer">View Quickstart</p>
+    </a>
+
+    <a href="..api" class="card">
+        <h2>Developer Guide</h2>
+        <p>An intermediuate development guide covering all major features of Angular</p>
+        <p class="card-footer">View Quickstart</p>
+
+    </a>
+
+    <a href="../api" class="card">
+        <h2>API Reference</h2>
+        <p>An advanced reference of all Angular Classes, Methods, etc.</p>
+        <p class="card-footer">View Quickstart</p>
+    </a>
+<div>

aio/src/app/app.component.spec.ts

@@ -171,7 +171,7 @@ describe('AppComponent', () => {
 
   describe('footer', () => {
     it('should have version number', () => {
-      const versionEl: HTMLElement = fixture.debugElement.query(By.css('aio-footer p')).nativeElement;
+      const versionEl: HTMLElement = fixture.debugElement.query(By.css('aio-footer')).nativeElement;
       expect(versionEl.innerText).toContain(TestHttp.versionFull);
     });
   });

aio/src/app/app.component.ts

@@ -33,7 +33,7 @@ export class AppComponent implements OnInit {
 
   get homeImageUrl() {
     return this.isSideBySide ?
-      'assets/images/logos/standard/logo-nav.png' :
+      'assets/images/logos/standard/logo-nav@2x.png' :
       'assets/images/logos/standard/logo-nav-small.png';
   }
   get isOpened() { return this.isSideBySide && this.isSideNavDoc; }

aio/src/styles/0-base/_typography.scss

@@ -47,9 +47,16 @@
       font-size: 18px;
       font-weight: 500;
       margin: 8px 0px;
-      text-transform: uppercase;
     }
 
+    h6 {
+      color: $mediumgray;
+      font-size: 18px;
+      font-weight: 400;
+      margin: 8px 0px;
+    }
+
+
     .mat-tab-body-wrapper h2 {
       margin-top: 0;
     }

aio/src/styles/1-layouts/_layout-global.scss

@@ -0,0 +1,5 @@
+.clearfix {
+    content: "";
+    display: table;
+    clear: both;
+}

aio/src/styles/1-layouts/_layouts-dir.scss

@@ -7,4 +7,5 @@
 @import 'search-results';
 @import 'top-menu';
 @import 'marketing-layout';
-@import 'footer';
+@import 'footer';
+@import 'layout-global';

aio/src/styles/1-layouts/_sidenav.scss

@@ -1,47 +1,3 @@
-/************************************
-
-             Media queries
-
- To use these, put this snippet in the approriate selector:
-
-     @include bp(tiny) {
-         background-color: purple;
-     }
-
-     Replace "tiny" with "medium" or "big" as necessary.
-*************************************/
-
-@mixin bp($point) {
-
-  $bp-xsmall: "(min-width: 320px)";
-  $bp-teeny: "(min-width: 480px)";
-  $bp-tiny: "(min-width: 600px)";
-  $bp-small: "(min-width: 650px)";
-  $bp-medium: "(min-width: 800px)";
-  $bp-big: "(min-width: 1000px)";
-
-  @if $point == big {
-    @media #{$bp-big} { @content; }
-  }
-  @else if $point == medium {
-    @media #{$bp-medium} { @content; }
-  }
-  @else if $point == small {
-    @media #{$bp-small}  { @content; }
-  }
-  @else if $point == tiny {
-    @media #{$bp-tiny}  { @content; }
-  }
-  @else if $point == teeny {
-    @media #{$bp-teeny}  { @content; }
-  }
-  @else if $point == xsmall {
-    @media #{$bp-xsmall}  { @content; }
-  }
-}
-
-/************************************/
-
 aio-nav-menu.top-menu .vertical-menu-item  {
   background-color: $lightgray;
   text-transform: uppercase;

aio/src/styles/1-layouts/_top-menu.scss

@@ -11,9 +11,10 @@
 
 .nav-link.home img {
   position: relative;
-  margin-top: -15px;
+  margin-top: -21px;
+  margin-right: 20px;
   top: 12px;
-  height: 36px;
+  height: 40px;
 }
 
 @media (max-width: 700px) {
@@ -90,4 +91,4 @@ aio-search-box input {
       width: 50%;
     }
   }
-}
+}

aio/src/styles/2-modules/_card.scss

@@ -0,0 +1,80 @@
+.card-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 24px 0;
+}
+
+.card {
+  background: $white;
+  border-radius: 4px;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-sizing: border-box;
+  height: 194px;
+  margin: 24px 8px;
+  max-width: 340px;
+  min-width: 262px;
+  padding-bottom: 48px;
+  position: relative;
+  transition: box-shadow .5s;
+  width: 30%;
+
+  &:hover {
+    // border: 2px solid $blue;
+    box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
+    text-decoration: none;
+
+    h2 {
+      color: $blue;
+    }
+
+    p {
+      color: $darkgray;
+      padding: 0 16px;
+    }
+
+    .card-footer {
+      line-height: 32px;
+      padding: 8px 16px;
+      background-color: rgba($blue, 0.1);
+      color: $blue;
+    }
+  }
+
+
+  h2 {
+    color: $darkgray;
+    font-size: 20px;
+    line-height: 24px;
+    margin: 0;
+    padding: 32px 0 24px;
+    text-transform: none;
+    text-align: center;
+  }
+
+  p {
+    color: $darkgray;
+    font-size: 13px;
+    line-height: 24px;
+    padding: 0 16px;
+    margin: 0;
+    text-align: center;
+  }
+
+  .card-footer {
+    bottom: 0;
+    border-top: 0.5px solid $lightgray;
+    box-sizing: border-box;
+    line-height: 48px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    text-align: right;
+    color: $mediumgray;
+
+    a {
+      color: $mediumgray;
+      font-size: 13px;
+    }
+  }
+}

aio/src/styles/2-modules/_modules-dir.scss

@@ -9,3 +9,4 @@
    @import 'images';
    @import 'table';
    @import 'presskit';
+   @import 'card';