style changes

TODO

@@ -1,19 +1,5 @@
 * Do it for this page too
   https://twitter.com/#!/dotton/following
 
-* Solve this traceback:
-
-[W 110906 13:20:06 auth:327] Could not fetch access token
-[W 110906 13:20:06 web:1006] 500 GET /auth/twitter/?oauth_token=5lmsRwZ12GQjMEDUSZZzeM3CmVN3668nPucjurMiwI&oauth_verifier=nhqvtUN3Il50KtiiHCozbxyKZHhRgVl0OzHINSc (127.0.0.1): Twitter auth failed
-[E 110906 13:20:06 web:1370] 500 GET /auth/twitter/?oauth_token=5lmsRwZ12GQjMEDUSZZzeM3CmVN3668nPucjurMiwI&oauth_verifier=nhqvtUN3Il50KtiiHCozbxyKZHhRgVl0OzHINSc (127.0.0.1) 304.70ms
-[W 110906 13:20:06 simple_httpclient:272] uncaught exception
-    Traceback (most recent call last):
-      File "/Users/peterbe/virtualenvs/followsme/lib/python2.6/site-packages/tornado/simple_httpclient.py", line 270, in cleanup
-        yield
-      File "/Users/peterbe/virtualenvs/followsme/lib/python2.6/site-packages/tornado/stack_context.py", line 183, in wrapped
-        callback(*args, **kwargs)
-      File "/Users/peterbe/virtualenvs/followsme/lib/python2.6/site-packages/tornado/simple_httpclient.py", line 351, in _on_chunk_length
-        self._on_body(b('').join(self.chunks))
-      File "/Users/peterbe/virtualenvs/followsme/lib/python2.6/site-packages/tornado/simple_httpclient.py", line 341, in _on_body
-        self.callback(response)
-    TypeError: 'NoneType' object is not callable
+* Override log_request in base handler so that only errors and
+  warnings are actually logged.

static/css/style.css

