layout
This commit is contained in:
Danil Kovtonyuk
parent
c484146d2a
commit
05f8e0942b
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.9 39.9"><path d="M40,19.4A17.3,17.3,0,0,0,22.8,2.8,17.1,17.1,0,0,0,8.6,10.4,11.3,11.3,0,0,1,19.3,0,17.1,17.1,0,0,0,2.8,17.1a16.8,16.8,0,0,0,7.7,14.2A11.3,11.3,0,0,1,0,20.6a17.1,17.1,0,0,0,31.3,9A11.4,11.4,0,0,1,20.6,39.9,17.1,17.1,0,0,0,37.1,22.8,17.3,17.3,0,0,0,29.5,8.6,11.8,11.8,0,0,1,40,19.4ZM20,27.2a7.4,7.4,0,0,1-5.2-2.1,7.1,7.1,0,0,1-2-5.1A7.2,7.2,0,1,1,20,27.2Z" fill="#94febf"/></svg>
|
||||
|
After Width: | Height: | Size: 450 B |
|
|
@ -49,6 +49,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
transition: color .15s ease-in-out;
|
||||
}
|
||||
|
||||
.input {
|
||||
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
|
||||
}
|
||||
|
|
@ -75,3 +79,113 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
border: 1px solid #393939;
|
||||
}
|
||||
|
||||
.ceremony {
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
color: $white;
|
||||
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.p {
|
||||
font-size: .857rem;
|
||||
max-width: 66.6666%;
|
||||
margin: 0 auto;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $block-spacing;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns:not(:last-child) {
|
||||
margin-bottom: calc(2.5rem - 0.75rem);
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:hover, &.is-hovered {
|
||||
color: $primary;
|
||||
border-color: #94febf;
|
||||
|
||||
.title {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.cloak {
|
||||
path {
|
||||
transition: stroke .15s ease-in-out;
|
||||
stroke: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cloak {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.button.is-fullwidth + .button.is-fullwidth {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
.label {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.status-spinner {
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-image: url('../img/logo.svg');
|
||||
animation: spinAroundReverse 2000ms infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
.status-message {
|
||||
padding-bottom: 1.5rem;
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinAroundReverse {
|
||||
from {
|
||||
transform: rotate(359deg); }
|
||||
to {
|
||||
transform: rotate(0deg); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ $info: $primary-invert;
|
|||
$info-invert: $white;
|
||||
$custom-colors: ("black": ($black, $primary-invert));
|
||||
|
||||
$block-spacing: 2rem;
|
||||
|
||||
@import '~bulma/sass/utilities/_all';
|
||||
|
||||
$body-family: 'PT Mono', monospace;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="cloak" width="147" height="147">
|
||||
<path
|
||||
fill="#FFF"
|
||||
fill-opacity=".051"
|
||||
fill-rule="evenodd"
|
||||
stroke="#393939"
|
||||
d="M121.872 93.745c-12.959 4.013-30.138 6.224-48.372 6.224-18.234 0-35.413-2.211-48.372-6.224C10.978 89.363 3.5 83.367 3.5 76.404c0-6.941 7.379-12.887 21.365-17.255V18.618c0-4.51 1.993-8.749 5.466-11.631a15.118 15.118 0 0 1 12.453-3.233c.055.01.109.022.162.035.23.057 23.042 5.727 30.554 5.727 7.515 0 30.324-5.67 30.553-5.727.054-.013.108-.025.162-.035a15.12 15.12 0 0 1 12.453 3.234 15.065 15.065 0 0 1 5.466 11.63v40.531C136.12 63.517 143.5 69.463 143.5 76.404c0 6.963-7.479 12.959-21.628 17.341zm-5.215-75.127a9.619 9.619 0 0 0-3.489-7.424 9.65 9.65 0 0 0-7.873-2.078c-1.801.448-23.78 5.869-31.795 5.869S43.505 9.564 41.704 9.116a9.644 9.644 0 0 0-7.872 2.078 9.615 9.615 0 0 0-3.489 7.424v21.033c11.728 2.946 26.415 4.56 41.652 4.56 8.92 0 17.57-.538 25.712-1.599a2.735 2.735 0 0 1 .709 5.423c-8.376 1.091-17.265 1.645-26.421 1.645-15.102 0-29.727-1.553-41.652-4.398v4.231c11.727 2.946 26.414 4.56 41.652 4.56 16.722 0 32.476-1.9 44.662-5.363V18.618zm0 45.659c-12.132 3.026-27.225 4.683-42.827 4.683-9.158 0-18.048-.553-26.421-1.645a2.734 2.734 0 1 1 .709-5.423c8.139 1.061 16.79 1.599 25.712 1.599 15.751 0 30.913-1.724 42.827-4.862v-4.243c-12.442 3.335-28.124 5.156-44.662 5.156-15.103 0-29.728-1.552-41.652-4.397v13.398c11.727 2.946 26.414 4.559 41.652 4.559 16.721 0 32.477-1.898 44.662-5.361v-3.464zm5.477.623v4.883a2.737 2.737 0 0 1-1.932 2.613c-12.935 3.982-30.055 6.175-48.207 6.175a217.716 217.716 0 0 1-15.302-.539c-.996-.071-1.987-.149-2.972-.234-9.843-.848-19.03-2.379-26.838-4.507a2.735 2.735 0 0 1-2.018-2.638V64.9c-9.891 3.34-15.888 7.63-15.888 11.504 0 4.079 6.811 8.722 17.773 12.117 12.449 3.855 29.051 5.978 46.75 5.978 17.698 0 34.301-2.122 46.749-5.978 10.963-3.395 17.773-8.038 17.773-12.117 0-3.874-5.997-8.164-15.888-11.504zm-83.699.183a2.724 2.724 0 0 1-.985.407 2.666 2.666 0 0 1-1.581-.156 2.742 2.742 0 0 1-.89-.59 2.755 2.755 0 0 1-.802-1.933c0-.178.019-.359.055-.534a2.67 2.67 0 0 1 .156-.511c.068-.167.153-.325.252-.473a2.61 2.61 0 0 1 .755-.755c.148-.101.307-.183.474-.251a2.72 2.72 0 0 1 2.095 0c.165.068.323.15.471.251a2.754 2.754 0 0 1 1.168 1.739 2.755 2.755 0 0 1-.751 2.467c-.126.126-.266.24-.417.339zm67.946-22.6a2.838 2.838 0 0 1 .591-.887 2.764 2.764 0 0 1 2.471-.746c.175.033.347.087.512.156.167.068.326.153.473.251a2.685 2.685 0 0 1 1.009 1.226 2.793 2.793 0 0 1 .21 1.047 2.74 2.74 0 0 1-1.219 2.275 2.796 2.796 0 0 1-.985.404 2.674 2.674 0 0 1-1.583-.156 2.895 2.895 0 0 1-.471-.248 2.824 2.824 0 0 1-.417-.342 2.742 2.742 0 0 1-.591-.889 2.829 2.829 0 0 1-.159-.511 2.736 2.736 0 0 1 .159-1.58zm-73.369 64.922h80.976c6.569 0 11.913 5.336 11.914 11.895v11.758c0 6.861-5.59 12.442-12.461 12.442h-17.75c-11.008 0-19.963-8.942-19.963-19.932v-10.694h-4.455v10.694c0 10.991-8.956 19.932-19.964 19.932H33.56c-6.871 0-12.461-5.581-12.461-12.442V119.3c0-6.559 5.344-11.895 11.913-11.895zm48.192 16.163c0 7.975 6.499 14.463 14.486 14.463h17.75c3.851 0 6.984-3.128 6.983-6.973V119.3c0-3.544-2.887-6.426-6.436-6.426H81.204v10.694zm-54.628 7.49c0 3.845 3.133 6.973 6.983 6.973h17.75c7.988 0 14.486-6.488 14.486-14.463h-.001v-10.694H33.012c-3.549 0-6.436 2.882-6.436 6.426v11.758zm12.839-15.392a2.742 2.742 0 0 1 3.872 0 2.733 2.733 0 0 1 .001 3.868l-8.856 8.841a2.73 2.73 0 0 1-1.936.801 2.733 2.733 0 0 1-1.937-4.668l8.856-8.842zm50.445 12.709a2.73 2.73 0 0 1-1.936.801 2.733 2.733 0 0 1-1.937-4.668l8.855-8.842a2.743 2.743 0 0 1 3.873 0 2.732 2.732 0 0 1 0 3.868l-8.855 8.841z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,6 +1,39 @@
|
|||
<template>
|
||||
<div class="has-text-centered">
|
||||
<div class="title is-size-1">Hello, Anonymous</div>
|
||||
<div class="ceremony">
|
||||
<div class="title is-size-1 is-spaced">Hello, <span>Anonymous</span></div>
|
||||
<div class="subtitle">Lorem ipsum dolor sit amet, consectetur?</div>
|
||||
<p class="p">
|
||||
If you don’t trust binaries, we encorage you to follow this <a href="">instruction</a> to
|
||||
contribute by compiling from source code. It is very easy!
|
||||
</p>
|
||||
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-one-third">
|
||||
<div class="box">
|
||||
<div class="title is-5">Lorem ipsum</div>
|
||||
<Cloak />
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<div :class="{ 'is-hovered': isLoggedIn }" class="box">
|
||||
<div class="title is-5">Lorem ipsum</div>
|
||||
<div v-if="isLoggedIn" class="fields">
|
||||
<b-field label="Name">
|
||||
<b-input value="Vitalik Buterin"></b-input>
|
||||
</b-field>
|
||||
<b-field label="Company">
|
||||
<b-input value="Ethereum"></b-input>
|
||||
</b-field>
|
||||
</div>
|
||||
<div v-else class="buttons">
|
||||
<b-button @click="isLoggedIn = true" type="is-primary" outlined expanded>
|
||||
Sign In
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons is-centered">
|
||||
<b-button
|
||||
:loading="isContributeBtnDisabled"
|
||||
|
|
@ -9,22 +42,29 @@
|
|||
outlined
|
||||
>Make the contribution</b-button
|
||||
>
|
||||
<b-button type="is-primary" outlined>Sign In</b-button>
|
||||
</div>
|
||||
{{ status }}
|
||||
|
||||
<div v-show="status" class="status">
|
||||
<div class="status-message">{{ status }}</div>
|
||||
<div class="status-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable no-console */
|
||||
|
||||
import Cloak from '@/components/Cloak'
|
||||
const timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Cloak
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isContributeBtnDisabled: false,
|
||||
status: ''
|
||||
status: '',
|
||||
isLoggedIn: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue