4 files changed, 26 insertions, 13 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index eff6dab..c21ed73 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -27,7 +27,7 @@ var app = (function() {
       document.addEventListener('touchmove', function(e) {
         e.preventDefault()
       })
-      // FastClick.attach(document.body)
+      FastClick.attach(document.body)
     }
     
     $(window).resize(app.resize)
@@ -70,7 +70,11 @@ var app = (function() {
       setTimeout(function(){
         $(".item").each(function(i){
           var height = window.innerHeight - $(this).find(".bottom").height()
+          if (is_desktop) {
+            height -= $("nav").height() // account for top bar
+          }
           $(".previous, .next, .cell, .top, .flickity-viewport", this).css({ 'height': height })
+          $(".bottom", this).css({ 'top': height })
         })
         app.view.$el.removeClass("hidden")
         // $('.top').flickity('resize')
@@ -84,8 +88,12 @@ var app = (function() {
 })()
 
 $(".item").each(function(i){
-  var height = window.innerHeight - $(this).find(".bottom").height()
+  var height = window.innerHeight - ($(this).find(".bottom").height() + 10)
+  if (is_desktop) {
+    height -= $("nav").height() // account for top bar
+  }
   $(".cell, .top", this).css({ 'height': height })
+  $(".bottom", this).css({ 'top': height + 20 })
 })
 
 $('.top').each(function(){
@@ -99,6 +107,9 @@ $('.top').each(function(){
 
 $(".item").each(function(i){
   var height = window.innerHeight - $(this).find(".bottom").height()
+  if (is_desktop) {
+    height -= $("nav").height() // account for top bar
+  }
   $(".previous, .next, .flickity-viewport", this).css({ 'height': height })
 })
 
diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js
index 575174b..061dcee 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -17,14 +17,18 @@ var ProjectView = View.extend({
     if (! $viewport.length) {
       $viewport = this.$(".cell")
     }
-    if (! $viewport.length) {
-      this.$(".top").append( $("<div>").addClass("page-up") )
-      this.$(".top").append( $("<div>").addClass("page-down") )
-    }
-    else {
+    if ($viewport.length) {
       $("<div>").addClass("page-up").insertAfter( $viewport )
       $("<div>").addClass("page-down").insertAfter( $viewport )
     }
+    else if (this.$('.top').length) {
+      this.$(".top").append( $("<figure>").addClass("page-up") )
+      this.$(".top").append( $("<figure>").addClass("page-down") )
+    }
+    else {
+      this.$el.append( $("<figure>").addClass("page-up") )
+      this.$el.append( $("<figure>").addClass("page-down") )
+    }
   },
   
   show: function(){
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 3670770..321344f 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -42,8 +42,7 @@ body {
 }
  */
 .item.hidden {
-    display: -webkit-flex;
-    display: flex;
+    display: block;
     opacity: 0;
     pointer-events: none;
 }
@@ -354,10 +353,10 @@ nav span div:last-child {
 }
 
 .top {
+  position: relative;
     background: #f7f7f7;
     width: 100%;
     /*height: 80vh;*/
-    flex: 1 auto;
     margin-top: 20px;
     float: none;
 }
@@ -371,7 +370,7 @@ nav b {
 .bottom {
   float: none;
   position: absolute;
-  bottom: 0;
+  top: 0;
   width: 100%;
   left: 0;
   background: white;
@@ -491,7 +490,6 @@ button.previous {
 
 .bottom {
     /*height: 20vh;*/
-    flex: 0 auto;
     overflow: hidden;
     padding: 5px 0;
     cursor: url(img/d.png)32 64, pointer;
diff --git a/templates/index.liquid b/templates/index.liquid
index dc3b426..5c76a11 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -68,7 +68,7 @@
                 <span>2010 - 2016</span>
             </h1>
             <span id="cred">
-                <img src="assets/img/okfocus_logo.gif" width="102"><br>
+                <img src="/assets/img/okfocus_logo.gif" width="102"><br>
                 <small><b>© 2016 OKFocus LLC.</b></small>
             </span>
         </div>