Updated footer

biomed-frontend/bower.json

@@ -13,6 +13,7 @@
     "angular-masonry": "~0.9.1",
     "imagesloaded": "~3.1.8",
     "jquery-colorbox": "~1.5.14",
-    "angular-foundation": "~0.4.0"
+    "angular-foundation": "~0.4.0",
+    "font-awesome": "~4.3.0"
   }
 }

biomed-frontend/gulpfile.js

@@ -79,6 +79,7 @@ gulp.task('styles', function() {
         .pipe(sass({
             includePaths: [
                 'vendor/foundation/scss',
+                'vendor/font-awesome/scss'
             ],
 //            sourceComments: 'map'
         }))

biomed-frontend/src/app/layout.html

@@ -90,10 +90,26 @@
 <div class="page-footer-bottom">
     <div class="row">
         <div class="medium-4 medium-4 push-8 columns">
-
+            <ul class="social">
-            <ul class="home-social">
                 <li>
-                    <a href="http://www.twitter.com/" class="twitter"></a>
+                    <a href="http://www.linkedin.com/" target="_blank">
+                        <span class="fa-stack fa-lg">
+                            <i class="fa fa-circle fa-stack-2x"></i>
+                            <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
+                    <a href="http://www.twitter.com/" target="_blank">
+                        <span class="fa-stack fa-lg">
+                            <i class="fa fa-circle fa-stack-2x"></i>
+                            <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
+                    <a href="http://plus.google.com/" target="_blank">
+                        <span class="fa-stack fa-lg">
+                            <i class="fa fa-circle fa-stack-2x"></i>
+                            <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
                 </li>
                 <li>
                     <a href="http://www.facebook.com/" class="facebook"></a>
@@ -108,19 +124,10 @@
                 <li class="name">
                     <a href="#">Atlantic Biomedical</a>
                 </li>
-                <!--<li>
-                    <a href="#">Home</a>
-                </li>
-                <li>
-                    <a href="#" data-reveal-id="contactModal">Contact</a>
-                </li>-->
             </ul>
             <p class="copyright">©2014 Atlantic Biomedical. All rights reserved.</p> 
         </div>
     </div>
-    <script>
-        $(document).foundation();
-    </script>
 </div>
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -131,5 +138,7 @@
   ga('create', 'UA-56347803-1', 'auto');
   ga('require', 'displayfeatures');
   ga('send', 'pageview');
-
+</script>
-</script>
+<script>
+    $(document).foundation();
+</script>

biomed-frontend/src/styles/_biomed.scss

@@ -1,6 +1,9 @@
 // Put biomed styles in here
 
 @import "components/loading-bar";
+@import "components/footer";
+@import "components/return-to-top";
+
 .logo {
   display: block;
   text-indent: -9999px;
@@ -485,12 +488,11 @@ table {
 }
 
 #main-content {
-    margin-top: 9px;
     min-height: 82%;
 }
 .content-wrapper {
     background: #f1f2f6;
-    margin-top: 50px;
+    margin-bottom: 70px;
 }
 .row {
     max-width: 80rem;
@@ -981,132 +983,6 @@ input[type=submit].btn-block {
   background-color: #ed5565;
 }
 
-.page-footer-bottom {
-  background: #333333;
-  padding: 24px 0 10px; }
-
-.page-footer-bottom .design-border {
-  border-bottom: 1px solid #484848;
-  padding-bottom: 5px;
-  margin-bottom: 25px; }
-
-.page-footer-bottom a.site-logo {
-  color: #858585;
-  font-weight: normal;
-  background: url("/img/footer-icons.png") no-repeat 0 3px;
-  padding: 23px 0 0 0;
-  font-size: 1rem;
-  display: inline-block;
-  width: 90px; }
-
-.page-footer-bottom a.site-logo:hover {
-  opacity: 0.8;
-  /*      filter: opacity(80%);*/ }
-
-.page-footer-bottom ul.site-links {
-  margin: 0;
-  display: inline-block;
-  padding-bottom: 0px; }
-
-.page-footer-bottom ul.site-links li {
-  display: block;
-  float: left;
-  margin-right: 6px;
-  text-transform: uppercase;
-  font-weight: 700;
-  font-size: 0.75rem; }
-
-.page-footer-bottom ul.site-links {
-  font-family: 'Orbitron', sans-serif;
-  font-weight: 700; }
-
-.page-footer-bottom ul.site-links li a {
-  color: #666666;
-  padding: 3px 6px 3px 0; }
-
-.page-footer-bottom ul.site-links li a:hover {
-  color: #777777; }
-
-.page-footer-bottom ul.site-links li.name {
-  font-weight: bold;
-  font-size: 0.8rem;
-  margin-top: -1px; }
-
-.page-footer-bottom ul.site-links li.name a {
-  padding-top: 0;
-  margin-top: 0; }
-
-.page-footer-bottom p.copyright {
-  margin: 6px 0 0;
-  font-size: 0.75rem;
-  color: #666666; }
-
-.page-footer-bottom ul.home-social {
-  display: block;
-  float: right;
-  margin-bottom: 8px; }
-
-.page-footer-bottom ul.home-social li {
-  list-style: none;
-  display: block;
-  float: left;
-  margin-left: 10px; }
-
-.page-footer-bottom ul.home-social li:first-child {
-  margin-left: 0; }
-
-.page-footer-bottom ul.home-social li a {
-  display: block;
-  height: 50px;
-  width: 50px;
-  background: url("/img/social.png") no-repeat center 0; }
-
-.page-footer-bottom ul.home-social li a:hover {
-  opacity: 0.8;
-  /*          filter: opacity(80%); */ }
-
-.page-footer-bottom ul.home-social li a.twitter {
-  background-position: center 0; }
-
-.page-footer-bottom ul.home-social li a.facebook {
-  background-position: center -200px; }
-
-.page-footer-bottom ul.home-social li a.mail {
-  background-position: center -400px; }
-
-@media only screen and (max-width: 40em) {
-  .page-footer-bottom {
-    text-align: center; }
-  .page-footer-bottom .columns {
-    padding: 0; }
-  .page-footer-bottom a.site-logo {
-    display: block;
-    margin: 0 auto; }
-  .page-footer-bottom ul.site-links {
-    margin: 16px 0 10px; }
-  .page-footer-bottom ul.home-social {
-    float: none;
-    margin: 0 0 20px 0;
-    text-align: center;
-    height: 44px;
-    display: inline-block; } }
-
-/* Retina Images */
-@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
-  .page-footer-bottom ul.home-social li a {
-    background-image: url("/img/social-retina.png");
-    background-size: 50px 600px; }
-  .page-footer-bottom a.site-logo {
-    background-image: url("/img/footer-icons-retina.png");
-    background-size: 100px 1400px; } }
-
-@media only screen and (max-width: 320px), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
-  .page-footer-bottom ul.home-social li a {
-    background-image: url("/img/social-retina.png");
-    background-size: 50px 600px; }
-  .page-footer-bottom a.site-logo {
-    background-image: url("/img/footer-icons-retina.png");
-    background-size: 100px 1400px; } }
 
 .row {
     max-width: 4000px;
@@ -1328,44 +1204,3 @@ h2 {
     margin: 0 auto;    
 }
 
-#return-to-top {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background: rgb(0, 0, 0);
-    background: rgba(0, 0, 0, 0.7);
-    width: 50px;
-    height: 50px;
-    display: block;
-    text-decoration: none;
-    -webkit-border-radius: 35px;
-    -moz-border-radius: 35px;
-    border-radius: 35px;
-    display: none;
-    -webkit-transition: all 0.3s linear;
-    -moz-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-    z-index: 1000;
-}
-#return-to-top i {
-    color: #fff;
-    margin: 0;
-    position: relative;
-    left: 16px;
-    top: 13px;
-    font-size: 19px;
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    -ms-transition: all 0.3s ease;
-    -o-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-}
-#return-to-top:hover {
-    background: rgba(0, 0, 0, 0.9);
-}
-#return-to-top:hover i {
-    color: #fff;
-    top: 5px;
-}

