fluuuid · hornergraphic · Nov 15, 2014
diff --git a/content/experiment_placeholder.jpg b/content/experiment_placeholder.jpg
diff --git a/content/thumb_boxphysics.jpg b/content/thumb_boxphysics.jpg
diff --git a/content/thumb_particles.jpg b/content/thumb_particles.jpg
diff --git a/content/thumb_phongdistortion.jpg b/content/thumb_phongdistortion.jpg
diff --git a/content/thumb_tubes.jpg b/content/thumb_tubes.jpg
diff --git a/css/site.css b/css/site.css
@@ -1,5 +1,36 @@
+/* FONTS */
+
+@font-face {
+    font-family: 'Omnes';
+    src: url('../font/omnes-regular-webfont.eot');
+    src: url('../font/omnes-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../font/omnes-regular-webfont.woff2') format('woff2'),
+         url('../font/omnes-regular-webfont.woff') format('woff'),
+         url('../font/omnes-regular-webfont.ttf') format('truetype'),
+         url('../font/omnes-regular-webfont.svg#omnes-regularregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+  font-family: 'VollkornItalic';
+  src: url("../font/vollkorn-italic-webfont.eot");
+  src: url("../font/vollkorn-italic-webfont.eot?#iefix") format("embedded-opentype"), 
+       url("../font/vollkorn-italic-webfont.woff") format("woff"), 
+       url("../font/vollkorn-italic-webfont.ttf") format("truetype"), 
+       url("../font/vollkorn-italic-webfont.svg#vollkornitalic") format("svg");
+  font-weight: normal;
+  font-style: normal; 
+}
+
+
+
+
+/* HELPERS */
+
 .table { 
     display: table; 
+    position:relative;
     width: 100%; 
     height: 100%; 
 }
@@ -19,112 +50,184 @@
   text-align: center;
 }
 
+
+
+
 /* GLOBALS */
+
 html, body, #wrapper {
   width: 100%;
   height: 100%;
+  min-height: 100%;
   font-size: 10px;
-  overflow: hidden !important;
-  background-size:cover; 
-  position: absolute;
-  top: 0;
-  margin : 0;
 }
 
