+
@@ -63,9 +63,9 @@
- 
+ 
+
Brewery & Taproom
+
-
-
+ 
+
@@ -76,9 +76,9 @@
The Space
+
-
-
+ 
+
@@ -89,9 +89,9 @@
The Team
+
-
+ 
+
diff --git a/img/beer.jpg b/img/beer.jpg
new file mode 100644
index 0000000..c85a2d6
Binary files /dev/null and b/img/beer.jpg differ
diff --git a/img/beer.png b/img/beer.png
deleted file mode 100644
index 3daca67..0000000
Binary files a/img/beer.png and /dev/null differ
diff --git a/img/lotsabeer.jpg b/img/lotsabeer.jpg
new file mode 100644
index 0000000..8387b4c
Binary files /dev/null and b/img/lotsabeer.jpg differ
diff --git a/img/ourfacility.jpg b/img/ourfacility.jpg
new file mode 100644
index 0000000..1384f54
Binary files /dev/null and b/img/ourfacility.jpg differ
diff --git a/img/ourteam.jpg b/img/ourteam.jpg
new file mode 100644
index 0000000..1adc3cd
Binary files /dev/null and b/img/ourteam.jpg differ
diff --git a/img/tap.jpg b/img/tap.jpg
new file mode 100644
index 0000000..8d2404f
Binary files /dev/null and b/img/tap.jpg differ
diff --git a/js/js.js b/js/js.js
index b161ac7..73661e5 100755
--- a/js/js.js
+++ b/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);
+ // });
+ // });
});
\ No newline at end of file
diff --git a/sass/_color.sass b/sass/_color.sass
index cc0b19b..766751f 100644
--- a/sass/_color.sass
+++ b/sass/_color.sass
@@ -15,4 +15,6 @@ $brand-3: $dimorange
$brand-4: $orangered
$brand-5: $midorange
//--- Content ---//
-$overlay: rgba(0,0,0,0.15)
\ No newline at end of file
+$overlay: rgba(0,0,0,0.15)
+$overlay2: rgba(0,0,0,0.13)
+$overlay-dot: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIW2NkYGCQZGBgeM7IAAUACpEBA5Dm4YwAAAAASUVORK5CYII=')
\ No newline at end of file
diff --git a/sass/_var.sass b/sass/_var.sass
index 347759f..3436f69 100644
--- a/sass/_var.sass
+++ b/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)"
diff --git a/sass/style.sass b/sass/style.sass
index 93aa19f..12739ce 100755
--- a/sass/style.sass
+++ b/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