Commit a59fce84d6dab2e40dd2c19ee8913ada6451b781 to insoshi's insoshi

insoshi / insoshi

Description:	The open source social networking platform in Ruby on Rails from the author of RailsSpace
Homepage:	http://insoshi.com
Clone URL:	git://github.com/insoshi/insoshi.git Give this clone URL to anyone. `git clone git://github.com/insoshi/insoshi.git`
Search Repo:

Got basic layout working

Michael Hartl (author)

Sun Apr 20 17:03:47 -0700 2008

commit a59fce84d6dab2e40dd2c19ee8913ada6451b781
tree b2a558c3f2c51c3d7effe396b430c34e8f7d75e1
parent 401743802d2901c0d32c3674e4dbfbd44caeff49

app/views/layouts/application.html.erb
public/404.html
public/422.html
public/500.html
public/images/default.png
public/images/default_icon.png
public/images/default_thumbnail.png
public/images/delete.png
public/images/email.png
public/images/header-grad-inv.jpg
public/images/header-grad.jpg
public/images/logo-insoshi.png
public/images/new.png
public/images/profile-images/s/garth-crooks.jpg
public/images/profile-images/s/george-palmer.jpg
public/images/rails.png
public/images/replied.png
public/javascripts/prototype.js
public/stylesheets/skin.css
public/stylesheets/typography.css

app/views/layouts/application.html.erb

0
@@ -1,20 +1,10 @@
0
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
0
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0
-<html xmlns="http://www.w3.org/1999/xhtml">
0
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0
+
0
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
0
   <head>
0
-    <title>insoshi</title>
0
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
0
+    <title>Insoshi - Social Software: Home</title>
0
     <%= stylesheet_link_tag "default" %>
