diff options
| -rw-r--r-- | db.json | 27 | ||||
| -rw-r--r-- | public/assets/ok.css | 37 | ||||
| -rw-r--r-- | templates/index.liquid | 2 |
3 files changed, 45 insertions, 21 deletions
@@ -21,7 +21,7 @@ "uri": "http://nytimes.com/" } ], - "__index": 0, + "__index": "1", "dateCreated": "Sat, 26 Mar 2016 20:34:21 GMT", "client": "Annapurna Pictures", "containImage": "false", @@ -70,13 +70,13 @@ "title": "Test 2", "client": "Moopy", "link": "http://moonpies.org", - "NatureOfWork": "poo, surf, eat popcorn", - "brief": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.", + "NatureOfWork": "poo\r\nsurf\r\neat popcorn", + "brief": " font-size: 16px;\r\n line-height: 20px;\r\n width: 80%;\r\n margin: 10px 0;\r\n clear: both;", "image": { "uri": "https://ltho.s3.amazonaws.com/e12aee73-07a1-41f4-a54f-8b8c09f167f9.png", "caption": "" }, - "__index": 2, + "__index": "2", "dateCreated": "Mon, 28 Mar 2016 17:19:36 GMT", "iframe": "http://okfoc.us", "video": "", @@ -84,7 +84,8 @@ "media": [ { "uri": "https://ltho.s3.amazonaws.com/4f0fb27a-b9c5-40a9-ace8-1c5e12d78d0b.png", - "caption": "" + "caption": "", + "type": "image" } ], "containImage": "false", @@ -96,7 +97,7 @@ "title": "Internet Archaeology", "client": "OKFocus", "link": "http://internetarchaeology.org/", - "NatureOfWork": "Web Development", + "NatureOfWork": "Web Development\r\nother things", "brief": "Internet Archaeology was the first major self initiated project by OKFocus creative director, Ryder Ripps. As a response to Yahoo pulling the plug on GeoCities. Internet Archaeology archived, presented and re-imagined early internet ephemera for a new audience. Preceding the revival of GIFs and late 90s aesthetic, Internet Archaeology fostered the net trends in art and fashion to come.", "media": [ { @@ -116,8 +117,9 @@ "uri": "http://www.ibtimes.com/what-viralism-inquiry-cultures-battle-digital-space-214392" } ], - "__index": 4, - "dateCreated": "Mon, 28 Mar 2016 23:25:29 GMT" + "__index": "4", + "dateCreated": "Mon, 28 Mar 2016 23:25:29 GMT", + "alternateTitle": "" }, { "id": "dump-fm", @@ -149,7 +151,7 @@ "uri": "https://news.artnet.com/art-world/a-brief-history-of-animated-gif-art-part-two-78532" } ], - "__index": 3, + "__index": "3", "dateCreated": "Mon, 28 Mar 2016 23:27:45 GMT", "alternateTitle": "" }, @@ -160,7 +162,7 @@ "client": "MOMA", "link": "http://moonpies.org", "NatureOfWork": "bam\r\ntoons\r\npoo", - "brief": "The Spice Girls were an English pop girl group formed in 1994. The group consists of Melanie Brown (\"Scary Spice\"), Melanie Chisholm (\"Sporty Spice\"), Emma Bunton (\"Baby Spice\"), Geri Halliwell (\"Ginger Spice\"), and Victoria Beckham, née Adams (\"Posh Spice\"). They were signed to Virgin Records and released their debut single \"Wannabe\" in 1996, which hit number one in 37 countries and established them as a global phenomenon. ", + "brief": "yes", "media": [ { "uri": "https://ltho.s3.amazonaws.com/6e924d4d-0f0d-4f72-a098-200bb663cd25.png", @@ -169,15 +171,14 @@ } ], "containImage": "false", - "__index": "1", + "__index": "0", "dateCreated": "Tue, 29 Mar 2016 15:45:57 GMT", "press": [ { "text": "google", "uri": "google.com" } - ], - "alternateTitle": "" + ] } ], "page": [ diff --git a/public/assets/ok.css b/public/assets/ok.css index 647b92f..36d0f08 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -61,7 +61,7 @@ h1 { h1 span { font-size: 16px; line-height: 20px; - width: 50%; + width: 80%; margin: 10px 0; } @@ -252,15 +252,22 @@ span { height: 100vh; width: 100%; display: block; - transition: 150ms transform cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 0, 0, 1); + transition: 150ms transform cubic-bezier(0, 0, 0, 1), 200ms background cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 1, 0, 0); } .item.intro { display: flex; display: -webkit-flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; + background:white; +} +.navopen .item.intro { + background:black; } +.navopen .item.intro > *{ + background:transparent; +} body, nav { background: white; @@ -298,6 +305,7 @@ nav span { .index { width: 65px; + background: white; transition: 150ms width; transition-timing-function: cubic-bezier(0, 0, 0, 1); } @@ -390,15 +398,29 @@ nav b { .up .showing.item { transform: translateY(-10px); opacity: 0; - background: white; + background: black; } .down .showing.item { transform: translateY(10px); opacity: 0; + background: black; +} + +.up nav, .down nav { + background: black; + transition: 0ms background; + transition-timing-function: cubic-bezier(1, 0, 0, 1); +} + +.up nav .index, .down nav .index{ background: white; + transition: 0ms background; } +.up nav span div:last-child .page-no, .down nav span div:last-child .page-no{ + color:white; +} /* Flickity */ @@ -411,7 +433,7 @@ nav b { } .page-up { - height: 20vw; + height: 50vw; width: 60vw; position: absolute; top: 25px; @@ -422,7 +444,7 @@ nav b { } .page-down { - height: 20vw; + height: 50vw; width: 60vw; position: absolute; z-index: 3; @@ -441,9 +463,7 @@ nav b { height:100%; bottom: -25px; } -.item:last-child .page-down, .item:last-child .bottom{ - cursor:default; -} + .flickity-viewport { overflow: hidden; @@ -693,6 +713,7 @@ ul li { } .index { width: 10vw; + } .index:after, .navopen .index:after { diff --git a/templates/index.liquid b/templates/index.liquid index 0973a62..e2969b0 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -55,6 +55,7 @@ </g> </svg> </div> + <div>OKFocus LLC. - Portfolio • 2016</div> <div>fig.<b class="slide-no">1</b> OF <b class="slide-count">3</b> • PG.<b class="page-no">1</b></div> </span> @@ -67,6 +68,7 @@ OKFocus Portfolio <span>2010 - 2016</span> </h1> + <span id="cred"> <img src="/assets/img/okfocus_logo.gif" width="102"><br> <small><b>© 2016 OKFocus LLC.</b></small> |