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 @@
 <body class="loading">
     <div class="menu">
         <ul>
-          {% for page in pages %}
+            {% for page in pages %}
             <li data-id="{{ page.id }}">{{ page.title }}</li>
-          {% endfor %}
-          {% for project in projects %}
+            {% endfor %} {% for project in projects %}
             <li data-id="{{ project.id }}">{{ project.title }}</li>
-          {% endfor %}
+            {% endfor %}
         </ul>
     </div>
     <nav>
@@ -57,22 +56,55 @@
               </svg>
             </div>
             <div>OKFocus LLC. - Portfolio • 2016</div>
-            <div>SLIDE.<b class="slide-no">1</b> • PG.<b class="page-no">1</b></div>
+            <div>e.g.<b class="slide-no">1</b> OF <b>3</b> • PG.<b class="page-no">1</b></div>
         </span>
     </nav>
+    <div class="item intro hidden">
+        <div class="left">
+            <h1>
+                20 Years of Creating Stuff On The Computer.
+                <span>Introduction by E.C.D., Ryder Ripps</span>
+            </h1>
+
+            <h3>
+                Accolades –
+                <br>
+                <a href="">Forbes Magazine, 30 under 30</a>
+                <a href="">Advertising Age, Creativity 50</a>
+                <br><br>
+                Press –
+                <br>
+                <a href="">New York Times</a>
+                <a href="">Details Magazine</a>
+                <a href="">Vice</a>
+                <a href="">Creators Project</a>
+                <a href="">The Fader</a>
+                <br><br>
+                Speaker At –
+                <br>
+                RISD, AIGA, Semi-Perminent, SXSW, Sotheby’s, Goethe Institut, Smithsonian, OTIS College
+                <br>
+                Clients ––
+                <br><br>
+                M.I.A., Smirnoff, MOCA, New Museum, Kanye West, Mike Will Made-It, Nike, Instagram, Bruno Mars, Atlantic Records, Universal Records, Liberty Science Center, Stone Island, Diesel, Red Bull, Kenzo,     FOX, HBO, VFILES, Been Trill,Tumblr, Paddles 8, Google
+            </h3>
+        </div>
+        <div class="text">
+            Form without function is bad. Being an artist these days has a lot to do with who you hangout with. Both my parents have their portraits by Warhol. I was born in 1986. I create physical work to freeze a moment of internet time. Being antisocial is cool now. People no longer look up from screens. I love animals, especially cats and llamas. OKFocus was started in 2011 after I creative directed VFiles and before I bought a 1987 BMW convertible but after I rewrote Ginsberg's Howl for the internet generation. I invented sea-punk as well as vapor-wave. I made a site in 2010 that allowed people to communicate in real-time with images, it hosts over 2 million images and is still running, Facebook probably got the idea of real-time fav notifications from us. Before that in 2009 I created an online museum for early internet graphics, after that I worked for M.I.A. pontificating online with her many nights at 2am. My girlfriend says I should be less braggy in this writing. I am considering writing a passage about her as a response. Tweets killed books. Images killed tweets. Clickbait killed images. I played Doom through a dial-up modem in 1995. I made earnest 3d graphics of dolphins jumping through hoops in Adobe Photoshop 3.0.I rewrote Ginsberg’s Howl for the internet generation. You can not call yourself a creative director unless you could take the place of anyone under your command, someone one told me that. I write CSS because it’s efficient. We create our own backends because templates don’t understand us as individuals. I strive to be understood as a human and as media. Good work exists outside of trends. Trends are just over simplifications of a pithy new things. I once tried to create luxury email in 2008. When asked to make Burberry “cooler” on the internet in I thought about what between luxury goods and the internet were at odds. I told a creative director that a luxury good is something those with enough money can stroll into a store and buy, while status online isn’t as the same. Online clout comes from having a lot of followers or a Wikipedia entry, things that have little connection to what an individual can or can not afford. I explained this and introduced a concept that I felt was genius. I told him that we needed to merge these two disparate worlds, and create luxury email. That’s right, for $30,000 consumers could purchase a Burberry email address, to flaunt their wealth and status within the virtual world. The creative director looked me right in the eye, with inexcusable disgust and plainly said, “that’s the worst idea i’ve ever heard” the following day I quit working at that agency and have been my own boss since – still on a mission to make luxury email a thing and innovate culture through multiple disciplines online. I had asthma, then I quit smoking. On my desk I have a large piece of driftwood. I am the only person you will ever meet who has spoken at RISD and never been fly fishing. Who has worked with Kanye West, The Wolfsonian Museum, Mike Will Made-It and spoken at The Smithsonian. I am not a rapper... 
+        </div>
+        <div class="right"></div>
+    </div>
     {% for project in projects %}
     <div class="item" data-id="{{ project.id }}">
         <div class="top">
-            {% for media in project.media %}
-              {% if media.type == 'image' %}
-                <div class="cell" style="background-image:url({{ media.uri }}); 
+            {% for media in project.media %} {% if media.type == 'image' %}
+            <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' %}
-                <iframe class="cell" src="{{ media.uri }}"></iframe>
-              {% endif %}
-            {% endfor %}
+            {% elsif media.type == 'vimeo' %}
+            <div class="cell video" data-video="{{ media.token }}"></div>
+            {% elsif media.type == 'link' %}
+            <iframe class="cell" src="{{ media.uri }}"></iframe>
+            {% endif %} {% endfor %}
         </div>
         <div class="bottom {% if project.press %}press{% else %}nopress{% endif %}">
             <div class="headings five">
