Add footer
This commit is contained in:
Boris Kubiak
parent
9e2ba5f4a6
commit
9535ff6be2
7 changed files with 130 additions and 20 deletions
58
src/App.vue
58
src/App.vue
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="container" id="content">
|
||||
<!--Headline-->
|
||||
<headline></headline>
|
||||
|
||||
|
|
@ -40,6 +40,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!--Footer-->
|
||||
<foot></foot>
|
||||
|
||||
<!--Github corner-->
|
||||
<corner></corner>
|
||||
</div>
|
||||
|
|
@ -51,21 +54,14 @@
|
|||
import Headline from './vue/Headline';
|
||||
import Description from './vue/Description';
|
||||
import Err from './vue/Error';
|
||||
import Input from './vue/Input';
|
||||
import UserInput from './vue/Input';
|
||||
import Statistics from './vue/Statistics';
|
||||
import Result from './vue/Result';
|
||||
import Corner from './vue/Corner';
|
||||
import Foot from './vue/Footer';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
headline: Headline,
|
||||
description: Description,
|
||||
error: Err,
|
||||
userInput: Input,
|
||||
statistics: Statistics,
|
||||
result: Result,
|
||||
corner: Corner,
|
||||
},
|
||||
components: {Headline, Description, Err, UserInput, Statistics, Result, Corner, Foot},
|
||||
data: function () {
|
||||
return {
|
||||
running: false,
|
||||
|
|
@ -234,7 +230,6 @@
|
|||
padding: 0
|
||||
font-family: 'Lato', sans-serif
|
||||
background: $background
|
||||
margin: 8em 0
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, label
|
||||
margin: 0
|
||||
|
|
@ -254,6 +249,10 @@
|
|||
color: $white-text
|
||||
font-weight: 400
|
||||
|
||||
#content
|
||||
margin-top: 8em
|
||||
margin-bottom: 6em
|
||||
|
||||
/*-- Fonts --*/
|
||||
|
||||
@font-face
|
||||
|
|
@ -277,14 +276,39 @@
|
|||
src: local('Montserrat Bold'), local('Montserrat-Bold'), url(./assets/fonts/montserrat-bold.woff2) format('woff2')
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
|
||||
|
||||
@font-face
|
||||
font-family: 'icomoon'
|
||||
src: url(./assets/fonts/icomoon.woff) format('woff')
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
|
||||
[class^="icon-"], [class*=" icon-"]
|
||||
font-family: 'icomoon' !important
|
||||
speak: none
|
||||
font-style: normal
|
||||
font-weight: normal
|
||||
font-variant: normal
|
||||
text-transform: none
|
||||
line-height: 1
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
|
||||
.icon-star:before
|
||||
content: "\e900"
|
||||
.icon-download:before
|
||||
content: "\e901"
|
||||
.icon-ethereum:before
|
||||
content: "\e902"
|
||||
|
||||
/*-- Responsive design --
|
||||
|
||||
@media screen and (max-width: 1024px)
|
||||
body
|
||||
margin: 7em 0 5em 0
|
||||
#content
|
||||
margin-top: 7em
|
||||
margin-bottom: 5em
|
||||
|
||||
@media screen and (max-width: 640px)
|
||||
body
|
||||
margin: 5em 0 4em 0
|
||||
|
||||
#content
|
||||
margin-top: 5em
|
||||
margin-bottom: 4em
|
||||
</style>
|
||||
|
|
|
|||
BIN
src/assets/fonts/icomoon.woff
Normal file
BIN
src/assets/fonts/icomoon.woff
Normal file
Binary file not shown.
BIN
src/assets/images/favicon.psd
Normal file
BIN
src/assets/images/favicon.psd
Normal file
Binary file not shown.
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a href="https://github.com/bokub/vanity-eth" aria-label="View source on Github">
|
||||
<a href="https://github.com/bokub/vanity-eth" target="_blank" aria-label="View source on Github">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#fff"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
Vanity-ETH works perfectly offline! Once the web page is loaded, you can turn off the internet and continue
|
||||
playing.<br>
|
||||
You can also download the latest build of Vanity-ETH on
|
||||
<a href="https://github.com/bokub/vanity-eth/wiki/download-Vanity-ETH">Github</a> and use it
|
||||
<a href="https://github.com/bokub/vanity-eth/wiki/download-Vanity-ETH" target="_blank">Github</a> and use it
|
||||
completely offline.<br>
|
||||
Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate
|
||||
Ethereum addresses.
|
||||
|
|
|
|||
86
src/vue/Footer.vue
Normal file
86
src/vue/Footer.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-6 addr">
|
||||
Tips:
|
||||
<span class="donation-address" v-text="tipsAddress"></span>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-4 no-gutter">
|
||||
<a :href="'https://etherscan.io/address/' + tipsAddress" target="_blank">
|
||||
<button type="button">
|
||||
<i class="icon-ethereum"></i> Donate
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 no-gutter">
|
||||
<a href="https://github.com/bokub/vanity-eth/stargazers" target="_blank">
|
||||
<button type="button" id="btn-star">
|
||||
<i class="icon-star"></i> Star me
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4 no-mobile no-gutter">
|
||||
<a href="https://github.com/bokub/vanity-eth/wiki/download-Vanity-ETH" target="_blank">
|
||||
<button type="button" id="btn-download">
|
||||
<i class="icon-download"></i> Download
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
tipsAddress: '0xAceBabe64807cb045505b268ef253D8fC2FeF5Bc'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
@import "../css/variables"
|
||||
footer
|
||||
padding: 1.5rem 0
|
||||
background-color: $panel-background
|
||||
color: $white-text
|
||||
.addr
|
||||
margin-bottom: 20px
|
||||
.donation-address
|
||||
font-family: monospace
|
||||
font-size: 1.2em
|
||||
color: $grey-text
|
||||
margin-left: 15px
|
||||
word-break: break-all
|
||||
button
|
||||
border: none
|
||||
outline: none
|
||||
color: $white-text
|
||||
padding: 0 0.8em
|
||||
line-height: 40px
|
||||
font-weight: 500
|
||||
cursor: pointer
|
||||
-webkit-appearance: none
|
||||
background-color: $teal
|
||||
i
|
||||
font-size: 1.3em
|
||||
position: relative
|
||||
top: 2px
|
||||
color: lighten($teal, 40)
|
||||
&:hover
|
||||
background-color: $yellow
|
||||
i
|
||||
color: lighten($yellow, 40)
|
||||
|
||||
@media screen and (max-width: 576px)
|
||||
.no-mobile
|
||||
display: none
|
||||
</style>
|
||||
|
|
@ -35,7 +35,7 @@ module.exports = {
|
|||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.(png|woff2|ico)/,
|
||||
test: /\.(png|woff|woff2|ico)/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'url-loader'
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue