Skip to content
Browse files

Randomly creasing some cards and styling names/nicks.

  • Loading branch information...
1 parent c0c4bb4 commit ac4e3a39f0bb5716448c502ad848f233113f6486 @WanderingMatt committed Jan 6, 2011
View
4 app/helpers/application_helper.rb
@@ -21,7 +21,7 @@ def analytics_tag
end
end
- def transformed_classes
- " #{['left','right'].sample} #{['three','four','five','six'].sample}"
+ def randomized_styles
+ " #{['left','right'].sample} #{['three','four','five','six'].sample} #{['','','','creased'].sample}"
end
end
View
20 app/views/accounts/_account.html.erb
@@ -1,5 +1,5 @@
-<li class="card">
- <div class="portrait<%= transformed_classes %>">
+<li class="card<%= randomized_styles %>">
+ <div class="portrait">
<div class="frame">
<div class="photo">
<% if account.portraits.empty? %>
@@ -14,19 +14,11 @@
<h2><%= account.username %></h2>
<ul class="info">
<% unless account.names.empty? %>
- <%= render :partial => 'name', :collection => account.names %>
+ <%= render :partial => 'name', :collection => account.names, :locals => {:class_name => 'name'} %>
+ <% end %>
+ <% unless account.nicks.empty? %>
+ <%= render :partial => 'name', :collection => account.nicks, :locals => {:class_name => 'nicks'} %>
<% end %>
-
- <% unless account.nicks.empty? %>
- <tr>
- <td>Nicknames:</td>
- <td>
- <ul>
- <%= render :partial => 'name', :collection => account.nicks %>
- </ul>
- </td>
- </tr>
- <% end %>
<% unless account.sites.empty? %>
<tr>
View
2 app/views/accounts/_name.html.erb
@@ -1 +1 @@
-<li><%= name.value %></li>
+<li class="<%= class_name %>"><%= name.value %></li>
View
BIN public/images/user-24x24.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
40 public/stylesheets/site.css
@@ -25,7 +25,7 @@ header, section, footer, aside, nav, article, figure { display: block; }
body {
background: #eee;
- color: rgba(0, 0 ,0, .8);
+ color: rgba(0, 0 ,0, .6);
font: normal 14px/30px 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
@@ -79,8 +79,7 @@ h1 {
}
.card {
- background: #fff;
-/* background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(.5, #f6f6f6), color-stop(.501, #eee), to(#fff));*/
+ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f6f6f6));
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
display: block;
float: left;
@@ -91,6 +90,8 @@ h1 {
width: 290px;
}
+.creased { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(.5, #f6f6f6), color-stop(.501, #eee), to(#fff)); }
+
.card:after {
border-right: 3px double rgba(217, 163, 192, .3);
bottom: 0;
@@ -106,11 +107,7 @@ h1 {
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}
-h2 {
- border-bottom: 1px solid rgba(173, 192, 204, .3);
- font-size: 15px;
- padding: 25px 0 25px 50px;
-}
+/* =PORTRAITS */
.portrait {
position: absolute;
@@ -165,18 +162,37 @@ img {
width: 32px;
}
-.left:after { right: 24px; }
-.right:after { right: 34px; }
+.left .portrait:after { right: 24px; }
+.right .portrait:after { right: 34px; }
+
+/* =INFO */
+
+h2 {
+ border-bottom: 1px solid rgba(173, 192, 204, .4);
+ color: rgba(0, 0, 0, .8);
+ font-size: 16px;
+ padding: 25px 0 25px 40px;
+}
+
+.info { background: url('/images/user-24x24.png') 3px 3px no-repeat; }
-.info {
- background: url('/images/user-24x24.png') 3px 3px no-repeat;
+.card li {
+ border-bottom: 1px solid rgba(173, 192, 204, .2);
padding-left: 40px;
}
+.nicks {
+ color: rgba(0, 0, 0, .3);
+ font-size: 13px;
+}
+
+.nicks:before, .nicks:after { content: '"'; }
+
.services li {
background: #aaa;
display: block;
float: left;
height: 30px;
+ padding: 0;
width: 30px;
}

0 comments on commit ac4e3a3

Please sign in to comment.
Something went wrong with that request. Please try again.