Fixed the title with CSS and adjusting the body through JS. Sidebar f…

…ix. footer in place. fork me ribbon. root link set to '/'. Other minor CSS/JS changes.
tutorials · Whitespace · Jun 24, 2012 · Jun 23, 2012 · Jun 23, 2012 · Jun 23, 2012
commit 646f39278e4810bfde4b91e3fede9b7444121d1e
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -34,10 +34,19 @@
   <body>
     <div class="wrapper">
       <header>
-        <h1><a href="http://tutorials.github.com">tutorials.github.com</a></h1>
-        <p>Decentralized polyglot tutorials</p>
-        <nav id="sidebar"></nav>
-        <div class="social footroom">
+        <div id="static_inner">
+          <h1><a href="/">tutorials.github.com</a></h1>
+          <p>Decentralized polyglot tutorials</p>
+          <nav id="sidebar"></nav>
+        </div>
+      </header>
+      <section id="main">
+        {{ content }}
+      </section>
+      <footer>
+        <div class="less_footroom"><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></div>
+
+        <div class="social line_bottom">
           <!-- AddThis Button BEGIN -->
           <div class="addthis_toolbox addthis_default_style ">
             <a class="addthis_button_facebook_like ftg" fb:like:layout="button_count"></a>
@@ -48,18 +57,12 @@ <h1><a href="http://tutorials.github.com">tutorials.github.com</a></h1>
           <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fe63cf9228607aa"></script>
           <!-- AddThis Button END -->
         </div>
-        <ul id="download">
-          <li><a href="https://github.com/tutorials/tutorials.github.com/zipball/master">Download <strong>ZIP File</strong></a></li>
-          <li><a href="https://github.com/tutorials/tutorials.github.com/tarball/master">Download <strong>TAR Ball</strong></a></li>
-          <li><a href="https://github.com/tutorials/tutorials.github.com">Fork On <strong>GitHub</strong></a></li>
-        </ul>
-      </header>
-      <section id="main">
-        {{ content }}
-      </section>
-      <footer>
-        <p>This project is maintained by <a href="https://github.com/Whitespace">Whitespace</a></p>
-        <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
+        <div class="less_footroom"><small>This project is maintained by <a href="https://github.com/Whitespace">Whitespace</a></small></div>
+        <div class="social_follow">
+          <a href="https://twitter.com/githubtutorials" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @githubtutorials</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>
+        <a href="https://github.com/tutorials/tutorials.github.com" class="ribbon"><img class="fork" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
       </footer>
     </div>
     <!--[if !IE]><script>fixScale(document);</script><!--<![endif]-->

diff --git a/javascripts/sidebar.js b/javascripts/sidebar.js
@@ -54,16 +54,27 @@ $(function() {
   // Draw the sidebar
   redraw();
 
-  // sticky header
-  var $title = $('section#main h1');
-  var headOffset = 50;
-  $(window).scroll(function(){
-    if( $(window).scrollTop() > headOffset ) {
-      $title.addClass("fixed_top");
-    } else {
-      $title.removeClass("fixed_top");
+  //Fix sidebar
+  function sidebar_fix() {
+    var header_height = $('header').height(),
+        footer_height = $('footer').height(),
+        window_height = $(window).height(),
+        $nav_sidebar  = $('nav#sidebar'),
+        sidebar_height= $nav_sidebar.height(),
+        difference = window_height - (header_height + footer_height);
+    if (difference>0) {
+      $nav_sidebar.height(sidebar_height+difference);
     }
-  });
+  }
+  sidebar_fix();
+  $(window).resize(function() { console.log('scroll'); sidebar_fix() });
+
+  // title fix
+  var $section = $('section#main'),
+      $title = $section.find('h1'),
+      title_height = $title.height(),
+      set_padding = title_height + 20;
+  $section.css('paddingTop',set_padding);
 
   // Hide tutorials if the user clicks on a facet
   $("nav li").live("click", function(e) {
@@ -135,4 +146,4 @@ function update_sidebar() {
     counts[key] = _(val).keys().length;
   });
   visible_counts = counts;
-};
+};
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
@@ -1,10 +1,11 @@
 @import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
 
 body {
-  padding:50px;
   font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
   color:#777;
   font-weight:300;
+  margin:0px;
+  padding:0px;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -96,8 +97,15 @@ img {
 }
 
 header {
-  width:270px;
+  width:250px;
   float:left;
+  position:fixed;
+  z-index:2;
+  background:#fff;
+  -moz-box-shadow: 0px 5px 10px #FFF;
+  -webkit-box-shadow: 0px 5px 10px #FFF;
+  box-shadow: 0px 5px 10px #FFF;
+  padding-top:10px;
 }
 
 #download {
@@ -158,6 +166,11 @@ strong {
   color:#222;
 }
 
+#sidebar{
+  overflow-y: scroll;
+  height: 400px;
+}
+
 #sidebar ul h3 {
   margin: 0;
 }
@@ -183,36 +196,53 @@ strong {
   margin: 20px 0 0 0;
 }
 
+.less_headroom{
+  margin: 10px 0 0 0;
+}
+
 .footroom{
   margin: 0 0 20px;
 }
 
+.less_footroom{
+  margin: 0 0 10px;
+}
+
+.line_bottom{
+ border-bottom: 1px dotted #ccc;
+ margin-bottom:10px;
+}
+
 div.social a.ftg{
-  width:85px;
+  width:79px;
 }
 
 div.tutorial p.about span{
   margin-right:5px;
 }
 
 section#main {
-  width:560px;
+  width:580px;
   float:right;
-  padding-bottom:50px;
+  padding:50px 0;
 }
 
-section#main h1.fixed_top{
+section#main h1{
   position:fixed;
   top:0px;
-  z-index:100;
-  width: 560px;
+  z-index:1;
+  width: 580px;
   padding: 10px 0;
   -moz-box-shadow: 0px 5px 10px #FFF;
   -webkit-box-shadow: 0px 5px 10px #FFF;
   box-shadow: 0px 5px 10px #FFF;
   background:#FFF;
 }
 
+a.ribbon img.fork {
+  position: fixed; top: 0; left: 0; border: 0;
+}
+
 small {
   font-size:11px;
 }
@@ -225,9 +255,11 @@ hr {
 }
 
 footer {
-  width:270px;
+  width:250px;
   float:left;
-  bottom:50px;
+  bottom:10px;
+  position:fixed;
+  z-index:1;
 }
 
 @media print, screen and (max-width: 960px) {