feat(aio): search results and code margins styling

aio/src/app/app.component.html

@@ -17,6 +17,8 @@
   </section>
 </md-sidenav-container>
 
+<aio-search-results #searchResults></aio-search-results>
+
 <footer>
   <div class="footer">
     <p>Powered by Google ©2010-2017. Code licensed under an <a href="/license">MIT-style License</a>.</p>
@@ -25,5 +27,3 @@
     <p class="version-info">Version Info | {{ (versionInfo | async)?.full }}</p>
   </div>
 </footer>
-
-<aio-search-results #searchResults></aio-search-results>

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

@@ -1,12 +1,16 @@
 aio-search-results {
     z-index: 10;
+    padding: 20px;
 }
 
 .search-results {
+    display: flex;
+    flex-direction: row;
+    overflow: scroll;
     padding: 80px 20px 20px;
     color: $offwhite;
     width: 100%;
-    height: auto;
+    max-height: 40%;
     position: fixed;
     display: flex;
     top: 0;
@@ -16,6 +20,9 @@ aio-search-results {
 }
 
 .search-area {
+    display: flex;
+    flex-direction: column;
+    margin: 0px 10px;
     h2 {
         font-size: 16px;
         margin: 10px 0px 5px;
@@ -24,6 +31,7 @@ aio-search-results {
         font-size: 14px;
         color: $lightgray;
         text-decoration: none;
+        font-weight: 300;
         &:hover {
             color: $blue;
             font-weight: 500;

aio/src/styles/2-modules/_code.scss

@@ -3,13 +3,21 @@
     color: $darkgray;
 }
 
-.code-shell code {
+code-example[language=bash] code {
+    width: 100%;
+}
+
+.prettyprint {
+    margin: 24px auto;
+    display: flex;
+}
+
+.prettyprint.lang-bash code {
     @include codeblock($darkgray);
     color: $codegreen;
 }
 
 .code-example pre, code-example pre {
-    margin: 0px;
     padding: 0px;
     white-space: pre-wrap;
 }