feat(aio): marketing responsive items and footer

aio/src/app/app.component.html

@@ -13,8 +13,9 @@
   </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>
+  </section>
+</md-sidenav-container>
 
 <footer>
   <div class="footer">
@@ -24,5 +25,5 @@
     <p class="version-info">Version Info | {{ (versionInfo | async)?.full }}</p>
   </div>
 </footer>
-  </section>
-</md-sidenav-container>
+
+<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;
-            font-weight: 500;
+            text-decoration: underline;
         }
         &: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

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