merge

3 files changed, 64 insertions, 45 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index c21ed73..3669bf7 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -74,7 +74,7 @@ var app = (function() {
             height -= $("nav").height() // account for top bar
           }
           $(".previous, .next, .cell, .top, .flickity-viewport", this).css({ 'height': height })
-          $(".bottom", this).css({ 'top': height })
+          $(".bottom", this).css({ 'top': height + 13 })
         })
         app.view.$el.removeClass("hidden")
         // $('.top').flickity('resize')
@@ -93,7 +93,17 @@ $(".item").each(function(i){
     height -= $("nav").height() // account for top bar
   }
   $(".cell, .top", this).css({ 'height': height })
-  $(".bottom", this).css({ 'top': height + 20 })
+  var cellCount = $(this).find(".cell").length
+  if (cellCount == 0) {
+    console.log($(this).data("id"), "NONE")
+    $(".bottom", this).css({ 'top': height + 17 })
+  }
+  else if (cellCount == 1) {
+    $(".bottom", this).css({ 'top': height + 13 })
+  }
+  else {
+    $(".bottom", this).css({ 'top': height + 19 })
+  }
 })
 
 $('.top').each(function(){
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 321344f..0079bef 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -26,7 +26,7 @@ a:visited {
     color: blue;
     font-weight: bold;
     font-size: 11px;
-    cursor:pointer;
+    cursor: pointer;
 }
 
 body {
@@ -46,10 +46,11 @@ body {
     opacity: 0;
     pointer-events: none;
 }
+
 .item {
-  position: absolute;
-  top: 0;
-  left: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 h1 {
@@ -119,19 +120,23 @@ h3 {
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
 }
+
 .intro.cover .left span#cred {
     width: 100%;
     border-top: 1px solid;
     padding: 15px 0 10px 0;
 }
+
 .intro.cover .left small {
-    display:none;
+    display: none;
 }
+
 .intro.cover .right {
     background: url(https://upload.wikimedia.org/wikipedia/commons/d/de/Victoria_crater_from_HiRise.jpg)no-repeat center;
     background-size: cover;
-    width:75%;
+    width: 75%;
 }
+
 .menu {
     position: fixed;
     height: 100vh;
@@ -156,8 +161,7 @@ h3 {
 }
 
 .menu ul {
-    height:100%;
-
+    height: 100%;
 }
 
 .menu ul li {
@@ -187,49 +191,50 @@ h3 {
     /*opacity:0.5;*/
     background: black;
 }
+
 nav svg g g rect {
-    transition:150ms transform 50ms cubic-bezier(0, 0, 0, 1);
+    transition: 150ms transform 50ms cubic-bezier(0, 0, 0, 1);
     width: 100px;
 }
 
-
-nav svg g g:first-child rect{
+nav svg g g:first-child rect {
     transform: rotate(0deg);
     transform-origin: center;
 }
 
-nav svg g g:nth-child(2) rect{
-    opacity:1;
+nav svg g g:nth-child(2) rect {
+    opacity: 1;
 }
 
-nav svg g g:last-child rect{
+nav svg g g:last-child rect {
     transform: rotate(0deg);
     transform-origin: center;
 }
 
-
-
-.navopen nav svg g g:first-child rect{
+.navopen nav svg g g:first-child rect {
     transform: rotate(45deg);
     transform-origin: center;
     width: 100px;
 }
 
-.navopen nav svg g g:nth-child(2) rect{
-    opacity:0;
+.navopen nav svg g g:nth-child(2) rect {
+    opacity: 0;
 }
 
-.navopen nav svg g g:last-child rect{
+.navopen nav svg g g:last-child rect {
     transform: rotate(-45deg);
     transform-origin: center;
     width: 100px;
 }
 
+.navopen .item {
+    cursor: url(img/x-w.png) 32 32, pointer;
+}
+
 .navopen .item > * {
     opacity: 0.1;
     transition: 150ms opacity cubic-bezier(0, 0, 0, 1);
     background: #eee;
-    cursor: url(img/x-w.png) 32 32, pointer;
 }
 
 div,
@@ -353,18 +358,20 @@ nav span div:last-child {
 }
 
 .top {
-  position: relative;
-    background: #f7f7f7;
+    position: relative;
+    background: #f9f9f9;
     width: 100%;
     /*height: 80vh;*/
     margin-top: 20px;
     float: none;
+    display: block;
 }
 
 nav b {
     font-weight: normal;
 }
 
+
 /*animations*/
 
 .bottom {
@@ -376,19 +383,19 @@ nav b {
   background: white;
 }
 
-
 .up .showing.item {
-    transform:translateY(-10px);
-    opacity:0;
-    background:white;
+    transform: translateY(-10px);
+    opacity: 0;
+    background: white;
 }
 
-.down .showing.item  {
-    transform:translateY(10px);
-    opacity:0;
-    background:white;
+.down .showing.item {
+    transform: translateY(10px);
+    opacity: 0;
+    background: white;
 }
 
+
 /* Flickity */
 
 .flickity-enabled {
@@ -410,18 +417,22 @@ nav b {
     cursor: url(img/u.png) 32 0, pointer;
 }
 
-
 .page-down {
     height: 20vw;
     width: 60vw;
     position: absolute;
     z-index: 3;
-    bottom:0;
+    bottom: 0;
     left: 0;
     margin-left: 20vw;
     cursor: url(img/d.png)32 64, pointer;
 }
 
+.single .page-up, .single .page-down {
+    width: 100%;
+    margin-left: 0;
+}
+
 .flickity-viewport {
     overflow: hidden;
     position: relative;
@@ -440,8 +451,7 @@ button {
     background: transparent;
 }
 
-.navopen button,
-.navopen iframe.cell {
+.navopen .item * {
     pointer-events: none;
 }
 
@@ -559,7 +569,7 @@ ul li {
 }
 
 .press ul {
-    cursor:default;
+    cursor: default;
     height: 100%
 }
 
@@ -568,7 +578,6 @@ ul li {
 }
 
 @media (min-width: 1300px) {
-
     .texts {
         font-size: 13px;
         line-height: 16px;
@@ -603,17 +612,17 @@ ul li {
 
 @media (max-width:680px) {
     .intro div {
-        width:100%!important;
-        height:auto;
+        width: 100%!important;
+        height: auto;
     }
     .intro.cover .left {
-        height:25%;
+        height: 25%;
     }
     .intro.cover .right {
-        height:75%;
+        height: 75%;
     }
     .intro.cover .left span#cred {
-        display:none;
+        display: none;
     }
     .intro .left {
         justify-content: center;
diff --git a/templates/index.liquid b/templates/index.liquid
index 5c76a11..4d02dd4 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -113,7 +113,7 @@
     </div>
     {% for project in projects %}
     <div class="item" data-id="{{ project.id }}">
-        <div class="top">
+        <div class="top {% if project.media[2] %}gallery{% else %}single{% endif %}">
             {% for media in project.media %} {% if media.type == 'image' %}
             <div class="cell" style="background-image:url({{ media.uri }}); 
                 {% if media.caption %} background-size:{{ media.caption }}; {% endif %}"></div>