merge

8 files changed, 187 insertions, 35 deletions

diff --git a/public/assets/img/dude.png b/public/assets/img/dude.png
new file mode 100644
index 0000000..c0246fe
--- /dev/null
+++ b/public/assets/img/dude.png
diff --git a/public/assets/img/ibm.jpg b/public/assets/img/ibm.jpg
new file mode 100644
index 0000000..d6ced6a
--- /dev/null
+++ b/public/assets/img/ibm.jpg
diff --git a/public/assets/img/ryder-ripps.gif b/public/assets/img/ryder-ripps.gif
new file mode 100644
index 0000000..0dd6d08
--- /dev/null
+++ b/public/assets/img/ryder-ripps.gif
diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js
index 9413cc2..2c53cf5 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -17,6 +17,7 @@ var ProjectView = View.extend({
 
     this.images = this.$images.toArray().map(function(img){ return $(img).data("uri") })
 
+
     if (is_mobile) {
       this.$iframes.remove()
       this.$videos.remove()
@@ -76,6 +77,7 @@ var ProjectView = View.extend({
   },
   
   show: function(){
+    var audio = this.$("audio") 
     app.header.updatePageNumber( this.page_number )
     app.header.updateSlideNumber( 0 )
     app.header.updateSlideCount( this.slide_count )
@@ -120,6 +122,7 @@ var ProjectView = View.extend({
   },
   
   hide: function(){
+
     addClassForPeriod( this.el, "hiding", app.navigation_delay, function(){
       this.reset()
     }.bind(this) )
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 14a8cd6..1e8bcb4 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -11,6 +11,7 @@ html {
     outline: 0;
     border: 0;
     -webkit-appearance: none;
+    -webkit-font-smoothing: subpixel-antialiased;
 }
 
 ::selection {
@@ -21,11 +22,17 @@ html {
     color: blue;
 }
 
+audio {
+    position: fixed;
+    top: -800000px;
+    left: -90000px;
+    opacity: 0;
+}
+
 a,
 a:visited {
     color: blue;
     font-weight: bold;
-    font-size: 11px;
     cursor: pointer;
 }
 
@@ -91,7 +98,7 @@ h3 {
 }
 
 .intro {
-    font-size: 12px;
+    font-size: 14px;
     line-height: 20px;
 }
 
@@ -115,17 +122,14 @@ h3 {
 .intro div.text {
     width: 50%;
     -webkit-column-count: 2;
-    -webkit-column-gap: 5px;
-    -moz-column-gap: 5px;
-    column-gap: 5px;
-    font-size: 12px;
+    -webkit-column-gap: 10px;
+    -moz-column-gap: 10px;
+    column-gap: 10px;
 }
 
-.intro .right {
-    background: url(http://ryder-ripps.com/press/ryder-ripps.jpg)no-repeat center;
+.intro.single .right {
+    background: url(img/ryder-ripps.gif)no-repeat center;
     background-size: cover;
-    -webkit-filter: grayscale(100%);
-    filter: grayscale(100%);
 }
 
 .intro.cover .left span#cred {
@@ -139,11 +143,25 @@ h3 {
 }
 
 .intro.cover .right {
-    background: url(img/crater.gif)no-repeat center;
-    background-size: cover;
+    padding:0;
     width: 75%;
+    height:100%;
+}
+.intro.cover .right iframe {
+    width: 35%;
+    height: 40%;
+    position: absolute;
+    margin-top: 9%;
+    margin-left: 33%;
 }
+.intro.cover .right span {
+    background: url(img/dude.png)no-repeat center;
+    background-size: cover;
+    width:100%;
+    height:100%;
+    position: relative;
 
+}
 .menu {
     position: fixed;
     height: calc(100vh - 24px);
@@ -328,15 +346,16 @@ span {
 }
 
 #curtain {
-  position: absolute;
-  top: 0; left: 0;
-  background: black;
-  transition: 200ms opacity cubic-bezier(0, 0, 0, 1);
-  opacity: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: black;
+    transition: 200ms opacity cubic-bezier(0, 0, 0, 1);
+    opacity: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
 }
 
 .navopen #curtain {
@@ -531,6 +550,7 @@ body {
     margin-left: 20vw;
     cursor: url(img/u.png) 32 0, pointer;
 }
+
 .whitecursor .page-up {
     cursor: url(img/u-white.png) 32 0, pointer;
 }
@@ -545,6 +565,7 @@ body {
     margin-left: 20vw;
     cursor: url(img/d.png) 32 64, pointer;
 }
+
 .whitecursor .page-down {
     cursor: url(img/d-white.png) 32 64, pointer;
 }
@@ -597,6 +618,7 @@ button.next {
     cursor: url(img/r.png)64 32, pointer;
     z-index: 4;
 }
+
 .whitecursor button.next {
     cursor: url(img/r-white.png)64 32, pointer;
 }
@@ -606,6 +628,7 @@ button.previous {
     cursor: url(img/l.png) 0 32, pointer;
     z-index: 4;
 }
+
 .whitecursor button.previous {
     cursor: url(img/l-white.png) 0 32, pointer;
 }
@@ -713,7 +736,7 @@ nav {
 
 .projectLink {
     display: block;
-
+    margin-top: 3px;
 }
 
 ul li {
@@ -733,7 +756,7 @@ ul li {
     display: none;
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 1200px)  {
     .texts {
         font-size: 13px;
         line-height: 16px;
@@ -749,18 +772,39 @@ ul li {
     .projectLink {
         margin-top: 3px;
     }
+    .intro div.text,
+    h3, .left a {
+        font-size: 14px;
+        line-height: 20px;
+    }
 }
 
 
-/*
-    @media (min-width: 1400px) {
-        .texts {
-            font-size: 14px;
-            line-height: 16px;
-        }
 
+@media (min-width: 1500px) {
+    .intro div.text,
+    h3,
+    .left a {
+        font-size: 16px;
+        line-height: 25px;
+    }
+    h1 {
+        font-size: 40px;
+        line-height: 50px;
+    }
+}
+
+
+@media (max-height: 980px) {
+    .intro div.text,
+    h3, .left a {
+        font-size: 14px;
+        line-height: 20px;
     }
-    
+}
+
+
+/*
     @media (min-width: 1600px) {
         .texts {
             font-size: 15px;
@@ -812,8 +856,6 @@ ul li {
     .texts {
         padding: 3px 5px;
     }
-
-
     .five span {
         width: 100%;
         border-bottom: 1px solid;
@@ -830,12 +872,11 @@ ul li {
         -moz-column-gap: 3px;
         column-gap: 3px;
         border-bottom: 0;
-        border-top:2px;
+        border-top: 2px;
         text-align: justify;
     }
-
     .projectLink {
-        display:none;
+        display: none;
     }
     .press .five span:last-child {
         display: none;
diff --git a/public/assets/stars/flyingthroughspace.css b/public/assets/stars/flyingthroughspace.css
new file mode 100755
index 0000000..8d867ed
--- /dev/null
+++ b/public/assets/stars/flyingthroughspace.css
@@ -0,0 +1,17 @@
+body {
+    background-color: black;
+    margin: 0;
+    padding: 0;
+}
+
+.star {
+    /*background-color: white;*/
+    /*border-radius: 30px;*/
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    background: -moz-radial-gradient(closest-side circle,#FFF,#000);
+    background: -o-radial-gradient(closest-side circle,#FFF,#000);
+    background: -webkit-radial-gradient(closest-side circle,#FFF,#000);
+    background: radial-gradient(closest-side circle,#FFF,#000);
+}
\ No newline at end of file
diff --git a/public/assets/stars/flyingthroughspace.js b/public/assets/stars/flyingthroughspace.js
new file mode 100755
index 0000000..7587c71
--- /dev/null
+++ b/public/assets/stars/flyingthroughspace.js
@@ -0,0 +1,81 @@
+(function() {
+
+    var STAR_COUNT = 500;
+    var WARP_SPEED = 0.02;
+    var FPS = 30;
+
+    var getRandom = function(lbound, ubound) {
+        return window.Math.random() * (ubound - lbound) + lbound;
+    };
+
+    var windowCenter = {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2
+    };
+
+    var Star = function() {
+        this.element = document.createElement('div');
+        this.element.className = 'star';
+        this.randomizeSpawn();
+        document.body.appendChild(this.element);
+    };
+
+    Star.prototype.randomizeSpawn = function() {
+        this.x = getRandom(1, window.innerWidth);
+        this.y = getRandom(1, window.innerHeight);
+        this.brightness = 1;//getRandom(1, 5);
+        this.distance = getRandom(0.01, 6);
+    }
+
+    Star.prototype.isOutsideField = function() {
+        return this.x < 0 ||
+               this.x > window.innerWidth ||
+               this.y > window.innerHeight ||
+               this.y < 0;
+    };
+
+    Star.prototype.setPosition = function() {
+        this.element.style.left = this.x + 'px';
+        this.element.style.top = this.y + 'px';
+        this.element.style.width = this.brightness + 'px';
+        this.element.style.height = this.brightness + 'px';
+    };
+
+    var stars = [];
+
+    var incrementFrame = function() {
+
+        for (var i = 0; i < STAR_COUNT; i++) {
+
+            var star = stars[i] = stars[i] || new Star();
+
+            // Split position by splitting into x & y vectors
+            star.x -= (windowCenter.x - star.x) * WARP_SPEED * star.distance;
+            star.y -= (windowCenter.y - star.y) * WARP_SPEED * star.distance;
+
+            if (star.isOutsideField()) {
+                // Reloate star
+                star.randomizeSpawn();
+            } else {
+                // Increase brightness
+                star.brightness += (star.distance * 0.05);
+            }
+
+            star.setPosition();
+        }
+    };
+
+    // Follow cursor
+    window.addEventListener('mousemove', function(e) {
+        windowCenter.x = e.clientX;
+        windowCenter.y = e.clientY;
+    });
+
+    // Start drawing
+    window.setInterval(function(){
+        if (document.body) {
+            incrementFrame();
+        }
+    }, 1000 / FPS);
+
+})();
\ No newline at end of file
diff --git a/public/assets/stars/index.html b/public/assets/stars/index.html
new file mode 100755
index 0000000..e6a878c
--- /dev/null
+++ b/public/assets/stars/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html style="overflow:hidden">
+<head>
+    <title>Flying Through Space</title>
+    <script type="text/javascript" src="flyingthroughspace.js"></script>
+    <link type="text/css" href="flyingthroughspace.css" rel="stylesheet" />
+</head>
+<body>
+</body>
+</html>
\ No newline at end of file