2 files changed, 45 insertions, 42 deletions

diff --git a/public/assets/ok.css b/public/assets/ok.css
index 3670770..89cc9f9 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 {
@@ -47,10 +47,11 @@ body {
     opacity: 0;
     pointer-events: none;
 }
+
 .item {
-  position: absolute;
-  top: 0;
-  left: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 h1 {
@@ -120,19 +121,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;
@@ -157,8 +162,7 @@ h3 {
 }
 
 .menu ul {
-    height:100%;
-
+    height: 100%;
 }
 
 .menu ul li {
@@ -188,49 +192,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,
@@ -354,7 +359,7 @@ nav span div:last-child {
 }
 
 .top {
-    background: #f7f7f7;
+    background: #f9f9f9;
     width: 100%;
     /*height: 80vh;*/
     flex: 1 auto;
@@ -366,6 +371,7 @@ nav b {
     font-weight: normal;
 }
 
+
 /*animations*/
 
 .bottom {
@@ -377,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 {
@@ -411,13 +417,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;
@@ -441,8 +446,7 @@ button {
     background: transparent;
 }
 
-.navopen button,
-.navopen iframe.cell {
+.navopen .item * {
     pointer-events: none;
 }
 
@@ -561,7 +565,7 @@ ul li {
 }
 
 .press ul {
-    cursor:default;
+    cursor: default;
     height: 100%
 }
 
@@ -570,7 +574,6 @@ ul li {
 }
 
 @media (min-width: 1300px) {
-
     .texts {
         font-size: 13px;
         line-height: 16px;
@@ -605,17 +608,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 dc3b426..7894525 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>