merge

2 files changed, 73 insertions, 1 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 278c7e3..f342d05 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -21,4 +21,8 @@ $('.top').flickity({
     x2: 40, y2: 25,
     x3: 15
   }
-});
\ No newline at end of file
+});
+
+$('.index').click( function(){
+    $('body').toggleClass('navopen');
+});
diff --git a/public/assets/ok.css b/public/assets/ok.css
index f7e57a9..6e324c7 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -26,6 +26,30 @@
         overflow: hidden;
     }
     
+    .menu {
+        position: fixed;
+        height: 100vh;
+        width: 30vw;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        transform: translateX(-30vw);
+        padding: 30px 5px 5px 5px;
+        transition: 150ms transform cubic-bezier(0, 0, 0, 1);
+        z-index: 0;
+        opacity:0;
+    }
+    
+    .navopen .menu {
+        transform: translateX(0vw);
+        z-index: 2;
+        opacity:1;
+    }
+    
+    .navopen .item {
+        transform: translateX(30vw);
+    }
+    
     div,
     span {
         display: inline-block;
@@ -38,6 +62,7 @@
         display: flex;
         -webkit-flex-flow: column wrap;
         flex-flow: column wrap;
+        transition: 150ms transform cubic-bezier(0, 0, 0, 1);
     }
     
     nav {
@@ -47,6 +72,10 @@
         width: 100%;
         padding: 5px;
         z-index: 3;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
     }
     
     nav span {
@@ -54,6 +83,13 @@
         width: 100%;
     }
     
+    .index:hover,
+    .navopen .index {
+        color: white;
+        cursor: pointer;
+        background: black;
+    }
+    
     nav span div:first-child {
         float: left;
     }
@@ -231,21 +267,46 @@
         .texts {
             font-size: 13px;
         }
+        nav {
+            font-size: 9px;
+        }
     }
     
     @media (min-width: 1400px) {
         .texts {
             font-size: 14px;
         }
+        .headings,
     }
     
     @media (min-width: 1600px) {
         .texts {
             font-size: 15px;
         }
+        .headings,
+        nav {
+            font-size: 10px;
+        }
     }
     
     @media (max-width:480px) {
+        nav {
+            font-size: 11px;
+            font-family: 'Roboto';
+            font-weight: 400;
+        }
+        nav span div:first-child {
+            font-size: 0;
+        }
+        nav span {
+            border: 0;
+        }
+        nav img {
+            width: 12px;
+        }
+        nav span div:nth-child(2) {
+            display: none;
+        }
         .cell,
         button {
             height: 50vh;
@@ -268,4 +329,11 @@
         .headings {
             display: none;
         }
+        .menu {
+            width: 45vw;
+            transform: translateX(-45vw);
+        }
+        .navopen .item {
+            transform: translateX(45vw);
+        }
     }
\ No newline at end of file