0
-    <%- if development? -%>
0
-      <style type="text/css">
0
-        .with-grid { background: url('/stylesheets/blueprint/src/grid.png'); }
0
-      </style>
0
-    <%- end -%>
0
-    <%- if admin_view? -%>
0
-      <style type="text/css">
0
-        body { background: #9cf; }
0
-      </style>
0
-    <%- end -%>
0
-    <%= javascript_include_tag :defaults %>
0
   </head>
0
   <body class="home">
0
     <div id="header-wrap">
0
0
0
@@ -26,24 +16,13 @@
0
         </h1>
0
         <ul id="nav">
0
           <li class="n-home active"><a href="index.html">Home</a></li>
0
-
0
           <li class="n-profile"><a href="profile.html">Profile</a></li>
0
           <li class="n-contacts"><a href="contacts.html">Contacts</a></li>
0
           <li class="n-messages"><a href="messages.html">Messages</a></li>
0
           <li class="n-blog"><a href="blog.html">Blog</a></li>
0
           <li class="n-people"><a href="people.html">People</a></li>
0
           <li class="n-forum"><a href="forum.html">Forum</a></li>
0
-
0
-          <li class="n-search" id="search">
0
-            <form id="frmSearch" action="search.html">
0
-              <fieldset title="Search Insoshi">
0
-                <input type="text" id="txtSearch" class="txt" />
0
-                <input id="btnSearch" type="submit" value="Search" />
0
-              </fieldset>
0
-            </form>
0
-          </li>
0
         </ul>
0
-
0
         <p class="welcome">Welcome, Pete Lambert (<a href="signin.html">Sign out</a>)</p>
0
       </div>
0
     </div>

public/404.html

0
@@ -6,18 +6,18 @@
0
 <head>
0
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
0
   <title>The page you were looking for doesn't exist (404)</title>
0
-	<style type="text/css">
0
-		body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
0
-		div.dialog {
0
-			width: 25em;
0
-			padding: 0 4em;
0
-			margin: 4em auto 0 auto;
0
-			border: 1px solid #ccc;
0
-			border-right-color: #999;
0
-			border-bottom-color: #999;
0
-		}
0
-		h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
0
-	</style>
0
+  <style type="text/css">
0
+    body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
0
+    div.dialog {
0
+      width: 25em;
0
+      padding: 0 4em;
0
+      margin: 4em auto 0 auto;
0
+      border: 1px solid #ccc;
0
+      border-right-color: #999;
0
+      border-bottom-color: #999;
0
+    }
0
+    h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
0
+  </style>
0
 </head>
0
 
0
 <body>

public/422.html

0
@@ -6,18 +6,18 @@
0
 <head>
0
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
0
   <title>The change you wanted was rejected (422)</title>
0
-	<style type="text/css">
0
-		body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
0
-		div.dialog {
0
-			width: 25em;
0
-			padding: 0 4em;
0
-			margin: 4em auto 0 auto;
0
-			border: 1px solid #ccc;
0
-			border-right-color: #999;
0
-			border-bottom-color: #999;
0
-		}
0
-		h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
0
-	</style>
0
+  <style type="text/css">
0
+    body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
0
+    div.dialog {
0
+      width: 25em;
0
+      padding: 0 4em;
0
+      margin: 4em auto 0 auto;
0
+      border: 1px solid #ccc;
0
+      border-right-color: #999;
0
+      border-bottom-color: #999;
0
+    }
0
+    h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
0
+  </style>
0
 </head>
0
 
0
 <body>

public/500.html

0
@@ -6,18 +6,18 @@
0
 <head>
0
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
0
   <title>We're sorry, but something went wrong (500)</title>
0
-	<style type="text/css">
0
-		body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
0
-		div.dialog {
0
-			width: 25em;
0
-			padding: 0 4em;
0
-			margin: 4em auto 0 auto;
0
-			border: 1px solid #ccc;
0
-			border-right-color: #999;
0
-			border-bottom-color: #999;
0
-		}
0
-		h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
0
-	</style>
0
+  <style type="text/css">
0
+    body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
0
+    div.dialog {
0
+      width: 25em;
0
+      padding: 0 4em;
0
+      margin: 4em auto 0 auto;
0
+      border: 1px solid #ccc;
0
+      border-right-color: #999;
0
+      border-bottom-color: #999;
0
+    }
0
+    h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
0
+  </style>
0
 </head>
0
 
0
 <body>

public/images/default.png

public/images/default_icon.png

public/images/default_thumbnail.png

public/images/delete.png

public/images/email.png

public/images/header-grad-inv.jpg

public/images/header-grad.jpg

public/images/logo-insoshi.png

public/images/new.png

public/images/profile-images/s/garth-crooks.jpg

public/images/profile-images/s/george-palmer.jpg

public/images/rails.png

public/images/replied.png

public/javascripts/prototype.js

0
@@ -2765,7 +2765,7 @@
0
         p = ps[i];
0
         if (m = e.match(p)) {
0
           this.matcher.push(Object.isFunction(c[i]) ? c[i](m) :
0
-    	      new Template(c[i]).evaluate(m));
0
+            new Template(c[i]).evaluate(m));
0
           e = e.replace(m[0], '');
0
           break;
0
         }
0
@@ -3102,7 +3102,7 @@
0
 
0
     nextElementSibling: function(node) {
0
       while (node = node.nextSibling)
0
-	      if (node.nodeType == 1) return node;
0
+        if (node.nodeType == 1) return node;
0
       return null;
0
     },
0

public/stylesheets/skin.css

0
@@ -1,132 +1,102 @@
0
 /* Main layout */
0
 
0
 body{
0
-	text-align: center;
0
+  text-align: center;
0
 }
0
 #header-wrap{
0
-	background: #333;
0
-	float: left;
0
-	width: 100%;
0
+  background: #069;
0
+  float: left;
0
+  width: 100%;
0
 }
0
 #header, #wrap, #footer{
