Add Github link

This commit is contained in:
Kirill Pimenov 2019-02-06 19:12:41 +01:00
parent cf8daf5e30
commit e3b98bcd1c
No known key found for this signature in database
GPG Key ID: FBF0C4CB6A375D79
2 changed files with 82 additions and 1 deletions

View File

@ -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:');

79
src/components/ForkMe.vue Normal file
View File

@ -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>