@@ -0,0 +1,118 @@
+body {
+font-family: sans-serif;
+background-attachment: fixed;
+background-image: url("/static/images/rock.jpg");
+background-repeat: no-repeat;
+background-position: bottom right;
+margin-left: 40px;
+}
+h1,h2,h3,h4 { font-family: Helvetica, sans-serif; }
+h3 {font-size:20px}
+h1 a { color:black; text-decoration:none; }
+h1 a:hover { color:black; text-decoration:underline; }
+header h1 { font-family: 'Permanent Marker',cursive;margin-top:10px;
+            font-size: 4.2em; letter-spacing: -3px; margin-bottom: 0; }
+/*footer { position: absolute; bottom: 0; }*/
+footer { clear:left; margin-top:100px; }
+footer p { text-align:center; font-family: sans-serif; color:#666; font-size:0.8em; }
+.followsyou { color: green; }
+.followsyounot { color: #333; }
+h1 a .q { color:#999; }
+
+p.description {
+	    font-size: 14px;
+    line-height: 1.6em;
+    width: 600px;
+}
+
+p.login {
+  display: block;
+  float: left;
+  width: 100%;
+}
+
+.twitter-login {
+	/* Firefox 3.6+ */
+    background: -moz-linear-gradient(100% 100% 90deg, #e6e6e6, #f1f1f1);
+    /* Safari 4-5, Chrome 1-9 */ /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f1f1), to(#e6e6e6));
+    /* Safari 5.1+, Chrome 10+ */
+    background: -webkit-linear-gradient(#e6e6e6, #f1f1f1);
+    /* Opera 11.10+ */
+    background: -o-linear-gradient(#e6e6e6, #f1f1f1);
+    border: 1px solid #FFFFFF;
+    border-radius: 5px 5px 5px 5px;
+    box-shadow: 0 1px 2px #999999;
+    color: #333333;
+    font-size: 17px;
+    font-weight: bold;
+    margin: 0 20px 10px 0;
+    padding: 10px 15px;
+    text-decoration: none;
+    text-shadow: 0 1px 1px #FFFFFF;
+    float: left;
+}
+
+a.twitter-login img, a.bookmarklet img {
+  float: left;
+}
+
+a.twitter-login span.text {
+    float: left;
+    margin-left: 10px;
+    position: relative;
+    top: 4px;
+}
+
+span.readonly {font-size: 11px;}
+
+span.tick {
+    color: green;
+    font-size: 30px;
+    font-weight: bold;
+    padding: 3px 10px 3px 13px;
+}
+
+.useit {
+   float: left; width: 340px; margin: 30px 40px 0pt 0pt;
+   padding-right: 20px;
+   /*height: 260px;*/
+}
+.useit-first {
+   border-right: 1px solid #e1e1e1;
+}
+span.title {font-weight: bold; letter-spacing: -1px; width: 100%; float: left; font-size: 30px; margin-bottom: 20px;}
+span.explain {font-size: 12px; margin-bottom: 12px;}
+a.bookmarklet {
+	/* Firefox 3.6+ */
+    background: -moz-linear-gradient(100% 100% 90deg, #e6e6e6, #f1f1f1);
+    /* Safari 4-5, Chrome 1-9 */ /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f1f1), to(#e6e6e6));
+    /* Safari 5.1+, Chrome 10+ */
+    background: -webkit-linear-gradient(#e6e6e6, #f1f1f1);
+    /* Opera 11.10+ */
+    background: -o-linear-gradient(#e6e6e6, #f1f1f1);
+    border: 1px solid #FFFFFF;
+    border-radius: 5px 5px 5px 5px;
+    box-shadow: 0 1px 3px #666666;
+    color: #319FBF;
+    font-weight: bold;
+    padding: 10px 15px;
+    text-decoration: none;
+    text-shadow: 0 1px 1px #FFFFFF;
+    margin: 0px 10px 20px 0;
+    float: left;
+    width: 200px;
+    font-size: 20px;
+	}
+
+a.bookmarklet span.text {
+    float: left;
+    margin-left: 10px;
+    position: relative;
+    top: 3px;
+}
+img.screengrab1 {float:left; margin-top: 20px; opacity:0.7;}
+img.screengrab {float: left; margin-right: 10px;}
+h3.confused {font-size:35px;}
+span.grey {color:#c1c1c1;}

templates/base.html

@@ -5,25 +5,7 @@
     <meta charset="utf-8">
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
     <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
-    <style>
-    body {
-    font-family: sans-serif;
-    background-attachment: fixed;
-    background-image: url(/static/images/rock.jpg);
-    background-repeat: no-repeat;
-    background-position: bottom right;
-    }
-    h1,h2,h3,h4 { font-family: 'Permanent Marker', cursive; }
-    h1 a { color:black; text-decoration:none; }
-    h1 a:hover { color:black; text-decoration:underline; }
-    header h1 { font-size:3.2em; }
-    /*footer { position: absolute; bottom: 0; }*/
-    footer { clear:left; margin-top:100px; }
-    footer p { text-align:center; font-family: sans-serif; color:#666; font-size:0.8em; }
-    .followsyou { color: green; }
-    .followsyounot { color: #333; }
-    h1 a .q { color:#999; }
-    </style>
+    <link href="/static/css/style.css" rel="stylesheet" type="text/css">
     {% block extra_head %}{% end %}
 </head>
 <body>
@@ -42,7 +24,7 @@ <h1><a href="/">Too Cool For Me<span class="q">?</span></a></h1>
 
 <footer>
 <p>Brought to you by <a href="http://www.peterbe.com/">Peter Bengtsson</a>
- (<a href="https://twitter.com/#!/peterbe">twitter</a>)
+ (<a href="https://twitter.com/#%21/peterbe">twitter</a>)
  &bull;
 <a href="https://github.com/peterbe/toocool">code on github</a>
 </p>

templates/home.html

@@ -1,33 +1,78 @@
 {% extends "base.html" %}
 
 {% block extra_header %}
-<h3>Service to allow you to find out who of the people you follow also follow you on <a href="https://twitter.com">Twitter</a></h3>
+<h3>Find out who on <a href="https://twitter.com/">Twitter</a> follows you back <span class="grey">(and who is just too cool for you)</span></h3>
 {% end %}
 
 
 {% block content %}
 
+{% if user %}
+<!-- LOGGED IN BLOCK -->
+<p class="login">
+	<span class="tick twitter-login">&#x2713;</span>
+	logged in as <strong>@{{ user }}</strong>
+	<span style="font-size:0.7em">(<a href="/auth/logout/">Log out</a>)</span>
+	<br/>
+	<a href="/test">Test the service manually</a>
+</p>
+<!-- END LOGGED IN BLOCK -->
+{% else %}
+
+<!-- NON-LOGGED IN BLOCK -->
+<p class="description">Ever wanted to know who in your twitter feed actually follows you back? <strong>Too Cool For Me</strong> is a simple tool which tells you quickly and easily who is and isn't following you back in your twitter feed. Try it out - login to your twitter account to start.</p>
+<p class="login">
+	<a href="/auth/twitter/" class="twitter-login">
+		<img src="/static/images/twitter-small.png"/>
+		<span class="text">Login with Twitter to start</span>
+	</a>
+	<span class="readonly">&laquo; Read-only authorisation, we cannot post to your account.
+	<br>Once you're logged in, we'll show you what to do.</span>
+</p>
+<!-- END NON-LOGGED IN BLOCK -->
+
+{% end %}
 
 {% if user %}
-<p><strong>{{ user }}</strong>
-<span style="font-size:0.7em">(<a href="/auth/logout/">Log out</a>)</span>
+<!-- GUIDE BLOCK - only show when logged in -->
+<div class="useit useit-first">
+<p><span class="title">1. Add the bookmarklet</span>
+<span class="explain"><strong>Drag-and-drop</strong> this link (bookmarklet) ...</span>
+<a class="bookmarklet" href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','{{ full_bookmarklet_url }}');document.body.appendChild(e)})())" onclick="return false">
+<img src="/static/images/twitter-small-mirrored.png">
+<span class="text">Too cool for me?</span></a>
 </p>
-<p><a href="/test">Test the service</a></p>
+<p style="clear:left">
+<span class="explain">...into your browser's bookmarks toolbar.</span>
+<img class="screengrab1" src="/static/images/screengrab.png">
 
-<p>Drag this link (bookmarklet) into your browser's bookmarks toolbar:
-<a style="font-weight:bold" onclick="return false"
-   href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','{{ full_bookmarklet_url }}');document.body.appendChild(e)})())">Too cool for me?</a>
 </p>
+</div>
 
-{% else %}
-<p>stranger<br>
-<a href="/auth/twitter/">Log in with Twitter</a>
-<span style="font-size:0.8em;font-weight:bold">(Read-only Twitter authentication)</span>
+<div class="useit">
+<p><span class="title">2. Visit <a href="https://twitter.com/">Twitter</a> <br>and click the bookmarklet!</span>
+<img class="screengrab" src="/static/images/screengrab2.png">
+<span class="explain">On twitter.com click the bookmarklet to see who in your feed is <strong>too cool for you!</strong>
+<br/><br/> It can take a few seconds to show up, so be patient!
+</span>
 </p>
+</div>
+
+
+<!--<p class="useit" style="border-right: none;"><span class="title">3. Tell your friends</span>
+<img src="/static/images/twitter.png">
+<img src="/static/images/facebook.png">
+<img src="/static/images/google.png">
+
+</p>-->
+
+<!-- END GUIDE BLOCK -->
 {% end %}
+<br clear="all">
+
 
 <div style="margin-top:60px">
-<h3>What the heck is this? Watch the screencast:</h3>
+<h3>Confused? Watch the screencast</h3>
 <iframe width="420" height="315" src="http://www.youtube.com/embed/wv-i54IhTfM?rel=0" frameborder="0" allowfullscreen></iframe>
 <p style="font-size:0.8em">Or, <a href="http://youtu.be/wv-i54IhTfM">watch it on YouTube</a></p>
 </div>