0
-	margin: 0 auto;
0
-	text-align: left;
0
-	width: 996px;
0
+  margin: 0 auto;
0
+  text-align: left;
0
+  width: 744px;
0
 }
0
 #content{
0
-	width: 996px;
0
-	float: left;
0
+  width: 744px;
0
+  float: left;
0
 }
0
 .col1{
0
-	float: left;
0
-	width: 658px;
0
+  float: left;
0
+  width: 490px;
0
 }
0
 .col2{
0
-	float: right;
0
-	width: 324px;
0
+  float: right;
0
+  width: 240px;
0
 }
0
 
0
 body.single-col .col1{
0
-	margin: 0 336px;
0
-	width: 324px;
0
+  margin: 0 210px;
0
+  width: 324px;
0
 }
0
 
0
 /* Header */
0
 #header{
0
-	position: relative;
0
+  position: relative;
0
+  height: 80px;
0
 }
0
 
0
 #header h1{
0
-	float: left;
0
-	margin-top: 12px;
0
-	width: 156px;
0
+  float: left;
0
+  margin-top: 12px;
0
+  margin-bottom: 12px;
0
+  width: 144px;
0
 }
0
 
0
 
0
 /* Header-nav */
0
 #nav{
0
-	float: left;
0
-	height: 80px;
0
-	margin: 0 0 0 12px;
0
-	width: 828px;
0
+  margin: 44px 0 0 0;
0
+  width: 560px;
0
+  float: right;
0
+  /*position: absolute;
0
+  right: 0;
0
+  bottom: 0;  */
0
 }
0
 #nav li{
0
-	background: #333 url(../images/grey-grad.jpg) bottom repeat-x;
0
-	float: left;
0
-	height: 36px;
0
-	line-height: 36px;
0
-	list-style-type: none;
0
-	margin: 44px 0 0 0;
0
-	text-align: center;
0
-	width: 84px;
0
+  background: #069 url(/images/header-grad.jpg) bottom repeat-x;
0
+  float: left;
0
+  height: 36px;
0
+  line-height: 36px;
0
+  list-style-type: none;
0
+  margin: 0 0 0 0;
0
+  text-align: center;
0
+  width: 80px;
0
 }
0
 #nav li a{
0
-	color: #fff;
0
-	display: block;
0
-	height: 36px;
0
-	font-size: .85em;
0
+  color: #fff;
0
+  display: block;
0
+  height: 36px;
0
+  font-size: 12px;
0
 }
0
 #nav li a:hover{
0
-	background: url(../images/grey-grad-inv.jpg) top repeat-x;
0
+  background: url(/images/header-grad-inv.jpg) top repeat-x;
0
 }
0
 #nav li.active a, #nav li.active a:hover{
0
-	background: #fff;
0
-	color: #333;
0
+  background: #fff;
0
+  color: #069;
0
 }
0
 #nav li.n-home{
0
-	margin-left: 0;
0
+  margin-left: 0;
0
 }
0
 
0
-/* Search */
0
-#nav li#search{
0
-	background: #333;
0
-	width: 240px;
0
-}
0
-#nav li#search fieldset{
0
-	margin-top: 6px;
0
-}
0
 
0
-form#frmSearch{
0
-	border: 0;
0
-	margin: 0;
0
-	padding: 0;
0
-}
0
-
0
-#search input.txt{
0
-	border: 0;
0
-	float: left;	
0
-	height: 24px;
0
-	margin: 0 8px;
0
-	padding: 0;
0
-	width: 152px;
0
-}
0
-#search #btnSearch{
0
-	background: #e5e5e5;
0
-	border: 1px solid #ccc;
0
-	border: 0;
0
-	float: left;
0
-	height: 24px;
0
-	margin: 0;
0
-	padding: 0;
0
-	width: 72px;
0
-	
0
-}
0
-
0
 #footer{
