From e2adb8d26f9cbdb0192e26cf74eaba90d002711d Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Fri, 20 Apr 2012 19:34:00 -0700
Subject: [PATCH] squares;  how do they work

---
 .../javascripts/app/views/canvas_view.js      |  2 +-
 .../stylesheets/new_styles/_canvas.scss       | 51 ++++++++++++-------
 app/assets/templates/profile.jst.hbs          |  3 ++
 3 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/app/views/canvas_view.js b/app/assets/javascripts/app/views/canvas_view.js
index 553c0119c..d356791cf 100644
--- a/app/assets/javascripts/app/views/canvas_view.js
+++ b/app/assets/javascripts/app/views/canvas_view.js
@@ -8,7 +8,7 @@ app.views.Canvas = app.views.Base.extend(_.extend(app.views.infiniteScrollMixin,
 
   renderTemplate : function() {
     this.postRenderTemplate();
-    setTimeout(_.bind(this.mason, this), 1000)
+    //setTimeout(_.bind(this.mason, this), 1000)
   },
 
   mason : function() {
diff --git a/app/assets/stylesheets/new_styles/_canvas.scss b/app/assets/stylesheets/new_styles/_canvas.scss
index cfa880b34..c817fa2a3 100644
--- a/app/assets/stylesheets/new_styles/_canvas.scss
+++ b/app/assets/stylesheets/new_styles/_canvas.scss
@@ -1,13 +1,25 @@
+$container-width : 1170;
+
+$margin-between-columns : 20;
+$column-width : 255 - $margin-between-columns;
+$two-column-width : ($column-width * 2) + ($margin-between-columns * 2);
+
+
+$margin-between-rows : 20;
+
+$row-height : $column-width;
+$two-row-height : $two-column-width;
+
 @mixin tall() {
-  height : 405px;
-  max-height : 405px;
-  min-height : 405px;
+  height : $two-column-width + px;
+  min-height : $two-column-width + px;
+  max-height : $two-column-width + px;
 }
 
 @mixin wide() {
-  //width : 560px;
-  //min-width : 560px;
-  //max-width : 560px;
+  width : $two-column-width + px;
+  min-width : $two-column-width + px;
+  max-width : $two-column-width + px;
 }
 
 body {
@@ -19,9 +31,8 @@ body {
 }
 
 .canvas-frame {
-  float: left;
-  margin: 10px;
-  width: 270px;
+  float : left;
+  margin : 10px;
 
   //clear : both; // here for testing!
 
@@ -41,12 +52,15 @@ body {
     position : relative;
 
     background-color : #fff;
-    min-height : 140px;
-    max-height : 140px;
+    min-height : $column-width + px;
+    max-height : $column-width + px;
+
+    width : $column-width + px;
+    min-width : $column-width + px;
+    max-width : $column-width + px;
 
     overflow : hidden;
-    padding : 20px;
-    margin-bottom : 5px;
+    padding : 10px;
 
     /* used in masking photos with overflow: hidden; */
     .image-container {
@@ -95,10 +109,13 @@ body {
 
   &.photo {
     &.one  .content {
-      padding : 0;
-      min-height : 180px;
-      max-height : 180px;
-
+      //padding : 0;
+      //
+      //min-height : $column-width + 10 + px;
+      //max-height : $column-width + 10 +  px;
+      //
+      //min-width : $column-width + 10 + px;
+      //max-width : $column-width + 10 +  px;
 
       .text-content {
         position : absolute;
diff --git a/app/assets/templates/profile.jst.hbs b/app/assets/templates/profile.jst.hbs
index 6ccd2ee4b..dbab2cbc9 100644
--- a/app/assets/templates/profile.jst.hbs
+++ b/app/assets/templates/profile.jst.hbs
@@ -10,6 +10,9 @@
         Birthday: {{birthday}}
     </div>
 </section>
+
+<a href="/posts/new">COMPOSE</a>
+
 <section id="canvas">
 
 </section>