Use SASS instead of CSS
This commit is contained in:
Boris
parent
6a346c405e
commit
6b13785d50
6 changed files with 925 additions and 319 deletions
|
|
@ -16,7 +16,7 @@ Install dependencies
|
|||
npm i
|
||||
```
|
||||
|
||||
Run the watcher to browserify JS while you code
|
||||
Run the watcher to compile while you code
|
||||
|
||||
```sh
|
||||
npm run-script watch
|
||||
|
|
|
|||
|
|
@ -1,303 +1 @@
|
|||
body {
|
||||
padding: 0;
|
||||
font-family: 'Lato', sans-serif;
|
||||
background: #000;
|
||||
margin: 8em 0;
|
||||
}
|
||||
|
||||
body a {
|
||||
transition: 0.5s all;
|
||||
-webkit-transition: 0.5s all;
|
||||
-moz-transition: 0.5s all;
|
||||
-o-transition: 0.5s all;
|
||||
}
|
||||
|
||||
input[type="button"], input[type="button"] {
|
||||
transition: 0.5s all;
|
||||
-webkit-transition: 0.5s all;
|
||||
-moz-transition: 0.5s all;
|
||||
-o-transition: 0.5s all;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: #fff;
|
||||
font-size: 3em;
|
||||
font-weight: 700;
|
||||
border: 4px solid #fff;
|
||||
width: 33%;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
.header h1 a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #fff;
|
||||
font-size: 1.5em;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 400;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 8em;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 1.5em 3em;
|
||||
background: #191919;
|
||||
margin-top: 3em;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form input[type="text"] {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
background: #191919;
|
||||
outline: none;
|
||||
font-size: 1.3em;
|
||||
padding: 1em 0;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.form input[type="button"] {
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #FFF;
|
||||
padding: 0.6em;
|
||||
font-size: 1.3em;
|
||||
font-weight: 500;
|
||||
margin: 1.3em 0 0 0;
|
||||
-webkit-appearance: none;
|
||||
background: #198a88;
|
||||
width: 100%;
|
||||
transition: 0.5s all;
|
||||
-webkit-transition: 0.5s all;
|
||||
-o-transition: 0.5s all;
|
||||
-moz-transition: 0.5s all;
|
||||
}
|
||||
|
||||
.form input[type="button"]:hover {
|
||||
background: #d78716;
|
||||
}
|
||||
|
||||
.check {
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-bottom: 4px;
|
||||
padding-left: 30px;
|
||||
font-size: 1.1em;
|
||||
line-height: 27px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
position: relative;
|
||||
font-size: 1.2em;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.checkbox:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.checkbox i {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 17.5em;
|
||||
display: block;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
outline: none;
|
||||
border: 1px solid #97A2A8;
|
||||
}
|
||||
|
||||
.checkbox i.left {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
outline: none;
|
||||
border: 1px solid #97A2A8;
|
||||
}
|
||||
|
||||
.checkbox input + i:after {
|
||||
content: '';
|
||||
background: url("../images/tick-mark.png") no-repeat 1px 2px;
|
||||
top: 4px;
|
||||
left: 2px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
font: normal 12px/16px FontAwesome;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.checkbox input + i:after {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
-o-transition: opacity 0.1s;
|
||||
-moz-transition: opacity 0.1s;
|
||||
-webkit-transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
.checkbox input {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
.checkbox input:checked + i:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.statistics {
|
||||
padding-bottom: 3.2em;
|
||||
}
|
||||
|
||||
.statistics > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.statistics > div:not(.percentage) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.probability {
|
||||
width: 85%;
|
||||
margin: 5px 0;
|
||||
height: 18px;
|
||||
background: #191919;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.probability-bar {
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: #d78716;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
float: right;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.percentage h5 {
|
||||
color: #fff;
|
||||
margin: 2px 0 0 14px;
|
||||
font-weight: 500;
|
||||
/* float: right; */
|
||||
}
|
||||
|
||||
#address, #private-key {
|
||||
font-family: monospace;
|
||||
font-size: 1.2em;
|
||||
color: #969696;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
/*-- Responsive design --*/
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.header h1 {
|
||||
font-size: 2.8em;
|
||||
width: 32%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.header h1 {
|
||||
font-size: 2.5em;
|
||||
border: 3px solid #fff;
|
||||
width: 34%;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.4em;
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 7em 0 5em 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.header h1 {
|
||||
width: 43%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.header h1 {
|
||||
width: 46%;
|
||||
font-size: 2.2em;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.3em;
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 5em 0 4em 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.header h1 {
|
||||
width: 57%;
|
||||
font-size: 2em;
|
||||
padding: 7px;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.header h1 {
|
||||
width: 73%;
|
||||
font-size: 1.6em;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
body{padding:0;font-family:Lato,sans-serif;background:#000;margin:8em 0}body a{-webkit-transition:.5s all;transition:.5s all}input[type=button]{-webkit-transition:.5s all;transition:.5s all}h1,h2,h3,h4,h5,h6,label,p{margin:0}.header{margin-bottom:8em}.header h1{color:#fff;font-size:3em;font-weight:700;border:4px solid #fff;width:33%;margin:0 auto;padding:10px;font-family:Montserrat,sans-serif}.header h1 a{color:#fff;text-decoration:none;display:block}.header p{color:#fff;font-size:1.5em;letter-spacing:2px;font-weight:400;font-family:Montserrat,sans-serif;margin-top:1em}.panel{padding:1.5em 3em;background:#191919;margin-top:3em;color:#fff;font-weight:400}.form input[type=text]{width:100%;color:#fff;background:#191919;outline:0;font-size:1.3em;padding:1em 0;border:none;-webkit-appearance:none}.form input[type=button]{border:none;outline:0;color:#fff;padding:.6em;font-size:1.3em;font-weight:500;margin:1.3em 0 0 0;-webkit-appearance:none;background:#198a88;width:100%;-webkit-transition:.5s all;transition:.5s all}.form input[type=button]:hover{background:#d78716}.check{margin:.5em 0}.checkbox{margin-bottom:4px;padding-left:30px;line-height:27px;cursor:pointer;position:relative;font-size:1.2em;color:#fff;font-weight:400}.checkbox:last-child{margin-bottom:0}.checkbox i{position:absolute;bottom:4px;left:17.5em;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox i.left{position:absolute;bottom:4px;left:0;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox input{position:absolute;left:-9999px}.checkbox input+i:after{content:'';background:url(../images/tick-mark.png) no-repeat 1px 2px;top:4px;left:2px;width:15px;height:15px;font:normal 12px/16px FontAwesome;text-align:center;position:absolute;opacity:0;-webkit-transition:opacity .1s;transition:opacity .1s}.checkbox input:checked+i:after{opacity:1}.statistics{padding-bottom:3.2em}.statistics>div{margin-bottom:15px}.statistics>div:not(.percentage){clear:both}.probability{width:85%;margin:5px 0;height:18px;background:#191919;float:left}.probability-bar{height:100%;display:block;background-color:#d78716}.percentage{float:right;width:15%}.percentage h5{color:#fff;margin:2px 0 0 14px;font-weight:500}#address,#private-key{font-family:monospace;font-size:1.2em;color:#969696;margin-left:15px}@media screen and (max-width:1280px){.header h1{font-size:2.8em;width:32%}}@media screen and (max-width:1024px){.header h1{font-size:2.5em;border:3px solid #fff;width:34%}.header p{font-size:1.4em;margin-top:.8em}body{margin:7em 0 5em 0}.header{margin-bottom:4em}}@media screen and (max-width:768px){.header h1{width:43%}}@media screen and (max-width:640px){.header h1{width:46%;font-size:2.2em;padding:8px}.header p{font-size:1.3em;margin-top:.7em}body{margin:5em 0 4em 0}.header{margin-bottom:4em}}@media screen and (max-width:480px){.header h1{width:57%;font-size:2em;padding:7px;border:2px solid #fff}.header p{font-size:1.2em}}@media screen and (max-width:320px){.header h1{width:73%;font-size:1.6em;padding:6px}.header p{font-size:1em}}
|
||||
209
css/stylesheet.sass
Normal file
209
css/stylesheet.sass
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
body
|
||||
padding: 0
|
||||
font-family: 'Lato', sans-serif
|
||||
background: #000
|
||||
margin: 8em 0
|
||||
a
|
||||
transition: 0.5s all
|
||||
|
||||
input[type="button"]
|
||||
transition: 0.5s all
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, label
|
||||
margin: 0
|
||||
|
||||
.header
|
||||
h1
|
||||
color: #fff
|
||||
font-size: 3em
|
||||
font-weight: 700
|
||||
border: 4px solid #fff
|
||||
width: 33%
|
||||
margin: 0 auto
|
||||
padding: 10px
|
||||
font-family: 'Montserrat', sans-serif
|
||||
a
|
||||
color: #fff
|
||||
text-decoration: none
|
||||
display: block
|
||||
p
|
||||
color: #fff
|
||||
font-size: 1.5em
|
||||
letter-spacing: 2px
|
||||
font-weight: 400
|
||||
font-family: 'Montserrat', sans-serif
|
||||
margin-top: 1em
|
||||
margin-bottom: 8em
|
||||
|
||||
.panel
|
||||
padding: 1.5em 3em
|
||||
background: #191919
|
||||
margin-top: 3em
|
||||
color: #fff
|
||||
font-weight: 400
|
||||
|
||||
.form input
|
||||
&[type="text"]
|
||||
width: 100%
|
||||
color: #fff
|
||||
background: #191919
|
||||
outline: none
|
||||
font-size: 1.3em
|
||||
padding: 1em 0
|
||||
border: none
|
||||
-webkit-appearance: none
|
||||
&[type="button"]
|
||||
border: none
|
||||
outline: none
|
||||
color: #FFF
|
||||
padding: 0.6em
|
||||
font-size: 1.3em
|
||||
font-weight: 500
|
||||
margin: 1.3em 0 0 0
|
||||
-webkit-appearance: none
|
||||
background: #198a88
|
||||
width: 100%
|
||||
transition: 0.5s all
|
||||
&:hover
|
||||
background: #d78716
|
||||
|
||||
.check
|
||||
margin: .5em 0
|
||||
|
||||
.checkbox
|
||||
margin-bottom: 4px
|
||||
padding-left: 30px
|
||||
line-height: 27px
|
||||
cursor: pointer
|
||||
position: relative
|
||||
font-size: 1.2em
|
||||
color: #fff
|
||||
font-weight: 400
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
i
|
||||
position: absolute
|
||||
bottom: 4px
|
||||
left: 17.5em
|
||||
display: block
|
||||
width: 19px
|
||||
height: 19px
|
||||
outline: none
|
||||
border: 1px solid #97A2A8
|
||||
&.left
|
||||
position: absolute
|
||||
bottom: 4px
|
||||
left: 0
|
||||
display: block
|
||||
width: 19px
|
||||
height: 19px
|
||||
outline: none
|
||||
border: 1px solid #97A2A8
|
||||
input
|
||||
+ i:after
|
||||
content: ''
|
||||
background: url("../images/tick-mark.png") no-repeat 1px 2px
|
||||
top: 4px
|
||||
left: 2px
|
||||
width: 15px
|
||||
height: 15px
|
||||
font: normal 12px/16px FontAwesome
|
||||
text-align: center
|
||||
position: absolute
|
||||
opacity: 0
|
||||
transition: opacity 0.1s
|
||||
position: absolute
|
||||
left: -9999px
|
||||
&:checked + i:after
|
||||
opacity: 1
|
||||
|
||||
.statistics
|
||||
padding-bottom: 3.2em
|
||||
> div
|
||||
margin-bottom: 15px
|
||||
&:not(.percentage)
|
||||
clear: both
|
||||
|
||||
.probability
|
||||
width: 85%
|
||||
margin: 5px 0
|
||||
height: 18px
|
||||
background: #191919
|
||||
float: left
|
||||
|
||||
.probability-bar
|
||||
height: 100%
|
||||
display: block
|
||||
background-color: #d78716
|
||||
|
||||
.percentage
|
||||
float: right
|
||||
width: 15%
|
||||
h5
|
||||
color: #fff
|
||||
margin: 2px 0 0 14px
|
||||
font-weight: 500
|
||||
|
||||
#address, #private-key
|
||||
font-family: monospace
|
||||
font-size: 1.2em
|
||||
color: #969696
|
||||
margin-left: 15px
|
||||
|
||||
/*-- Responsive design --
|
||||
|
||||
@media screen and (max-width: 1280px)
|
||||
.header h1
|
||||
font-size: 2.8em
|
||||
width: 32%
|
||||
|
||||
@media screen and (max-width: 1024px)
|
||||
.header
|
||||
h1
|
||||
font-size: 2.5em
|
||||
border: 3px solid #fff
|
||||
width: 34%
|
||||
p
|
||||
font-size: 1.4em
|
||||
margin-top: 0.8em
|
||||
body
|
||||
margin: 7em 0 5em 0
|
||||
.header
|
||||
margin-bottom: 4em
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
.header h1
|
||||
width: 43%
|
||||
|
||||
@media screen and (max-width: 640px)
|
||||
.header
|
||||
h1
|
||||
width: 46%
|
||||
font-size: 2.2em
|
||||
padding: 8px
|
||||
p
|
||||
font-size: 1.3em
|
||||
margin-top: 0.7em
|
||||
body
|
||||
margin: 5em 0 4em 0
|
||||
.header
|
||||
margin-bottom: 4em
|
||||
|
||||
@media screen and (max-width: 480px)
|
||||
.header
|
||||
h1
|
||||
width: 57%
|
||||
font-size: 2em
|
||||
padding: 7px
|
||||
border: 2px solid #fff
|
||||
p
|
||||
font-size: 1.2em
|
||||
|
||||
@media screen and (max-width: 320px)
|
||||
.header
|
||||
h1
|
||||
width: 73%
|
||||
font-size: 1.6em
|
||||
padding: 6px
|
||||
p
|
||||
font-size: 1em
|
||||
36
gulpfile.js
36
gulpfile.js
|
|
@ -5,6 +5,9 @@ const browserify = require('browserify');
|
|||
const babel = require('gulp-babel');
|
||||
const uglify = require('gulp-uglify');
|
||||
const source = require('vinyl-source-stream');
|
||||
const sass = require('gulp-sass');
|
||||
const autoprefixer = require('gulp-autoprefixer');
|
||||
const cleanCSS = require('gulp-clean-css');
|
||||
|
||||
// Browserify
|
||||
gulp.task('browserify', cb => {
|
||||
|
|
@ -15,8 +18,17 @@ gulp.task('browserify', cb => {
|
|||
], cb);
|
||||
});
|
||||
|
||||
// Browserify then babelify, then uglify
|
||||
gulp.task('build', ['browserify'], cb => {
|
||||
// SASS
|
||||
gulp.task('sass', cb => {
|
||||
pump([
|
||||
gulp.src('css/stylesheet.sass'),
|
||||
sass().on('error', sass.logError),
|
||||
gulp.dest('css')
|
||||
], cb);
|
||||
});
|
||||
|
||||
// Build javascript
|
||||
gulp.task('build-js', ['browserify'], cb => {
|
||||
pump([
|
||||
gulp.src('js/bundle.js'),
|
||||
babel({presets: ['env']}),
|
||||
|
|
@ -25,7 +37,25 @@ gulp.task('build', ['browserify'], cb => {
|
|||
], cb);
|
||||
});
|
||||
|
||||
// Watch changes and browserify on the fly
|
||||
// Build CSS
|
||||
gulp.task('build-css', ['sass'], cb => {
|
||||
pump([
|
||||
gulp.src('css/stylesheet.css'),
|
||||
autoprefixer({
|
||||
browsers: ['last 2 versions'],
|
||||
remove: false,
|
||||
cascade: false
|
||||
}),
|
||||
cleanCSS({compatibility: 'ie8'}),
|
||||
gulp.dest('css')
|
||||
], cb);
|
||||
});
|
||||
|
||||
// Build app
|
||||
gulp.task('default', ['build-js', 'build-css']);
|
||||
|
||||
// Watch changes and compile on the fly
|
||||
gulp.task('watch', () => {
|
||||
gulp.watch(['js/index.js', 'js/vanity.js'], ['browserify']);
|
||||
gulp.watch(['css/stylesheet.sass'], ['sass']);
|
||||
});
|
||||
|
|
|
|||
686
package-lock.json
generated
686
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -7,7 +7,10 @@
|
|||
"browserify": "^14.5.0",
|
||||
"ethereumjs-util": "^5.1.2",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^4.0.0",
|
||||
"gulp-babel": "^7.0.0",
|
||||
"gulp-clean-css": "^3.9.0",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"husky": "^0.14.3",
|
||||
"pump": "^2.0.0",
|
||||
|
|
@ -18,8 +21,8 @@
|
|||
"license": "ISC",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "node ./node_modules/gulp/bin/gulp.js build",
|
||||
"precommit": "npm run-script build && git add js/bundle.js",
|
||||
"build": "node ./node_modules/gulp/bin/gulp.js",
|
||||
"precommit": "npm run-script build && git add js/bundle.js css/stylesheet.css",
|
||||
"test": "node ./node_modules/xo/cli.js",
|
||||
"watch": "node ./node_modules/gulp/bin/gulp.js watch"
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue