feat(aio): marketing responsive items and footer

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

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