Footer contact links + styling

Author: Becky Sroufe

app/app-js/modules/footer/footer.view.html

@@ -1,7 +1,17 @@
-Copyright © 2014 Engine, Inc.
+<h4>Contact Us</h4>
+<div class="contact-links">
+  <a href="https://www.facebook.com/groups/plugnplaymarketplace/" target="_blank" data-bypass>
+    <i class="fa fa-facebook-square fa-2x"></i>
+  </a>
+  <a href="https://twitter.com/APIengineco" target="_blank" data-bypass>
+    <i class="fa fa-twitter-square fa-2x"></i>
+  </a>
+  <a href="https://angel.co/api-network" class="angellist" target="_blank" data-bypass>
+  </a>
+</div>
 <!--
 <a href="legal">Legal</a>
 <a href="tos">Terms of Service</a>
 <a href="privacy">Privacy</a>
  -->
-<a href="contact">Contact</a>
+<h6>Copyright &copy; 2014 Engine, Inc.</h6>

app/app-js/modules/welcome/welcome.view.html

@@ -9,9 +9,9 @@ <h1>Let's Get Started!</h1>
     For more information, check out our github repo: <a href="https://github.com/LDEngine/Engine-Data-Module" target="_blank">https://github.com/LDEngine/Engine-Data-Module</a>
   </div>
 
-  <h1>
+  <h1 class="register-app">
     Register Your App:
-    <button class="btn-gray btn-register-app btn-lg"></button>
+    <button class="btn-gray btn-lg"></button>
   </h1>
 
   <div class="import-data-modules">

app/img/angellist-apiblue.png

@@ -127,27 +127,35 @@
   }
 
   // Welcome Page
-  .btn-register-app {
-    &:extend(.btn-lg all);
+  .register-app {
+    border-bottom: 0;
 
-    width: 25%;
-    text-align: center;
+    button {
+      &:extend(.btn-lg all);
 
-    &:before {
-      content: "Register Your App!";
-    }
+      width: 204px;
+      text-align: center;
+
+      &:before {
+        content: "Register Your App!";
+      }
 
-    &:hover {
-      &:extend(.btn-green all, .btn-lg);
+      &:hover {
+        &:extend(.btn-green all, .btn-lg);
 
-      .transition(background .25s ease-in-out, border .25s ease-in-out;);
+        .transition(background .25s ease-in-out, border .25s ease-in-out;);
 
-      &:before {
-        content: "Coming Soon!";
+        &:before {
+          content: "Coming Soon!";
+        }
       }
-    }
 
-    color: @gray-light;
+      color: @gray-light;
+
+      @media (max-width: @screen-xs-min) {
+        margin: 1% auto;
+      }
+    }
   }
 }
 

app/img/angellist.png

@@ -7,7 +7,7 @@
 @import "static.less";
 @import "try-uri.less";
 
-@footer-height:      60px;
+@footer-height:      121px;
 @brand-apiblue:      #007bb6;
 @brand-apibluelight: desaturate(lighten(@brand-apiblue, 20%), 45%);
 @brand-primary:      @brand-apiblue;
@@ -124,38 +124,68 @@ footer {
   width: 100%;
   line-height: @footer-height;
   color: #FFF;
-  text-indent: 20px;
+  text-align: center;
   background-color: @gray-dark;
 
-  a {
-    padding: 0 0.5%;
+  h4 {
+    margin-top: 1%;
+    margin-bottom: 0;
+  }
+
+  .contact-links {
+    margin: 1% auto 1.5% auto;
+    padding: 0;
+    width: 10%;
+    height: 2em;
 
-    &:first-child {
-      padding-left: 1%;
+    @media (min-width: @screen-xs-min) and (max-width: @screen-md-min) {
+      width: 20%;
     }
-  }
 
-  @media screen {
     @media (max-width: @screen-xs-min) {
-      padding-top: 2%;
-      position:relative;
-      line-height: (@footer-height / 2);
-      font-size: 1em;
+      width: 50%;
+    }
+
+    a {
+      float: left;
+      width: 33.3%;
+      line-height: 1;
+      height: 2em;
       text-align: center;
 
-      a {
+      i {
+        color: @brand-apibluelight;
+      }
+
+      /* padding: 0 0.5%; &:first-child { padding-left: 1%; } */
+    }
+
+    .angellist {
+      background: url('../img/angellist-apiblue.png') no-repeat center center;
+      background-size: 15px;
+    }
+  }
 
-        &:first-child {
-          padding: 0
-        }
+  @media (max-width: @screen-xs-min) {
+    padding-top: 2%;
+    padding-bottom: 1%;
+    position:relative;
+    line-height: (@footer-height / 2);
+    font-size: 1em;
+    text-align: center;
 
-        &:last-child {
-          padding: 0 0 2% 0;
-        }
+    a {
 
-        display: block;
-        padding: 0;
+      &:first-child {
+        padding: 0
       }
+
+      &:last-child {
+        padding: 0 0 2% 0;
+      }
+
+      display: block;
+      padding: 0;
     }
   }
 }

app/less/dashboard.less

@@ -1,6 +1,7 @@
 // Mixins
 // --------------------------------------------------
 
+// Declaring left or right border radii
 .border-left-radius(@radius) {
              border-top-left-radius: @radius;
           border-bottom-left-radius: @radius;