Merge branch 'twohustlers' of github.com:okfocus/okcms into twohustlers

14 files changed, 373 insertions, 109 deletions

diff --git a/app/index.js b/app/index.js
index 5ac88dd..963bfd0 100644
--- a/app/index.js
+++ b/app/index.js
@@ -36,11 +36,13 @@ function OKCMS(options) {
   var templateRoot = options.templateRoot || 'templates';
   var adminTemplateRoot = options.templateRoot ||
     path.join(__dirname, '../themes/okadmin/templates');
-  var debug = options.debug || false;
+  var debug = !!options.debug;
+  var production = !!options.production;
 
   var metaUser = options.meta || {};
   var metaDefault = {
     project: 'OKCMS',
+    production: production,
     debug: debug
   };
 
@@ -116,7 +118,10 @@ OKCMS.prototype._createSchemas = function(schemaConfig) {
   return Object.keys(schemaConfig).reduce(function(cache, key) {
     var spec = schemaConfig[key];
     // All resources have an autoincrementing index so we can order them suckas
+    // TODO Screw the __ prefix, just consider 'index' a reserved word
     spec.__index = {type: 'meta', autoincrement: true};
+    // All resources have a dateCreated field
+    spec.dateCreated = {type: 'meta'};
     cache[key] = OKSchema(spec);
     return cache;
   }, {});
diff --git a/app/node_modules/okdb/index.js b/app/node_modules/okdb/index.js
index 5aa22a2..4820c8c 100644
--- a/app/node_modules/okdb/index.js
+++ b/app/node_modules/okdb/index.js
@@ -68,6 +68,9 @@ FSDB.prototype.insert = function(collection, data) {
   data = cloneDeep(data);
   // Auto-increment fields
   data = autoincrement(wrapped, schema, data);
+  // Record date created
+  // TODO Should this meta prop logic be moved out of the DB?
+  data.dateCreated = new Date().toUTCString();
   var result = wrapped.chain().push(data).last().value();
 
   if (result) {
diff --git a/app/node_modules/okserver/index.js b/app/node_modules/okserver/index.js
index abca8b5..6d0ed17 100644
--- a/app/node_modules/okserver/index.js
+++ b/app/node_modules/okserver/index.js
@@ -52,11 +52,6 @@ function OKServer(options) {
    * other middleware.
    */
 
-  // Intercept favicon requests and 404 for now
-  app.use('/favicon.ico', function(req, res) {
-    res.status(404)
-    return res.send('');
-  });
   // Serve user static files
   app.use(express.static(root));
   // Serve admin interface static files
diff --git a/site/db.json b/site/db.json
index 1332709..fe9f91b 100644
--- a/site/db.json
+++ b/site/db.json
@@ -1137,9 +1137,11 @@
     {
       "id": "about",
       "title": "WHO WE ARE",
-      "body": "TWO HUSTLERS IS A CREATIVE COLLECTIVE OF RADICAL THINKERS, DESIGNERS AND STORYTELLERS.\r\n\r\nWE BUILD TRANSFORMATIVE EXPERIENCES FOR PASSIONATE BRANDS. \r\n\r\nWE ARE PLAYFUL. WE ARE REBELLIOUS. WE ARE OBSESSED. \r\n\r\n\r\n\r\nFOR BRANDS WHO WANT TO PLAY WITH US, <a href=\"mailto:collaborate@twohustlers.com?subject=SAY HELLO!\">SAY HELLO!</a>\r\n\r\nFOR ANYONE WHO WANTS TO JOIN OUR FAMILY, <a href=\"mailto:jobs@twohustlers.com?subject=JOIN THE FAMILY!\"> SHOW US WHAT YOU ARE MADE OF!</a>\r\n\r\nWEBSITE BY <a href=\"http://okfoc.us/\">OKFOCUS</a>",
+      "body": "TWO HUSTLERS IS A CREATIVE COLLECTIVE OF RADICAL THINKERS, DESIGNERS AND STORYTELLERS.\r\n\r\nWE BUILD TRANSFORMATIVE EXPERIENCES FOR PASSIONATE BRANDS. \r\n\r\nWE ARE PLAYFUL. WE ARE REBELLIOUS. WE ARE OBSESSED. ",
       "image": "http://www.lansdowneresort.com/meetings/assets/images/masthead/meetings-team-building.jpg",
-      "__index": "1"
+      "__index": "1",
+      "contact": "FOR BRANDS WHO WANT TO PLAY WITH US, <a href=\"mailto:collaborate@twohustlers.com?subject=SAY HELLO!\">SAY HELLO!</a>\r\n\r\nFOR ANYONE WHO WANTS TO JOIN OUR FAMILY, <a href=\"mailto:jobs@twohustlers.com?subject=JOIN THE FAMILY!\"> SHOW US WHAT YOU ARE MADE OF!</a>\r\n\r\nWEBSITE BY <a href=\"http://okfoc.us/\">OKFOCUS</a>",
+      "dateCreated": ""
     },
     {
       "id": "contact",
@@ -1223,66 +1225,102 @@
       "__index": "1",
       "images": [
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fc9b7ab94-a319-48b4-871b-6d1f0a91c55b.gif",
-          "caption": "Sara@nicopanda.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F3031754c-9295-4690-bb38-d1b21249f542.gif",
+          "caption": "",
+          "label": "Nicola Formichetti"
+        },
+        {
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F06a6a4c3-10ad-4b75-8351-85ffc0e74c98.gif",
+          "caption": "",
+          "label": "Kevin Kollenda"
+        },
+        {
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F5bece78f-bf0b-4422-abc6-d306f8fae700.gif",
+          "caption": "propersavage@gmail.com",
+          "label": "Devin Savage"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F9303920a-07a1-457f-a33d-8959f0acc240.gif",
-          "caption": "propersavage@gmail.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F71c71033-d36f-4375-bdd1-271db3b9e75c.gif",
+          "caption": "",
+          "label": "Zak Krevitt"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F085bc32f-f3fa-485f-8411-4b0e33c87c34.gif",
-          "caption": "Tracy@Twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F742c60d2-9f3f-44bb-a445-71871ca28439.gif",
+          "caption": "",
+          "label": "Tyler Rose"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F3199e264-13d0-4331-9b3a-9f453e723d4e.gif",
-          "caption": "Kei@twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F7eca88a2-94e1-4d41-ae77-af01a947ad44.gif",
+          "caption": "",
+          "label": "Tracy le Marquand"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fbe142c51-d613-41a9-9432-f96ce4493f01.gif",
-          "caption": "Steve@twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fe85e3d1f-6191-496f-acca-f370687c69fe.gif",
+          "caption": "",
+          "label": "Max de Castro"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fc91b507a-9a1d-41d6-a500-138c14b8bed2.gif",
-          "caption": "Max@twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F2b71ee1e-3de9-4a3d-9b39-a96065ae4ec1.gif",
+          "caption": "",
+          "label": "Ian Milan"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fb40d3a6d-1348-4861-a0ab-1280480d1c20.gif",
-          "caption": "tomorrowistheendoftheworld@gmail.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F17b0d9b9-cd22-43ac-9055-f8bc8cb54700.gif",
+          "caption": "Sara@nicopanda.com",
+          "label": "Sarah Kim"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F2306f2f9-e41b-46bb-9458-6d0624b8f6ba.gif",
-          "caption": "Tiffanie@twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F343ae47e-8669-4c57-9975-e4c3fc5a02d4.gif",
+          "caption": "",
+          "label": "Steve Gershman"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fe4ee44a3-0b21-4767-8584-397425abb291.gif",
-          "caption": "kevin@twohustlers.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F55f0fef9-bc7c-4dbe-baa8-c0d74c9c9ab0.gif",
+          "caption": "",
+          "label": "Latif Newab"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fff60aa79-d4ad-43d2-915e-d8e253330ca4.gif",
-          "caption": "Latif@nicopanda.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F724e1ff5-7683-43cb-a637-9dae58214185.gif",
+          "caption": "",
+          "label": "Kei Furuichi"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fc8e8276c-3b7c-48e1-8e1f-de902ca1054d.gif",
-          "caption": "Ian@studioformichetti.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F70fffb9c-7fc9-4dd1-af65-e39ebd99e930.gif",
+          "caption": "dereklmurdock@gmail.com",
+          "label": "Derrick Murdock"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F4369b27f-095e-4e05-b7b8-3dc88f0a652f.gif",
-          "caption": "dereklmurdock@gmail.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F7655a0ec-e56c-4383-a22a-7e987949f52e.gif",
+          "caption": "Juan@nicopanda.com",
+          "label": "Juan Quiceno"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fa0eed5ee-1c19-41f4-be2e-d0655874be71.gif",
-          "caption": "Tyler@nicopanda.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F04b3e31f-b9ac-48c8-9c0c-7c88abe771b5.gif",
+          "caption": "",
+          "label": "Andreas Aresti"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F959c8f09-9562-4d43-8bfb-4f73b9f71dcc.gif",
-          "caption": "Daniel@studioformichetti.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fa547b434-b48d-43ff-986b-ed9c217b9257.gif",
+          "caption": "",
+          "label": "Tiffanie Baine"
         },
         {
-          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2Fe9743a0f-7c5e-411a-b59e-683e6ff9d407.gif",
-          "caption": "Juan@nicopanda.com"
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F97c09ed8-27d7-4a38-8877-c8712640cbd5.gif",
+          "caption": "",
+          "label": "Frankie The Pug"
+        },
+        {
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F4bd5a1e5-38b1-4dba-af04-48ce3f4bc74d.gif",
+          "caption": "",
+          "label": "Daniel Cingari"
+        },
+        {
+          "uri": "https://ltho.s3.amazonaws.com/twohustlers%2F7ee0e3d4-4312-41dc-8fff-943b68ae6171.gif",
+          "caption": "",
+          "label": "Angelo Balassone"
         }
-      ]
+      ],
+      "dateCreated": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/site/index.js b/site/index.js
index 4c5c2ca..04d2455 100644
--- a/site/index.js
+++ b/site/index.js
@@ -24,6 +24,7 @@ var app  = okcms.createApp({
       id: {type: 'string', hidden: true},
       title: {type: 'string'},
       body: {type: 'text'},
+      contact: {type: 'text'},
       image: {type: 'string'}
     },
     advertising: projectSchema,
@@ -33,7 +34,7 @@ var app  = okcms.createApp({
     shape: {
       id: {type: 'string', id: true, hidden: true},
       title: {type: 'string'},    
-      images: {type: 'captioned-image-list'},
+      images: {type: 'double-captioned-image-list'},
     }
   },
 
diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js
index 53d5f12..e74a020 100644
--- a/site/public/assets/javascripts/_env.js
+++ b/site/public/assets/javascripts/_env.js
@@ -3,6 +3,62 @@ var strips = [], boxImages = []
 var done_loading = false, menu_open = false, entry_open = false
 var shuffled_indexes
 
+var wasPrev = false, navWidth
+
+/**
+ * Polls the viewport to check when fullscreening is settled
+ * TODO Doesn't work in IE10 and under
+ */
+function onFullScreenSettle(raf, fullScreenEl, fn, freq) {
+  freq = freq || 200
+
+  function pollSettled(fullscreen, getHeight) {
+    var isSettled = settledPredicate(getHeight)
+    var poll = throttle(function doPoll() {
+      if (isSettled()) {
+        fn(fullscreen)
+      } else {
+        raf(poll)
+      }
+    }, freq)
+    raf(poll)
+  }
+
+  function settledPredicate(getHeight) {
+    var count = 0
+    // Guard against a false positive by requiring predicate to match
+    // passCount number of times
+    var passCount = 2
+    var last
+    /**
+     * Checks whether the fullscreen element height has changed
+     * since the last poll
+     */
+    return function isSettled() {
+      var height = getHeight()
+      if (!last) {
+        last = height
+      } else {
+        var result = height === last && (++count === passCount)
+        last = height
+        return result
+      }
+    }
+  }
+
+  // If fullscreening in progress
+  if (fullScreenEl) {
+    pollSettled(true, function() {
+      return fullScreenEl.offsetHeight
+    })
+  // Otherwise, fullscreen is turning off
+  } else {
+    pollSettled(false, function() {
+      return window.innerHeight
+    })
+  }
+}
+
 var environment = {}, hashes = {}
 environment.init = function(){
   $("#scene").addClass("fade")
@@ -29,10 +85,16 @@ environment.ready = function(){
 	controls.init()
 	
   $('.cat').click( function(){
-    $('.cat').removeClass('active')
-    $('.sub').removeClass('active')
-    $(this).addClass('active')
-    $(this).next('.sub').addClass('active')
+    if ($(this).hasClass('active')) {
+      $('.cat').removeClass('active')
+      $('.sub').removeClass('active')
+    }
+    else {
+      $('.cat').removeClass('active')
+      $('.sub').removeClass('active')
+      $(this).addClass('active')
+      $(this).next('.sub').addClass('active')
+    }
   })
 
 	$("nav a").click(function(e){
@@ -162,19 +224,19 @@ environment.ready = function(){
   }
   
   setTimeout(function(){ done_loading = true }, 200)
-  
+
   $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(){
-    setTimeout(function(){
-      if (window.innerHeight == screen.height) {
+    onFullScreenSettle(requestAnimationFrame, getFullScreenElement(), onSettle)
+
+    function onSettle(isFullScreen) {
+      if (isFullScreen) {
         $("html").addClass("full-screen")
       }
       else {
         $("html").removeClass("full-screen")
       }
-      setTimeout(function(){
-        resize_gallery()
-      }, 100)
-    }, 500)
+      resize_gallery(isFullScreen)
+    }
   })
 
   $("#scene_container").click(function(e){
@@ -281,7 +343,6 @@ function build_scene () {
     offset: 200,
   }) )
   
-  var wasPrev = false, navWidth
   function resize_for_prev_next(){
     navWidth = $("nav").width()
   }
@@ -289,7 +350,7 @@ function build_scene () {
   $(window).resize(resize_for_prev_next)
   $(window).mousemove(function(e){
     if (! gallery) return
-    prev = ((e.pageX - navWidth) / window.innerWidth) < 0.39
+    prev = ((e.pageX - navWidth) / window.innerWidth) < 0.415
     if (prev !== wasPrev) {
       wasPrev = prev
       $("#okgallery").toggleClass("prev", prev)
@@ -445,6 +506,7 @@ function toggle_menu (isInitialLoad){
 var gallery = null
 function build_gallery () {
   videos = []
+  wasPrev = -1
   var $el = $("#entry_container #okgallery")
   if (! $el.length) {
     gallery = null
@@ -528,12 +590,13 @@ function build_gallery () {
   $(".nextbutton").click(function(){ gallery.next() })
   $(".prevbutton").click(function(){ gallery.previous() })
 }
-function resize_gallery () {
+function resize_gallery (isFullScreen) {
   if (! gallery) return;
-  var isFullscreen = $("html").hasClass("full-screen")
-  $("#okgallery").find(".cell img").each(function(){
-    var h = isFullscreen ? window.innerHeight : 0.6 * window.innerHeight
-    var w = isFullscreen ? "auto" :  this.naturalWidth / this.naturalHeight * h
+  var fullScreenElement = getFullScreenElement()
+  var $gallery = $("#okgallery")
+  $gallery.find(".cell img").each(function(){
+    var h = isFullScreen ? $(fullScreenElement).height() : $gallery.height()
+    var w = isFullScreen ? "auto" :  this.naturalWidth / this.naturalHeight * h
     $(this).css({
       width: w, height: h,
     })
diff --git a/site/public/assets/javascripts/app.js b/site/public/assets/javascripts/app.js
index 0d51a3f..4e00f30 100644
--- a/site/public/assets/javascripts/app.js
+++ b/site/public/assets/javascripts/app.js
@@ -19,6 +19,12 @@ app.init = function () {
 
 app.launch = function () {
   // if ($.browser.msie || ! has3d()) { return app.fallback() }
+  if ($.browser.msie) {
+    $("html").addClass("msie")
+  }
+  else {
+    $("html").addClass("notmsie")
+  }
   
 	scene = new MX.Scene().addTo('#scene')
 
diff --git a/site/public/assets/javascripts/vendor/polyfill.js b/site/public/assets/javascripts/vendor/polyfill.js
index 411d90f..8c26e80 100644
--- a/site/public/assets/javascripts/vendor/polyfill.js
+++ b/site/public/assets/javascripts/vendor/polyfill.js
@@ -97,4 +97,34 @@ function fullscreen (el) {
   } else if (el.webkitRequestFullscreen) {
     el.webkitRequestFullscreen();
   }
-}
\ No newline at end of file
+}
+
+/*
+ * Proper fullscreen detection using the HTML5
+ * Full Screen API. Not supported on mobile or
+ * IE10 and under
+ * TODO Need to disable fullscreen button on IE10 and lower
+ */
+function isFullScreen() {
+  return !!getFullScreenElement()
+}
+
+function getFullScreenElement() {
+  return document.fullScreenElement ||
+      document.webkitFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.msFullscreenElement
+}
+
+var raf = window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame
+
+var caf = window.cancelAnimationFrame ||
+    window.webkitCancelAnimationFrame ||
+    window.mozCancelAnimationFrame ||
+    window.oCancelAnimationFrame ||
+    window.msCancelAnimationFrame
+
diff --git a/site/public/assets/javascripts/vendor/util.js b/site/public/assets/javascripts/vendor/util.js
index 0f5c6ed..487fe56 100644
--- a/site/public/assets/javascripts/vendor/util.js
+++ b/site/public/assets/javascripts/vendor/util.js
@@ -240,6 +240,27 @@ if (!Function.prototype.bind) {
         };
 }());
 
+/*
+ * Throttle a function to be called no more often
+ * than ms milliseconds
+ */
+function throttle(fn, ms) {
+  ms = ms || 100
+  var ready = true
+  var last
+  return function() {
+    var now = Date.now()
+    if (ready) {
+      last = now
+      return fn.apply(this, arguments)
+      ready = false
+    } else {
+      if (now - last > ms) {
+        ready = true
+      }
+    }
+  }
+}
 
 function selectElementContents(el) {
   if (window.getSelection && document.createRange) {
diff --git a/site/public/assets/style.css b/site/public/assets/style.css
index fe08fed..3d1ee7f 100644
--- a/site/public/assets/style.css
+++ b/site/public/assets/style.css
@@ -713,6 +713,9 @@ nav .sub.active a {
 	opacity: 1.0;
 	cursor:pointer;
 }
+.msie .entry .caption {
+  display: none;
+}
 .desktop .caption:hover {
 	background:#222;
 	color:#222;
@@ -824,16 +827,35 @@ nav .sub.active a {
 	top:0;
 }
 
+.entry .brady {
+  width: 72vw;
+}
 .brady {
   display: block;
-  max-width: 1001px;
 }
-.brady a, .brady img {
-  width: 200px; height: 200px;
+.brady > a {
+  width: 18vw; height: 18vw;
+  background-size: cover;
+  background-position: center center;
+  position: relative;
+  display: block;
+  float: left;
+}
+.brady div {
+  width: 17vw;
   position: relative;
-  display: inline-block;
+  display: block;
+  float: left;
+  padding: 1vw;
+  font-size: 0.8vw;
+  line-height: 1.4vw;
+  border: 1px solid black;
+  margin: 0.5vw 0.5vw 0 0.5vw;
+}
+.brady > a:nth-child(3) {
+  margin-right: 5vw;
 }
-.desktop .brady a:hover:after {
+.desktop .brady > a:hover:after {
   content: 'SAY HELLO!';
   position: absolute;
   top: 40%;
@@ -843,6 +865,25 @@ nav .sub.active a {
   font-size: 22px;
   width: 100%;
 }
+.brady span {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: white;
+  opacity: 0;
+  color: black;
+  margin-top: -4px;
+  font-size: 1vw;
+  padding: 2px 0 1px 2px;
+  
+	transition: 0.1s opacity ease-in;
+  display: block;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+}
+.desktop .brady > a:hover span {
+  opacity: 1;
+}
 
 .project {
   float: left;
@@ -860,6 +901,9 @@ nav .sub.active a {
 .desktop .ready .project:hover {
 	opacity: 1.0;
 }
+.msie .project {
+  opacity: 1.0 !important;
+}
 .entry.hover .project { opacity: 0.5 }
 .entry.hover .project.hover { opacity: 1.0 }
 
@@ -884,7 +928,8 @@ nav .sub.active a {
   text-transform: uppercase;
 }
 .mobile .project span,
-.desktop .project:hover span {
+.desktop .project:hover span,
+.msie .project span {
   opacity: 1;
 }
 .undone .project:nth-child(1) { transition-delay:0.05s; }
@@ -966,34 +1011,27 @@ nav .sub.active a {
 
 
 @media (max-width:1200px) {
-	.entry span div.content {
-/* 
-		-webkit-column-count: 2;
-		-moz-column-count: 2;
-		column-count: 2;
- */
-	}
-	
 	.project {
 		width:33.3333%;
     height: 16.6vw;
 	}
-	.brady a {
-	  width: 160px;
-    height: 160px;
-	}
-
+  .brady > a {
+    width: 24vw; height: 24vw;
+  }
+  .brady div {
+    width: 23vw;
+    font-size: 1.2vw;
+    line-height: 1.9vw;
+  }
+  .brady span {
+    font-size: 2vw;
+  }
+  .brady > a:nth-child(3) {
+    margin-right: 0vw;
+  }
 }
 
 @media (max-width:900px) {
-	.entry span div.content {
-/* 
-		-webkit-column-count: 2;
-		-moz-column-count: 2;
-		column-count: 2;
- */
-	}
-	
 	.project {
 		width:50%;
     height: 23vw;
@@ -1044,6 +1082,18 @@ nav .sub.active a {
 	  font-size: 0.6em;
 	  width: 120px;
 	}
+	nav .bottom {
+    height: 27%;
+  }
+  nav .sub.active a {
+    padding: 2px 0 4px 20px;
+  }
+  nav .cat {
+    padding: 2px 0 2px 10px;
+  }
+  .contact {
+    margin-top: 6px;
+  }
 	.menuActive #entry_container .entry.all {
     width:65%;
 	}
@@ -1055,6 +1105,24 @@ nav .sub.active a {
 	.menuActive .project span {
     top: -18px;
 	}
+  .brady > a {
+    width: 35vw; height: 35vw;
+  }
+  .brady div {
+    width: 34vw;
+    font-size: 2vw;
+    line-height: 2.5vw;
+  }
+  .brady div:nth-child(1) {
+    margin-left: 3vw;
+  }
+  .brady span {
+    font-size: 2vw;
+  }
+  .brady > a:nth-child(3) {
+    margin-right: 0vw;
+  }
+
 }
 .mobile .cell iframe {
 	width: 100%;
diff --git a/site/templates/about.liquid b/site/templates/about.liquid
index 6c762b2..c693b61 100644
--- a/site/templates/about.liquid
+++ b/site/templates/about.liquid
@@ -1,9 +1,9 @@
 <div class="entry page">
   <span>
-    <span class="postname">{{page.title}}</span>
-    <span class="brady">{% for image in shape.images %}<a href="mailto:{{image.caption}}?subject=SAY HELLO!"><img src="{{ image.uri }}"></a>{% endfor %}</span>
-    <div class="content">
-      {{page.body | newline_to_br}}
-    </div>
+    <span class="brady">
+      <div class="aboutcontent">{{page.body | newline_to_br}}</div>
+      {% for image in shape.images %}<a href="mailto:{{image.caption}}?subject=SAY HELLO!" style="background-image:url({{ image.uri }})"><span>{{ image.label }}</span></a>{% endfor %}
+      <div class="contactcontent">{{page.contact | newline_to_br}}</div>
+    </span>
   </span>
 </div>
diff --git a/site/templates/index.liquid b/site/templates/index.liquid
index 4af22e4..573cfc0 100644
--- a/site/templates/index.liquid
+++ b/site/templates/index.liquid
@@ -181,22 +181,22 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends.
 
 </body>
 
-<!-- if production else :-p -->
-<!--
-<script src="assets/app.min.js"></script>
--->
-<script src="assets/javascripts/mx/mx.skew.js"></script>
-<script src="assets/javascripts/mx/extensions/mx.scene.js"></script>
-<script src="assets/javascripts/mx/extensions/mx.unclampedOrbitCamera.js"></script>
-<script src="assets/javascripts/mx/primitives/mx.image.js"></script>
-<script src="assets/javascripts/vendor/jquery.min.js"></script>
-<script src="assets/javascripts/vendor/froogaloop.js"></script>
-<script src="assets/javascripts/vendor/fastclick.js"></script>
-<script src="assets/javascripts/vendor/flickity.pkgd.js"></script>
-<script src="assets/javascripts/vendor/loader.js"></script>
-<script src="assets/javascripts/vendor/wheel.js"></script>
-<script src="assets/javascripts/vendor/polyfill.js"></script>
-<script src="assets/javascripts/vendor/util.js"></script>
-<script src="assets/javascripts/_env.js"></script>
-<script src="assets/javascripts/app.js"></script>
+{% if meta.production %}
+  <script src="assets/app.min.js"></script>
+{% else %}
+  <script src="assets/javascripts/mx/mx.skew.js"></script>
+  <script src="assets/javascripts/mx/extensions/mx.scene.js"></script>
+  <script src="assets/javascripts/mx/extensions/mx.unclampedOrbitCamera.js"></script>
+  <script src="assets/javascripts/mx/primitives/mx.image.js"></script>
+  <script src="assets/javascripts/vendor/jquery.min.js"></script>
+  <script src="assets/javascripts/vendor/froogaloop.js"></script>
+  <script src="assets/javascripts/vendor/fastclick.js"></script>
+  <script src="assets/javascripts/vendor/flickity.pkgd.js"></script>
+  <script src="assets/javascripts/vendor/loader.js"></script>
+  <script src="assets/javascripts/vendor/wheel.js"></script>
+  <script src="assets/javascripts/vendor/polyfill.js"></script>
+  <script src="assets/javascripts/vendor/util.js"></script>
+  <script src="assets/javascripts/_env.js"></script>
+  <script src="assets/javascripts/app.js"></script>
+{% endif %}
 </html>
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 5dbd910..e5af10c 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -335,9 +335,12 @@ button, input[type=submit] {
 .image-element .remove:hover {
 	color: red;
 }
+
+/* 
 .remove {
   display: none;
 }
+ */
 
 #delete_form button:hover { color: red }
 
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index b29a289..1ddbffd 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -139,7 +139,38 @@
           {% endfor %}
         </ol>
       </div>
+    {% elsif type == 'double-captioned-image-list' %}
+      <div class="image-list group loaded">
+        <div class="fields">
+          <div class="add-image-button">
+            <input type="file" accept="image/*" multiple>
+            <button>+ Add images</button>
+          </div>
+          <input class="add-url" type="text" placeholder="+ Add URL">
+        </div>
+
+        <script type="text/html" class="image-template">
+          <li class="image-element">
+            <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <input class="caption" name="{{name}}[][caption]">
+            <input class="caption" name="{{name}}[][label]">
+            <img alt="{{image.caption}}">
+            <button class="remove">x</button>
+          </li>
+        </script>
 
+        <ol>
+          {% for image in spec.value %}
+            <li class="image-element">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption}}">
+              <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label}}">
+              <img src="{{image.uri}}" alt="{{image.caption}}">
+              <button class="remove">x</button>
+            </li>
+          {% endfor %}
+        </ol>
+      </div>
     {% elsif type == 'meta' %}
       <input class="hidden" type="hidden" name="{{name}}" value="{{spec.value}}">
     {% else %}