updated html and css

gsathya · Sep 14, 2011 · d74a0b0 · d74a0b0
1 parent 0ab8e1a
commit d74a0b0
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 20 deletions.
diff --git a/static/base.css b/static/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("/static/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/templates/index.html b/templates/index.html
@@ -30,7 +30,7 @@
       <!-- By passing a valid access token here, we are able to display -->
       <!-- the user's images without having to download or prepare -->
       <!-- them ahead of time -->
-      <p id="picture" style="background: url(https://graph.facebook.com/me/picture?type=normal&access_token={{token}})"></p>
+      <p id="picture" style="background-image: url(https://graph.facebook.com/me/picture?type=normal&access_token={{token}})"></p>
       <div>
         <h1>Welcome, <strong>{{me.name}}</strong></h1>
         <p class="tagline">
@@ -64,20 +64,24 @@ <h1>Examples of the Facebook Graph API</h1>
         <h3>A few of your friends</h3>
         <ul class="friends">{% for friend in friends.data %}
         <li>
-          <img src="https://graph.facebook.com/{{friend.id}}/picture" alt="{{friend.name}}">
-          {{friend.name}}
+          <a href="#" onclick="window.open('http://www.facebook.com/{{friend.id}}')">
+            <img src="https://graph.facebook.com/{{friend.id}}/picture" alt="{{friend.name}}">
+            {{friend.name}}
+          </a>
         </li>{% endfor %}</ul>
       </div>
       <div class="list inline">
         <h3>Recent photos</h3>
         <ul class="photos">
           {% for photo in photos.data %}
             {% if loop.index0%4 == 0 %}
-          <li class="first-column">
+          <li class="first-column" style="background-image: url({{photo.picture}})">
             {% else %}
-          <li>
+          <li style="background-image: url({{photo.picture}})">
             {% endif %}
-            <img src="{{photo.source}}" alt="{{photo.name}}">
+            <a href="#" onclick="window.open('http://www.facebook.com/{{photo.id}}')">
+              {{photo.name}}
+            </a>
           </li>
           {% endfor %}
         </ul>
@@ -86,16 +90,20 @@ <h3>Recent photos</h3>
         <h3>Things you like</h3>
         <ul class="things">{% for like in likes.data %}
         <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>{% endfor %}</ul>
       </div>
       <div class="list">
         <h3>Friends using this app</h3>
         <ul class="friends">{% for friend in app_friends %}
-        <li style="background-image: url('{{friend.pic_square}}');">
-          <img src="https://graph.facebook.com/{{friend.uid}}/picture?type=square" alt="{{friend.name}}">
-          {{friend.name}}
+        <li>
+          <a href="#" onclick="window.open('http://www.facebook.com/{{friend.uid}}')">
+            <img src="https://graph.facebook.com/{{friend.uid}}/picture?type=square" alt="{{friend.name}}">
+            {{friend.name}}
+            </a>
         </li>{% endfor %}</ul>
       </div>
     </section>