Social buttons in the form of a font, changed a few js event behaviors

brewery.html

@@ -12,6 +12,7 @@
 	<link rel="shortcut icon" href="img/fav.ico">
 	<link rel="stylesheet" href="css/style.css">
 	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="css/fl-beer-soc.css">
 	<link href='http://fonts.googleapis.com/css?family=Patua+One|Roboto:500,400italic,700,400|Roboto+Condensed:700,400' rel='stylesheet' type='text/css'>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 	<script src="min/modernizr.js" type="text/javascript"></script>
@@ -36,10 +37,10 @@
 							<li><a href="#">Contact</a></li>
 						</ul>
 						<ul class="social">
-							<li><a href="#" class="icon"><span>Facebook</span></a></li>
-							<li><a href="#" class="icon"><span>Twitter</span></a></li>
-							<li><a href="#" class="icon"><span>Some other shit</span></a></li>
-							<li><a href="#" class="icon"><span>Instagram</span></a></li>
+							<li><a href="#" class="icon"><i class="icon-facebook"></i></a></li>
+							<li><a href="#" class="icon"><i class="icon-twitter"></i></a></li>
+							<li><a href="#" class="icon"><i class="icon-untapped"></i></a></li>
+							<li><a href="#" class="icon"><i class="icon-instagram"></i></a></li>
 						</ul>
 					</div>
 				</li>

js/js.js

@@ -27,7 +27,8 @@ $(document).ready(function () {
 
 	resizeBg();
 	$(window).resize(function () {resizeBg();});
-	$('.menu').click(function () {
+	$('.menu').click(function (event) {
+			event.preventDefault();
 		$('header').toggleClass('open collapsed');
 	});
 	$(".current").click(function (event) {

sass/style.sass

@@ -25,6 +25,8 @@ html,body
 	p
 		color: $brand-3
 a
+	-webkit-tap-highlight-color: rgba(0,0,0,0)
+	-moz-tap-highlight-color: rgba(0,0,0,0)
 	color: $brand-secondary
 	text-decoration: none
 	transition: .2s color
@@ -171,11 +173,11 @@ header
 	// top: 25%
 	left: 0
 	opacity: 0
-	font-size: 5em
 	font-family: $brand
 	letter-spacing: .01em
-	line-height: 1.05em
 	.links
+		font-size: 5em
+		line-height: 1.05em
 		position: fixed
 		top: 50%
 		left: 40px
@@ -200,7 +202,19 @@ header
 		a:hover:not(.current)::after
 			opacity: 1
 	.social
-		display: none
+		display: inline-block
+		position: fixed
+		bottom: 30px
+		font-size: 1.5em
+		letter-spacing: 15px
+		li
+			display: inline
+		li:first-child		//compensation for bad icon
+			margin-right: -5px
+		a
+			color: $brand-4
+		a:hover
+			color: $brand-3
 .open
 	transition-delay: 0
 	display: block