From 57a81c9adc42d307e652d895eb66d2120849b514 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 20:05:01 -0400 Subject: caption as backgroundsize --- db.json | 24 ++++++++++++++++++++++-- templates/index.liquid | 3 ++- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/db.json b/db.json index cb6f87c..35289b4 100644 --- a/db.json +++ b/db.json @@ -21,13 +21,33 @@ "uri": "http://nytimes.com/" } ], - "__index": 0, + "__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": "", 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 @@
{% for media in project.media %} {% if media.type == 'image' %} -
+
{% elsif media.type == 'vimeo' %}
{% elsif media.type == 'link' %} -- cgit v1.2.3-70-g09d2 From d852fc08bf6fd8f76a9218f081f0efe6b3e03ece Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 20:13:40 -0400 Subject: app init to bottom mobile --- public/assets/js/app.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/public/assets/js/app.js b/public/assets/js/app.js index b8992ea..7dabf26 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -38,8 +38,6 @@ var app = (function() { })() -app.init() - $(".cell, .next").css({ 'height': ($(".top").height() + 'px') }); @@ -83,4 +81,7 @@ $(window).resize(function() { $('.top').flickity('resize'); $('body').removeClass('resizing'); }, 400); -}) \ No newline at end of file +}) + +app.init() + -- cgit v1.2.3-70-g09d2 From 8b85f846bd11e0dedba42fbaee86554d823e9b6f Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 20:21:13 -0400 Subject: mobile --- public/assets/ok.css | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/public/assets/ok.css b/public/assets/ok.css index 113b43e..95841f9 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -387,17 +387,28 @@ 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; -- cgit v1.2.3-70-g09d2 From ab1d8b224b0ca41e281b1a4d57d2c4aa36dc763c Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 20:25:59 -0400 Subject: css --- public/assets/ok.css | 46 ++++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/public/assets/ok.css b/public/assets/ok.css index 95841f9..3c3662b 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; @@ -131,12 +131,12 @@ nav span { vertical-align: top; padding: 2px; } -.index { -} + +.index {} + .index:after { content: "INDEX"; - padding-right: 5px; - + padding-right: 5px; } .navopen .index:after { @@ -185,6 +185,7 @@ nav b { font-weight: normal; } + /* Flickity */ .flickity-enabled { @@ -215,7 +216,7 @@ button { } .navopen button { - pointer-events:none; + pointer-events: none; } button svg { @@ -233,8 +234,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 +245,6 @@ button.previous:active svg { transform: scale(0.1); } - - .cell { width: 100vw; /*THIS SHOULD BE DYNAMIC*/ @@ -339,13 +338,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 +379,7 @@ ul li { font-weight: 400; } nav span div:first-child { - font-size: 0; + font-weight: bold } nav span { border: 0; @@ -387,16 +387,18 @@ ul li { nav img { width: 12px; } - nav span div:nth-child(2), .five span:nth-child(4) { + nav span div:nth-child(2), + .five span:nth-child(4) { display: none; } .texts { - padding:3px 5px; + padding: 3px 5px; } - .five span:nth-child(2), .five span:nth-child(3){ - width:calc(50% - 2.5px); + .five span:nth-child(2), + .five span:nth-child(3) { + width: calc(50% - 2.5px); } - .five span:nth-child(3){ + .five span:nth-child(3) { margin-left: 5px; } .five span { @@ -407,7 +409,7 @@ ul li { font-weight: 600; } iframe.cell { - pointer-events:none; + pointer-events: none; } .five span.description { width: 100%!important; -- cgit v1.2.3-70-g09d2 From 096ac0bf1925ff64e6895f8d1c552ba3a19b26c5 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 20:34:22 -0400 Subject: nav animation --- public/assets/ok.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/public/assets/ok.css b/public/assets/ok.css index 3c3662b..426ede8 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -425,6 +425,18 @@ ul li { #burger { width: 22px; } + .index { + width: 10vw; + transition: 150ms width; + } + .index:after, + .navopen .index:after { + content: ""; + padding-right: 0; + } + .navopen .index { + width: 90vw; + } .menu { width: 90vw; transform: translateX(-90vw); @@ -432,6 +444,15 @@ ul li { .navopen .item { transform: translateX(90vw); } + nav span div:last-child { + transition: 150ms all; + } + .navopen nav span div:last-child { + transform: translateX(110px); + transition: 150ms all; + position: absolute; + right: 5px; + } .top { margin-top: 30px; } -- cgit v1.2.3-70-g09d2 From 47bc2ab4306194679b2e853f0712e553d1a51dbf Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 20:50:23 -0400 Subject: slick --- public/assets/ok.css | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/public/assets/ok.css b/public/assets/ok.css index 426ede8..a741c6d 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -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, @@ -132,7 +140,15 @@ nav span { padding: 2px; } -.index {} +.index { + width:60px; + transition: 150ms width; + transition-timing-function: cubic-bezier(0, 0, 0, 1); +} + +.navopen .index { + width: 50vw; +} .index:after { content: "INDEX"; @@ -222,7 +238,7 @@ button { 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); } @@ -427,7 +443,6 @@ ul li { } .index { width: 10vw; - transition: 150ms width; } .index:after, .navopen .index:after { -- cgit v1.2.3-70-g09d2 From 73f7537fe8a0e56e532889c4cb4fd72d04639498 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 28 Mar 2016 20:52:27 -0400 Subject: more slick shit --- public/assets/ok.css | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/public/assets/ok.css b/public/assets/ok.css index a741c6d..ee7282b 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -141,7 +141,7 @@ nav span { } .index { - width:60px; + width: 60px; transition: 150ms width; transition-timing-function: cubic-bezier(0, 0, 0, 1); } @@ -150,6 +150,17 @@ nav span { 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; @@ -459,15 +470,6 @@ ul li { .navopen .item { transform: translateX(90vw); } - nav span div:last-child { - transition: 150ms all; - } - .navopen nav span div:last-child { - transform: translateX(110px); - transition: 150ms all; - position: absolute; - right: 5px; - } .top { margin-top: 30px; } -- cgit v1.2.3-70-g09d2