Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Design entry #3

Closed
wants to merge 5 commits into from

4 participants

Karri Saarinen Justin Ko Ravil Bayramgalin Niko Salonen
Karri Saarinen

Hi,

Here's my entry. I tried to bring minimalistic Japanese feel to it (as you know Ruby is from Japan) :) It's lightweight and everything is text so, you can make the changes if you wish.

Also the top which now says "Ruby, programmer's best friend" can be replaced with navigation if you at some point decide extend the site.

I deployed also to http://karrisaarinen.com/rubyc/ so its easy to view and share (the banner in the upper corner is not there to stay, and not included in the design or on this repo)

Screenshot http://dl.dropbox.com/u/8355/rubycommitters.png

Best of luck with your site!

Karri Saarinen
http://karrisaarinen.com
http://twitter.com/karrisaarinen

Kisko Labs http://kiskolabs.com

Justin Ko

My favorite by far!

Karri Saarinen

Thanks!

Ravil Bayramgalin

Nice one, clearly has all information needed, plus the only one who thought of anchor links
+1

Niko Salonen

Simplicity makes things beautiful!
+1

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 5 unique commits by 1 author.

Jan 04, 2011
Karri Saarinen design v1 ece382e
Karri Saarinen some cleanup and favicon 1eb6584
Karri Saarinen d1829ea
Jan 05, 2011
Karri Saarinen cleaning c81a498
Jan 19, 2011
Karri Saarinen fixed the background image in firefoxes 30ca8f2
This page is out of date. Refresh to see the latest.
6  README.rdoc
Source Rendered
... ...
@@ -1,3 +1,9 @@
  1
+= Design Credits
  2
+  
  3
+* Design by Karri Saarinen <http://karrisaarinen.com>
  4
+* Ruby illustration by Linda Liukas <http://lindaliukas.fi>
  5
+* Rails help by Joao Carlos <http://joao.fi>
  6
+
1 7
 = rubycommitters.org
2 8
 
3 9
 This is the source code for the rubycommitters.org website.
82  app/views/accounts/_account.html.erb
... ...
@@ -1,64 +1,44 @@
1  
-<li>
2  
-  <table>
3  
-    <tr>
4  
-      <td>Account:</td>
5  
-      <td><%= account.username %></td>
6  
-    </tr>
  1
+<li class="clearfix person">
7 2
 
8  
-    <% unless account.names.empty? %>
9  
-      <tr>
10  
-        <td>Names:</td>
11  
-        <td>
12  
-          <ul>
13  
-            <%= render :partial => 'name', :collection => account.names %>
14  
-          </ul>
15  
-        </td>
16  
-      </tr>
17  
-    <% end %>
  3
+   <div class="account">
  4
+     <a id="<%= account.username %>" href="#<%= account.username %>">→ <%= account.username %></a>
  5
+   </div>
  6
+   
  7
+   <div class="portrait">
  8
+     <% if account.portraits.any? %>
  9
+        <%= render "portrait", :portrait => account.portraits.first %>
  10
+      <% end %>
  11
+   </div>
  12
+   
  13
+   <div class="info">
  14
+   <% unless account.names.empty? %>
  15
+     <h3>Name</h3>
  16
+     <ul class="name">
  17
+      <%= render :partial => 'name', :collection => account.names %>
  18
+     </ul>
  19
+  <% end %>
18 20
 
19 21
     <% unless account.nicks.empty? %>
20  
-      <tr>
21  
-        <td>Nicknames:</td>
22  
-        <td>
23  
-          <ul>
24  
-            <%= render :partial => 'name', :collection => account.nicks %>
25  
-          </ul>
26  
-        </td>
27  
-      </tr>
  22
+      <h3>Nicknames</h3>
  23
+      <ul>
  24
+        <%= render :partial => 'name', :collection => account.nicks %>
  25
+      </ul>
28 26
     <% end %>
29 27
 
