From acf57def13db4ad0d9bc33291f16f1adbf59b767 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Wed, 22 Mar 2017 22:34:53 -0700
Subject: [PATCH] feat(aio): marketing responsive items and footer

---
 aio/src/app/app.component.html                | 23 ++++++++++---------
 aio/src/styles/1-layouts/_footer.scss         |  9 ++++++--
 aio/src/styles/1-layouts/_layouts-dir.scss    |  1 +
 .../styles/1-layouts/_marketing-layout.scss   | 12 ++++++++++
 aio/src/styles/1-layouts/_search-results.scss |  6 ++++-
 aio/src/styles/1-layouts/_sidenav.scss        |  7 ++++++
 6 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 aio/src/styles/1-layouts/_marketing-layout.scss

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 598a5a2b3f..f6d79ee6a3 100644
--- a/aio/src/app/app.component.html
+++ b/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>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/_footer.scss
index f4f091ba28..8eb91ce861 100644
--- a/aio/src/styles/1-layouts/_footer.scss
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_layouts-dir.scss b/aio/src/styles/1-layouts/_layouts-dir.scss
index fb15941007..010be8ad50 100644
--- a/aio/src/styles/1-layouts/_layouts-dir.scss
+++ b/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';
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
new file mode 100644
index 0000000000..6360dbe040
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_search-results.scss b/aio/src/styles/1-layouts/_search-results.scss
index be7f9d6207..63b79a0401 100644
--- a/aio/src/styles/1-layouts/_search-results.scss
+++ b/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;
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 26637827b1..60553b7a3b 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/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%;
+  }
 }
\ No newline at end of file