feat(aio): search result stying, add footer

aio/src/app/app.component.html

@@ -8,7 +8,6 @@
 <md-sidenav-container class="sidenav-container">
 
   <md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
-    <div class="version-info vertical-menu-item">{{ (versionInfo | async)?.full }}</div>
     <aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
     <aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
   </md-sidenav>
@@ -16,5 +15,14 @@
   <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>

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

@@ -0,0 +1,17 @@
+footer .footer {
+    background-color: $blue;
+    color: $offwhite;
+    text-align: center;
+    font-weight: 300;
+    a {
+        color: $offwhite;
+        text-decoration: none;
+        &:hover {
+            color: $darkgray;
+            font-weight: 500;
+        }
+        &:visited {
+        text-decoration: none;
+        }
+    }
+}

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

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

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

@@ -1,15 +1,31 @@
 .search-results {
-    background-color: $lightgray;
     padding: 20px;
+    color: $offwhite;
+    width: 100%;
+    height: auto;
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: $darkgray;
 }
 
-.search-result-item {
+.search-area {
-    color: $darkgray;
+    h2 {
+        font-size: 16px;
+        margin: 10px 0px 5px;
+    }
+    a {
+        font-size: 14px;
+        color: $lightgray;
         text-decoration: none;
         &:hover {
-        color: $blue
+            color: $blue;
+            font-weight: 500;
         }
         &:visited {
         text-decoration: none;
         }
     }
+}