Add "powered by" to footer

Author: samselikoff

addon/components/docs-svg-icon/component.js

@@ -4,7 +4,10 @@ import layout from './template';
 export default Component.extend({
   layout,
 
-  classNames: 'docs-svg-icon'
+  tagName: '',
+  height: 16,
+  width: 16,
+
 
 }).reopenClass({
 

addon/components/docs-svg-icon/styles.scss

@@ -1,20 +1,26 @@
 .docs-svg-icon {
-  display: inline-flex;
-  align-self: center;
-  position: relative;
-  height: 1em;
-  width: 1em;
-
-  svg {
-    height: 100%;
-    width: 100%;
-
-    // align with the baseline
-    bottom: -0.125em;
-    position: absolute;
-
-    &, * {
-      fill: currentColor;
-    }
+  &, * {
+    fill: currentColor;
   }
 }
+
+// .docs-svg-icon {
+//   display: inline-flex;
+//   align-self: center;
+//   position: relative;
+//   height: 1em;
+//   width: 1em;
+//
+//   svg {
+//     height: 100%;
+//     width: 100%;
+//
+//     // align with the baseline
+//     bottom: -0.125em;
+//     position: absolute;
+//
+//     &, * {
+//       fill: currentColor;
+//     }
+//   }
+// }

addon/components/docs-svg-icon/template.hbs

@@ -1 +1 @@
-{{svg-jar icon}}
+{{svg-jar icon height=height width=width class='docs-svg-icon'}}

addon/components/docs-viewer/x-nav/styles.scss

@@ -55,16 +55,36 @@
   }
 
   &-footer {
-    padding: 20px;
+    padding: 14px;
     text-align: center;
-    box-shadow: 0 0px 6px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0px 6px 1px rgba(0, 0, 0, 0.1);
   }
 
   &-footer-link {
-    opacity: 0.4;
+    opacity: 0.25;
+    color: inherit;
+    text-decoration: none;
 
     &:hover {
       opacity: 1;
     }
   }
+
+  &-footer-powered-by {
+    font-size: 11px;
+    margin-top: 6px;
+    margin-bottom: 0;
+    color: #bbb;
+    font-weight: 500;
+  }
+
+  &-footer-powered-by-link {
+    color: inherit;
+    text-decoration: none;
+    transition: opacity 0.15s;
+
+    &:hover {
+      color: #444;
+    }
+  }
 }

addon/components/docs-viewer/x-nav/template.hbs

@@ -36,7 +36,16 @@
 </div>
 
 <div class='docs-viewer__nav-footer'>
-  <a href={{packageJson.repository}} class='docs-viewer__nav-footer-link'>
-    {{svg-jar 'github' width=20 height=20}}
-  </a>
+  <div>
+    <a href={{packageJson.repository}} class='docs-viewer__nav-footer-link'>
+      {{svg-jar 'github' width=28 height=28}}
+    </a>
+  </div>
+  <div>
+    <p class='docs-viewer__nav-footer-powered-by'>Powered by
+      <a class='docs-viewer__nav-footer-powered-by-link' href="https://github.com/ember-learn/ember-cli-addon-docs">
+        AddonDocs
+      </a>
+    </p>
+  </div>
 </div>