Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Randomly creasing some cards and styling names/nicks.

  • Loading branch information...
commit ac4e3a39f0bb5716448c502ad848f233113f6486 1 parent c0c4bb4
Matthew Anderson authored
4 app/helpers/application_helper.rb
@@ -21,7 +21,7 @@ def analytics_tag
21 21 end
22 22 end
23 23
24   - def transformed_classes
25   - " #{['left','right'].sample} #{['three','four','five','six'].sample}"
  24 + def randomized_styles
  25 + " #{['left','right'].sample} #{['three','four','five','six'].sample} #{['','','','creased'].sample}"
26 26 end
27 27 end
20 app/views/accounts/_account.html.erb
... ... @@ -1,5 +1,5 @@
1   -<li class="card">
2   - <div class="portrait<%= transformed_classes %>">
  1 +<li class="card<%= randomized_styles %>">
  2 + <div class="portrait">
3 3 <div class="frame">
4 4 <div class="photo">
5 5 <% if account.portraits.empty? %>
@@ -14,19 +14,11 @@
14 14 <h2><%= account.username %></h2>
15 15 <ul class="info">
16 16 <% unless account.names.empty? %>
17   - <%= render :partial => 'name', :collection => account.names %>
  17 + <%= render :partial => 'name', :collection => account.names, :locals => {:class_name => 'name'} %>
  18 + <% end %>
  19 + <% unless account.nicks.empty? %>
  20 + <%= render :partial => 'name', :collection => account.nicks, :locals => {:class_name => 'nicks'} %>
18 21 <% end %>
19   -
20   - <% unless account.nicks.empty? %>
21   - <tr>
22   - <td>Nicknames:</td>
23   - <td>
24   - <ul>
25   - <%= render :partial => 'name', :collection => account.nicks %>
26   - </ul>
27   - </td>
28   - </tr>
29   - <% end %>
30 22
31 23 <% unless account.sites.empty? %>
32 24 <tr>
2  app/views/accounts/_name.html.erb
... ... @@ -1 +1 @@
1   -<li><%= name.value %></li>
  1 +<li class="<%= class_name %>"><%= name.value %></li>
BIN  public/images/user-24x24.png
40 public/stylesheets/site.css
@@ -25,7 +25,7 @@ header, section, footer, aside, nav, article, figure { display: block; }
25 25
26 26 body {
27 27 background: #eee;
28   - color: rgba(0, 0 ,0, .8);
  28 + color: rgba(0, 0 ,0, .6);
29 29 font: normal 14px/30px 'Helvetica Neue', Helvetica, Arial, sans-serif;
30 30 }
31 31
@@ -79,8 +79,7 @@ h1 {
79 79 }
80 80
81 81 .card {
82   - background: #fff;
83   -/* background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(.5, #f6f6f6), color-stop(.501, #eee), to(#fff));*/
  82 + background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f6f6f6));
84 83 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
85 84 display: block;
86 85 float: left;
@@ -91,6 +90,8 @@ h1 {
91 90 width: 290px;
92 91 }
93 92
  93 +.creased { background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(.5, #f6f6f6), color-stop(.501, #eee), to(#fff)); }
  94 +
94 95 .card:after {
95 96 border-right: 3px double rgba(217, 163, 192, .3);
96 97 bottom: 0;
@@ -106,11 +107,7 @@ h1 {
106 107 -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
107 108 }
108 109
109   -h2 {
110   - border-bottom: 1px solid rgba(173, 192, 204, .3);
111   - font-size: 15px;
112   - padding: 25px 0 25px 50px;
113   -}
  110 +/* =PORTRAITS */
114 111
115 112 .portrait {
116 113 position: absolute;
@@ -165,18 +162,37 @@ img {
165 162 width: 32px;
166 163 }
167 164
168   -.left:after { right: 24px; }
169   -.right:after { right: 34px; }
  165 +.left .portrait:after { right: 24px; }
  166 +.right .portrait:after { right: 34px; }
  167 +
  168 +/* =INFO */
  169 +
  170 +h2 {
  171 + border-bottom: 1px solid rgba(173, 192, 204, .4);
  172 + color: rgba(0, 0, 0, .8);
  173 + font-size: 16px;
  174 + padding: 25px 0 25px 40px;
  175 +}
  176 +
  177 +.info { background: url('/images/user-24x24.png') 3px 3px no-repeat; }
170 178
171   -.info {
172   - background: url('/images/user-24x24.png') 3px 3px no-repeat;
  179 +.card li {
  180 + border-bottom: 1px solid rgba(173, 192, 204, .2);
173 181 padding-left: 40px;
174 182 }
175 183
  184 +.nicks {
  185 + color: rgba(0, 0, 0, .3);
  186 + font-size: 13px;
  187 +}
  188 +
  189 +.nicks:before, .nicks:after { content: '"'; }
  190 +
176 191 .services li {
177 192 background: #aaa;
178 193 display: block;
179 194 float: left;
180 195 height: 30px;
  196 + padding: 0;
181 197 width: 30px;
182 198 }

0 comments on commit ac4e3a3

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