Merge branch 'develop'

brewery.html

@@ -49,9 +49,9 @@
 	</header>
 	<div class="bodywrap">
 		<section class="fold">
-			<div class="heroimg">
+			<div class="heroimg bgcoverize">
 				<div class="imgwrap">
-					<img src="img/beer.png" alt="Our Brewery">					
+					<img src="img/lotsabeer.jpg" alt="Our Brewery">					
 				</div>
 				<div class="overlay"></div>
 			</div>
@@ -63,9 +63,9 @@ <h1>Brewery &amp; Taproom</h1>
 			</div>
 		</section>
 		<section>
-			<div class="sideimg pull-left">
+			<div class="sideimg bgcoverize pull-left">
 				<div class="imgwrap">
-					<img src="img/beer.png" alt="Inside the Brewery">
+					<img src="img/ourfacility.jpg" alt="Inside the Brewery">
 				</div>
 			</div>
 			<div class="content pull-right">
@@ -76,9 +76,9 @@ <h2>The Space</h2>
 			</div>
 		</section>
 		<section>
-			<div class="sideimg pull-right">
+			<div class="sideimg bgcoverize pull-right">
 				<div class="imgwrap">
-					<img src="img/beer.png" alt="The Florida Brewery Co. Team">
+					<img src="img/ourteam.jpg" alt="The Florida Brewery Co. Team">
 				</div>
 			</div>
 			<div class="content pull-left">
@@ -89,9 +89,9 @@ <h2>The Team</h2>
 			</div>
 		</section>
 		<section>
-			<div class="sideimg pull-left">
+			<div class="sideimg bgcoverize pull-left">
 				<div class="imgwrap">
-					<img src="img/beer.png" alt="The Brewery Tap">
+					<img src="img/tap.jpg" alt="The Brewery Tap">
 				</div>
 			</div>
 			<div class="content pull-right">

js/js.js

@@ -1,3 +1,39 @@
 $(document).ready(function () {
-	console.log('Hello, World!');
+	var imgContainer = $('.bgcoverize'),
+	    $bg          = $(".bgcoverize > .imgwrap > img"),
+	    yolo         = $bg,
+	    aspectRatio  = yolo.width() / yolo.height();
+
+	function resizeBg() {
+		$bg.each(function () {
+			yolo = $(this);
+		    aspectRatio  = yolo.width() / yolo.height();
+		    imgContainer = $(this).parent().parent();
+		    console.log(imgContainer);
+			if ( (imgContainer.width() / imgContainer.height()) < aspectRatio ) {
+			    $(this)
+			    	.removeClass('img-cover-w')
+			    	.addClass('img-cover-l');
+			} else {
+			    $(this)
+			    	.removeClass('img-cover-l')
+			    	.addClass('img-cover-w');
+			}
+		});
+
+	}
+	resizeBg();
+	$(window).resize(function () {
+		resizeBg();
+	});
+	// function imageFun(wrapper) {
+	// 	var img = $("img", wrapper);
+	// 	console.log($(wrapper));
+	// }
+	// imageFun();
+	// $(window).resize(function () {
+	// 	$('.imgwrap').each(function () {
+	// 		imageFun(this);
+	// 	});
+	// });
 });

sass/_color.sass

@@ -15,4 +15,6 @@ $brand-3:			$dimorange
 $brand-4:			$orangered
 $brand-5:			$midorange
 //--- Content ---//
-$overlay:	rgba(0,0,0,0.15)
+$overlay:	rgba(0,0,0,0.15)
+$overlay2:	rgba(0,0,0,0.13)
+$overlay-dot: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIW2NkYGCQZGBgeM7IAAUACpEBA5Dm4YwAAAAASUVORK5CYII=')

sass/_var.sass

@@ -20,6 +20,6 @@ $phablet:	"(max-width: 767px)"
 $tablet:	"(min-width: 768px) and (max-width: 1023px)"
 $sdesk:		"(min-width: 1024px) and (max-width: 1200px)"
 $desktop: "(min-width: 1024px)"
-$ldesk: "(min-width: 1920px)"
+$ldesk: "(min-width: 1600px)"
 
 $sdesk-max: "(max-width: 1200px)"

sass/style.sass

@@ -71,8 +71,22 @@ p
 .heroimg,.sideimg
 	position: relative
 
-
-
+.img-cover-w
+	width: 100%
+	margin-left: 0
+	height: auto
+	position: absolute
+	left: 0
+	top: 50%
+	transform: translateY(-50%)
+.img-cover-l
+	position: absolute
+	top: 0
+	left: 50%
+	transform: translateX(-50%)
+	width: auto
+	margin-top: 0
+	height: 100%
 //--- The meat of this situation ---//
 
 //--- NAVBAR ---//
@@ -165,6 +179,11 @@ header
 			>div
 				width: 100%
 				height: 100%
+				text-align: center
+				img:not(.img-cover-l)
+					width: 100%
+					margin-left: 0
+					height: auto
 	.fold
 		height: auto
 		.heroimg
@@ -188,6 +207,7 @@ header
 			width: 65%
 			max-width: 720px
 .imgwrap
+	position: relative
 	width: 100%
 	height: 100%
 	overflow: hidden
@@ -216,6 +236,9 @@ header
 	width: 100%
 	height: 345px
 	background: url('../img/beerpattern.jpg') top center repeat-x
+	@media #{$phone}
+		height: 280px
+		background-size: 645px
 .beeroverlay
 	position: relative
 	padding: 45px 0
@@ -237,10 +260,17 @@ header
 		border-right: 75px solid transparent
 		border-bottom: 35px solid $brand-4
 		margin-left: -75px
+		@media #{$phone}
+			bottom: 95%
 
 
 
 //--- Responsive Time! ---//
+@media #{$ldesk}
+	.overlay
+		background: $overlay2
+		background-image: $overlay-dot
+		// opacity: .1
 
 @media #{$sdesk-max}
 	p
@@ -261,11 +291,11 @@ header
 			.pull-left,.pull-right
 				float: none
 				width: 100%
+				// height: 320px
+				.desc
+					width: 80%
 			.sideimg
 				height: 320px
-				img
-					width: 120%
-					height: auto
 @media #{$phone}
 	h1
 		font-size: 2.5em