Graphic improvements

This commit is contained in:
Boris Kubiak 2018-09-06 08:12:34 +02:00
parent aedaf61419
commit 13ab5183d9
9 changed files with 83 additions and 74 deletions

2
.gitignore vendored
View file

@ -1,4 +1,4 @@
node_modules node_modules
dist dist
stats.json
.idea .idea

View file

@ -40,6 +40,7 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"build:stats": "cross-env NODE_ENV=production webpack --json > stats.json",
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"lint": "eslint --ext .js,.vue src --fix", "lint": "eslint --ext .js,.vue src --fix",
"test": "eslint --ext .js,.vue src" "test": "eslint --ext .js,.vue src"

View file

@ -213,6 +213,9 @@
document.head.appendChild(i); document.head.appendChild(i);
}, },
initFathom: function () { initFathom: function () {
if (window.location.hostname === 'localhost') {
return; // No stats when coding
}
// Fathom - simple website analytics - https://github.com/usefathom/fathom // Fathom - simple website analytics - https://github.com/usefathom/fathom
/* eslint-disable */ /* eslint-disable */
(function (f, a, t, h, o, m) { (function (f, a, t, h, o, m) {
@ -264,12 +267,15 @@
@import "~bootstrap/scss/grid" @import "~bootstrap/scss/grid"
@import "css/variables" @import "css/variables"
@import "css/fonts"
body body
padding: 0 padding: 0
font-family: 'Lato', sans-serif font-family: 'Lato', sans-serif
background: $bg-fallback background: $bg-fallback
background: linear-gradient(140deg, $bg-2 0%, $bg-1 100%) background: linear-gradient(140deg, $bg-2 0%, $bg-1 100%)
background-attachment: fixed background-attachment: fixed
font-size: 16px
h1, h2, h3, h4, h5, h6, p, label h1, h2, h3, h4, h5, h6, p, label
margin: 0 margin: 0
@ -313,8 +319,8 @@
border: none border: none
outline: none outline: none
color: $text-opposite color: $text-opposite
padding: 0.6em padding: 8px
font-size: 1.3em font-size: 19px
font-weight: 500 font-weight: 500
margin: 1.3em 0 0 0 margin: 1.3em 0 0 0
cursor: pointer cursor: pointer
@ -327,61 +333,6 @@
background: $disabled background: $disabled
cursor: auto cursor: auto
/*-- Fonts --*/
@font-face
font-family: 'Lato'
font-style: normal
font-weight: 400
src: local('Lato Regular'), local('Lato-Regular'), url(./assets/fonts/lato-regular.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: 'Montserrat'
font-style: normal
font-weight: 400
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(./assets/fonts/montserrat.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: 'Montserrat'
font-style: normal
font-weight: 700
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: 'Roboto Mono'
font-style: normal
font-weight: 400
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(./assets/fonts/roboto-mono.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
@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"
.icon-lock:before
content: "\e903"
/*-- Responsive design -- /*-- Responsive design --

53
src/css/fonts.sass Normal file
View file

@ -0,0 +1,53 @@
@font-face
font-family: 'Lato'
font-style: normal
font-weight: 400
src: local('Lato Regular'), local('Lato-Regular'), url(./assets/fonts/lato-regular.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: 'Montserrat'
font-style: normal
font-weight: 400
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(./assets/fonts/montserrat.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: 'Montserrat'
font-style: normal
font-weight: 700
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: 'Roboto Mono'
font-style: normal
font-weight: 400
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(./assets/fonts/roboto-mono.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
@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"
.icon-lock:before
content: "\e903"

View file

@ -1,7 +1,8 @@
<template> <template>
<div class="panel"> <div class="panel">
<p> <p>
Vanity-ETH is an open source tool using your web browser to generate Ethereum vanity addresses. Vanity-ETH is an open source tool using your web browser to generate Ethereum vanity addresses.<br>
Enter a short prefix of your choice below, and click generate to start.
</p> </p>
<h2>What's a vanity address?</h2> <h2>What's a vanity address?</h2>
@ -11,7 +12,7 @@
<span class="monospace">0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E</span> <span class="monospace">0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E</span>
</p> </p>
<h2>Usage</h2> <h2>How it works</h2>
<p> <p>
Enter the prefix of your choice below, and click generate to start. Your browser will generate lots of random Enter the prefix of your choice below, and click generate to start. Your browser will generate lots of random
addresses until one begins with your prefix.<br> addresses until one begins with your prefix.<br>

View file

@ -4,13 +4,13 @@
<div class="row"> <div class="row">
<div class="col-12 col-lg-6 address"> <div class="col-12 col-lg-6 address">
Tips: Tips:
<a :href="'https://etherscan.io/address/' + tipsAddress" target="_blank" v-text="tipsAddress"></a> <a :href="`https://etherscan.io/address/${tipsAddress}#tokentxns`" target="_blank" v-text="tipsAddress"></a>
</div> </div>
<div class="col-12 col-lg-6 links"> <div class="col-12 col-lg-6 links">
<a :href="'https://etherdonation.com/d?to=' + tipsAddress" target="_blank"> <a :href="`https://etherdonation.com/d?to=${tipsAddress}`" target="_blank">
<i class="icon-ethereum"></i>&nbsp;&nbsp;&nbsp;Donate <i class="icon-ethereum"></i>&nbsp;&nbsp;&nbsp;Donate
</a> </a>
<a href="https://github.com/bokub/vanity-eth/stargazers" target="_blank"> <a href="https://github.com/bokub/vanity-eth" target="_blank">
<i class="icon-star"></i>&nbsp;&nbsp;&nbsp;Star&nbsp;me <i class="icon-star"></i>&nbsp;&nbsp;&nbsp;Star&nbsp;me
</a> </a>
<a href="https://github.com/bokub/vanity-eth/wiki/download-Vanity-ETH" target="_blank"> <a href="https://github.com/bokub/vanity-eth/wiki/download-Vanity-ETH" target="_blank">

View file

@ -102,9 +102,12 @@
<style lang="sass" scoped> <style lang="sass" scoped>
@import "../css/variables" @import "../css/variables"
.panel
min-height: 280px
.error-text .error-text
display: none display: none
font-size: 0.85em font-size: 14px
color: $error color: $error
.error .error
@ -114,13 +117,13 @@
display: block display: block
.example .example
font-size: 0.85em font-size: 14px
text-overflow: ellipsis text-overflow: ellipsis
overflow-x: hidden overflow-x: hidden
.monospace .monospace
font-family: $monospace-font font-family: $monospace-font
.check .check
margin: .5em 0 margin: 12px 0
.checkbox .checkbox
margin-bottom: 4px margin-bottom: 4px
@ -128,7 +131,7 @@
line-height: 27px line-height: 27px
cursor: pointer cursor: pointer
position: relative position: relative
font-size: 1.2em font-size: 18px
color: $text color: $text
font-weight: 400 font-weight: 400
&:last-child &:last-child
@ -167,16 +170,15 @@
opacity: 1 opacity: 1
.threads .threads
font-size: 1.2em font-size: 18px
h4 h4
display: inline display: inline
input[type=button].square-btn input[type=button].square-btn
display: inline-block display: inline-block
width: 24px width: 24px
height: 24px height: 24px
margin: 0 5px 0 0 margin: 0 5px 2px 0
padding: 0 padding: 0
line-height: 1em line-height: 1em
font-size: 1.2em
</style> </style>

View file

@ -56,13 +56,13 @@
color: $text-alt color: $text-alt
margin-left: 15px margin-left: 15px
word-break: break-all word-break: break-all
font-size: 15px
.panel > div:not(:last-child) .panel > div:not(:last-child)
margin-bottom: 15px margin-bottom: 15px
.save .save
font-size: 1em margin-top: 30px
margin-top: 1.6em
@media screen and (min-width: 992px) @media screen and (min-width: 992px)
.save .save

View file

@ -79,9 +79,10 @@
<style lang="sass" scoped> <style lang="sass" scoped>
@import "../css/variables" @import "../css/variables"
.panel > div:not(:last-child) .panel > div:not(:last-child)
margin-bottom: 15px margin-bottom: 17px
.panel .panel
min-height: 280px
padding-bottom: 3.2em padding-bottom: 3.2em
> div:not(.percentage) > div:not(.percentage)
clear: both clear: both
@ -107,7 +108,7 @@
top: -10px top: -10px
left: 15px left: 15px
div div
font-size: 0.75em font-size: 12px
h5 h5
color: $text color: $text
font-weight: 500 font-weight: 500