30 28
     <% unless account.sites.empty? %>
31  
-      <tr>
32  
-        <td>Sites:</td>
33  
-        <td>
34  
-          <ul>
35  
-            <%= render :partial => 'site', :collection => account.sites %>
36  
-          </ul>
37  
-        </td>
38  
-      </tr>
  29
+      <h3>Sites</h3>
  30
+        <ul>
  31
+          <%= render :partial => 'site', :collection => account.sites %>
  32
+        </ul>
39 33
     <% end %>
40 34
 
41 35
     <% unless account.services.empty? %>
42  
-      <tr>
43  
-        <td>Services:</td>
44  
-        <td>
45  
-          <ul>
46  
-            <%= render :partial => 'service', :collection => account.services %>
47  
-          </ul>
48  
-        </td>
49  
-      </tr>
  36
+      <h3>Services</h3>
  37
+        <ul class="collapsed">
  38
+          <%= render :partial => 'service', :collection => account.services %>
  39
+        </ul>
50 40
     <% end %>
51 41
 
52  
-    <% unless account.portraits.empty? %>
53  
-      <tr>
54  
-        <td>Portraits:</td>
55  
-        <td>
56  
-          <ul>
57  
-            <%= render :partial => 'portrait', :collection => account.portraits %>
58  
-          </ul>
59  
-        </td>
60  
-      </tr>
61  
-    <% end %>
62 42
 
63 43
     <!-- FIXME: unsure how to link to ISBN. :-( -->
64 44
     <!--
@@ -75,5 +55,5 @@
75 55
       </tr>
76 56
     <% end %>
77 57
     -->
78  
-  </table>
  58
+  </div>
79 59
 </li>
4  app/views/accounts/_portrait.html.erb
... ...
@@ -1,3 +1 @@
1  
-<div class='image-wrapper'>
2  
-  <%= image_tag portrait.url %>
3  
-</div>
  1
+<%= image_tag portrait.url %>
7  app/views/accounts/index.html.erb
... ...
@@ -1,5 +1,6 @@
1  
-<h1>Ruby Committers</h1>
2  
-<%= link_to 'fork me on github', 'http://github.com/tenderlove/rubycommitters.org' %>
3  
-<ul>
  1
+<h1>Meet the Ruby Core Team</h1>
  2
+<p class="byline">We are the tinkers behind the Ruby programming language.</p>
  3
+
  4
+<ul id="team">
4 5
 <%= render :partial => 'account', :collection => @accounts %>
5 6
 </ul>
16  app/views/layouts/application.html.erb
@@ -2,14 +2,26 @@
2 2
 <html>
3 3
 <head>
4 4
   <title>Ruby Committers</title>
  5
+  <link rel="shortcut icon" href="/favicon.png">
5 6
   <%= stylesheet_link_tag :all %>
6 7
   <%= javascript_include_tag :defaults %>
7 8
   <%= csrf_meta_tag %>
8 9
   <%= analytics_tag %>
9 10
 </head>
10 11
 <body>
  12
+  <div id="wrap"> 
  13
+  
  14
+    <div id="header" class="clearfix">
  15
+      <h2>RubyCommitters.org</h2>
  16
+      <p>Ruby, programmer's best friend.
  17
+    </div>
11 18
 
12  
-<%= yield %>
13  
-
  19
+    <%= yield %>
  20
+  
  21
+    <p id="footer">
  22
+      <a href="#top">↑ BACK TO TOP</a> <br />
  23
+      2011 - RubyCommitters.org
  24
+    </p>
  25
+  </div>
14 26
 </body>
15 27
 </html>
BIN  public/favicon.png
BIN  public/images/ruby.png
146  public/stylesheets/site.css
... ...
@@ -1,7 +1,145 @@
1  
-.image-wrapper {
2  
-  height: 100px;
  1
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
  2
+
  3
+body {
  4
+	background:#f6f3f0;
  5
+	font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;
  6
+	text-rendering: optimizeLegibility;
  7
+	color:#111;
  8
+}
  9
+
  10
+#wrap {
  11
+	background:url(../images/ruby.png) no-repeat right 120px;
  12
+	width:770px;
  13
+	padding-left:30px;
  14
+	margin:0 auto;
  15
+}
  16
+
  17
+h1 {
  18
+	font-size:56px;
  19
+	font-weight:400;
  20
+	letter-spacing:-0.07em;
  21
+	margin:0;
  22
+}
  23
+
  24
+h2 {
  25
+	font-size:48px;
  26
+	font-weight:400;
  27
+}
  28
+
  29
+h3 {
  30
+	font-size:30px;
  31
+	font-weight:400;
3 32
 }
4 33
 
5  
-.image-wrapper img {
6  
-  height: 100%;
  34
+a {
  35
+	color:#111;
  36
+	text-decoration:none;
  37
+	border-bottom:1px dotted #111;
7 38
 }
  39
+
  40
+a:hover {
  41
+	background:#be0000;
  42
+	color:#fff;
  43
+	border:0;
  44
+}
  45
+
  46
+#header {
  47
+	margin-bottom:5em;
  48
+}
  49
+
  50
+
  51
+#header h2 {
  52
+	background:#be0000;
  53
+	padding:15px 15px 5px 40px;
  54
+	color:#fff;
  55
+	width:220px;
  56
+	font-size:24px;
  57
+	font-weight:300;
  58
+	float:left;
  59
+	margin-left:-40px;
  60
+}
  61
+
  62
+#header p {
  63
+	font-size:18px;
  64
+	font-weight:300;
  65
+	padding:23px 60px 0 30px;
  66
+	float:left;
  67
+}
  68
+
  69
+#team {
  70
+	list-style:none;
  71
+}
  72
+
  73
+#team .person {
  74
+	border-top:1px dotted rgba(0,0,0,0.2);
  75
+	padding:2em 0;
  76
+	margin:2em 0;
  77
+}
  78
+
  79
+#team .name {
  80
+	font-size:24px;
  81
+	font-weight:300;
  82
+	margin-bottom:0.5em;
  83
+	line-height:1.2;
  84
+}
  85
+
  86
+#team ul {
  87
+	margin-bottom:1em;
  88
+}
  89
+
  90
+#team h3 {
  91
+	color:#be0000;
  92
+	text-transform:uppercase;
  93
+	font-weight:300;
  94
+	margin:0 0 0 0;
  95
+	font-size:14px;
  96
+}
  97
+
  98
+ul.collapsed li {
  99
+	display:inline;
  100
+}
  101
+
  102
+.portrait {
  103
+	width:240px;
  104
+	float:left;
  105
+}
  106
+
  107
+.portrait img {
  108
+	border:6px solid white;
  109
+	width:160px;
  110
+	position:relative;
  111
+	-webkit-box-shadow:0 2px 3px rgba(0,0,0, 0.2);
  112
+}
  113
+
  114
+.byline {
  115
+	margin:-0.6em 0 60px 0;
  116
+	font-size:22px;
  117
+	font-weight:300;
  118
+}
  119
+
  120
+.ruby {
  121
+	float:right;
  122
+}
  123
+
  124
+.account {
  125
+	float:right;
  126
+	margin:-20px 0 0 0;
  127
+	background:#f6f3f0;
  128
+	opacity:0.5;
  129
+	text-transform:uppercase;
  130
+}
  131
+
  132
+.info {
  133
+	width:500px;
  134
+	margin-left:240px;
  135
+}
  136
+
  137
+#footer {
  138
+	text-align:center;
  139
+	border-top:1px dotted rgba(0,0,0,0.2);
  140
+	padding:2em;
  141
+	color:#333;
  142
+}
  143
+
  144
+.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}
  145
+.clearfix:after{clear:both}.clearfix{zoom:1}
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.