From 85f2f13d798f4c4e99d49bcd8d10c4487beec57d Mon Sep 17 00:00:00 2001
From: Maxwell Salzberg <maxwell@joindiaspora.com>
Date: Mon, 23 Apr 2012 12:23:10 -0700
Subject: [PATCH] more color [ci skip]

---
 .../javascripts/app/views/small_frame.js      | 12 ++++++----
 .../stylesheets/new_styles/_canvas.scss       | 23 ++++++++++++-------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/app/views/small_frame.js b/app/assets/javascripts/app/views/small_frame.js
index c7981f27e..b606db87f 100644
--- a/app/assets/javascripts/app/views/small_frame.js
+++ b/app/assets/javascripts/app/views/small_frame.js
@@ -22,18 +22,20 @@ app.views.SmallFrame = app.views.Base.extend({
   colorClass : function() {
     var text = this.model.get("text");
     if(text == "" || this.model.get("photos").length > 0) { return "" }
-
+    var randomColor = _.first(_.shuffle(['cyan', 'green', 'yellow', 'purple', 'lime-green', 'orange', 'red', 'turquoise', 'sand']));
+    
     if(text.length > 240) {
-      return "purple x2 width"
+      return "blog-text x2 width"
     } else if(text.length > 140) {
-      return "green"
+      return randomColor
     } else if(text.length > 50) {
-      return "cyan"
+      return randomColor
     } else {
-      return "yellow"
+      return "big-text " + randomColor
     }
   },
 
+
   dimensionsClass : function() {
     /* by default, make it big if it's a fav */
     if(this.model.get("favorite")) { return "x2 width height" }
diff --git a/app/assets/stylesheets/new_styles/_canvas.scss b/app/assets/stylesheets/new_styles/_canvas.scss
index 2609721af..38f7d07bd 100644
--- a/app/assets/stylesheets/new_styles/_canvas.scss
+++ b/app/assets/stylesheets/new_styles/_canvas.scss
@@ -15,6 +15,11 @@ $cyan : rgb(8,204,249);
 $yellow : rgb(242,244,9);
 $green : rgb(29,235,134);
 $purple : rgb(220,23,166);
+$lime-green : rgb(143, 199,10);
+$orange : rgb(237, 165, 13);
+$red : rgb(246, 68, 60);
+$turquoise : rgb(8, 224, 173);
+$sand : rgb(245, 239, 237);
 
 @mixin tall() {
   height : $two-row-height + px;
@@ -145,11 +150,15 @@ body {
 
   &.cyan .background-color   { background-color : rgba($cyan, 0.2); }
   &.green .background-color  { background-color : rgba($green, 0.2); }
+  &.yellow .background-color { background-color : rgba($yellow, 0.2); }
+  &.purple .background-color { background-color : rgba($purple, 0.2); }
+  &.lime-green .background-color { background-color : rgba($lime-green, 0.2); }
+  &.orange .background-color { background-color : rgba($orange, 0.2); }
+  &.red .background-color { background-color : rgba($red, 0.2); }
+  &.turquoise .background-color { background-color : rgba($turquoise, 0.2); }
+  &.sand .background-color { background-color : rgba($sand, 0.8); }
 
-  /* blog */
-  &.purple {
-    //.background-color { background-color : rgba($purple, 0.2); }
-
+  &.blog-text {
     .text-content {
       padding : 10px;
       @include opacity(0.9);
@@ -166,16 +175,14 @@ body {
     }
   }
 
-  &.yellow {
-    .background-color { background-color : rgba($yellow, 0.2); }
-
+  &.big-text {
     .text-content {
       p {
         font-size : 2.0em;
         line-height : 1.1em;
         text-align : center;
       }
-    }
+  }
   }