menu stuff

3 files changed, 423 insertions, 342 deletions

diff --git a/db.json b/db.json
index 4efbeca..ededce6 100644
--- a/db.json
+++ b/db.json
@@ -13,12 +13,12 @@
       },
       "press": [
         {
-          "text": "New York Times",
-          "uri": "http://nytimes.com/"
-        },
-        {
           "text": "WSJ",
           "uri": "http://wsj.com/"
+        },
+        {
+          "text": "New York Times",
+          "uri": "http://nytimes.com/"
         }
       ],
       "__index": "0",
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 1ed1c15..e4193b8 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -1,195 +1,222 @@
-    html {
-        box-sizing: border-box;
-    }
-    
-    *,
-    *:before,
-    *:after {
-        box-sizing: inherit;
-        padding: 0;
-        margin: 0;
-        outline: 0;
-        border: 0;
-        -webkit-appearance: none;
-    }
-    
-    ::selection {
-        color:#fff;
-    }
-    
-    ::-moz-selection {
-        color:#fff;
-    }
-    
-    a,
-    a:visited {
-        color: blue;
-    }
-    
-    body {
-        font-family: 'Roboto', sans-serif;
-        font-size: 11px;
-        background: #fff;
-        counter-reset: section;
-        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;
-    }
-    menu ul {
-         list-style-type: upper-roman; 
-    }
-    .menu ul li{
-        list-style-type: decimal-leading-zero;
-        list-style-position: inside;
-        border-bottom: 1px solid;
-        padding-bottom: 2px;
-        padding-top:3px;
-    }
-    .menu ul li:hover {
-        background:black;
-        color:white;
-        cursor:pointer;
-    }
-    .navopen .menu {
-        transform: translateX(0vw);
-        z-index: 2;
-        opacity: 1;
-    }
-    
-    .navopen .item {
-        transform: translateX(30vw);
-    }
-    
-    div,
-    span {
-        display: inline-block;
-        float: left;
-    }
-    
-    .item {
-        height: 100vh;
-        display: -webkit-flex;
-        display: flex;
-        -webkit-flex-flow: column wrap;
-        flex-flow: column wrap;
-        transition: 150ms transform cubic-bezier(0, 0, 0, 1);
-    }
-    
-    nav {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        padding: 5px;
-        z-index: 3;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-    
-    nav span {
-        border-bottom: 1px solid;
-        width: 100%;
-    }
-    
-    .index:hover,
-    .navopen .index {
-        color: white;
-        cursor: pointer;
-        background: black;
-    }
-    
-    nav span div:first-child {
-        float: left;
-    }
-    
-    nav span div:nth-child(2) {
-        border-left: 1px solid;
-        margin-left: 10px;
-        padding-left: 20px;
-    }
-    
-    nav span div:last-child {
-        float: right;
-    }
-    
-    .top {
-        background: #f7f7f7;
-        width: 100%;
-        /*height: 80vh;*/
-        flex: 1 auto;
-        margin-top: 20px;
-    }
-    /*! Flickity */
-    
-    .flickity-enabled {
-        position: relative;
-    }
-    
-    .flickity-enabled:focus {
-        outline: none;
-    }
-    
-    .flickity-viewport {
-        overflow: hidden;
-        position: relative;
-        width: 100%;
-    }
-    
-    .flickity-slider {
-        position: absolute;
-        width: 100%;
-    }
-    
-    button {
-        height: 70vh;
-        /*THIS SHOULD BE DYNAMIC*/
-        width: 10vw;
-        position: absolute;
-        top: 0;
-        background: transparent;
-        cursor: pointer;
-    }
-    
-    button svg {
-        opacity: 0;
-        transition: 150ms all;
-        transition-timing-function: cubic-bezier(0, 0, 1, 1);
-        transform: scale(0.3);
-    }
-    
-    button.next {
-        right: 0;
-    }
-    
-    button.previous {
-        left: 0;
-    }
-    
-    button.previous:hover svg,
-    button.next:hover svg {
-        opacity: 1;
-        transform: scale(0.2);
-    }
-    
-    button.next:active svg,
-    button.previous:active svg {
-        transform: scale(0.1);
-    }
-    /*
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+    padding: 0;
+    margin: 0;
+    outline: 0;
+    border: 0;
+    -webkit-appearance: none;
+}
+
+::selection {
+    color: #fff;
+}
+
+::-moz-selection {
+    color: #fff;
+}
+
+a,
+a:visited {
+    color: blue;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    font-size: 11px;
+    counter-reset: section;
+    overflow: hidden;
+}
+
+.menu {
+    position: fixed;
+    height: 100vh;
+    width: 20vw;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    transform: translateX(-20vw);
+    padding: 30px 5px 5px 5px;
+    transition: 150ms transform cubic-bezier(0, 0, 0, 1);
+    z-index: 0;
+    opacity: 0;
+}
+
+menu ul {
+    list-style-type: upper-roman;
+}
+
+.menu ul li {
+    list-style-type: decimal-leading-zero;
+    list-style-position: inside;
+    border-bottom: 1px solid;
+    padding-bottom: 4px;
+    padding-top: 6px;
+}
+
+.menu ul li:hover {
+    background: black;
+    color: white;
+    cursor: pointer;
+}
+
+.navopen .menu {
+    transform: translateX(0vw);
+    z-index: 2;
+    opacity: 1;
+    overflow: auto;
+}
+
+.navopen .item {
+    transform: translateX(20vw);
+    /*opacity:0.5;*/
+}
+
+div,
+span {
+    display: inline-block;
+    float: left;
+}
+
+.item {
+    height: 100vh;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-flow: column wrap;
+    flex-flow: column wrap;
+    transition: 150ms transform cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 0, 0, 1);
+}
+
+body,
+nav {
+    background: #fff;
+}
+
+nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 3;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+nav span {
+    border-bottom: 1px solid;
+    width: 100%;
+}
+
+#burger {
+    width: 10px;
+}
+
+.index:hover,
+.navopen .index {
+    color: white;
+    cursor: pointer;
+    background: black;
+}
+
+.index:hover svg,
+.navopen .index svg {
+    fill: white;
+}
+
+nav div {
+    vertical-align: middle;
+    padding: 5px;
+}
+
+nav span div:first-child {
+    float: left;
+    padding-right: 20px;
+}
+
+nav span div:nth-child(2) {
+    border-left: 1px solid;
+    padding-left: 20px;
+}
+
+nav span div:last-child {
+    float: right;
+}
+
+.top {
+    background: #f7f7f7;
+    width: 100%;
+    /*height: 80vh;*/
+    flex: 1 auto;
+    margin-top: 20px;
+}
+
+
+/* Flickity */
+
+.flickity-enabled {
+    position: relative;
+}
+
+.flickity-enabled:focus {
+    outline: none;
+}
+
+.flickity-viewport {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+}
+
+.flickity-slider {
+    position: absolute;
+    width: 100%;
+}
+
+button {
+    height: 70vh;
+    /*THIS SHOULD BE DYNAMIC*/
+    width: 10vw;
+    position: absolute;
+    top: 0;
+    background: transparent;
+    cursor: pointer;
+}
+
+button svg {
+    opacity: 0;
+    transition: 150ms all;
+    transition-timing-function: cubic-bezier(0, 0, 1, 1);
+    transform: scale(0.3);
+}
+
+button.next {
+    right: 0;
+}
+
+button.previous {
+    left: 0;
+}
+
+button.previous:hover svg,
+button.next:hover svg {
+    opacity: 1;
+    transform: scale(0.2);
+}
+
+button.next:active svg,
+button.previous:active svg {
+    transform: scale(0.1);
+}
+
+
+/*
     button.next:hover {
         background: rgba(255, 255, 255, 0.5);
     }
@@ -198,105 +225,107 @@
         background: rgba(255, 255, 255, 0.5);
     }
     */
