Merge pull request #978 from ThomasKranitsas/fix-footer

Fix footer links for mobile view

Author: birdofpreyru

app/layout/footer/footer.jade

@@ -1,7 +1,6 @@
 footer.bottom-footer
   // Footer links
   nav.menu-item
-    .menu-item-header.show-small OTHERS
 
     ul.submenu
       li.submenu-item #[a.menu-link(ng-href="https://www.{{domain}}/sitemap") SITE MAP]

assets/css/layout/footer.scss

@@ -1,17 +1,31 @@
 @import 'topcoder/tc-includes';
 
+footer {
+  font-family: "Merriweather Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-weight: 400;
+}
+
 .bottom-footer {
 	background-color: $gray-darkest;
 	padding: 1px 20px 30px 20px;
 }
 
+.bottom-footer .menu-item .menu-link {
+  color: $tc-white;
+  font-size: 16px;
+}
+
+.bottom-footer .menu-item .menu-link:hover {
+  color: $primary;
+}
+
 .social-links {
     font-size: 13px;
     line-height: 1.2em;
     text-align: center;
     font-weight: normal;
   	margin: 35px 0;
-  	color: #fff;
+  	color: $tc-white;
 
 	a {
 		display: inline-block;
@@ -23,60 +37,83 @@
 			margin-left: 30px;
 		}
 	}
+
+	.fb-link {
+	  background-image: url(../../images/ico-facebook_desktop.svg);
+	  width: 27px;
+	  height: 27px;
+	}
+
+	.twitter-link {
+	  background-image: url(../../images/ico-twitter_desktop.svg);
+	  width: 28px;
+	  height: 24px;
+	}
+
+	.linkedin-link {
+	  background-image: url(../../images/ico-linkedin_desktop.svg);
+	  width: 27px;
+	  height: 27px;
+	}
+
+	.google-link {
+	  background-image: url(../../images/ico-google_desktop.svg);
+	  width: 27px;
+	  height: 27px;
+	}
 }
 
 .copyright-notice {
 	text-align: center;
     font-size: 12px;
     line-height: 14px;
-    color: #656565;
+    color: $tc-white;
 }
 
 
 @media only screen and (max-width : 1024px) {
 	// removed fold-pusher from the rule to remove white space
-	// .bottom-footer, .fold-pusher {
-	.bottom-footer {
-		height: 200px;
+	.bottom-footer, .fold-pusher {
+	// .bottom-footer {
+		height: auto;
 	}
 	.bottom-footer .menu-item {
-		display: none;
-		margin-top: 10px;
+		display: block;
+	}
+	.bottom-footer {
+		padding-top: 36px;
 	}
 
 	.social-links {
+    margin-top: 0;
+    margin-bottom: 6px;
+
 		.fb-link {
-			background-image: url(../../images/ico-facebook.svg);
 			width: 27px;
 			height: 27px;
 		}
 
 		.twitter-link {
-			background-image: url(../../images/ico-twitter.svg);
 			width: 28px;
 			height: 24px;
 		}
 
 		.linkedin-link {
-			background-image: url(../../images/ico-linkedin.svg);
 			width: 27px;
 			height: 27px;
 		}
 
 		.google-link {
-			background-image: url(../../images/ico-google.svg);
 			width: 27px;
 			height: 27px;
 		}
 	}
 
   .bottom-footer nav {
-    position: absolute;
-    top: 1047px;
-    left: 0;
-    width: 100%;
-    padding: 20px;
-    background-color: $gray-darkest;
+    position: relative;;
+    top: auto;
+    left: auto;
+		text-align: center;
 
     ul a {
       color: $white;
@@ -86,9 +123,9 @@
 
 @media only screen and (min-width : 1025px) {
 	// removed fold-pusher from the rule to remove white space
-	// .bottom-footer, .fold-pusher {
-	.bottom-footer {
-		height: 270px;
+	.bottom-footer, .fold-pusher {
+	// .bottom-footer {
+		height: 200px;
 	}
 	.bottom-footer {
 		padding-top: 40px;
@@ -102,25 +139,19 @@
 			font-weight: normal;
 
 			.menu-link {
-				color: #fff;
-				font-size: 16px;
 				line-height: 21px;
 			}
-			.menu-link:hover {
-			    color: #0096ff;
-			}
 		}
 	}
 
 	.copyright-notice {
 		font-size: 15px;
-    	color: #fff;
+    	color: $tc-white;
 	}
 
 	.account-footer {
 		.copyright-notice {
 		    font-size: 12px;
-		    color: #656565;
 		}
 	}
 
@@ -132,21 +163,5 @@
 			height: 26px;
 			margin-top: 13px;
 		}
-
-		.fb-link {
-			background-image: url(../../images/ico-facebook_desktop.svg);
-		}
-
-		.twitter-link {
-			background-image: url(../../images/ico-twitter_desktop.svg);
-		}
-
-		.linkedin-link {
-			background-image: url(../../images/ico-linkedin_desktop.svg);
-		}
-
-		.google-link {
-			background-image: url(../../images/ico-google_desktop.svg);
-		}
 	}
 }