new buttons, moved the footer inside the wrapper and added little tex…

…t balloons.

_layouts/default.html

@@ -43,15 +43,17 @@ <h1>
     </div>
     <h2>{{ page.title }}</h2>
     {{ content }}
+    <div id="footer">
+      <a id="webbynode" href="http://webbynode.com">
+        <img src="/images/webbynode.png"/> <span class="balloon">awesome hosting.</span>
+      </a>
+      <a id="feed" href="http://feeds.feedburner.com/jeffkreeftmeijer">
+        <span class="balloon">subscribe!</span> <img src="/images/feed.png"/>
+      </a>
+      <hr/>
+    </div>
   </div>
-  <div id="footer">
-    <a id="webbynode" href="http://webbynode.com">
-      <img src="/images/webbynode.png"/>
-    </a>
-    <a id="feed" href="http://feeds.feedburner.com/jeffkreeftmeijer">
-      <img src="/images/feed.png"/>
-    </a>
-  </div>
+
 
   <script src="/js/jquery.js" type="text/javascript"></script>
   <script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
@@ -79,6 +81,9 @@ <h2>{{ page.title }}</h2>
 	  (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
 	}());
 	</script>
-
+
+	<script stype="text/javascript">
+	  $('#tweet').attr('href', 'http://twitter.com/share?url=' + escape(document.location) + '&via=jkreeftmeijer&text=' + escape(document.title.split(' - ')[0]));
+	</script>
 </body>
 </html>

_layouts/post.html

@@ -6,9 +6,18 @@
   This is a guest post written by <a href="http://twitter.com/{{ page.author.twitter }}" title="{{ page.author.full}}">@{{ page.author.twitter }}</a>. {{ page.author.description }}
 {% endif %}
 
-<p class="article_date date">{{page.date | date_to_string}}</p>
+<p class="article_date date">
+  {{page.date | date_to_string}}
+</p>
 
-<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="jkreeftmeijer">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+<span id="article_buttons">
+  <a id="tweet" target="_blank">
+    <span class="balloon">tweet!</span> <img src="/images/tweet.png"/>
+  </a>
+  <a href="http://feeds.feedburner.com/jeffkreeftmeijer">
+    <span class="balloon">subscribe!</span> <img src="/images/feed.png"/> 
+  </a>
+</span>
 
 <hr/>
 

css/screen.css

@@ -38,6 +38,10 @@ a
   text-decoration:none;
 }
 
+a img{
+  vertical-align: middle;
+}
+
 span#eighty{
   color:#007236;
 }
@@ -63,7 +67,7 @@ div#wrapper
   color:#222;
   font-size:15px;
   line-height:150%;
-  margin:50px auto 0px auto;
+  margin:50px auto;
   opacity:0.9px;
   padding:20px;
   text-shadow:0 1px 0 #fff;
@@ -101,18 +105,13 @@ div#header li
 
 div#footer
 {
-  margin: 10px auto 50px auto;
-  width: 490px;
+  margin: 50px 0 0 0;
 }
 
 div#footer a#feed{
   float: right;
 }
 
-div#footer img{
-  vertical-align: middle;
-}
-
 div.post
 {
   margin:50px 0 0;
@@ -255,7 +254,32 @@ p.article_date{
   float:left;
 }
 
-iframe.twitter-share-button{
+span#article_buttons{
   margin:20px 0;
   float:right;
+  text-align: right;
+}
+
+span#article_buttons a{
+  display:block;
+}
+
+a:hover span.balloon{
+  display: inline;
+}
+
+span.balloon{
+  background-color: #222;
+  color: #fff;
+  font-size: 10px;
+  padding:3px 5px;
+  -moz-border-radius:5px;
+  -moz-box-shadow:0 -1px 0 #444;
+  -webkit-border-radius:5px;
+  -webkit-box-shadow:0 -1px 0 #444;
+  text-shadow:0 1px 0 #000;
+  font-weight: 500;
+  margin: 0 5px;
+  display:none;
+  line-height: 16px;
 }