only load flickity if theres a gallery

3 files changed, 51 insertions, 47 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index c6d31ec..a0fc05c 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -63,14 +63,14 @@ var app = (function() {
   }
   
   app.resize = function(){
-    $(".active .cell,.active  .next,.active .previous").css({ 'display': 'none' })
+    $(".active .gallery .cell,.active  .next,.active .gallery .previous").css({ 'display': 'none' })
     $('body').addClass('resizing')
     debounce(function() {
       $(".active.item").addClass("hidden")
       setTimeout(function(){
-        $(".active .cell,.active  .next,.active .previous").css({ 'height': ($(".active .top").height() + 'px'), 'display': 'inline-block' })
+        $(".active .gallery.cell,.active .gallery .next,.active .gallery .previous").css({ 'height': ($(".active .gallery.top").height() + 'px'), 'display': 'inline-block' })
         app.view.$el.removeClass("hidden")
-        $('.active .top').flickity('resize')
+        $('.active .gallery.top').flickity('resize')
         $('body').removeClass('resizing')
       }, 400)
     }, 400)
@@ -87,7 +87,7 @@ $(".top").each(function(i){
   $(".cell", this).css({ 'height': (height + 'px') })
 })
 
-$('.top').flickity(app.flickity_options).on( 'cellSelect', function(e) {
+$('.gallery.top').flickity(app.flickity_options).on( 'cellSelect', function(e) {
   var gallery = $(e.target).data('flickity')
   app.header.updateSlideNumber( gallery.selectedIndex )
 })
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 95f5f95..1964120 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 {
@@ -39,15 +39,17 @@ body {
 .hidden {
     display: none!important;
 }
+
 .item.hidden {
     display: block;
     opacity: 0;
     pointer-events: none;
 }
+
 .item {
-  position: absolute;
-  top: 0;
-  left: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 h1 {
@@ -117,19 +119,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;
@@ -154,8 +160,7 @@ h3 {
 }
 
 .menu ul {
-    height:100%;
-
+    height: 100%;
 }
 
 .menu ul li {
@@ -185,49 +190,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,
@@ -351,7 +357,7 @@ nav span div:last-child {
 }
 
 .top {
-    background: #f7f7f7;
+    background: #f9f9f9;
     width: 100%;
     /*height: 80vh;*/
     flex: 1 auto;
@@ -363,25 +369,26 @@ nav b {
     font-weight: normal;
 }
 
+
 /*animations*/
 
 .bottom {
-  float: none;
+    float: none;
 }
 
-
 .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 {
@@ -401,13 +408,12 @@ 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;
@@ -431,8 +437,7 @@ button {
     background: transparent;
 }
 
-.navopen button,
-.navopen iframe.cell {
+.navopen .item * {
     pointer-events: none;
 }
 
@@ -550,7 +555,7 @@ ul li {
 }
 
 .press ul {
-    cursor:default;
+    cursor: default;
     height: 100%
 }
 
@@ -559,7 +564,6 @@ ul li {
 }
 
 @media (min-width: 1300px) {
-
     .texts {
         font-size: 13px;
         line-height: 16px;
@@ -594,17 +598,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 4cebc42..323a982 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{% 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>