Merge pull request #2075 from jackmu95/fix-styleguide-trigger-positioning

fix(footer): Improve styleguide trigger positioning

Author: alexwolfe-tp

public/_includes/_footer.jade

@@ -52,6 +52,6 @@ else
         li <a href="https://angular.cn/">中文版</a>
 
   footer(class="background-midnight")
-    small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license" class="text-snow">MIT-style License</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
-    a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow")
+    small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license">MIT-style License</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
+    a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger")
       span.icon-favorite

public/resources/css/module/_footer.scss

@@ -80,30 +80,34 @@
   footer {
     text-align: left;
     padding: ($unit * 2) ($unit * 6);
-    position: relative;
+
+    @include respond-to('mobile') {
+      text-align: center;
+    }
+
+    a {
+      color: $snow;
+    }
 
     .styleguide-trigger {
-      box-sizing: border-box;
-      position: absolute;
-      display: inline-block;
-      bottom: $unit * 2;
-      right: $unit * 2;
-      font-size: 14px;
-      line-height: 24px;
-      height: 24px;
-      margin: 0;
-      padding: 0 ($unit * 3);
-      opacity: .24;
-      transition: all .3s;
+      color: $darkgrey;
+      text-decoration: none;
+      float: right;
+      transition: color .3s;
+
+      @include respond-to('mobile') {
+        display: block;
+        margin-top: $unit;
+        font-size: 18px;
+        float: none;
+      }
 
       &:hover {
-        background: $blue-grey-700;
-        text-decoration: none;
+        color: $red-600;
       }
 
       .icon-favorite {
-        display: inline-block;
-        line-height: 24px;
+        line-height: 20px;
       }
     }
   }