animation stuff

1 files changed, 29 insertions, 8 deletions

diff --git a/public/assets/ok.css b/public/assets/ok.css
index 647b92f..36d0f08 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -61,7 +61,7 @@ h1 {
 h1 span {
     font-size: 16px;
     line-height: 20px;
-    width: 50%;
+    width: 80%;
     margin: 10px 0;
 }
 
@@ -252,15 +252,22 @@ span {
     height: 100vh;
     width: 100%;
     display: block;
-    transition: 150ms transform cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 0, 0, 1);
+    transition: 150ms transform cubic-bezier(0, 0, 0, 1), 200ms background cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 1, 0, 0);
 }
 .item.intro {
     display: flex;
     display: -webkit-flex;
     -webkit-flex-flow: column wrap;
     flex-flow: column wrap;
+    background:white;
+}
+.navopen .item.intro {
+    background:black;
 }
 
+.navopen .item.intro > *{
+    background:transparent;
+}
 body,
 nav {
     background: white;
@@ -298,6 +305,7 @@ nav span {
 
 .index {
     width: 65px;
+    background: white;
     transition: 150ms width;
     transition-timing-function: cubic-bezier(0, 0, 0, 1);
 }
@@ -390,15 +398,29 @@ nav b {
 .up .showing.item {
     transform: translateY(-10px);
     opacity: 0;
-    background: white;
+    background: black;
 }
 
 .down .showing.item {
     transform: translateY(10px);
     opacity: 0;
+    background: black;
+}
+
+.up nav, .down nav {
+    background: black;
+    transition: 0ms background;
+    transition-timing-function: cubic-bezier(1, 0, 0, 1);
+}
+
+.up nav .index, .down nav .index{
     background: white;
+    transition: 0ms background;
 }
 
+.up nav span div:last-child .page-no, .down nav span div:last-child .page-no{
+    color:white;
+}
 
 /* Flickity */
 
@@ -411,7 +433,7 @@ nav b {
 }
 
 .page-up {
-    height: 20vw;
+    height: 50vw;
     width: 60vw;
     position: absolute;
     top: 25px;
@@ -422,7 +444,7 @@ nav b {
 }
 
 .page-down {
-    height: 20vw;
+    height: 50vw;
     width: 60vw;
     position: absolute;
     z-index: 3;
@@ -441,9 +463,7 @@ nav b {
     height:100%;
     bottom: -25px;
 }
-.item:last-child .page-down, .item:last-child .bottom{
-    cursor:default;
-}
+
 
 .flickity-viewport {
     overflow: hidden;
@@ -693,6 +713,7 @@ ul li {
     }
     .index {
         width: 10vw;
+
     }
     .index:after,
     .navopen .index:after {