Add footer

index.html

@@ -28,6 +28,17 @@
 
       <h3 class="output-title">SVG</h3>
       <pre class="badge-svg"></pre>
+
+      <footer>
+        <span class="version"></span>
+        -
+        <a rel="noopener noreferrer" target="_blank" href="//github.com/lukechilds/tippin-badge">Source code</a>
+        -
+        <a rel="noopener noreferrer" target="_blank" href="//github.com/lukechilds/tippin-badge/issues">Report a bug</a>
+        <div class="me">
+          A thing by <a rel="noopener noreferrer" target="_blank" href="//lukechilds.co">@lukechilds</a>
+        </div>
+      </footer>
     </div>
 
     <script src="./script.js"></script>

script.js

@@ -1,6 +1,9 @@
+const {version} = require('./package');
 const badgen = require('badgen');
 const escape = require('escape-html');
 
+document.querySelector('.version').innerText = `v${version}`;
+
 const badgeLinkUrl = username => `https://tippin.me/@${username}`;
 const badgeImageUrl = username => `https://badgen.net/badge/%E2%9A%A1%EF%B8%8Ftippin.me/@${username}/F0918E`;
 

style.css

@@ -5,6 +5,15 @@ body {
   background-color: #F0918E;
 }
 
+a {
+  color: #E45D58;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+a:hover {
+  color: #DB2A24;
+}
+
 .container {
   width: 800px;
   margin: 1em auto 0;
@@ -59,5 +68,15 @@ pre {
   font-size: 0.8em;
   background: rgba(255, 255, 255, 0.3);
   padding: 1em;
+  border-radius: 3px;
   overflow-x: scroll;
 }
+
+footer {
+  margin-top: 3em;
+  text-align: left;
+}
+
+footer .me {
+  float: right;
+}