diff options
| author | Jules Laplace <jules@okfoc.us> | 2016-03-28 16:33:01 -0400 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2016-03-28 16:33:01 -0400 |
| commit | fce062c593f8c619448f8a83486592482cfab5b0 (patch) | |
| tree | 5d28eb2b3cc238f6baafaa9e414ec18dd34b84cc | |
| parent | db68967feb8805852b90133062015ea4ef920719 (diff) | |
| parent | 4b2cf6b745d2c6c25b14ef356bb85454d12aad48 (diff) | |
merge
| -rw-r--r-- | public/assets/js/app.js | 6 | ||||
| -rw-r--r-- | public/assets/ok.css | 68 | ||||
| -rw-r--r-- | templates/index.liquid | 19 |
3 files changed, 88 insertions, 5 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 diff --git a/templates/index.liquid b/templates/index.liquid index f8f4144..62eaf40 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -28,12 +28,23 @@ <link href='assets/ok.css' rel='stylesheet' type='text/css'> </head> -<body> +<body class=""> + <div class="menu"> + <ul> + <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> + </ul> + </div> <nav> <span> - <div><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>OKFocus LLC. 2016</div> - <div>SLIDE.1 - PG.1</div> + <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>OKFocus LLC. • 2016</div> + <div>SLIDE.1 • PG.1</div> </span> </nav> {% for project in projects %} |