Improved responsiveness with a better JS algorithm to determine height

.gitignore

@@ -1,3 +1,4 @@
 assets/components/
 node_modules/
 assets/css/main.css
+assets/img/bg.large.png

assets/js/index.js

@@ -32,19 +32,33 @@
             }
         });
 
-        $(window).resize(function() {resizeHeader()});
+        $(window).resize(function() {resizeHeader();});
-
         resizeHeader();
 
         function resizeHeader() {
-            if ($(window).width() > 767) {
+            var hide = true;
-                $('.below-header').height($('.hidden-content').height());
+
-            } else {
+            if ($('#scroll-arrow').is(':visible')) {
-                if ($('.hidden-content').is(":visible")) {
+                hide = false;
-                    $('.below-header').height($('.hidden-content').height() + 200);
+            } else if ($(window).width() > 767) {
-                } else {
+                $('#scroll-arrow').show();
-                    $('.below-header').height(200);
             }
+
+            var overhang = $(window).height() - $('.top-content').outerHeight();
+            var height = $('.hidden-content').height();
+
+            var calculated = 200;
+
+            if ($(window).width() > 767) {
+                calculated = (height - overhang + ($(window).height() * 0.2));
+            } else if ($('.hidden-content').is(":visible")) {
+                calculated = (height - overhang + ($(window).height() * 0.5));
+            }
+
+            $('.below-header').height(calculated);
+
+            if (hide) {
+                $('#scroll-arrow').hide();
             }
         }
 

assets/scss/main.scss

@@ -102,13 +102,17 @@ a {
 }
 
 
-// Big cover on the frontpage
+/**
+ * ===================
+ * FRONTPAGE DESIGN
+ * ===================
+ */
 .header-bg {
     @include respond-to(handhelds) {
         height: 110vh;
     }
 
-    background: url('http://christiaangoossens.nl/bg.png');
+    background: url('../img/bg.png');
 
     background-position: center;
     background-repeat: no-repeat;
@@ -137,8 +141,9 @@ a {
     position: relative;
 
     &:before {
+        border-bottom: 2px solid $white;
         border-right: 130vw solid $white;
-        border-top: 32vh solid $page-bg;
+        border-top: 30vh solid $page-bg;
         bottom: 0;
         content: '';
         position: absolute;
@@ -147,57 +152,6 @@ a {
     }
 }
 
-// Bouncing arrow
-.scroll-down {
-    @include respond-to(handhelds) {
-        display: none;
-    }
-
-    animation: bounce 4s 2s infinite;
-    color: $arrow-bg;
-
-    display: block;
-    font-size: 24px;
-    height: 24px;
-    left: 50%;
-    margin-left: -12px;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    transform: rotate(-90deg);
-    transition: translateZ(0);
-    width: 24px;
-    z-index: 100;
-
-    // Stop the bouncing while hovered
-    &:hover {
-        animation: none;
-        color: $white;
-    }
-}
-
-$button-shadow: rgba(0, 0, 0, .1);
-
-.mobile-button {
-    @include respond-to(handhelds) {
-        display: inline-block;
-    }
-
-    background: $white;
-    box-shadow: 0 8px 15px $button-shadow;
-    color: $page-bg;
-    display: none;
-    font-family: 'Source Sans Pro', sans-serif;
-    font-size: .9em;
-    line-height: 1.2em;
-    padding: .8em 2em;
-    width: auto;
-
-    &:hover {
-        cursor: pointer;
-    }
-}
-
 .header-text {
     height: auto;
     left: 0;
@@ -514,6 +468,61 @@ $button-shadow: rgba(0, 0, 0, .1);
     }
 }
 
+/**
+ * =======================
+ * FRONT PAGE CONTENT
+ * =======================
+ */
+.scroll-down {
+    @include respond-to(handhelds) {
+        display: none;
+    }
+
+    animation: bounce 4s 2s infinite;
+    color: $arrow-bg;
+
+    display: block;
+    font-size: 24px;
+    height: 24px;
+    left: 50%;
+    margin-left: -12px;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    transform: rotate(-90deg);
+    transition: translateZ(0);
+    width: 24px;
+    z-index: 100;
+
+    // Stop the bouncing while hovered
+    &:hover {
+        animation: none;
+        color: $white;
+    }
+}
+
+$button-shadow: rgba(0, 0, 0, .1);
+
+.mobile-button {
+    @include respond-to(handhelds) {
+        display: inline-block;
+    }
+
+    background: $white;
+    box-shadow: 0 8px 15px $button-shadow;
+    color: $page-bg;
+    display: none;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: .9em;
+    line-height: 1.2em;
+    padding: .8em 2em;
+    width: auto;
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
 .blog-title {
     border-bottom: 2px solid $page-bg;
     display: inline-block;
@@ -530,23 +539,13 @@ $button-shadow: rgba(0, 0, 0, .1);
 }
 
 .content {
-    @include respond-to(medium-screens) {
-        margin-bottom: 0;
-        top: 0;
-    }
-
-    @include respond-to(handhelds) {
-        margin-bottom: 0;
-        top: 0;
-    }
-
-    margin-bottom: -10vh;
     position: relative;
-    top: -10vh;
     z-index: 52;
 }
 
 
+// FOOTER
+
 .footer {
     background: $footer-color;
     min-height: 5vh;
@@ -598,6 +597,12 @@ $button-shadow: rgba(0, 0, 0, .1);
     }
 }
 
+/**
+ * =================
+ * DEFAULT PAGE DESIGN
+ * =================
+ */
+
 $post-bg: $white;
 $post-border: #ebf2f6;
 $post-after-border: #e7eef2;

partials/loop.hbs

@@ -6,6 +6,7 @@
 {{!-- This is the post loop - each post will be output using this markup --}}
 {{#foreach posts}}
 <article class="{{post_class}}">
+    <pre>{{image}}</pre>
     <header class="post-header">
         <h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
     </header>