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

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';