biomed-frontend/src/styles/components/_footer.scss

@@ -0,0 +1,73 @@
+.page-footer-bottom {
+  background: #333333;
+  padding: 14px 0;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+
+  a {
+    color: #666666;
+
+    &:hover {
+      color: #777777;
+    }
+  }
+
+
+  ul.site-links {
+    margin: 0;
+    display: inline-block;
+    padding-bottom: 0px;
+
+    li {
+      display: block;
+      float: left;
+      margin-right: 6px;
+      text-transform: uppercase;
+      font-weight: 700;
+      font-size: 0.75rem;   
+
+      &.name {
+        font-weight: bold;
+        font-size: 0.8rem;
+        margin-top: -1px;
+      }
+    }
+  }
+
+  p.copyright {
+    margin: 0;
+    font-size: 0.75rem;
+    color: #666666;
+  }
+
+  ul.social {
+    display: block;
+    float: right;
+    margin: 0;
+
+    li {
+      list-style: none;
+      display: block;
+      float: left;
+      margin-left: 2px;
+    }
+  }
+}
+
+@media #{$small-only} {
+  .page-footer-bottom {
+    position: initial;
+    text-align: center;
+
+    ul.site-links {
+      margin: 16px 0 10px;
+    }
+
+    ul.social {
+      float: none;
+      text-align: center;
+      display: inline-block;
+    }
+  }
+}

biomed-frontend/src/styles/components/_return-to-top.scss

@@ -0,0 +1,47 @@
+#return-to-top {
+    position: fixed;
+    bottom: 90px;
+    right: 20px;
+    background: rgb(0, 0, 0);
+    background: rgba(0, 0, 0, 0.7);
+    width: 50px;
+    height: 50px;
+    display: block;
+    text-decoration: none;
+    -webkit-border-radius: 35px;
+    -moz-border-radius: 35px;
+    border-radius: 35px;
+    display: none;
+    -webkit-transition: all 0.3s linear;
+    -moz-transition: all 0.3s ease;
+    -ms-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+    z-index: 1000;
+}
+#return-to-top i {
+    color: #fff;
+    margin: 0;
+    position: relative;
+    left: 16px;
+    top: 13px;
+    font-size: 19px;
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    -ms-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
+#return-to-top:hover {
+    background: rgba(0, 0, 0, 0.9);
+}
+#return-to-top:hover i {
+    color: #fff;
+    top: 5px;
+}
+
+@media #{$small-only} {
+    #return-to-top {
+        bottom: 20px;
+    }
+}

biomed-frontend/src/styles/styles.scss

@@ -2,4 +2,5 @@
 @import "settings";
 @import "normalize";
 @import "foundation";
+@import "font-awesome";
 @import "biomed";