0
-	border-top: 1px solid #ccc;
0
-	clear: both;
0
-	margin-top: 48px;
0
-	padding: 24px 0;
0
-	width: 100%;
0
-	
0
+  border-top: 1px solid #ccc;
0
+  clear: both;
0
+  margin-top: 48px;
0
+  padding: 24px 0;
0
+  width: 100%;
0
+  
0
 }
0
 
0
 /* Welcome message */
0
 p.welcome{
0
-	position: absolute;
0
-	right: 0;
0
-	text-align: right;
0
-	top: 12px;
0
+  position: absolute;
0
+  right: 0;
0
+  text-align: right;
0
+  top: 12px;
0
 }
0
 
0
 
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
@@ -135,184 +105,204 @@
0
 
0
 /* List */
0
 .list{
0
-	margin-right: 6px;
0
+  margin-right: 6px;
0
 }
0
 .list li{
0
-	border-bottom: 1px solid #eee;
0
-	clear: both;
0
-	float: left;
0
-	list-style-type: none;
0
-	margin: 0 0 12px 6px;
0
-	padding: 0 0 6px 0;
0
-	width: 100%;
0
+  border-bottom: 1px solid #eee;
0
+  clear: both;
0
+  display: inline;
0
+  float: left;
0
+  list-style-type: none;
0
+  margin: 0 0 12px 6px;
0
+  padding: 0 0 6px 0;
0
+  width: 100%;
0
 }
0
 .list .profile-image{
0
-	clear: left;
0
-	float: left;
0
+  clear: left;
0
+  float: left;
0
+  display: inline;
0
 }
0
 .list.full .profile-image{
0
-	float: left;
0
-	height: 72px;
0
-	overflow: hidden;
0
-	position: relative;
0
-	width: 72px;
0
+  float: left;
0
+  height: 72px;
0
+  overflow: hidden;
0
+  position: relative;
0
+  width: 102px;
0
 }
0
 .list.small .profile-image{
0
-	width: 36px;
0
+  width: 36px;
0
 }
0
+.list.small li{
0
+  display: block;
0
+}
0
 .list p{
0
-	margin-bottom: 0;
0
-	margin-left: 82px;
0
+  margin-bottom: 0;
0
+  margin-left: 102px;
0
 }
0
 .list.small p{
0
-	font-size: .85em;
0
-	margin-left: 48px;
0
+  font-size: 12px;
0
+  margin-left: 48px;
0
 }
0
 .list.full .profile-image img{
0
-	right: 0;
0
-	position: absolute;
0
-	top: 0;
0
-	border: 1px solid #fff;
0
+  border: 1px solid #fff;
0
 }
0
+.list.full .profile-image img.icon{
0
+  position: absolute;
0
+  right: 6px;
0
+  top: 0;
0
+}
0
 
0
 .list.blog p{
0
-	margin-left: 0;
0
-	margin-bottom: 1em;
0
+  margin-left: 0;
0
+  margin-bottom: 1em;
0
 }
0
-.list.blog li.post ul{margin-bottom: 2em;}
0
+.list.blog li.post ul{
0
+  margin-bottom: 2em; 
0
+  list-style-type: disc;
0
+}
0
 .list.blog li.post ul li{
0
-	list-style-type: disc;
0
-	border: 0;
0
-	margin: 0 0 0 1em;
0
+  list-style-type: disc;
0
+  border: 0;
0
+  margin: 0 0 .5em 1em;
0
 }
0
 
0
 .list li li.reply{
0
-	border-top: 1px solid #eee;
0
-	border-bottom: 0;
0
-	margin-left: 84px;
0
-	margin-top: 12px;
0
-	padding: 12px 0 0;
0
-	width: 568px;
0
+  border-top: 1px solid #eee;
0
+  border-bottom: 0;
0
+  margin-left: 84px;
0
+  margin-top: 12px;
0
+  padding: 12px 0 0;
0
+  width: 398px;
0
 }
0
 
0
-
0
 /* Grid */
