From c36c6e9569be12a1918f3946b7bfbc0854a66436 Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Wed, 15 Feb 2012 21:59:29 -0800
Subject: [PATCH] finally figured out flexbox [ci skip]

---
 .../app/templates/multi-photo.handlebars      |  2 +-
 .../status-with-photo-backdrop.handlebars     |  8 +-
 public/stylesheets/sass/new-templates.scss    | 75 ++++++++++++++-----
 3 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/public/javascripts/app/templates/multi-photo.handlebars b/public/javascripts/app/templates/multi-photo.handlebars
index adcda6a20..843e0540a 100644
--- a/public/javascripts/app/templates/multi-photo.handlebars
+++ b/public/javascripts/app/templates/multi-photo.handlebars
@@ -1,4 +1,4 @@
-<div class="multi-photo">
+<div class="multi-photo backdrop">
   <h3>
     {{text}}
   </h3>
diff --git a/public/javascripts/app/templates/status-with-photo-backdrop.handlebars b/public/javascripts/app/templates/status-with-photo-backdrop.handlebars
index 6343ce3ca..e43934824 100644
--- a/public/javascripts/app/templates/status-with-photo-backdrop.handlebars
+++ b/public/javascripts/app/templates/status-with-photo-backdrop.handlebars
@@ -1,7 +1,9 @@
 {{#each photos}}
   <div class="status photo-backdrop" style="background-image: url({{sizes.large}})">
-    <h1>
-      {{../text}}
-    </h1>
+    <div class="darken">
+      <h1>
+        {{../text}}
+      </h1>
+    </div>
   </div>
 {{/each}}
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
index 0f62267b0..52fb54ae7 100644
--- a/public/stylesheets/sass/new-templates.scss
+++ b/public/stylesheets/sass/new-templates.scss
@@ -2,22 +2,51 @@
 
 
 /* mixins */
-@mixin pushdown() {
-  /* temp hack... should use box model here */
-  padding-top: 10%;
+@mixin center() {
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
+
+  display: -moz-box;
+  -moz-box-orient: horizontal;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+
+  display: box;
+  box-orient: horizontal;
+  box-pack: center;
+  box-align: center;
+}
+
+@mixin box-shadow($left, $top, $blur, $color) {
+  -webkit-box-shadow: $left $top $blur $color;
+  -moz-box-shadow: $left $top $blur $color;
+  box-shadow: $left $top $blur $color;
+}
+
+@mixin background-cover() {
+  background: no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
 }
 
 /* styles */
 
 .multi-photo {
   .img-bounding-box {
-    display: inline-block;
+    @include center();
+
     margin-left: 10px;
     height: 500px;
-    width: 300px;
+    width: 400px;
   }
 
   img {
+    @include box-shadow(0, 3px, 15px, #999);
+
     max-width: 100%;
     max-height: 100%;
   }
@@ -28,29 +57,39 @@
 }
 
 .status {
-  @include pushdown();
-
-  text-align: center;
-
   h1 {
     font-weight: bold;
-    font-size: 60px;
+    font-size: 40px;
   }
+
+  &.photo-backdrop {
+    h1 {
+      font-size: 100px;
+    }
+  }
+}
+
+.darken {
+  @include center();
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0,0,0,0.3);
 }
 
 .backdrop,
 .photo-backdrop {
+  @include center();
+  @include background-cover();
+
   position: fixed;
 
   top: 0;
   left: 0;
 
-  background: no-repeat center center fixed;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-
   width: 100%;
   height: 100%;
 }
@@ -63,8 +102,6 @@
 }
 
 .rich-media {
-  @include pushdown();
-
   text-align: center;
 
   background-color: #333;
@@ -74,7 +111,7 @@
   }
 
   iframe {
-    box-shadow: 0 3px 15px #000;
+    @include box-shadow(0, 3px, 15px, #000);
 
     width: 857px;
     height: 480px;