-p
-{
+body {
   font-family: 'Vollkorn', serif;
   font-weight: 400;
   font-style: italic;
-  background:#000;
+  background:#0D0D0D;
   color: #FFF;
-  letter-spacing: 0.6em;
+  letter-spacing: 0.2em;
+  user-select: none;
+  -webkit-user-select: none;
+  margin:0;
+  padding:0;
 }
 
-img {
+section {
+  position:relative;
+  height:100%;
+  width:100%;
+  clear:both;
+}
+
+.arrow { cursor:pointer !important; width:40px; height:40px; display:block; margin:0 auto; background:url(../img/right_arrow.svg); background-size:cover; }
+
+.tick { background:url(../img/tick.svg); background-size:cover; }
+
+
+
+
+/* HOME */
+
+#splash { 
+  background-position:center center;
+  background-image:url(../img/splash.jpg);
+  background-size:cover;
+  height:100%; 
+}
+
+.logo {
     position:relative;
     display:block; margin:0 auto;
     max-width:60%;
-    z-index:99999;
+    max-height:30%;
 }
 
-a { z-index:99999; -webkit-font-smoothing:antialiased; font-size:1.4rem; position:absolute; bottom:0.9em; left:0; width:100%; color:#FFF; text-decoration:none; }
+a { text-align:center; letter-spacing: 0.5em; -webkit-font-smoothing:antialiased; font-size:1.6rem; color:#FFF; text-decoration:none; cursor:pointer !important; }
+
 a:hover { text-decoration:underline; }
 
-/* BODY BORDERS */
-@media (min-width: 768px) {
-  #top-border {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 50px;
-    width: 100%;
-    background: #000;
-    z-index: 9999; }
-
-  #bottom-border {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    height: 50px;
-    width: 100%;
-    background: #000;
-    z-index: 9999; }
-
-  #left-border {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 50px;
-    background: #000;
-    z-index: 9999; }
-
-  #right-border {
-    position: fixed;
-    top: 0;
-    right: 0;
-    height: 100%;
-    width: 50px;
-    background: #000;
-    z-index: 9999; }
-}
-
-#cycle {
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    overflow: hidden;
-    left: 0;
-    top: 0; 
-}
-
-#cycle .slide {
-    display: none;
-    width: 100% !important;
-    height: 100% !important;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-position: center center;
-    background-size: cover;
-    background-repeat: none; 
-}
-
-#cycle #slide-one {
-    display: block;
-    background-image: url(../img/bg.jpg); 
-}
-
-#cycle #slide-two {
-    background-image: url(../img/bg2.jpg); 
-}
-
-#cycle #slide-three {
-    background-image: url(../img/bg3.jpg); 
-}
-
-#cycle #slide-four {
-    background-image: url(../img/bg4.jpg); 
-}
+h1 {
+  padding:1.6em 0 0.8em;
+  font-size:1.6rem;
+  -webkit-font-smoothing:antialiased;
+  font-weight:400;
+  margin:0;
+}
+
+h2 { 
+  font-family:"Omnes";
+  font-size:2.4rem;
+  font-style: normal;
+  text-transform: uppercase;
+  color: #FFF;
+  letter-spacing: 0.25em;
+  padding:0 10%;
+  margin:0;
+  -webkit-transition:0.2s ease;
+  -webkit-transform: translate( 0, -20px );
+}
+
+h3 { 
+  font-size:1.4rem; 
+  font-weight: normal;
+  -webkit-transition:0.2s ease 0.05s ;
+  -webkit-transform: translate( 0, 20px );
+  -webkit-font-smoothing:antialiased;
+}
+
+p {
+  font-size:1.6rem;
+  -webkit-font-smoothing:antialiased;
+}
+
+ul {
+  list-style:none;
+  display:block;
+  height:100%;
+  width:100%;
+  padding:0;
+  margin:0;
+}
+
+li {
+  display:block;
+  position:relative;
+  float:left;
+  width:50%;
+  height:50%;
+  cursor:pointer;
+}
+
+.img { 
+  position:absolute; 
+  top:0; 
+  left:0; 
+  width:100%; 
+  height:100%; 
+  opacity:1; 
+  background-size:cover;
+  background-position:center center;
+  -webkit-transition:0.3s ease;
+}
+
+#splash .arrow { background:url(../img/down_arrow.svg); background-size:cover; }
+
+#footer { height:25%; }
+
+li h2 , li h3 { opacity:0; -webkit-transition:0.3s ease; }
+li .arrow { opacity:0; -webkit-transition:0.3s ease 0.1s; }
+
+li:hover .img {
+  opacity:0.2;
+}
+
+li:hover .arrow {
+  -webkit-transform(0,0);
+  opacity:1;
+}
+
+li:hover h2 {
+  -webkit-transform: translate( 0, 0 ); opacity:1;
+}
+
+li:hover h3 {
+  -webkit-transform: translate( 0, 0 ); opacity:1;
+}
+
+
+
+/* EXPERIMENT */
+
+#experiment-wrapper { overflow:hidden; }
+
+header { position:absolute; top:0; left:0; display:block; width:100%; height:50px; z-index:999; }
+header .arrow { background:url(/img/left_arrow.svg) center center no-repeat; background-size:30%; float:left; width:50px; height:50px; cursor:pointer !important; }
+header .arrow:hover { transition:0.15s ease; transform:translateX(-3px); }
+header .cell { width:100%; text-align:left; }
+header h1 { padding:19px 0 0 0; font-size:15px; line-height:1em; float:left; }
+header .logo { float:right; padding-top:18px; margin-right:15px; height:15px; max-height:none !important; float:right; }
+
+#experiment { position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#444; }
+
+#overlay { background:rgba(0,0,0,0.75); width:100%; height:100%; opacity:1; transition:0.3s ease; }
+#overlay.hide { opacity:0; }
+
+#instructions { padding:4rem; width:75%; max-width:320px; margin:0 auto; }
+#instructions .logo { max-width:60%; }
+
+@media( max-width:470px ) {
+  header .logo { display:none; }
+}
+
+@media( max-width:760px ) {
+  li { width:100%; } 
+}
+
+@media( min-width:960px ) {
+
+}
+
+
diff --git a/experiment.html b/experiment.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class="no-js">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta http-equiv="pragma" content="no-cache" />
+        <meta http-equiv="content-language" content="en-US" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Experiment Name | FLUUUID</title>
+
+        <meta name="robots" content="all" />
+        <meta name="description" content="fluuu.id is a collective of developers, designers and creative technologists striving for cutting edge experiences online and offline.">
+        <meta name="keywords" content="interactive, design, development, collective, kinect, studio, production, Flash, AS3, HTML, HTML5, openFrameworks, creative coding, WebGL, processing, installation, art, technology, UK, London" />
+        <meta name="copyright" content="fluuu.id" />
+        <meta name="contact" content="heeey@fluuu.id" />
+
+        <meta property="og:url" content="http://fluuu.id" />
+        <meta property="og:image" content="http://fluuu.id/apple-touch-icon-152x152.png"/>
+        <meta property="og:site_name" content="fluuu.id" />
+        <meta property="og:title" content="fluuu.id" />
+        <meta property="og:type" content="website" />
+        <meta property="og:description" content="fluuu.id is a collective of developers, designers and creative technologists striving for cutting edge experiences online and offline." />
+
+        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+        <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
+        <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
+        <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
+        <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
+        <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
+        <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
+        <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
+
+        <link rel="stylesheet" href="/css/site.css">
+    </head>
+    <body id="experiment-wrapper">
+        <div id="wrapper">
+            <header>
+                <div class="table">
+                    <div class="row">
+                        <div class="cell">
+                            <a href="/" class="arrow"></a>
+                            <h1>Box Physics</h1>
+                            <a href="index.html"><img src="img/fluuuid.svg" alt="FLUUUID" class="logo" /></a>
+                        </div>
+                    </div>
+                </div>
+            </header>
+            <section id="experiment" style="background:url(content/experiment_placeholder.jpg) center center; background-size:cover;">
+                <div id="overlay" onclick="document.getElementById('overlay').className = 'hide';">
+                    <div class="table">
+                        <div class="row">
+                            <div class="cell">
+                                <div id="instructions">
+                                    <p>Experiment interaction instructions if needed, click to make the disappear.</p>
+                                    <span class="arrow tick"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+        <script>
+          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+          ga('create', 'UA-55276898-1', 'auto');
+          ga('send', 'pageview');
+
+        </script>
+    </body>
+</html>
diff --git a/font/omnes-regular-webfont.eot b/font/omnes-regular-webfont.eot