1 files changed, 51 insertions, 42 deletions

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;