diff options
| -rw-r--r-- | db.json | 22 | ||||
| -rw-r--r-- | public/assets/js/app.js | 5 | ||||
| -rw-r--r-- | public/assets/ok.css | 89 | ||||
| -rw-r--r-- | templates/index.liquid | 3 |
4 files changed, 95 insertions, 24 deletions
@@ -24,11 +24,31 @@ "__index": "0", "dateCreated": "Sat, 26 Mar 2016 20:34:21 GMT", "client": "Annapurna Pictures", - "containImage": "true", + "containImage": "false", "iframe": "", "video": "", "media": [ { + "uri": "http://i.imgur.com/EwpnIeD.gif", + "caption": "80%", + "type": "image" + }, + { + "uri": "http://cdn0.dailydot.com/uploaded/images/original/2013/6/1/tumblr_mdqypg6Ta71rfvi3io1_500.gif", + "caption": "", + "type": "image" + }, + { + "uri": "https://ltho.s3.amazonaws.com/a694fbb6-554f-467f-877a-275920a64189.png", + "caption": "", + "type": "image" + }, + { + "uri": "https://ltho.s3.amazonaws.com/357df7aa-412e-4c1f-b35a-c777be88c876.png", + "caption": "", + "type": "image" + }, + { "uri": "http://okfoc.us/", "caption": "", "type": "link" diff --git a/public/assets/js/app.js b/public/assets/js/app.js index b38d151..aa6fef6 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -38,9 +38,6 @@ var app = (function() { })() -// app.init() - - $(".cell, .next").css({ 'height': ($(".top").height() + 'px') }); $('.top').flickity({ @@ -87,3 +84,5 @@ $(window).resize(function() { $('body').removeClass('resizing'); }, 400); }) + +// app.init() diff --git a/public/assets/ok.css b/public/assets/ok.css index 113b43e..ee7282b 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -52,8 +52,8 @@ body { -moz-column-gap: 3px; column-gap: 3px; -webkit-column-break-inside: avoid; - -moz-column-break-inside:avoid; - -moz-page-break-inside:avoid; + -moz-column-break-inside: avoid; + -moz-page-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; } @@ -68,10 +68,10 @@ menu ul { border-bottom: 1px solid; padding-bottom: 4px; padding-top: 6px; - font-size:14px; + font-size: 14px; } -.menu ul li:hover { +.desktop .menu ul li:hover { background: black; color: white; cursor: pointer; @@ -87,6 +87,14 @@ menu ul { .navopen .item { transform: translateX(50vw); /*opacity:0.5;*/ + background: black; +} + +.navopen .item .top, +.navopen .item .bottom { + opacity: 0.1; + transition: 150ms opacity cubic-bezier(0, 0, 0, 1); + background: #eee; } div, @@ -131,12 +139,31 @@ nav span { vertical-align: top; padding: 2px; } + .index { + width: 60px; + transition: 150ms width; + transition-timing-function: cubic-bezier(0, 0, 0, 1); } + +.navopen .index { + width: 50vw; +} + +nav span div:last-child { + transition: 150ms all; +} + +.navopen nav span div:last-child { + transform: translateX(110px); + transition: 150ms all; + position: absolute; + right: 5px; +} + .index:after { content: "INDEX"; - padding-right: 5px; - + padding-right: 5px; } .navopen .index:after { @@ -185,6 +212,7 @@ nav b { font-weight: normal; } + /* Flickity */ .flickity-enabled { @@ -215,13 +243,13 @@ button { } .navopen button { - pointer-events:none; + pointer-events: none; } button svg { opacity: 0; transition: 150ms all; - transition-timing-function: cubic-bezier(0, 0, 1, 1); + transition-timing-function: cubic-bezier(0, 0, 0, 1); transform: scale(0.3); } @@ -233,8 +261,8 @@ button.previous { left: 0; } -button.previous:hover svg, -button.next:hover svg { +.desktop button.previous:hover svg, +.desktop button.next:hover svg { opacity: 1; transform: scale(0.2); } @@ -244,8 +272,6 @@ button.previous:active svg { transform: scale(0.1); } - - .cell { width: 100vw; /*THIS SHOULD BE DYNAMIC*/ @@ -339,13 +365,14 @@ ul li { @media (min-width: 1300px) { .bottom { - padding:7px 0 8px 0; + padding: 7px 0 8px 0; } .texts { font-size: 13px; line-height: 16px; } - .headings, nav { + .headings, + nav { font-size: 9px; } } @@ -379,7 +406,7 @@ ul li { font-weight: 400; } nav span div:first-child { - font-size: 0; + font-weight: bold } nav span { border: 0; @@ -387,17 +414,30 @@ ul li { nav img { width: 12px; } - nav span div:nth-child(2) { + nav span div:nth-child(2), + .five span:nth-child(4) { display: none; } - + .texts { + padding: 3px 5px; + } + .five span:nth-child(2), + .five span:nth-child(3) { + width: calc(50% - 2.5px); + } + .five span:nth-child(3) { + margin-left: 5px; + } .five span { - width: 50%; + width: 100%; border-bottom: 1px solid; margin: 0; - padding: 3px; + padding: 3px 0 2px 0; font-weight: 600; } + iframe.cell { + pointer-events: none; + } .five span.description { width: 100%!important; font-weight: 400; @@ -412,6 +452,17 @@ ul li { #burger { width: 22px; } + .index { + width: 10vw; + } + .index:after, + .navopen .index:after { + content: ""; + padding-right: 0; + } + .navopen .index { + width: 90vw; + } .menu { width: 90vw; transform: translateX(-90vw); diff --git a/templates/index.liquid b/templates/index.liquid index 88ca8ea..bba8945 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -65,7 +65,8 @@ <div class="top"> {% for media in project.media %} {% if media.type == 'image' %} - <div class="cell {% if project.containImage == 'true' %}contain{% endif %}" style="background-image:url({{ media.uri }})"></div> + <div class="cell" style="background-image:url({{ media.uri }}); + {% if media.caption %} background-size:{{ media.caption }}; {% endif %}"></div> {% elsif media.type == 'vimeo' %} <div class="cell video" data-video="{{ media.token }}"></div> {% elsif media.type == 'link' %} |