Footer is updated with current social links; oraclesorg references are removed

README.md

@@ -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)).
 

package.json

@@ -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",

public/index.html

@@ -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>

src/getWeb3.js

@@ -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)
           }

src/index/_2_placeholders.scss

@@ -1,3 +1,8 @@
+%full-width {
+  left: 0;
+  right: 0;
+}
+
 %stretch-width {
   left: 0;
   right: 0;

src/index/_vars.scss

@@ -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;

src/index/footer.scss

@@ -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;
+    }
   }
 }
+

src/index/index.css

@@ -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; }

src/index/index.scss

@@ -1,3 +1,4 @@
+@import './_vars';
 @import './_0_fonts';
 @import './_1_mixins';
 @import './_2_placeholders';

src/index/socials.scss

@@ -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;
       }
     }
   }
-}
+}