Merge pull request #50 from vbaranov/core
(Fix) Footer is updated with new social links; oraclesorg references are removed
|
@ -6,7 +6,7 @@
|
|||
|
||||
## 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)).
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
"name": "poa-dapps-keys-generation",
|
||||
"version": "0.2.0",
|
||||
"private": true,
|
||||
"homepage": "https://oraclesorg.github.io/poa-dapps-keys-generation",
|
||||
"homepage": "https://poanetwork.github.io/poa-dapps-keys-generation",
|
||||
"dependencies": {
|
||||
"clipboard": "^1.7.1",
|
||||
"gh-pages": "^1.1.0",
|
||||
|
|
|
@ -47,13 +47,14 @@
|
|||
-->
|
||||
<footer class="footer">
|
||||
<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>
|
||||
<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>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
@ -36,7 +36,7 @@ let getWeb3 = () => {
|
|||
default:
|
||||
netIdName = 'ERROR'
|
||||
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.`
|
||||
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 {
|
||||
left: 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 {
|
||||
@extend %stretch-width;
|
||||
@extend %full-width;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
padding: 15px 10px;
|
||||
color: #fff;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background-image: url(../images/bg_footer.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: $footer-height;
|
||||
background-color: #6d2eae;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
height: auto;
|
||||
padding: 20px 10px 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
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 {
|
||||
@include image-2x('../images/logo_ceremony_dapp_footer@2x.png', 120px, 24px);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 120px;
|
||||
height: 24px;
|
||||
background-image: url(../images/logo_ceremony_dapp_footer.png);
|
||||
height: 24px;
|
||||
background-image: url('../images/logo_ceremony_dapp_footer.png');
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&-rights {
|
||||
@extend %stretch-width;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
color: #fff;
|
||||
line-height: $footer-height;
|
||||
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;
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
|
||||
.footer, .footer-rights, .header {
|
||||
.footer {
|
||||
left: 0;
|
||||
right: 0; }
|
||||
|
||||
.header {
|
||||
left: 0;
|
||||
right: 0; }
|
||||
|
||||
|
@ -226,36 +230,49 @@ button:focus {
|
|||
|
||||
.footer {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
padding: 15px 10px;
|
||||
color: #fff;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background-image: url(../images/bg_footer.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover; }
|
||||
height: 60px;
|
||||
background-color: #6d2eae; }
|
||||
@media screen and (max-width: 414px) {
|
||||
.footer {
|
||||
height: auto;
|
||||
padding: 20px 10px 0; } }
|
||||
.footer .container {
|
||||
position: relative;
|
||||
overflow: hidden; }
|
||||
position: relative; }
|
||||
@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 {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 120px;
|
||||
height: 24px;
|
||||
background-image: url(../images/logo_ceremony_dapp_footer.png);
|
||||
background-image: url("../images/logo_ceremony_dapp_footer.png");
|
||||
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) {
|
||||
.footer-logo {
|
||||
background-image: url("../images/logo_ceremony_dapp_footer@2x.png");
|
||||
background-size: 120px 24px; } }
|
||||
.footer-rights {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
text-align: center; }
|
||||
color: #fff;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-size: 12px; }
|
||||
@media screen and (max-width: 414px) {
|
||||
.footer-rights {
|
||||
line-height: 30px; } }
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
|
@ -425,10 +442,9 @@ button:focus {
|
|||
line-height: 100px; }
|
||||
|
||||
.socials {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
float: right;
|
||||
font-size: 0; }
|
||||
.footer .socials {
|
||||
right: 0; }
|
||||
.socials-i {
|
||||
transition: 0.3s background-color;
|
||||
position: relative;
|
||||
|
@ -436,13 +452,14 @@ button:focus {
|
|||
vertical-align: top;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.2); }
|
||||
@media screen and (min-width: 768px) {
|
||||
.socials-i:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4); } }
|
||||
.socials-i:not(:first-child) {
|
||||
margin-left: 10px; }
|
||||
.socials-i:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4); }
|
||||
.socials-i:before {
|
||||
transform: translate(-50%, -50%);
|
||||
content: '';
|
||||
position: absolute;
|
||||
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) {
|
||||
.socials-i:before {
|
||||
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 {
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
margin: -6.5px 0 0 -7.5px;
|
||||
background-position: 0 -15px; }
|
||||
background-position: 0 -30px; }
|
||||
.socials-i_telegram:before {
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
background-position: 0 -43px; }
|
||||
.socials-i_twitter:before {
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
margin: -6px 0 0 -7.5px;
|
||||
background-position: 0 -28px; }
|
||||
.socials-i_bitcoin:before {
|
||||
width: 11px;
|
||||
height: 15px;
|
||||
margin: -7.5px 0 0 -5.5px;
|
||||
background-position: 0 0; }
|
||||
background-position: 0 -57px; }
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
@import './_vars';
|
||||
@import './_0_fonts';
|
||||
@import './_1_mixins';
|
||||
@import './_2_placeholders';
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
.socials {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
float: right;
|
||||
font-size: 0;
|
||||
|
||||
.footer & {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&-i {
|
||||
transition: 0.3s background-color;
|
||||
position: relative;
|
||||
|
@ -11,18 +12,20 @@
|
|||
vertical-align: top;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: fade-out(#fff, 0.8);
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@media screen and (min-width: 768px) {
|
||||
background-color: fade-out(#fff, 0.6);
|
||||
}
|
||||
background-color: fade-out(#fff, 0.6);
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include image-2x('../images/socials@2x.png', 15px, 40px);
|
||||
@include image-2x('../images/socials@2x.png', 16px, 69px);
|
||||
transform: translate(-50%, -50%);
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
@ -30,12 +33,35 @@
|
|||
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 {
|
||||
&:before {
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
margin: -6.5px 0 0 -7.5px;
|
||||
background-position: 0 -15px;
|
||||
height: 13px;
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
}
|
||||
|
||||
&_telegram {
|
||||
&:before {
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
background-position: 0 -43px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -43,18 +69,8 @@
|
|||
&:before {
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
margin: -6px 0 0 -7.5px;
|
||||
background-position: 0 -28px;
|
||||
}
|
||||
}
|
||||
|
||||
&_bitcoin {
|
||||
&:before {
|
||||
width: 11px;
|
||||
height: 15px;
|
||||
margin: -7.5px 0 0 -5.5px;
|
||||
background-position: 0 0;
|
||||
background-position: 0 -57px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|