-- 
cgit v1.2.3-70-g09d2


From e7893c73df6d0a1ace66e764b3b3298f41232aec Mon Sep 17 00:00:00 2001
From: “Ryder <“r@okfoc.us”>
Date: Tue, 29 Mar 2016 12:49:28 -0400
Subject: moving tomato

---
 public/assets/img/tomato20dancing.gif | Bin 0 -> 36620 bytes
 public/assets/ok.css                  |   2 +-
 public/assets/tomato20dancing.gif     | Bin 36620 -> 0 bytes
 3 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 public/assets/img/tomato20dancing.gif
 delete mode 100644 public/assets/tomato20dancing.gif

diff --git a/public/assets/img/tomato20dancing.gif b/public/assets/img/tomato20dancing.gif
new file mode 100644
index 0000000..0416665
Binary files /dev/null and b/public/assets/img/tomato20dancing.gif differ
diff --git a/public/assets/ok.css b/public/assets/ok.css
index ea931b0..62c4428 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -388,7 +388,7 @@ button.previous {
 }
 
 .resizing .top {
-    background: url(tomato20dancing.gif)center;
+    background: url(img/tomato20dancing.gif)center;
 }
 
 .bottom {
diff --git a/public/assets/tomato20dancing.gif b/public/assets/tomato20dancing.gif
deleted file mode 100644
index 0416665..0000000
Binary files a/public/assets/tomato20dancing.gif and /dev/null differ
-- 
cgit v1.2.3-70-g09d2


From 9caa4dec9468be2da599959dd0b73d958a71a1aa Mon Sep 17 00:00:00 2001
From: “Ryder <“r@okfoc.us”>
Date: Tue, 29 Mar 2016 12:50:54 -0400
Subject: adding white x

---
 public/assets/img/x-w.png | Bin 0 -> 389 bytes
 public/assets/ok.css      |   2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 public/assets/img/x-w.png

diff --git a/public/assets/img/x-w.png b/public/assets/img/x-w.png
new file mode 100644
index 0000000..076b63d
Binary files /dev/null and b/public/assets/img/x-w.png differ
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 62c4428..64d139d 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -167,7 +167,7 @@ menu ul {
     opacity: 0.1;
     transition: 150ms opacity cubic-bezier(0, 0, 0, 1);
     background: #eee;
-    cursor: url(img/x.png), pointer;
+    cursor: url(img/x-w.png), pointer;
 }
 
 div,
-- 
cgit v1.2.3-70-g09d2


From fa313e781f0aff437f8f631030e9b55da9c05b02 Mon Sep 17 00:00:00 2001
From: “Ryder <“r@okfoc.us”>
Date: Tue, 29 Mar 2016 12:59:40 -0400
Subject: cursor offset

---
 db.json              |  7 ++++++-
 public/assets/ok.css | 13 +++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/db.json b/db.json
index cd10ef1..b7f5093 100644
--- a/db.json
+++ b/db.json
@@ -159,7 +159,12 @@
       "containImage": "false",
       "__index": "0",
       "dateCreated": "Tue, 29 Mar 2016 15:45:57 GMT",
-      "press": []
+      "press": [
+        {
+          "text": "google",
+          "uri": "google.com"
+        }
+      ]
     }
   ],
   "page": [
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 64d139d..03b0a3b 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -26,6 +26,7 @@ a:visited {
     color: blue;
     font-weight: bold;
     font-size: 11px;
+    cursor:pointer;
 }
 
 body {
@@ -167,7 +168,7 @@ menu ul {
     opacity: 0.1;
     transition: 150ms opacity cubic-bezier(0, 0, 0, 1);
     background: #eee;
-    cursor: url(img/x-w.png), pointer;
+    cursor: url(img/x-w.png) 32 32, pointer;
 }
 
 div,
@@ -311,7 +312,7 @@ nav b {
     position: absolute;
     z-index: 3;
     margin-left: 20vw;
-    cursor: url(img/u.png), pointer;
+    cursor: url(img/u.png) 32 0, pointer;
 }
 
 
@@ -323,7 +324,7 @@ nav b {
     z-index: 3;
     bottom:0;
     margin-left: 20vw;
-    cursor: url(img/d.png), pointer;
+    cursor: url(img/d.png)32 64, pointer;
 }
 
 .flickity-viewport {
@@ -355,12 +356,12 @@ button svg {
 
 button.next {
     right: 0;
-    cursor: url(img/r.png), pointer;
+    cursor: url(img/r.png)64 32, pointer;
 }
 
 button.previous {
     left: 0;
-    cursor: url(img/l.png), pointer;
+    cursor: url(img/l.png) 0 32, pointer;
 }
 
 .desktop button.previous:hover svg,
@@ -396,7 +397,7 @@ button.previous {
     flex: 0 auto;
     overflow: hidden;
     padding: 5px 0;
-    cursor: url(img/d.png), pointer;
+    cursor: url(img/d.png)32 64, pointer;
 }
 
 .five {
-- 
cgit v1.2.3-70-g09d2