Merge pull request #48 from fielddaylab/feature/FD-71-1

FD-71 footer

assets/css/styles_ver3.css

@@ -16994,19 +16994,62 @@ tbody tr {
 ------------------------------------------ */
 #footer {
   z-index: 100;
-  padding: 5vw;
+}
+#footer .row {
+  max-width: 1800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+#footer .homepage {
+  background: #d0bca9;
+}
+#footer .homepage .footerinfo {
+  border-right: 3px solid #928477;
+}
+@media (max-width: 992px) {
+  #footer .homepage .footerinfo {
+    border-right-style: none;
+  }
+}
+#footer .homepage .footer-signup {
+  padding-top: 5vw;
+}
+#footer .homepage .footer-signup img {
+  width: 250px;
+}
+#footer .homepage .footerlogo {
+  width: 250px;
+}
+#footer .homepage a.button:focus {
+  opacity: 0.9;
+}
+#footer .alt {
   background: #FFDF71;
 }
+#footer .alt .footerinfo {
+  border-right: 3px solid #E0BC4E;
+}
+@media (max-width: 992px) {
+  #footer .alt .footerinfo {
+    border-right-style: none;
+  }
+}
+#footer .alt .footer-signup img {
+  padding-top: 5vw;
+  width: 200px;
+}
+#footer .alt .footerlogo {
+  width: 150px;
+}
 
 .footer {
+  padding: 0 5vw 3em;
   text-align: left;
   margin: 0 auto;
-  max-width: 1800px;
 }
 .footer .footerinfo {
   padding: 3vw;
   margin-top: 5vw;
-  border-right: 3px solid #E0BC4E;
 }
 .footer .footerinfo a {
   color: #001E2A;
@@ -17030,7 +17073,6 @@ tbody tr {
   margin-bottom: 15px;
 }
 .footer .footerlogo {
-  width: 150px;
   height: auto;
   margin-bottom: 20px;
 }

assets/scss/_footer.scss

@@ -3,17 +3,58 @@
 
 #footer {
   z-index:100;
-  padding:5vw;
-  background: $light_yellow;
+  .row {
+    max-width: 1800px;
+    margin-left:auto;
+    margin-right: auto;
+  }
+  .homepage {
+    background: #d0bca9;
+
+    .footerinfo {
+      @media (max-width: 992px) {
+        border-right-style: none;
+      }
+      border-right: 3px solid #928477;
+    }
+    .footer-signup {
+      padding-top: 5vw;
+    }
+    .footer-signup img {
+      width: 250px;
+    }
+    .footerlogo {
+      width:250px;
+    }
+    a.button:focus {
+      opacity: 0.9;
+    }
+  }
+  .alt {
+    background: $light_yellow;
+    .footerinfo {
+      @media (max-width: 992px) {
+        border-right-style: none;
+      }
+      border-right: 3px solid $yellow;
+    }
+    .footer-signup img {
+      padding-top: 5vw;
+      width: 200px;
+    }
+    .footerlogo {
+      width: 150px;
+    }
+  }
 }
 .footer {
+  padding:0 5vw 3em;
   text-align: left;
   margin:0 auto;
-  max-width:1800px;
+
   .footerinfo {
     padding: 3vw;
     margin-top:5vw;
-    border-right:3px solid $yellow;
     a {
       color:$black;
     }
@@ -39,7 +80,6 @@
     }
   }
   .footerlogo {
-    width: 150px;
     height: auto;
     margin-bottom: 20px;
   }

includes/footer-homepage.php

@@ -0,0 +1,35 @@
+<script src="/assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
+<script src="/assets/js/vendor/jquery-3.0.0.min.js"></script>
+<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+<script src='/assets/js/vendor/fastclick.js'></script>
+<script src='/assets/js/vendor/gridder.js'></script>
+<script src='/assets/js/vendor/buddysystem.jquery.js'></script>
+<script src='/assets/js/vendor/scrollreveal.min.js'></script>
+<script src='/assets/js/vendor/isscrolledintoview.js'></script>
+<script src='/assets/js/vendor/glide.min.js'></script>
+<script src='/assets/js/vendor/stickyfill.js'></script>
+<script src='/assets/js/app.js'></script>
+<footer id="footer">
+  <div class="footer homepage">
+    <div class="row">
+      <div class="col-md-7 footerinfo homepage">
+        <img class="footerlogo" src="assets/img/logos/fd-learning_games_logo_new_alt.png" alt="the Field Day Lab logo">
+        <p class="small">Our <a href="/about">team</a> is based at the Wisconsin Center for Education Research at the University of Wisconsin - Madison. We make learning games that bring contemporary research to the public, and we use the game data to understand how people learn.</p>
+        <p class="small">Interested in making something together? email <a href="mailto:[email protected]">David Gagnon</a><br />
+        for all other inquiries, please contact <a href="mailto:[email protected]">Reyna Groff</a></p>
+        <div class="social-links">
+          <a target="_blank" href="http://facebook.com/fielddaylab"><img src="/assets/img/logos/social-facebook.png"></a>
+          <a target="_blank" href="http://twitter.com/fielddaylab"><img src="/assets/img/logos/social-twitter.png"></a>
+          <a target="_blank" href="http://instagram.com/fielddaylab"><img src="/assets/img/logos/social-insta.png"></a>
+        </div>
+      </div>
+      <div class="col-md-5">
+        <div class="footer-signup">
+          <img class="signup-badge img-responsive" src="/assets/img/illustrations/mask.png" alt="a stylized and colorfully patterned mask">
+          <p class="small">Interested in what we're cooking up? We have many ways for you to get involved.</p>
+           <a target="_blank" href="#" class="button white filled xsmall">GET INVOLVED</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>

includes/footer.php

@@ -10,9 +10,9 @@
 <script src='/assets/js/vendor/stickyfill.js'></script>
 <script src='/assets/js/app.js'></script>
 <section id="footer">
-  <div class="footer">
+  <div class="footer alt">
     <div class="row">
-      <div class="col-md-7 footerinfo">
+      <div class="col-md-7 footerinfo alt">
         <img class="footerlogo" src="/assets/img/logos/fd.png">
         <p class="small">Our <a href="/about">team</a> is based at the Wisconsin Center for Education Research at the University of Wisconsin - Madison. We make learning games that bring contemporary research to the public, and we use the game data to understand how people learn.</p>
         <p class="small">Interested in making something together? email <a href="mailto:[email protected]">David Gagnon</a><br />

redesign.php

@@ -128,7 +128,7 @@
 </div>
 
 <!--include footer-->
-<?php include 'includes/footer.php';?>
+<?php include 'includes/footer-homepage.php';?>
 
 <!--include modals-->
 <?php include 'includes/modals.php';?>