From 65df9b0915b4bfe76057f64f6c7c88ff82194328 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 29 Mar 2016 12:48:42 -0400 Subject: cursors and intro --- db.json | 28 +++++++++-- public/assets/img/d.png | Bin 0 -> 290 bytes public/assets/img/l.png | Bin 0 -> 187 bytes public/assets/img/r.png | Bin 0 -> 186 bytes public/assets/img/u.png | Bin 0 -> 288 bytes public/assets/img/x.png | Bin 0 -> 422 bytes public/assets/ok.css | 125 +++++++++++++++++++++++++++++++++++++++++++----- templates/index.liquid | 60 +++++++++++++++++------ 8 files changed, 184 insertions(+), 29 deletions(-) create mode 100644 public/assets/img/d.png create mode 100644 public/assets/img/l.png create mode 100644 public/assets/img/r.png create mode 100644 public/assets/img/u.png create mode 100644 public/assets/img/x.png diff --git a/db.json b/db.json index 35289b4..cd10ef1 100644 --- a/db.json +++ b/db.json @@ -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", @@ -75,7 +75,7 @@ "uri": "https://ltho.s3.amazonaws.com/e12aee73-07a1-41f4-a54f-8b8c09f167f9.png", "caption": "" }, - "__index": 1, + "__index": 2, "dateCreated": "Mon, 28 Mar 2016 17:19:36 GMT", "iframe": "http://okfoc.us", "video": "" @@ -106,7 +106,7 @@ "uri": "http://www.ibtimes.com/what-viralism-inquiry-cultures-battle-digital-space-214392" } ], - "__index": 3, + "__index": 4, "dateCreated": "Mon, 28 Mar 2016 23:25:29 GMT" }, { @@ -138,8 +138,28 @@ "uri": "https://news.artnet.com/art-world/a-brief-history-of-animated-gif-art-part-two-78532" } ], - "__index": 2, + "__index": 3, "dateCreated": "Mon, 28 Mar 2016 23:27:45 GMT" + }, + { + "id": "spice-girls", + "title": "spice girls", + "year": 2011, + "client": "MOMA", + "link": "http://moonpies.org", + "NatureOfWork": "bam\r\ntoons\r\npoo", + "brief": "yes", + "media": [ + { + "uri": "https://ltho.s3.amazonaws.com/6e924d4d-0f0d-4f72-a098-200bb663cd25.png", + "caption": "", + "type": "image" + } + ], + "containImage": "false", + "__index": "0", + "dateCreated": "Tue, 29 Mar 2016 15:45:57 GMT", + "press": [] } ], "page": [ diff --git a/public/assets/img/d.png b/public/assets/img/d.png new file mode 100644 index 0000000..9530c09 Binary files /dev/null and b/public/assets/img/d.png differ diff --git a/public/assets/img/l.png b/public/assets/img/l.png new file mode 100644 index 0000000..383e388 Binary files /dev/null and b/public/assets/img/l.png differ diff --git a/public/assets/img/r.png b/public/assets/img/r.png new file mode 100644 index 0000000..8fb6dfb Binary files /dev/null and b/public/assets/img/r.png differ diff --git a/public/assets/img/u.png b/public/assets/img/u.png new file mode 100644 index 0000000..530d460 Binary files /dev/null and b/public/assets/img/u.png differ diff --git a/public/assets/img/x.png b/public/assets/img/x.png new file mode 100644 index 0000000..71d3017 Binary files /dev/null and b/public/assets/img/x.png differ diff --git a/public/assets/ok.css b/public/assets/ok.css index ee7282b..ea931b0 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -35,6 +35,78 @@ body { overflow: hidden; } +.hidden { + display: none!important; +} + +h1 { + font-size: 27px; + line-height: 32px; +} + +h1 span { + font-size: 16px; + line-height: 20px; + width: 50%; + margin: 10px 0; +} + +h2 { + font-size: 16px; + margin: 20px 0; +} + +h3 { + font-size: 12px; +} + +.intro a { + width: 100%; + display: inline-block; +} + +.intro a:before { + content: "– "; +} + +.intro { + font-size: 12px; + line-height: 20px; +} + +.intro .left { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: space-between; + align-content: stretch; + align-items: flex-start; +} + +.intro div { + width: 25%; + float: left; + clear: both; + height: 100%; + padding: 27px 5px 5px 5px; +} + +.intro div.text { + width: 50%; + -webkit-column-count: 2; + -webkit-column-gap: 5px; + -moz-column-gap: 5px; + column-gap: 5px; + font-size: 12px; +} + +.intro .right { + background: url(http://ryder-ripps.com/press/ryder-ripps.jpg)no-repeat center; + background-size: cover; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); +} + .menu { position: fixed; height: 100vh; @@ -95,6 +167,7 @@ menu ul { opacity: 0.1; transition: 150ms opacity cubic-bezier(0, 0, 0, 1); background: #eee; + cursor: url(img/x.png), pointer; } div, @@ -105,6 +178,7 @@ span { .item { height: 100vh; + width: 100%; display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; @@ -114,7 +188,14 @@ span { body, nav { - background: #fff; + background: white; + transition: 300ms background 150ms; + transition-timing-function: cubic-bezier(0, 0, 0, 1); +} + +.navopen nav, +body.navopen { + background: #f9f9f9; } nav { @@ -141,7 +222,7 @@ nav span { } .index { - width: 60px; + width: 65px; transition: 150ms width; transition-timing-function: cubic-bezier(0, 0, 0, 1); } @@ -223,6 +304,28 @@ nav b { outline: none; } +.flickity-viewport:before { + content: ""; + height: 20vw; + width: 60vw; + position: absolute; + z-index: 3; + margin-left: 20vw; + cursor: url(img/u.png), pointer; +} + + +.flickity-viewport:after { + content: ""; + height: 20vw; + width: 60vw; + position: absolute; + z-index: 3; + bottom:0; + margin-left: 20vw; + cursor: url(img/d.png), pointer; +} + .flickity-viewport { overflow: hidden; position: relative; @@ -235,30 +338,29 @@ nav b { } button { - width: 10vw; + width: 20vw; position: absolute; top: 0; background: transparent; - cursor: pointer; } -.navopen button { +.navopen button, +.navopen iframe.cell { pointer-events: none; } button svg { - opacity: 0; - transition: 150ms all; - transition-timing-function: cubic-bezier(0, 0, 0, 1); - transform: scale(0.3); + display: none; } button.next { right: 0; + cursor: url(img/r.png), pointer; } button.previous { left: 0; + cursor: url(img/l.png), pointer; } .desktop button.previous:hover svg, @@ -267,8 +369,8 @@ button.previous { transform: scale(0.2); } -button.next:active svg, -button.previous:active svg { +.desktop button.next:active svg, +.desktop button.previous:active svg { transform: scale(0.1); } @@ -294,6 +396,7 @@ button.previous:active svg { flex: 0 auto; overflow: hidden; padding: 5px 0; + cursor: url(img/d.png), pointer; } .five { diff --git a/templates/index.liquid b/templates/index.liquid index bba8945..d0df8b2 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -30,12 +30,11 @@ + {% for project in projects %}
- {% for media in project.media %} - {% if media.type == 'image' %} -
- {% elsif media.type == 'vimeo' %} -
- {% elsif media.type == 'link' %} - - {% endif %} - {% endfor %} + {% elsif media.type == 'vimeo' %} +
+ {% elsif media.type == 'link' %} + + {% endif %} {% endfor %}
-- cgit v1.2.3-70-g09d2