feat(aio): marketing responsive items and footer

aio/src/app/app.component.html

@@ -13,16 +13,17 @@
   </md-sidenav>
 
   <section class="sidenav-content">
-    <aio-search-results #searchResults></aio-search-results>
     <aio-doc-viewer [doc]="currentDocument | async" (docRendered)="onDocRendered($event)"></aio-doc-viewer>
-
-    <footer>
-      <div class="footer">
-        <p>Powered by Google ©2010-2017. Code licensed under an <a href="/license">MIT-style License</a>.</p>
-        <p>Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
-        </p>
-        <p class="version-info">Version Info | {{ (versionInfo | async)?.full }}</p>
-      </div>
-    </footer>
   </section>
-</md-sidenav-container>
+</md-sidenav-container>
+
+<footer>
+  <div class="footer">
+    <p>Powered by Google ©2010-2017. Code licensed under an <a href="/license">MIT-style License</a>.</p>
+    <p>Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
+    </p>
+    <p class="version-info">Version Info | {{ (versionInfo | async)?.full }}</p>
+  </div>
+</footer>
+
+<aio-search-results #searchResults></aio-search-results>

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

@@ -1,4 +1,7 @@
 footer .footer {
+    width: 100%;
+    padding: 20px;
+    z-index: 10;
     background-color: $blue;
     color: $offwhite;
     text-align: center;
@@ -7,11 +10,13 @@ footer .footer {
         color: $offwhite;
         text-decoration: none;
         &:hover {
-            color: $darkgray;
+            text-decoration: underline;
-            font-weight: 500;
         }
         &:visited {
         text-decoration: none;
         }
     }
+    p {
+        margin: 0px 0px 5px;
+    }
 }

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

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

aio/src/styles/1-layouts/_marketing-layout.scss

@@ -0,0 +1,12 @@
+.hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    h1:after {
+        display: none;
+    }
+    img {
+        max-width: 200px;
+    }
+}

aio/src/styles/1-layouts/_search-results.scss

@@ -1,5 +1,9 @@
+aio-search-results {
+    z-index: 10;
+}
+
 .search-results {
-    padding: 20px;
+    padding: 80px 20px 20px;
     color: $offwhite;
     width: 100%;
     height: auto;

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

@@ -165,4 +165,11 @@
 
 .version-info {
   border: 3px $blue solid;
+}
+
+.promo-img-container img {
+  max-width: 90%;
+  @include bp(small) {
+    max-width: 100%;
+  }
 }