updated html

added links back updated css
metadaddy · Sep 14, 2011 · 447c498 · 447c498
1 parent 617945a
commit 447c498
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 21 deletions.
diff --git a/public/stylesheets/base.css b/public/stylesheets/base.css
@@ -54,7 +54,7 @@ header #picture + div {
 }
 
 header #picture {
-  background-position: center;
+  background-position: center 25%;
   background-repeat: no-repeat;
   float: left;
   margin-right: 18px;
@@ -182,6 +182,7 @@ header .tagline {
 #guides h1,
 #samples h1 {
   margin-bottom: 15px;
+  text-align: center;
 }
 
 #guides, #samples {
@@ -208,13 +209,17 @@ header .tagline {
   border-left: 1px solid #b3b3b3;
   border-right: 1px solid #b3b3b3;
 }
+
 #guides ul li {
   font-size: 11px;
   list-style: none;
 }
 
 #guides ul li p {
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
   line-height: 20px;
+  text-align: justify;
 }
 
 #guides ul li:first-child {
@@ -253,8 +258,8 @@ header .tagline {
 #samples {
   background-image: url("../images/samples-bg.png");
   border-bottom: 1px solid #dadada;
-  border-left: 1px solid #ccc;
-  border-right: 1px solid #ccc;
+  border-left: 1px solid #b3b3b3;
+  border-right: 1px solid #b3b3b3;
   border-top: 1px solid #fff;
 }
 
@@ -276,18 +281,26 @@ header .tagline {
 }
 
 #samples li {
+  background-repeat: no-repeat;
+  background-position: 0 0;
   color: #7c7c7c;
   display: block;
   font-size: 11px;
   font-weight: bold;
   height: 32px;
-  line-height: 32px;
   margin-bottom: 11px;
   overflow: hidden;
-  padding-left: 36px;
   position: relative;
 }
 
+#samples li a:link,
+#samples li a:visited {
+  color: #7c7c7c;
+  display: block;
+  line-height: 32px;
+  padding-left: 36px;
+}
+
 #samples .list img {
   height: auto;
   left: 0;
@@ -296,10 +309,6 @@ header .tagline {
   width: 32px;
 }
 
-#samples .inline img {
-  position: static;
-}
-
 #samples .inline ul {
   background-repeat: repeat;
 }
@@ -310,12 +319,25 @@ header .tagline {
   overflow: hidden;
   padding: 0;
   width: 32px;
+  background-position: center 25%;
+  background-repeat: no-repeat;
+  -moz-background-size: cover;
+  background-size: cover;
 }
 
 #samples .inline li.first-column {
   margin-left: 0;
 }
 
+#samples .inline li a:link,
+#samples .inline li a:visited {
+  display: block;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  text-indent: -9999px;
+}
+
 
 /* ------------------------------------------ */
 

diff --git a/views/index.erb b/views/index.erb
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
 
     <title><%= @app.name %></title>
-    <link rel="stylesheet" href="stylesheets/screen.css" media="screen">
+    <link rel="stylesheet" href="/stylesheets/screen.css" media="screen">
 
     <!-- These are Open Graph tags.  They add meta data to your  -->
     <!-- site that facebook uses when your content is shared     -->
@@ -38,7 +38,7 @@
   </head>
   <body>
     <header class="clearfix">
-      <p id="picture" style="background: url(https://graph.facebook.com/me/picture?type=normal&access_token=<%= @client.access_token %>)"></p>
+      <p id="picture" style="background-image: url(https://graph.facebook.com/me/picture?type=normal&access_token=<%= @client.access_token %>)"></p>
       <div>
         <h1>Welcome, <strong><%= @user.name %></strong></h1>
         <p class="tagline">
@@ -74,9 +74,11 @@
         <h3>A few of your friends</h3>
         <ul class="friends">
           <% @friends.each do |friend| %>
-            <li style="background-image: url()">
-            <img src="https://graph.facebook.com/<%= friend.id %>/picture?type=square" alt="<%= friend.name %>">
-              <%= friend.name %>
+            <li>
+              <a href="#" onclick="window.open('http://www.facebook.com/<%= friend.id %>')">
+                <img src="https://graph.facebook.com/<%= friend.id %>/picture?type=square" alt="<%= friend.name %>">
+                <%= friend.name %>
+              </a>
             </li>
           <% end %>
         </ul>
@@ -86,8 +88,10 @@
         <h3>Recent photos</h3>
         <ul class="photos">
           <% @photos.each do |photo| %>
-            <li<%= first_column(photo, @photos) %>>
-              <img src="<%= photo.source %>" alt="<%= photo.name %>">
+            <li style="background-image: url(<%= photo.picture %>)"<%= first_column(photo, @photos) %>>
+              <a href="#" onclick="window.open('http://www.facebook.com/<%= photo.id %>')">
+                <%= photo.name %>
+              </a>
             </li>
           <% end %>
         </ul>
@@ -98,8 +102,10 @@
         <ul class="things">
           <% @likes.each do |like| %>
             <li>
-              <img src="https://graph.facebook.com/<%= like.id %>/picture?type=square" alt="<%= like.name %>">
-              <%= like.name %>
+              <a href="#" onclick="window.open('http://www.facebook.com/<%= like.id %>')">
+                <img src="https://graph.facebook.com/<%= like.id %>/picture?type=square" alt="<%= like.name %>">
+                <%= like.name %>
+              </a>
             </li>
           <% end %>
         </ul>
@@ -109,9 +115,11 @@
         <h3>Friends using this app</h3>
         <ul class="friends">
           <% @friends_using_app.each do |friend_result| %>
-            <li style="background-image: url()">
-              <img src="<%= friend_result['pic_square'] %>" alt="<%= friend_result['name'] %>">
-              <%= friend_result['name'] %>
+            <li>
+              <a href="#" onclick="window.open('http://www.facebook.com/<%= friend_result['uid'] %>')">
+                <img src="<%= friend_result['pic_square'] %>" alt="<%= friend_result['name'] %>">
+                <%= friend_result['name'] %>
+              </a>
             </li>
           <% end %>
         </ul>