diff options
| -rw-r--r-- | db.json | 8 | ||||
| -rw-r--r-- | index.js | 5 | ||||
| -rw-r--r-- | public/assets/ok.css | 709 | ||||
| -rw-r--r-- | templates/index.liquid | 20 |
4 files changed, 400 insertions, 342 deletions
@@ -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", @@ -17,6 +17,11 @@ var app = okcms.createApp({ production: isProduction, schemas: { + page: { + id: {type: 'string', hidden: true}, + title: {type: 'string'}, + body: {type: 'string'}, + }, project: { id: {type: 'string', hidden: true}, year: {type: 'number'}, 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 7158884..a3ce509 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -31,6 +31,9 @@ <body class="loading"> <div class="menu"> <ul> + {% for page in pages %} + <li data-id="{{ page.id }}">{{ page.title }}</li> + {% endfor %} {% for project in projects %} <li data-id="{{ project.id }}">{{ project.title }}</li> {% endfor %} @@ -38,7 +41,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> |