tornado styles

This commit is contained in:
Danil Kovtonyuk 2020-01-29 23:13:06 +10:00
parent 5eb0520bc9
commit b6702a0722
21 changed files with 1165 additions and 209 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
assets/img/bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

63
assets/styles/app.scss Normal file
View File

@ -0,0 +1,63 @@
@import 'base';
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
background: url('../img/bg.png') repeat;
background-size: 40px 164px;
> .main-content {
flex: 1;
}
}
.header {
padding-top: 20px;
padding-left: .75rem;
padding-right: .75rem;
@include tablet {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@include desktop {
> .container {
.navbar-brand {
margin-left: 0;
.navbar-item {
padding-left: 0;
}
}
}
}
.navbar-brand {
align-items: center;
}
@include mobile {
.navbar-menu {
text-align: center;
}
}
.logo {
height: 40px;
}
}
.input {
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.button {
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
font-weight: $weight-bold;
&.is-primary.is-outlined {
background-color: rgba($primary, .104);
}
}

153
assets/styles/base.scss Normal file
View File

@ -0,0 +1,153 @@
$control-height: 2.857em;
$control-border-width: 1px;
$control-padding-vertical: calc(0.429em - #{$control-border-width});
$control-padding-horizontal: calc(1.25em - #{$control-border-width});
$white: #eee;
$primary: #94febf;
$primary-invert: #000403;
$warning: #ff8a00;
$black: #2c4538;
$danger: #FF0658;
$dark: #242424;
$info: $primary-invert;
$info-invert: $white;
$custom-colors: ("black": ($black, $primary-invert));
@import '~bulma/sass/utilities/_all';
$body-family: 'PT Mono', monospace;
$body-background-color: $primary-invert;
$body-color: $white;
$body-size: 14px;
$body-min-width: 320px;
$navbar-background-color: transparent;
$navbar-item-color: $white;
$navbar-item-hover-color: $primary;
$navbar-item-hover-background-color: transparent;
$navbar-item-active-color: $primary;
$navbar-breakpoint: $tablet;
$label-color: $white;
$label-weight: $weight-normal;
$button-background-color: #181818;
$button-border-color: #666;
$button-color: $white;
$button-hover-border-color: $primary;
$button-focus-border-color: $primary;
$button-focus-color: $primary;
$button-focus-box-shadow-color: rgba($primary, .25);
$button-active-border-color: darken($primary, 10%);
$button-active-color: darken($primary, 10%);
$button-text-color: $primary;
$button-text-hover-background-color: $primary;
$button-text-hover-color: $primary-invert;
$button-disabled-background-color: #000;
$button-disabled-border-color: #393939;
$input-color: $white;
$input-background-color: transparent;
$input-border-color: #393939;
$input-hover-border-color: $white;
$input-hover-color: $white;
$input-focus-border-color: $primary;
$input-placeholder-color: #393939;
$input-focus-box-shadow-size: 0 0 0;
$input-disabled-background-color: #181818;
$input-disabled-border-color: #222222;
$input-disabled-color: #5e5e5e;
$radio-size: 1.5rem;
$link: $white;
$link-hover: $primary;
$link-invert: $primary;
$tabs-border-bottom-width: 0;
$tabs-link-color: $link;
$tabs-link-active-color: $primary;
$tabs-link-hover-color: $primary;
$box-background-color: $primary-invert;
$box-shadow: none;
$box-color: #fefefe;
$box-padding: 1.5rem;
$title-size: 1.5rem;
$title-line-height: 1;
$title-color: $primary;
$subtitle-color: $white;
$footer-background-color: transparent;
$footer-padding: 2rem;
$modal-background-background-color: rgba(#050505, 0.86);
$modal-card-title-color: $primary;
$modal-card-head-background-color: $primary-invert;
$modal-card-head-border-bottom: none;
$modal-card-foot-border-top: none;
$modal-card-body-background-color: $primary-invert;
$modal-card-foot-radius: 0;
$modal-card-head-radius: 0;
$modal-card-body-padding: 0 1.5rem;
$modal-card-head-padding: 1.5rem;
$input-arrow: #393939;
$radius-small: 4px;
$steps-default-color: $primary;
$steps-marker-default-border: .2em solid $primary;
$steps-maker-default-color: $primary-invert;
$steps-previous-color: $primary-invert;
$hr-background-color: #1E3629;
$hr-height: 1px;
$hr-margin: .5rem 0;
$dropdown-item-color: $white;
$dropdown-content-shadow: 0 0 0 1px $primary, 0 6px 12px rgba(0, 0, 0, 0.3);
$dropdown-content-background-color: $primary-invert;
$dropdown-item-hover-background-color: #0e1f17;
$dropdown-item-hover-color: $primary;
$dropdown-item-active-background-color: $primary;
$dropdown-item-active-color: $primary-invert;
$dropdown-content-padding-bottom: 0;
$dropdown-content-padding-top: 0;
$dropdown-background-color: $modal-background-background-color;
$widescreen-enabled: false;
$fullhd-enabled: false;
.columns {
@include from(576px) {
&.is-small {
display: flex;
}
}
}
.column {
@include from(576px) {
&.is-half-small {
flex: none;
width: 50%;
}
}
}
@import '~bulma/sass/base/_all';
@import '~bulma/sass/elements/_all';
@import '~bulma/sass/components/_all';
@import '~bulma/sass/form/_all';
@import '~bulma/sass/grid/_all';
@import '~bulma/sass/layout/_all';
@import '~buefy/src/scss/buefy';

View File

@ -1,38 +0,0 @@
<template>
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title has-text-grey">
{{ title }}
</p>
</header>
<div class="card-content">
<div class="content has-text-centered">
<b-icon :icon="icon" size="is-large" type="is-primary" />
</div>
</div>
<footer class="card-footer">
<div class="card-footer-item">
<span>
<slot />
</span>
</div>
</footer>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true
},
icon: {
type: String,
required: true
}
}
}
</script>

View File

@ -1,39 +1,9 @@
<template>
<svg
class="NuxtLogo"
width="245"
height="180"
viewBox="0 0 452 342"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<path
d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
fill="#00C58E"
/>
<path
d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
fill="#108775"
/>
<path
d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
fill="#2F495E"
fill-rule="nonzero"
/>
</g>
<svg xmlns="http://www.w3.org/2000/svg" class="logo" viewBox="0 0 155 40">
<path
fill="#94febf"
fill-rule="evenodd"
d="M29.4,8.6A11.5,11.5,0,0,1,39.9,19.4,17.1,17.1,0,0,0,8.5,10.5,11.5,11.5,0,0,1,19.3,0a17.2,17.2,0,0,0-8.9,31.4A11.5,11.5,0,0,1,0,20.6a17.1,17.1,0,0,0,31.3,9.1A11.4,11.4,0,0,1,20.6,40,17.1,17.1,0,0,0,29.4,8.6ZM19.9,27.2a6.9,6.9,0,0,1-5-2.1,7.1,7.1,0,1,1,5,2.1Zm36.6-9.7v7.4c0,1.3.5,1.6,1.8,1.6a4.8,4.8,0,0,0,1.8-.3v2.9a6.4,6.4,0,0,1-2.4.5c-3,0-4.8-1.9-4.8-5V17.5H50.4V14.4h2.5V9.9h3.6v4.5h3.6v3.1ZM77,21.9c0,5-2.5,7.7-7,7.7s-7.1-2.7-7.1-7.7,2.5-7.7,7.1-7.7S77,16.9,77,21.9Zm-3.6,0c0-4-1.3-4.8-3.4-4.8s-3.5.8-3.5,4.8,1.3,4.7,3.5,4.7S73.4,25.8,73.4,21.9ZM88,14.1v3.2a11.5,11.5,0,0,0-3.8.5V29.4H80.6V15.7A20.4,20.4,0,0,1,88,14.1Zm16.9,6.3v9h-3.6V20.1c0-1.4-.2-2.8-3.5-2.8a12,12,0,0,0-2.8.3V29.4H91.4V15.8a15,15,0,0,1,6.9-1.7C102.4,14.1,104.9,16.5,104.9,20.4Zm16.2.1v4.1c0,2.4-1.6,5-6.3,5s-6.4-2.6-6.4-5.1.5-4.7,6.5-4.7a11,11,0,0,1,2.6.2c0-1.7-.8-2.9-3.2-2.9a11.2,11.2,0,0,0-4.4.8V15a12.5,12.5,0,0,1,4.6-.9C118.8,14.1,121.1,16.4,121.1,20.5Zm-3.6,1.7h-2.1c-2.5,0-3.4.7-3.4,1.9s.9,2.4,2.8,2.4,2.7-.9,2.7-2.3Zm13.9-8.1,2.5.3V8.7h3.6V24.6c0,2.4-1.7,5-6.4,5-2,0-6.7-.8-6.7-7.9C124.4,16.8,126.9,14.1,131.4,14.1Zm-.3,12.4c1.6,0,2.8-.4,2.8-1.6V17.2l-2.4-.2c-2.1,0-3.5,1-3.5,4.5S128.8,26.5,131.1,26.5ZM155,21.9c0,5-2.5,7.7-7.1,7.7s-7.1-2.7-7.1-7.7,2.5-7.7,7.1-7.7S155,16.9,155,21.9Zm-3.6,0c0-4-1.4-4.8-3.5-4.8s-3.5.8-3.5,4.8,1.4,4.7,3.5,4.7S151.4,25.8,151.4,21.9Z"
/>
</svg>
</template>
<style>
.NuxtLogo {
animation: 1s appear;
}
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

24
components/Navbar.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<b-navbar wrapper-class="container" class="header">
<template slot="brand">
<b-navbar-item :to="{ path: '/' }" tag="router-link">
<Logo />
</b-navbar-item>
</template>
<template slot="end">
<b-navbar-item href="#">
Instructions
</b-navbar-item>
</template>
</b-navbar>
</template>
<script>
import Logo from '@/components/Logo'
export default {
components: {
Logo
}
}
</script>

View File

@ -1,34 +1,8 @@
<template>
<div>
<nav class="navbar header has-shadow is-primary" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="~assets/buefy.png" alt="Buefy" height="28" />
</a>
<div class="navbar-burger">
<span />
<span />
<span />
</div>
</div>
</nav>
<section class="main-content columns">
<aside class="column is-2 section">
<p class="menu-label is-hidden-touch">
General
</p>
<ul class="menu-list">
<li v-for="(item, key) of items" :key="key">
<nuxt-link :to="item.to" exact-active-class="is-active">
<b-icon :icon="item.icon" /> {{ item.title }}
</nuxt-link>
</li>
</ul>
</aside>
<div class="container column is-10">
<div class="wrapper">
<Navbar />
<section class="main-content section">
<div class="container">
<nuxt />
</div>
</section>
@ -36,22 +10,11 @@
</template>
<script>
import Navbar from '@/components/Navbar'
export default {
data() {
return {
items: [
{
title: 'Home',
icon: 'home',
to: { name: 'index' }
},
{
title: 'Inspire',
icon: 'lightbulb',
to: { name: 'inspire' }
}
]
}
components: {
Navbar
}
}
</script>

View File

@ -4,26 +4,71 @@ module.exports = {
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
title: 'Tornado Trusted Setup Ceremony',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1, shrink-to-fit=no' },
{ name: 'theme-color', content: '#000403' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
content: 'Non-custodial Ethereum Privacy solution.'
},
{
hid: 'og:title',
property: 'og:title',
content: 'Tornado Trusted Setup Ceremony'
},
{
hid: 'og:description',
property: 'og:description',
content: 'Non-custodial, trustless, serverless, private transactions on Ethereum network'
},
{
hid: 'og:url',
property: 'og:url',
content: 'https://ceremony.tornado.cash'
},
{
hid: 'og:type',
property: 'og:type',
content: 'website'
},
{
hid: 'og:image',
property: 'og:image',
content: 'https://tornado.cash/tw.png'
},
{
hid: 'description',
name: 'description',
content: 'Non-custodial, trustless, serverless, private transactions on Ethereum network'
},
{
hid: 'keywords',
name: 'keywords',
content:
'Mixer, Ethereum, ERC20, dapp, smart contract, decentralized, metamask, zksnark, zero knowledge'
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
link: [
{ rel: 'manifest', href: 'manifest.json' },
{ rel: 'shortcut icon', type: 'image/x-icon', href: '/favicon/favicon.ico' },
{ rel: 'apple-touch-icon', href: '/favicon/apple-touch-icon.png' },
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=PT+Mono&display=swap'
}
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
loading: { color: '#94febf', height: '5px', duration: 5000 },
/*
** Global CSS
*/
css: [],
css: ['@/assets/styles/app.scss'],
/*
** Plugins to load before mounting the App
*/
@ -40,7 +85,13 @@ module.exports = {
*/
modules: [
// Doc: https://buefy.github.io/#/documentation
'nuxt-buefy',
[
'nuxt-buefy',
{
css: false,
materialDesignIcons: false
}
],
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios'
],
@ -56,6 +107,12 @@ module.exports = {
/*
** You can extend webpack config here
*/
extend(config, ctx) {}
extend(config, ctx) {},
html: {
minify: {
collapseWhitespace: true, // as @dario30186 mentioned
removeComments: true // 👈 add this line
}
}
}
}

View File

@ -36,7 +36,9 @@
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-prettier": "^3.0.1",
"node-sass": "^4.13.1",
"nodemon": "^1.18.9",
"prettier": "^1.16.4"
"prettier": "^1.16.4",
"sass-loader": "^8.0.2"
}
}

View File

@ -1,46 +1,9 @@
<template>
<section class="section">
<div class="columns is-mobile">
<card title="Free" icon="github-circle">
Open source on
<a href="https://github.com/buefy/buefy">
GitHub
</a>
</card>
<card title="Responsive" icon="cellphone-link">
<b class="has-text-grey">
Every
</b>
component is responsive
</card>
<card title="Modern" icon="alert-decagram">
Built with
<a href="https://vuejs.org/">
Vue.js
</a>
and
<a href="http://bulma.io/">
Bulma
</a>
</card>
<card title="Lightweight" icon="arrange-bring-to-front">
No other internal dependency
</card>
<div class="has-text-centered">
<div class="title is-size-1">Hello, Anonymous</div>
<div class="buttons is-centered">
<b-button type="is-primary" outlined>Make the contribution</b-button>
<b-button type="is-primary" outlined>Sign In</b-button>
</div>
</section>
</div>
</template>
<script>
import Card from '~/components/Card'
export default {
name: 'HomePage',
components: {
Card
}
}
</script>

View File

@ -1,11 +0,0 @@
<template>
<section class="section">
<h2 class="title is-3 has-text-grey">"Just start <b-icon icon="rocket" size="is-large" />"</h2>
<h3 class="subtitle is-6 has-text-grey">
Author:
<a href="https://github.com/anteriovieira">
Antério Vieira
</a>
</h3>
</section>
</template>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/favicon/mstile-150x150.png"/>
<TileColor>#000403</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
static/favicon/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

19
static/manifest.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "Tornado Cash",
"short_name": "Tornado Cash",
"icons": [
{
"src": "/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#000403",
"background_color": "#000403",
"display": "standalone"
}

836
yarn.lock

File diff suppressed because it is too large Load Diff