add follow button and back to the top

_includes/head.html

@@ -12,10 +12,17 @@
 </script>
 
 <script src="/js/jquery.timeago.js" type="text/javascript"></script>
+<script src="/js/waypoints.min.js" type="text/javascript"></script>
 
 <script type="text/javascript">
   $(function() {
       $('time.timeago').timeago();
+      $comment_section = $('.comment-section');
+      if ($comment_section.length) {
+        $comment_section.waypoint( function(e, direction) {
+            $('#follow-me').fadeToggle();
+          }, {offset: '100'});
+      }
   });
 </script>
 

_includes/top.html

@@ -0,0 +1,14 @@
+<a class="top" style="display:none" href="#" title="Back to top">&uarr; back to top</a>
+<script type="text/javascript">
+  $(function() {
+      $('.top').click(function(e) {
+        e.preventDefault();
+        $('body').animate({
+        scrollTop: 0
+        }, 2000);
+      });
+      $('#menu').waypoint( function(e, direction) {
+          $('.top').fadeToggle();
+      });
+  });
+</script>

_layouts/blog.html

@@ -38,6 +38,12 @@ <h1>{{page.title}}</h1>
               </div>
               </article>
             </div>
+            {% include top.html %}
+            <div id="follow-me" style="display:none">
+              <p>Like the post?</p>
+              <a href="https://twitter.com/lucapette" class="twitter-follow-button" data-show-count="false">Follow @lucapette</a>
+              <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+            </div>
             {% include footer.html %}
           </div>
         </div>

css/style.css

@@ -10,13 +10,19 @@ li {
 code {
   background-color: whiteSmoke !important;
 }
+h1 {
+  margin-bottom: 10px;
+}
 .container {
   margin-top: 1em;
 }
 .myself p {
   font-size: 1.2em;
   line-height: 1.7em;
 }
+.content {
+  margin-top: 10px;
+}
 .content p {
   line-height: 1.5;
 }
@@ -104,3 +110,18 @@ ul#menu li.current a {
   text-decoration: none;
   text-shadow: 0 0 0.5em #444;
 }
+#follow-me {
+  position: fixed;
+  left: 20px;
+  top: 20%;
+  width: 200px;
+}
+.top {
+  position:fixed;
+  right: 15px;
+  bottom: 15px;
+  width: 100px;
+}
+.top.hidden {
+  display:none;
+}