Replace the pixelated GitHub ribbon with a nicer CSS version.

.neutrinorc.js

@@ -28,7 +28,8 @@ module.exports = {
         html: {
           title: 'Firefox code coverage diff viewer',
           links: [
-            "https://fonts.googleapis.com/css?family=Fira+Sans:300,400"
+            "https://fonts.googleapis.com/css?family=Fira+Sans:300,400",
+            "https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css"
           ]
         },
         env: Object.keys(acceptedExternalEnvs)

src/components/githubRibbon.jsx

@@ -1,11 +1,7 @@
 import settings from '../settings';
 
-const { REPO, GITHUB_RIBBON } = settings;
+const { REPO } = settings;
 
 export default () => (
-  <div className="github-ribbon">
-    <a href={`${REPO}`}>
-      <img src={`${GITHUB_RIBBON}`} alt="Fork me on GitHub" title="Fork me on GitHub" />
-    </a>
-  </div>
+  <a className="github-fork-ribbon" href={`${REPO}`} data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
 );

src/settings.js

@@ -23,7 +23,6 @@ const settings = {
   },
   REPO_NAME: 'mozilla-central',
   GH_GECKO_DEV: 'https://github.com/mozilla/gecko-dev',
-  GITHUB_RIBBON: 'https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png',
   HG_HOST: 'https://hg.mozilla.org',
   MIN_REVISION_LENGTH: 5,
   REPO: 'https://github.com/mozilla/firefox-code-coverage-frontend',

src/style.css

@@ -372,10 +372,7 @@ span.tests {
 	padding: 0.4em 0.8em;
 }
 
-/* placing GitHub Ribbon on top right corner*/
-.github-ribbon{
-	position: absolute;
-	top: 0;
-	right: 0;
-	border: 0;
+/* GitHub Ribbon (the default background color is #c00) */
+.github-fork-ribbon:before {
+	background-color: #090;
 }