Footer is updated with current social links; oraclesorg references are removed
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
## MetaMask plugin setup
|
## MetaMask plugin setup
|
||||||
|
|
||||||
* Connect to POA Network in MetaMask plugin (See [Connect to POA Network via MetaMask](https://github.com/poanetwork/wiki/blob/master/MetaMask-connect.md#connect-to-oracles-network-via-metamask))
|
* Connect to POA Network in MetaMask plugin (See [Connect to POA Network via MetaMask](https://github.com/poanetwork/wiki/blob/master/MetaMask-connect.md#connect-to-poa-network-via-metamask))
|
||||||
|
|
||||||
* Import your initial key to MetaMask Plugin: browse keystore file, received from invitation, and enter password for the key (See [Importing of keys from wiki](https://github.com/poanetwork/wiki/blob/master/MetaMask-connect.md#importing-of-keys)).
|
* Import your initial key to MetaMask Plugin: browse keystore file, received from invitation, and enter password for the key (See [Importing of keys from wiki](https://github.com/poanetwork/wiki/blob/master/MetaMask-connect.md#importing-of-keys)).
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
"name": "poa-dapps-keys-generation",
|
"name": "poa-dapps-keys-generation",
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"homepage": "https://oraclesorg.github.io/poa-dapps-keys-generation",
|
"homepage": "https://poanetwork.github.io/poa-dapps-keys-generation",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"clipboard": "^1.7.1",
|
"clipboard": "^1.7.1",
|
||||||
"gh-pages": "^1.1.0",
|
"gh-pages": "^1.1.0",
|
||||||
|
|
|
@ -47,13 +47,14 @@
|
||||||
-->
|
-->
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a href="#" class="footer-logo"></a>
|
|
||||||
<div class="socials">
|
|
||||||
<a href="#" class="socials-i socials-i_reddit"></a>
|
|
||||||
<a href="https://twitter.com/oraclesorg" class="socials-i socials-i_twitter"></a>
|
|
||||||
<a href="#" class="socials-i socials-i_bitcoin"></a>
|
|
||||||
</div>
|
|
||||||
<p class="footer-rights">2017 POA Network. All rights reserved.</p>
|
<p class="footer-rights">2017 POA Network. All rights reserved.</p>
|
||||||
|
<a href="/poa-dapps-validators" class="footer-logo"></a>
|
||||||
|
<div class="socials">
|
||||||
|
<a href="https://twitter.com/poanetwork" class="socials-i socials-i_twitter"></a>
|
||||||
|
<a href="https://poa.network" class="socials-i socials-i_oracles"></a>
|
||||||
|
<a href="https://t.me/oraclesnetwork" class="socials-i socials-i_telegram"></a>
|
||||||
|
<a href="https://github.com/poanetwork/" class="socials-i socials-i_github"></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -36,7 +36,7 @@ let getWeb3 = () => {
|
||||||
default:
|
default:
|
||||||
netIdName = 'ERROR'
|
netIdName = 'ERROR'
|
||||||
errorMsg = `You aren't connected to POA Network.
|
errorMsg = `You aren't connected to POA Network.
|
||||||
Please, switch on Oracles plugin and refresh the page.
|
Please, switch on POA plugin and refresh the page.
|
||||||
Check POA Network <a href='https://github.com/poanetwork/wiki' target='blank'>wiki</a> for more info.`
|
Check POA Network <a href='https://github.com/poanetwork/wiki' target='blank'>wiki</a> for more info.`
|
||||||
console.log('This is an unknown network.', netId)
|
console.log('This is an unknown network.', netId)
|
||||||
}
|
}
|
||||||
|
|
Before Width: | Height: | Size: 541 B After Width: | Height: | Size: 987 B |
Before Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 2.0 KiB |
|
@ -1,3 +1,8 @@
|
||||||
|
%full-width {
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
%stretch-width {
|
%stretch-width {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
$container-width: 960px;
|
||||||
|
$tablet-width: 768px;
|
||||||
|
$mobile-width: 414px;
|
||||||
|
$footer-height: 60px;
|
||||||
|
|
||||||
|
$desktop-indent: 30px;
|
||||||
|
$tablet-indent: 20px;
|
||||||
|
$mobile-indent: 15px;
|
||||||
|
|
||||||
|
$input-height: 40px;
|
|
@ -1,38 +1,56 @@
|
||||||
.footer {
|
.footer {
|
||||||
@extend %stretch-width;
|
@extend %full-width;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
padding: 15px 10px;
|
height: $footer-height;
|
||||||
color: #fff;
|
background-color: #6d2eae;
|
||||||
line-height: 30px;
|
|
||||||
font-size: 12px;
|
@media screen and (max-width: $mobile-width) {
|
||||||
background-image: url(../images/bg_footer.png);
|
height: auto;
|
||||||
background-repeat: no-repeat;
|
padding: 20px 10px 0;
|
||||||
background-size: cover;
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
|
||||||
|
@media screen and (max-width: $mobile-width) {
|
||||||
|
padding-top: $footer-height - 20;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-logo,
|
||||||
|
.socials {
|
||||||
|
transform: translateY(-50%);
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 50%;
|
||||||
|
|
||||||
|
@media screen and (max-width: $mobile-width) {
|
||||||
|
transform: translateY(0);
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-logo {
|
&-logo {
|
||||||
@include image-2x('../images/logo_ceremony_dapp_footer@2x.png', 120px, 24px);
|
@include image-2x('../images/logo_ceremony_dapp_footer@2x.png', 120px, 24px);
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background-image: url(../images/logo_ceremony_dapp_footer.png);
|
background-image: url('../images/logo_ceremony_dapp_footer.png');
|
||||||
background-position: 0 0;
|
background-position: 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-rights {
|
&-rights {
|
||||||
@extend %stretch-width;
|
color: #fff;
|
||||||
position: absolute;
|
line-height: $footer-height;
|
||||||
z-index: 1;
|
|
||||||
top: 0;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
@media screen and (max-width: $mobile-width) {
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,11 @@ body {
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
-webkit-font-smoothing: antialiased; }
|
-webkit-font-smoothing: antialiased; }
|
||||||
|
|
||||||
.footer, .footer-rights, .header {
|
.footer {
|
||||||
|
left: 0;
|
||||||
|
right: 0; }
|
||||||
|
|
||||||
|
.header {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0; }
|
right: 0; }
|
||||||
|
|
||||||
|
@ -226,36 +230,49 @@ button:focus {
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
padding: 15px 10px;
|
height: 60px;
|
||||||
color: #fff;
|
background-color: #6d2eae; }
|
||||||
line-height: 30px;
|
@media screen and (max-width: 414px) {
|
||||||
font-size: 12px;
|
.footer {
|
||||||
background-image: url(../images/bg_footer.png);
|
height: auto;
|
||||||
background-repeat: no-repeat;
|
padding: 20px 10px 0; } }
|
||||||
background-size: cover; }
|
|
||||||
.footer .container {
|
.footer .container {
|
||||||
position: relative;
|
position: relative; }
|
||||||
overflow: hidden; }
|
@media screen and (max-width: 414px) {
|
||||||
|
.footer .container {
|
||||||
|
padding-top: 40px; } }
|
||||||
|
.footer-logo,
|
||||||
|
.footer .socials {
|
||||||
|
transform: translateY(-50%);
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 50%; }
|
||||||
|
@media screen and (max-width: 414px) {
|
||||||
|
.footer-logo,
|
||||||
|
.footer .socials {
|
||||||
|
transform: translateY(0);
|
||||||
|
top: 0; } }
|
||||||
.footer-logo {
|
.footer-logo {
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background-image: url(../images/logo_ceremony_dapp_footer.png);
|
background-image: url("../images/logo_ceremony_dapp_footer.png");
|
||||||
background-position: 0 0; }
|
background-position: 0 0; }
|
||||||
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
|
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
|
||||||
.footer-logo {
|
.footer-logo {
|
||||||
background-image: url("../images/logo_ceremony_dapp_footer@2x.png");
|
background-image: url("../images/logo_ceremony_dapp_footer@2x.png");
|
||||||
background-size: 120px 24px; } }
|
background-size: 120px 24px; } }
|
||||||
.footer-rights {
|
.footer-rights {
|
||||||
position: absolute;
|
color: #fff;
|
||||||
z-index: 1;
|
line-height: 60px;
|
||||||
top: 0;
|
text-align: center;
|
||||||
text-align: center; }
|
font-size: 12px; }
|
||||||
|
@media screen and (max-width: 414px) {
|
||||||
|
.footer-rights {
|
||||||
|
line-height: 30px; } }
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -425,10 +442,9 @@ button:focus {
|
||||||
line-height: 100px; }
|
line-height: 100px; }
|
||||||
|
|
||||||
.socials {
|
.socials {
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
float: right;
|
|
||||||
font-size: 0; }
|
font-size: 0; }
|
||||||
|
.footer .socials {
|
||||||
|
right: 0; }
|
||||||
.socials-i {
|
.socials-i {
|
||||||
transition: 0.3s background-color;
|
transition: 0.3s background-color;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -436,13 +452,14 @@ button:focus {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: rgba(255, 255, 255, 0.2); }
|
background-color: rgba(255, 255, 255, 0.2); }
|
||||||
@media screen and (min-width: 768px) {
|
.socials-i:not(:first-child) {
|
||||||
.socials-i:hover {
|
margin-left: 10px; }
|
||||||
background-color: rgba(255, 255, 255, 0.4); } }
|
.socials-i:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.4); }
|
||||||
.socials-i:before {
|
.socials-i:before {
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
@ -451,19 +468,24 @@ button:focus {
|
||||||
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
|
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
|
||||||
.socials-i:before {
|
.socials-i:before {
|
||||||
background-image: url("../images/socials@2x.png");
|
background-image: url("../images/socials@2x.png");
|
||||||
background-size: 15px 40px; } }
|
background-size: 16px 69px; } }
|
||||||
|
.socials-i_github:before {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-position: 0 0; }
|
||||||
|
.socials-i_oracles:before {
|
||||||
|
width: 16px;
|
||||||
|
height: 14px;
|
||||||
|
background-position: 0 -16px; }
|
||||||
.socials-i_reddit:before {
|
.socials-i_reddit:before {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 13px;
|
height: 13px;
|
||||||
margin: -6.5px 0 0 -7.5px;
|
background-position: 0 -30px; }
|
||||||
background-position: 0 -15px; }
|
.socials-i_telegram:before {
|
||||||
|
width: 16px;
|
||||||
|
height: 14px;
|
||||||
|
background-position: 0 -43px; }
|
||||||
.socials-i_twitter:before {
|
.socials-i_twitter:before {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
margin: -6px 0 0 -7.5px;
|
background-position: 0 -57px; }
|
||||||
background-position: 0 -28px; }
|
|
||||||
.socials-i_bitcoin:before {
|
|
||||||
width: 11px;
|
|
||||||
height: 15px;
|
|
||||||
margin: -7.5px 0 0 -5.5px;
|
|
||||||
background-position: 0 0; }
|
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
@import './_vars';
|
||||||
@import './_0_fonts';
|
@import './_0_fonts';
|
||||||
@import './_1_mixins';
|
@import './_1_mixins';
|
||||||
@import './_2_placeholders';
|
@import './_2_placeholders';
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
.socials {
|
.socials {
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
float: right;
|
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
|
|
||||||
|
.footer & {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&-i {
|
&-i {
|
||||||
transition: 0.3s background-color;
|
transition: 0.3s background-color;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -11,18 +12,20 @@
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: fade-out(#fff, 0.8);
|
background-color: fade-out(#fff, 0.8);
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@media screen and (min-width: 768px) {
|
background-color: fade-out(#fff, 0.6);
|
||||||
background-color: fade-out(#fff, 0.6);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
@include image-2x('../images/socials@2x.png', 15px, 40px);
|
@include image-2x('../images/socials@2x.png', 16px, 69px);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
@ -30,12 +33,35 @@
|
||||||
background-image: url(../images/socials.png);
|
background-image: url(../images/socials.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&_github {
|
||||||
|
&:before {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_oracles {
|
||||||
|
&:before {
|
||||||
|
width: 16px;
|
||||||
|
height: 14px;
|
||||||
|
background-position: 0 -16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&_reddit {
|
&_reddit {
|
||||||
&:before {
|
&:before {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 13px;
|
height: 13px;
|
||||||
margin: -6.5px 0 0 -7.5px;
|
background-position: 0 -30px;
|
||||||
background-position: 0 -15px;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_telegram {
|
||||||
|
&:before {
|
||||||
|
width: 16px;
|
||||||
|
height: 14px;
|
||||||
|
background-position: 0 -43px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -43,17 +69,7 @@
|
||||||
&:before {
|
&:before {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
margin: -6px 0 0 -7.5px;
|
background-position: 0 -57px;
|
||||||
background-position: 0 -28px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&_bitcoin {
|
|
||||||
&:before {
|
|
||||||
width: 11px;
|
|
||||||
height: 15px;
|
|
||||||
margin: -7.5px 0 0 -5.5px;
|
|
||||||
background-position: 0 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|