feat(aio): font change and toolbar shadow

aio/src/index.html

@@ -21,7 +21,6 @@
         sizes="16x16">
 
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
 
   <!-- Google Analytics -->

aio/src/styles/0-base/_typography.scss

@@ -68,7 +68,7 @@
       font-size: 18px;
       font-weight: 300;
       color: white;
-      font-family: $support-font;
+      font-family: $main-font;
       text-transform: uppercase;
     }
 

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

@@ -131,8 +131,9 @@
 }
 
 .level-1 {
-  font-family: $support-font;
+  font-family: $main-font;
-  font-weight: 500;
+  font-size: 14px;
+  font-weight: 400;
   text-transform: uppercase;
   padding-left: 10px;
   transition: background-color 0.2s;
@@ -148,22 +149,12 @@
 }
 
 .level-3 {
-  font-family: $support-font;
+  font-family: $main-font;
   font-size: 14px;
   color: $mediumgray;
   padding-left: 30px;
 }
 
-@mixin rotate($degrees) {
-  -moz-transform: rotate($degrees);
-  -webkit-transform: rotate($degrees);
-  -o-transform: rotate($degrees);
-  -ms-transform: rotate($degrees);
-  transform: rotate($degrees);
-  transition: transform 150ms;
-  transition-timing-function: ease-in-out;
-}
-
 .level-1.expanded .material-icons, .level-2.expanded .material-icons {
   @include rotate(90deg);
 }

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

@@ -3,6 +3,10 @@ aio-top-menu {
   flex-direction: row;
   align-items: center;
   width: 80%;
+
+  @include bp(small) {
+      // background-color: red;
+  }
 }
 
 aio-top-menu ul {
@@ -20,7 +24,9 @@ aio-top-menu li {
 }
 
 md-toolbar.mat-toolbar {
-  box-shadow: 6px 0 6px rgba(0,0,0,0.10);
+  position: relative;
+  z-index: 10;
+  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30);
   padding: 0 16px 0px 0px;
 }
 

aio/src/styles/_constants.scss

@@ -2,7 +2,6 @@ $small-breakpoint-width: 840px;
 
 // TYPOGRAPHY
 $main-font: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
-$support-font: "Lato","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
 $code-font: "Droid Sans Mono", monospace;
 
 // COLOR PALETTE

aio/src/styles/main.scss

@@ -6,6 +6,7 @@
 @import './constants';
 
 // import global mixins
+@import './mixins';
 
 // import directories
 @import './0-base/base-dir';

aio/src/styles/mixins.scss

@@ -0,0 +1,9 @@
+@mixin rotate($degrees) {
+  -moz-transform: rotate($degrees);
+  -webkit-transform: rotate($degrees);
+  -o-transform: rotate($degrees);
+  -ms-transform: rotate($degrees);
+  transform: rotate($degrees);
+  transition: transform 150ms;
+  transition-timing-function: ease-in-out;
+}