-    
-    .cell {
-        width: 100vw;
-        height: 70vh;
-        /*THIS SHOULD BE DYNAMIC*/
-        background-position: center;
-        background-size: cover;
-        background-repeat: no-repeat;
-    }
-    
-    .cell.contain {
-        background-size: 20%;
-        background-color: #eee;
-    }
-    
-    .bottom {
-        /*height: 20vh;*/
-        flex: 0 auto;
-        overflow: hidden;
-        padding: 5px 0;
-    }
-    
-    .five {
-        width: 100%;
-    }
-    
-    .five li:before {
-        content: "*";
-        font-family: 'Roboto Mono';
-        font-weight: 700;
-        padding-right: 5px;
-    }
-    
-    .headings,
-    nav {
-        font-family: 'Roboto Mono', monospace;
-        font-size: 8px;
-        text-transform: uppercase;
-        font-weight: 700;
-    }
-    
+
+.cell {
+    width: 100vw;
+    height: 70vh;
+    /*THIS SHOULD BE DYNAMIC*/
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.cell.contain {
+    background-size: 20%;
+    background-color: #eee;
+}
+
+.bottom {
+    /*height: 20vh;*/
+    flex: 0 auto;
+    overflow: hidden;
+    padding: 5px 0;
+}
+
+.five {
+    width: 100%;
+}
+
+.five li:before {
+    content: "*";
+    font-family: 'Roboto Mono';
+    font-weight: 700;
+    padding-right: 5px;
+}
+
+.headings,
+nav {
+    font-family: 'Roboto Mono', monospace;
+    font-size: 8px;
+    text-transform: uppercase;
+    font-weight: 700;
+}
+
+.texts {
+    font-weight: 400;
+    padding: 3px 0 0 0;
+    font-weight: 400;
+}
+
+.five span {
+    width: calc(12% - 8px);
+    margin: 0 4px;
+}
+
+.press .headings span:nth-child(5) {
+    width: calc(40% - 8px);
+}
+
+.headings span {
+    border-bottom: 1px solid;
+    padding: 0 0 2px 0;
+}
+
+.press .headings span:last-child:before {
+    content: "PRESS";
+}
+
+.five .description {
+    width: 50%;
+    -webkit-column-count: 3;
+    /*text-align: justify;*/
+    column-gap: 5px;
+}
+
+.press .five .description {
+    width: calc(40% - 8px);
+    -webkit-column-count: 2;
+}
+
+ul li {
+    list-style-type: none;
+}
+
+.nopress span:nth-child(5) {
+    width: calc(52% - 8px);
+}
+
+.nopress span:last-child {
+    display: none;
+}
+
+@media (min-width: 1300px) {
     .texts {
-        font-weight: 400;
-        padding: 3px 0 0 0;
-        font-weight: 400;
-    }
-    
-    .five span {
-        width: calc(12% - 8px);
-        margin: 0 4px;
-    }
-    
-    .press .headings span:nth-child(5) {
-        width: calc(40% - 8px);
-    }
-    
-    .headings span {
-        border-bottom: 1px solid;
-        padding: 0 0 2px 0;
-    }
-    
-    .press .headings span:last-child:before {
-        content: "PRESS";
-    }
-    
-    .five .description {
-        width: 50%;
-        -webkit-column-count: 3;
-        /*text-align: justify;*/
-        column-gap: 5px;
-    }
-    
-    .press .five .description {
-        width: calc(40% - 8px);
-        -webkit-column-count: 2;
-    }
-    
-    ul li {
-        list-style-type: none;
-    }
-    
-    .nopress span:nth-child(5) {
-        width: calc(52% - 8px);
-    }
-    
-    .nopress span:last-child {
-        display: none;
+        font-size: 13px;
+        line-height: 16px;
     }
-    
-    @media (min-width: 1300px) {
-        .texts {
-            font-size: 13px;
-            line-height: 16px;
-        }
-        nav {
-            font-size: 9px;
-        }
+    nav {
+        font-size: 9px;
     }
-    /*
+}
+
+
+/*
     @media (min-width: 1400px) {
         .texts {
             font-size: 14px;
@@ -316,52 +345,58 @@
         }
     }
     */
-    
-    @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;
-        }
-        .five span {
-            width: 50%;
-            border-bottom: 1px solid;
-            margin: 0;
-            padding: 3px;
-            font-weight: 600;
-        }
-        .five span.description {
-            width: 100%!important;
-            font-weight: 400;
-            -webkit-column-count: 2!important;
-            -webkit-column-gap: 3px;
-            -moz-column-gap: 3px;
-            column-gap: 3px;
-        }
-        .headings {
-            display: none;
-        }
-        .menu {
-            width: 45vw;
-            transform: translateX(-45vw);
-        }
-        .navopen .item {
-            transform: translateX(45vw);
-        }
-    }
\ No newline at end of file
+
+@media (max-width:680px) {
+    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;
+    }
+    .five span {
+        width: 50%;
+        border-bottom: 1px solid;
+        margin: 0;
+        padding: 3px;
+        font-weight: 600;
+    }
+    .five span.description {
+        width: 100%!important;
+        font-weight: 400;
+        -webkit-column-count: 2!important;
+        -webkit-column-gap: 3px;
+        -moz-column-gap: 3px;
+        column-gap: 3px;
+    }
+    .headings {
+        display: none;
+    }
+    #burger {
+        width: 22px;
+    }
+    .menu {
+        width: 45vw;
+        transform: translateX(-45vw);
+    }
+    .navopen .item {
+        transform: translateX(45vw);
+    }
+    .top {
+        margin-top: 30px;
+    }
+}
\ No newline at end of file
diff --git a/templates/index.liquid b/templates/index.liquid
index 62eaf40..ef2af17 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -31,6 +31,37 @@
 <body class="">
     <div class="menu">
         <ul>
+            <li>Introduction</li>
+            <li>Services Overview</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
+            <li>Project Title</li>
             <li>Project Title</li>
             <li>Project Title</li>
             <li>Project Title</li>
@@ -42,7 +73,22 @@
     </div>
     <nav>
         <span>
-            <div class="index"><img src="http://i1.wp.com/www.sora.digital/wp-content/uploads/glyphicons-517-menu-hamburger.png?fit=300%2C300" width="8"> INDEX</div>
+            <div class="index">
+                <svg version="1.1" id="burger" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 57.4 53" style="enable-background:new 0 0 57.4 53;" xml:space="preserve">
+<g>
+    <g>
+        <rect width="57.4" height="13"/>
+    </g>
+    <g>
+        <rect y="20" width="57.4" height="13"/>
+    </g>
+    <g>
+        <rect y="40" width="57.4" height="13"/>
+    </g>
+</g>
+</svg>
+INDEX</div>
             <div>OKFocus LLC. • 2016</div>
             <div>SLIDE.1 • PG.1</div>
         </span>