use CSS fork ribbon

afeld · afeld · commit 225d2a91952b · 2015-11-23T00:25:40.000-05:00
looks better on retina displays
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,6 +4,10 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Bootstrap Table of Contents</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
+    <!--[if lt IE 9]>
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css" />
+    <![endif]-->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ site.baseurl }}/bootstrap-toc.css" media="screen" charset="utf-8">
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/highlight.css" charset="utf-8">
@@ -26,9 +30,11 @@
     </script>
   </head>
   <body data-spy="scroll" data-target="#toc">
-    <a href="https://github.com/afeld/bootstrap-toc">
-      <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">
-    </a>
+    <div class="github-fork-ribbon-wrapper right">
+      <div class="github-fork-ribbon">
+        <a href="https://github.com/afeld/bootstrap-toc">Fork me on GitHub</a>
+      </div>
+    </div>
     <div class="container">
       <div class="row">
         <div class="col-sm-3">
diff --git a/assets/screen.css b/assets/screen.css
@@ -1,3 +1,7 @@
+.right .github-fork-ribbon {
+  background-color: #563d7c;
+}
+
 .container {
   max-width: 800px;
   padding-top: 40px;
