From e3b98bcd1ca767e0030ff7f68bfefab94bbc376b Mon Sep 17 00:00:00 2001
From: Kirill Pimenov <kirill@parity.io>
Date: Wed, 6 Feb 2019 19:12:41 +0100
Subject: [PATCH] Add Github link

---
 src/App.vue               |  4 +-
 src/components/ForkMe.vue | 79 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ForkMe.vue

diff --git a/src/App.vue b/src/App.vue
index ca43949..63fd57c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+    <ForkMe url="https://github.com/paritytech/banana_split"/>
     <GeneralInfo/>
     <div v-if="secure">
       <router-view/>
@@ -17,10 +18,11 @@
 import GeneralInfo from './components/GeneralInfo'
 import GoOfflineInfo from './components/GoOfflineInfo'
 import SavePageInfo from './components/SavePageInfo'
+import ForkMe from './components/ForkMe'
 
 export default {
   name: 'App',
-  components: {GeneralInfo, GoOfflineInfo, SavePageInfo},
+  components: {GeneralInfo, GoOfflineInfo, SavePageInfo, ForkMe},
   computed: {
     localFile: function() {
       return (window.location.protocol === 'file:');
diff --git a/src/components/ForkMe.vue b/src/components/ForkMe.vue
new file mode 100644
index 0000000..5e80311
--- /dev/null
+++ b/src/components/ForkMe.vue
@@ -0,0 +1,79 @@
+<template>
+    <span id="forkongithub">
+        <a v-bind:href="url">🥄Fork me on GitHub</a>
+    </span>
+</template>
+
+<script>
+export default {
+    name: "ForkMe",
+    props: {
+        url: String
+    }
+}
+</script>
+>
+
+<style>
+#forkongithub a {
+    background: #000;
+    color: #fff;
+    text-decoration: none;
+    font-family: arial, sans-serif;
+    text-align: center;
+    font-weight: bold;
+    padding: 5px 40px;
+    font-size: 1rem;
+    line-height: 2rem;
+    position: relative;
+    transition: 0.5s;
+}
+
+#forkongithub a:hover {
+    background: #c11;
+    color: #fff;
+}
+
+#forkongithub a::before,
+#forkongithub a::after {
+    content: "";
+    width: 100%;
+    display: block;
+    position: absolute;
+    top: 1px;
+    left: 0;
+    height: 1px;
+    background: #fff;
+}
+
+#forkongithub a::after {
+    bottom: 1px;
+    top: auto;
+}
+
+@media screen and (min-width:800px) {
+    #forkongithub {
+        position: absolute;
+        display: block;
+        top: 0;
+        right: 0;
+        width: 200px;
+        overflow: hidden;
+        height: 200px;
+        z-index: 9999;
+    }
+
+    #forkongithub a {
+        width: 200px;
+        position: absolute;
+        top: 60px;
+        right: -60px;
+        transform: rotate(45deg);
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
+    }
+}
+</style>
\ No newline at end of file