more color [ci skip]
This commit is contained in:
parent
bcdd03b4e9
commit
85f2f13d79
2 changed files with 22 additions and 13 deletions
|
|
@ -22,18 +22,20 @@ app.views.SmallFrame = app.views.Base.extend({
|
||||||
colorClass : function() {
|
colorClass : function() {
|
||||||
var text = this.model.get("text");
|
var text = this.model.get("text");
|
||||||
if(text == "" || this.model.get("photos").length > 0) { return "" }
|
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) {
|
if(text.length > 240) {
|
||||||
return "purple x2 width"
|
return "blog-text x2 width"
|
||||||
} else if(text.length > 140) {
|
} else if(text.length > 140) {
|
||||||
return "green"
|
return randomColor
|
||||||
} else if(text.length > 50) {
|
} else if(text.length > 50) {
|
||||||
return "cyan"
|
return randomColor
|
||||||
} else {
|
} else {
|
||||||
return "yellow"
|
return "big-text " + randomColor
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
dimensionsClass : function() {
|
dimensionsClass : function() {
|
||||||
/* by default, make it big if it's a fav */
|
/* by default, make it big if it's a fav */
|
||||||
if(this.model.get("favorite")) { return "x2 width height" }
|
if(this.model.get("favorite")) { return "x2 width height" }
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,11 @@ $cyan : rgb(8,204,249);
|
||||||
$yellow : rgb(242,244,9);
|
$yellow : rgb(242,244,9);
|
||||||
$green : rgb(29,235,134);
|
$green : rgb(29,235,134);
|
||||||
$purple : rgb(220,23,166);
|
$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() {
|
@mixin tall() {
|
||||||
height : $two-row-height + px;
|
height : $two-row-height + px;
|
||||||
|
|
@ -145,11 +150,15 @@ body {
|
||||||
|
|
||||||
&.cyan .background-color { background-color : rgba($cyan, 0.2); }
|
&.cyan .background-color { background-color : rgba($cyan, 0.2); }
|
||||||
&.green .background-color { background-color : rgba($green, 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 */
|
&.blog-text {
|
||||||
&.purple {
|
|
||||||
//.background-color { background-color : rgba($purple, 0.2); }
|
|
||||||
|
|
||||||
.text-content {
|
.text-content {
|
||||||
padding : 10px;
|
padding : 10px;
|
||||||
@include opacity(0.9);
|
@include opacity(0.9);
|
||||||
|
|
@ -166,16 +175,14 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.yellow {
|
&.big-text {
|
||||||
.background-color { background-color : rgba($yellow, 0.2); }
|
|
||||||
|
|
||||||
.text-content {
|
.text-content {
|
||||||
p {
|
p {
|
||||||
font-size : 2.0em;
|
font-size : 2.0em;
|
||||||
line-height : 1.1em;
|
line-height : 1.1em;
|
||||||
text-align : center;
|
text-align : center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue