MATZILLA!

app/views/accounts/_account.html.haml

@@ -1,31 +1,34 @@
-.item
-  .column.left
-    = render :partial => 'portrait', :locals => {:portrait => account.portraits.first} unless account.portraits.blank?
-    - if account.portraits.blank?
-      .portrait.blank 
-    - unless account.services.empty?
-      .services
-        %h3 Services
-        .meta= render :partial => 'service', :collection => account.services
-  .column.right 
-    %h2= account.username
-    - unless account.names.empty?
-      .names 
-        %h3 Names
-        .meta= render :partial => 'name', :collection => account.names
-      - unless account.nicks.empty?
-        .nicknames 
-          %h3 Nicknames
-          .meta= render :partial => 'name', :collection => account.nicks
-      - unless account.sites.empty?
-        .sites
-          %h3 Sites
-          .meta= render :partial => 'site', :collection => account.sites
+.card
+  .top
+  .main
+    .column.left
+      = render :partial => 'portrait', :locals => {:portrait => account.portraits.first} unless account.portraits.blank?
+      - if account.portraits.blank?
+        .portrait.blank 
+      - unless account.services.empty?
+        .services
+          %h3 Services
+          .meta= render :partial => 'service', :collection => account.services
+    .column.right 
+      %h2= account.username
+      - unless account.names.empty?
+        .names 
+          %h3 Names
+          .meta= render :partial => 'name', :collection => account.names
+        - unless account.nicks.empty?
+          .nicknames 
+            %h3 Nicknames
+            .meta= render :partial => 'name', :collection => account.nicks
+        - unless account.sites.empty?
+          .sites
+            %h3 Sites
+            .meta= render :partial => 'site', :collection => account.sites
 
-      // Book search works* but is flaky - seems like some of these ISBN numbers are wrong...
-      / - unless account.books.empty?
-      /   .books
-      /     %h3 Books
-      /     .meta
-      /       - account.books.each do |book|
-      /         .book= link_to book.title, 'http://www.amazon.com/s?url=field-keywords=' + book.key
+        // Book search works* but is flaky - seems like some of these ISBN numbers are wrong...
+        / - unless account.books.empty?
+        /   .books
+        /     %h3 Books
+        /     .meta
+        /       - account.books.each do |book|
+        /         .book= link_to book.title, 'http://www.amazon.com/s?url=field-keywords=' + book.key
+  .bottom

app/views/accounts/index.html.haml

@@ -1,11 +1,8 @@
+.matzilla
+.attack
 .fork= link_to 'fork me on github', 'http://github.com/tenderlove/rubycommitters.org'
 .header
   %h1 Ruby Committers
-.scrollcontainer
-  .scrollcenter
-    %a.prev.browse.left
-    .scrollable.vertical
-      .items
-        - @accounts.each_slice(6) do |account|
-          %div= render :partial => 'account', :collection => account
-    %a.next.browse.right
+.container
+  - @accounts.each do |account|
+    = render :partial => 'account', :locals => {:account => account}

app/views/layouts/application.html.haml

@@ -11,4 +11,5 @@
     .footer
       .credits
         .ejc.logo= link_to image_tag('ejc_inset.png', :alt => 'Designed by E.J. Coughlin <3'), 'http://twitter.com/ejc'
-        .ejc.words= link_to 'Designed by E.J. Coughlin <3', 'http://twitter.com/ejc'
+        .ejc.words= link_to 'Designed by E.J. Coughlin <3', 'http://twitter.com/ejc'
+        .wallpaper= link_to 'Download the "MATZILLA!" Desktop Wallpaper on Flickr', 'http://www.flickr.com/photos/_ejc/5371343453/'

public/stylesheets/site.css

@@ -1,16 +1,22 @@
-body	{background: #333 url(/images/dark_noise.png);}
+body	{background: #333 url(/images/bg.png);padding:0;margin:0;position:relative;}
 .fork a	{position: absolute;top:0;right: 20px;width:120px;height: 33px;display:block;text-indent: -9000px;background: url(/images/forkme_ribbon.png) no-repeat;}
-.header {width:600px; margin: 15px auto 15px;height:80px;}
+.header {width:100%;position:absolute;top:0;}
 
-.header h1 {text-indent: -9000px;background: url(/images/logo_inset.png) no-repeat;width:600px;height:80px;margin: 0 0 0 0;}
+.header h1 {text-indent: -9000px;background: url(/images/ruby_commi_tters_org.png) no-repeat;width:230px;height:170px;position: absolute; top: 50px; left: 120px;}
+.matzilla {top: 0;background: url(/images/matzilla-bg.jpg) no-repeat center top;width:100%;height: 993px;}
+.container {width: 1000px;margin: 0 auto;position:relative;top: -200px}
 
 /* Member Cards */
-.item	{float: left;width: 300px !important;height:265px;padding:15px 5px 5px 15px;margin: 0 3px 10px 0;background: transparent url(/images/user_card.png) no-repeat;}
+.card {float:left;width:300px;margin-right:20px;}
+.card .main	{position:relative;margin: 0; background: transparent url(/images/card_tile.png) repeat-y;float:left;width:300px;}
+.card .top {width:300px;height:140px;background: transparent url(/images/card_top.png) no-repeat;}
+.card .bottom {width:300px;height:29px;background: transparent url(/images/card_bottom.png) no-repeat;float:left;}
 
+.attack {background: url(/images/attack_of_matzilla.png) no-repeat;width:543px;height:185px;position: absolute;top: 450px;right:200px}
 
-.column {}
-.column.left {width:105px;}
-.column.right {width:190px;float:right;}
+.column {float:left;}
+.column.left {width:105px;margin-left:15px}
+.column.right {width:170px;float:right;}
 .column.right h2, .column.right h3 {float:left;width:100%;}
 .column .meta	{float:left;width:100%;margin-bottom:10px;}
 
@@ -38,7 +44,8 @@ body	{background: #333 url(/images/dark_noise.png);}
 .icon a.iddy		{background-position: -77px 0;}
 .icon a.mixi		{background-position: -92px 0;}
 
-.footer	{width: 100%;padding: 20px 0 0;}
-.footer .credits	{width: 310px;margin:0 auto;position: relative;}
+.footer	{width: 100%;padding: 20px 0 0;position:relative;text-align:center;}
+.footer .credits	{width: 300px;margin:0 auto;position: relative;}
 .footer .credits .ejc {float: left;}
-.footer .credits .ejc.words	{margin: 17px}
+.footer .credits .ejc.words	{margin: 17px}
+.footer .credits .wallpaper	{width: 300px;float:left;margin:10px 0;padding:8px 5px;}

public/stylesheets/typography.css

@@ -51,4 +51,5 @@ h1:first-child, h2:first-child { margin-top: 0; }
 .meta, .meta a {color: #333;text-shadow:1px 1px #FFF;}
 .meta a {color: #ab0d00;text-decoration:none;}
 .meta a:hover {color: #ab0d00;text-decoration:underline;}
-.footer .credits .ejc.words a	{color: #111;text-shadow: 1px 1px #555;text-decoration: none;font-weight:550;font-size:1.1em; }
+.footer .credits a	{color: #111;text-shadow: 1px 1px #555;text-decoration: none;font-weight:550;font-size:1.1em; }
+.footer .credits .wallpaper a {font-size: 10px;}