Fixes home page consecutive resizing bug

index.html

@@ -4,15 +4,16 @@
 ---
 
 <header class='hero'>
-  <h3>Sat. March 19, 2016</h3>
+  <div class='hero-content'>
+    <h3>Sat. March 19, 2016</h3>
 
-  <h1 class='logo'>
-    {% include bbhd-logo.svg %}
-  </h1>
-  <h2>When you come to a fork in the road, take it.</h2>
-  <h5>—Yogi Berra</h5>
+    <h1 class='logo'>
+      {% include bbhd-logo.svg %}
+    </h1>
+    <h2>When you come to a fork in the road, take it.</h2>
+    <h5>—Yogi Berra</h5>
 
+    {% include pick-your-city-index.html %}
 
-  {% include pick-your-city-index.html %}
-
+  </div>
 </header>

js/app.js

@@ -17,19 +17,19 @@ $(document).ready(function() {
 });
 
 function assignIndexHeroHeight() {
-  var $body = $('body');
   var $window = $(window);
   var $hero = $('.hero');
-  var $cities = $hero.find('.dropdown-select a');
-  var $indexDropdownButton = $hero.find('.dropdown-button');
+  var $heroContent = $('.hero-content');
+  var $cities = $heroContent.find('.dropdown-select a');
+  var $indexDropdownButton = $heroContent.find('.dropdown-button');
 
   // If TypeKit hasn't loaded, button could be wrapping on
   // smaller screens and therefore too large.
   var originalWhiteSpace = $indexDropdownButton.css('white-space');
   $indexDropdownButton.css('white-space', 'nowrap');
 
   var buttonHeight = $indexDropdownButton.height();
-  var minHeight = $body.height() + (buttonHeight * ($cities.length + 1));
+  var minHeight = $heroContent.height() + (buttonHeight * ($cities.length + 1));
   var windowHeight = $window.height();
 
   if (windowHeight > minHeight) {