0
 .grid{
0
-	clear: both;
0
-	float: left;
0
-	width: 100%;
0
+  clear: both;
0
+  float: left;
0
+  width: 100%;
0
 }
0
 .grid li{
0
-	float: left;
0
-	list-style-type: none;
0
+  display: inline;
0
+  float: left;
0
+  list-style-type: none;
0
 }
0
-.grid.small li{
0
-	height: 36px;
0
-	margin: 0 0 6px 6px;
0
-	overflow: hidden;
0
-	width: 36px;
0
+.col2 .contacts.grid li{
0
+  height: 36px;
0
+  margin: 0 0 6px 6px;
0
+  overflow: hidden;
0
+  width: 36px;
0
 }
0
 .grid.medium li{
0
-	background: url(../images/blue-grad.jpg) bottom repeat-x;
0
-	border: 1px solid #ccc;
0
-	height: 48px;
0
-	margin: 0 0 12px 6px;
0
-	width: 154px;
0
+  background: url(/images/blue-grad.jpg) bottom repeat-x;
0
+  border: 1px solid #ccc;
0
+  height: 48px;
0
+  margin: 0 0 12px 6px;
0
+  width: 154px;
0
 }
0
 .grid.medium li, .grid.medium p{
0
-	font-size: .72em;
0
+  font-size: 12px;
0
 }
0
 .grid.medium img{
0
-	float: left;
0
-	/*clip: rect(36px, 36px, 36px, 36px);*/
0
-	width: 36px;
0
-	margin: 0 6px 6px 0;
0
+  float: left;
0
+  /*clip: rect(36px, 36px, 36px, 36px);*/
0
+  width: 36px;
0
+  margin: 0 6px 6px 0;
0
 }
0
 .grid.medium a{
0
-	display: block;
0
-	height: 100%;
0
-	margin: 6px;
0
+  display: block;
0
+  height: 100%;
0
+  margin: 6px;
0
 }
0
 
0
 
0
 /* Profile */
0
 
0
 .profile .toolbox{
0
-	clear: left;
0
-	float: left;
0
-	margin: 0 12px 12px 0;
0
-	width: 240px;
0
+  clear: left;
0
+  float: left;
0
+  margin: 0 12px 12px 0;
0
+  width: 240px;
0
 }
0
 .profile img.photo{
0
-	margin-bottom: 12px;
0
+  margin-bottom: 12px;
0
 }
0
 .profile .note{
0
-	margin-left: 252px;
0
+  margin-left: 252px;
0
 }
0
 .profile .toolbox ul{
0
-	background: url(../images/blue-grad.jpg) bottom repeat-x;
0
-	border: 1px solid #ccc;
0
-	width: 238px;
0
+  background: url(/images/blue-grad.jpg) bottom repeat-x;
0
+  border: 1px solid #ccc;
0
+  width: 238px;
0
 }
0
 .profile ul.tools li{
0
-	font-size: .72em;
0
-	margin: 6px 6px 6px 2em;
0
+  font-size: 12px;
0
+  margin: 6px 6px 6px 2em;
0
 }
0
 form#blogpost #post_title, form#blogpost #post_body{
0
-	width: 312px;
0
+  width: 312px;
0
 }
0
 
0
 
0
 /* Messages */
0
 
0
 #message-nav{
0
-	background: url(../images/silver-grad.jpg) bottom repeat-x;
0
-	border-bottom: 1px solid #ccc;
0
-	float: left;
0
-	height: 24px;
0
-	margin-top: -24px;
0
-	position: relative;
0
-	width: 100%;
0
+  background: url(/images/silver-grad.jpg) bottom repeat-x;
0
+  border-bottom: 1px solid #ccc;
0
+  float: left;
0
+  height: 24px;
0
+  margin-top: -24px;
0
+  position: relative;
0
+  width: 100%;
0
 }
0
 #message-nav li{
0
-	float: left;
0
-	font-size: .72em;
0
-	li