feat(aio): add footer background

aio/content/examples/cb-i18n/src/app/app.component.ts

@@ -9,7 +9,7 @@ export class AppComponent {
   wolves = 0;
   gender = 'f';
   fly = true;
-  logo = 'https://angular.io/resources/images/logos/angular2/angular.png';
+  logo = 'https://angular.io/resources/images/logos/angular/angular.png';
   inc(i: number) {
     this.wolves = Math.min(5, Math.max(0, this.wolves + i));
   }

aio/src/app/app.component.html

@@ -3,7 +3,7 @@
     (click)="sidenav.toggle()" title="Docs menu">
     <md-icon>menu</md-icon>
   </button>
-  <a class="nav-link home" href="/"><img class="home-logo-link" src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
+  <a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
   <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
   <aio-search-box class="search-container" #searchBox></aio-search-box>
   <span class="fill-remaining-space"></span>
@@ -24,4 +24,6 @@
 
 <aio-search-results #searchResults></aio-search-results>
 
+<footer>
   <aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo" ></aio-footer>
+</footer>

aio/src/app/layout/footer/footer.component.html

@@ -1,6 +1,6 @@
-<footer>
+
   <div class="grid-fluid">
-    <div *ngFor="let node of nodes">
+    <div class="footer-block" *ngFor="let node of nodes">
       <h3>{{node.title}}</h3>
       <ul>
         <li *ngFor="let item of node.children">
@@ -16,7 +16,8 @@
     Code licensed under an <a href="license" title="License text" >MIT-style License</a>.
     Documentation licensed under
     <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
+  </p>
+  <p>
     Version {{versionInfo?.full}}.
   </p>
   <!-- TODO: twitter widget (but only on pages that use twitter) -->
-</footer>

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

@@ -2,15 +2,27 @@ footer {
   position: relative;
   line-height: 24px;
   flex: 1;
-  padding: 20px;
+  padding: 48px;
-  z-index: 10;
+  z-index: 0;
   background-color: $blue;
   color: $offwhite;
   font-weight: 300;
 
+  aio-footer {
+    position: relative;
+    z-index: 0;
+  }
+
+  .footer-block {
+    margin: 0 24px;
+    vertical-align: top;
+  }
+
   a {
       color: $offwhite;
       text-decoration: none;
+      z-index: 20;
+      position: relative;
       &:hover {
         text-decoration: underline;
       }
@@ -22,7 +34,10 @@ footer {
     cursor: pointer;
   }
   h3 {
-    font-size: 130%;
+    font-size: 16px;
+    text-transform: uppercase;
+    font-weight: 400;
+    margin: 0 0 16px;
   }
   p {
     text-align: center;
@@ -34,23 +49,10 @@ footer {
     display: -webkit-flex;
     display: flex;
 
-    -webkit-flex-direction: row;
+    justify-content: center;
-    -ms-flex-direction: row;
-    flex-direction: row;
-
-    -webkit-justify-content: space-around;
-    -ms-flex-pack: distribute;
-    justify-content: space-around;
-
-    -webkit-align-items: flex-start;
-    -ms-flex-align: start;
-    align-items: flex-start;
-
-    -webkit-align-content: flex-start;
-    -ms-flex-line-pack: start;
-    align-content: flex-start;
 
     text-align: left;
+    margin: 0 0 40px;
 
     ul {
       list-style-position: inside;
@@ -78,7 +80,7 @@ footer {
 }
 
 footer::after {
-    // content: "";
+    content: "";
     position: absolute;
     z-index: 10;
     top: 0;
@@ -98,6 +100,6 @@ footer::after {
         url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 1512px repeat-y,
         url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 1680px repeat-y,
         url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 1848px repeat-y;
-    opacity: 0.1;
+    opacity: 0.05;
     background-size: 160px auto;
 }

aio/src/styles/1-layouts/_top-menu.scss

@@ -17,11 +17,6 @@
   height: 40px;
 }
 
-.home-logo-link {
-  height: 40px;
-  margin-right: 20px;
-}
-
 @media (max-width: 700px) {
   .nav-link {
     font-size: 80%;