Added syntax highlighting

diff --git a/_posts/2012-07-24-yagni-and-javascript-why-you-should-avoid-over-engineering.md b/_posts/2012-07-24-yagni-and-javascript-why-you-should-avoid-over-engineering.md
index 3decc74..04ce053 100644
--- a/_posts/2012-07-24-yagni-and-javascript-why-you-should-avoid-over-engineering.md
+++ b/_posts/2012-07-24-yagni-and-javascript-why-you-should-avoid-over-engineering.md
@@ -44,6 +44,7 @@ again, I don't prescribe to the fact of over-engineering based on assumptions.
 There are quite a lot of posts about using preprocessors as part of your JavaScript toolchain. In this post,
 I'll focus on using the &quot;C Preprocessor&quot;. Here's a simple example.

+{% highlight javascript %}
     function hello(name) {
         var now      = new Date(),
             hour     = now.getHours(),
@@ -69,17 +70,20 @@ I'll focus on using the &quot;C Preprocessor&quot;. Here's a simple example.

         console.log(greeting + name);
     }
+{% endhighlight %}

 Don't get surprised, JavaScript doesn't yet have preprocessor macros, but you can run this through the
 C preprocessor and generate your variants.

 If you are running GNU/Linux, or any Unix-like operating system including Mac OS X, use:

-    cpp -C -E -P hello.js
+{% highlight bash %}
+    shell$ cpp -C -E -P hello.js
+{% endhighlight %}

 On Windows, assuming you have the Microsoft Visual C++ (Express Edition), you can run:

-    cl /C /EP hello.js
+    C:\> cl /C /EP hello.js

 If you need the feature, use `-DPERSONAL_GREET` and that's it.
UI overhaul

diff --git a/_config.yml b/_config.yml
index 629a529..f54e2e8 100644
--- a/_config.yml
+++ b/_config.yml
@@ -8,8 +8,8 @@ jsPath     : /assets/js
 authorName : "Gopal Venkatesan"
 authorFullName : "Gopalarathnam Venkatesan"
 authorUrl  : http://g13n.me
-siteName   : "Gopal Venkatesan (a.k.a g13n) Blog"
-siteDesc   : "My technology blog."
+branding   : "Gopal Venkatesan"
+siteDesc   : "Computing Blog"
 rssFeed    : http://feeds.feedburner.com/g13n
 srcPath    : https://github.com/g13n/g13n.github.io/blob/master/_posts

diff --git a/_includes/main_nav.html b/_includes/main_nav.html
index 11adfb7..8bfdae2 100644
--- a/_includes/main_nav.html
+++ b/_includes/main_nav.html
@@ -3,19 +3,16 @@
     <ul>
     {% if paginator.next_page %}
         <li class="nav-previous">
-            <a href="{{ site.path }}page{{ paginator.next_page }}" rel="prev">
-            <span class="meta-nav">&larr;</span> Older Posts</a>
+            <a href="{{ site.path }}page{{ paginator.next_page }}" rel="prev">Older Posts</a>
         </li>
     {% endif %}
     {% if paginator.previous_page %}
         <li class="nav-next">
         {% assign url = {{ site.path }}page{{ paginator.previous_page }} %}
         {% if paginator.previous_page == 1 %}
-            <a href="{{ site.path }}" rel="next">
-            Newer Posts <span class="meta-nav">&rarr;</span></a>
+            <a href="{{ site.path }}" rel="next">Newer Posts</a>
         {% else %}
-            <a href="{{ site.path }}page{{ paginator.previous_page }}" rel="next">
-            Newer Posts <span class="meta-nav">&rarr;</span></a>
+            <a href="{{ site.path }}page{{ paginator.previous_page }}" rel="next">Newer Posts</a>
         {% endif %}
         </li>
     {% endif %}
diff --git a/_includes/post_nav.html b/_includes/post_nav.html
index 9e6c9ec..7a0e57d 100644
--- a/_includes/post_nav.html
+++ b/_includes/post_nav.html
@@ -1,15 +1,5 @@
 <nav class="clear-fix">
     <ul>
-        {% if page.previous.url %}
-        <li class="nav-previous">
-            {% if site.path == '/' %}
-            <a href="{{ page.previous.url }}" rel="prev">
-            {% else %}
-            <a href="{{ site.path }}{{ page.previous.url }}" rel="prev">
-            {% endif %}
-            {{ page.previous.title }}</a>
-        </li>
-        {% endif %}
         {% if page.next.url %}
         <li class="nav-next">
             {% if site.path == '/' %}
@@ -20,5 +10,15 @@
             {{ page.next.title }}</a>
         </li>
         {% endif %}
+        {% if page.previous.url %}
+        <li class="nav-previous">
+            {% if site.path == '/' %}
+            <a href="{{ page.previous.url }}" rel="prev">
+            {% else %}
+            <a href="{{ site.path }}{{ page.previous.url }}" rel="prev">
+            {% endif %}
+            {{ page.previous.title }}</a>
+        </li>
+        {% endif %}
     </ul>
 </nav>
diff --git a/_layouts/default.html b/_layouts/default.html
index 5127d1a..2106914 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -4,11 +4,11 @@
         <meta charset="UTF-8" />
         <title>{% if page.single %}{{ page.title }} | {%endif %}{{ site.siteName }}</title>
         <meta name="author" content="{{ site.authorName }}" />
-        <link rel="alternate" type="application/rss+xml" title="{{ site.siteName }}" href="{{ site.rssFeed }}" />
-        <link href="{{ site.cssPath }}screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
-        <link href="{{ site.cssPath }}print.css" media="print" rel="stylesheet" type="text/css" />
+        <link rel="alternate" type="application/rss+xml" title="{{ site.branding }}" href="{{ site.rssFeed }}" />
+        <link href="{{ site.cssPath }}/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
+        <link href="{{ site.cssPath }}/print.css" media="print" rel="stylesheet" type="text/css" />
         <!--[if IE]>
-        <link href="{{ site.cssPath }}ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+        <link href="{{ site.cssPath }}/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
         <![endif]-->
         <link href="{{ site.cssPath }}/application.css" rel="stylesheet" type="text/css" />
         <link href="{{ site.cssPath }}/highlight.css" rel="stylesheet" type="text/css" />
@@ -17,17 +17,11 @@
         {% include analytics.html %}
     </head>
     <body>
-        <header id="banner">
-            {% if page.single %}
-            <div class="site-header">
-                <a href="{{ site.path }}" title="{{ site.siteName }}" rel="home">{{ site.siteName }}</a>
-            </div>
-            {% else %}
-            <h1>
-                <a href="{{ site.path }}" title="{{ site.siteName }}" rel="home">{{ site.siteName }}</a>
-            </h1>
-            {% endif %}
-            <div class="site-description">{{ site.siteDesc }}</div>
+        <header id="branding">
+            <hgroup role="banner">
+                <h1 id="site-title"><a href="{{ site.path }}" title="{{ site.branding }}" rel="home">{{ site.branding }}</a></h1>
+                <h2 id="site-description">{{ site.siteDesc }}</h2>
+            </hgroup>
         </header>
         <section class="clear-fix">
             {{ content }}
diff --git a/assets/css/application.css b/assets/css/application.css
index acfbf89..bc50c24 100644
--- a/assets/css/application.css
+++ b/assets/css/application.css
@@ -1 +1 @@
-a{text-decoration:none}article{margin-bottom:2em}blockquote{border-radius:0.5em;display:inline-block;margin-bottom:0;margin-left:0.5em;margin-right:0;margin-top:0;padding:0.5em}body{color:#404040;font-family:"Palatino Linotype",Palatino,Georgia,serif;line-height:1.5;min-height:100%}em{font-style:normal;font-weight:900}footer{font-style:italic}footer ul{list-style-type:none}h1,h2,.site-header,header{font-size:140%;font-weight:900;margin:0}h2{font-size:110%;margin-bottom:0.25em}nav ul{list-style-type:none;margin-bottom:0;margin-left:0;margin-right:0;margin-top:2em;padding:0}section{background:#fff;margin:2em}article,header,footer,section{display:block}#about-bkgd{font-size:75%;margin-bottom:1em !important;text-align:right !important}#banner{background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #ffffff));background-image:-webkit-linear-gradient(#eeeeee,#ffffff);background-image:-moz-linear-gradient(#eeeeee,#ffffff);background-image:-o-linear-gradient(#eeeeee,#ffffff);background-image:linear-gradient(#eeeeee,#ffffff);padding:0.5em}#banner a{color:#aaa}#copyright{background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc));background-image:-webkit-linear-gradient(#ffffff,#cccccc);background-image:-moz-linear-gradient(#ffffff,#cccccc);background-image:-o-linear-gradient(#ffffff,#cccccc);background-image:linear-gradient(#ffffff,#cccccc);color:#aaa;font-size:75%}#copyright a{color:#aaa}#copyright li{margin:0.3em;text-align:center}#copyright ul{list-style-type:none;margin-bottom:0;margin-left:20%;margin-right:20%;margin-top:0.5em;padding:0}#copyright .disclaimer{text-align:left}#disqus-thread{width:85%}.ad.sky{margin-top:2em;position:absolute;right:35px;top:70px}.clear-fix{zoom:1}.clear-fix:after{clear:both;content:".";display:block;height:0;visibility:hidden}.entry-link{margin-bottom:0.5em;margin-left:0;margin-right:0;margin-top:0.5em}.entry-link:after{content:" | "}.entry-meta{background:#aaa;border-radius:0.5em;box-shadow:2px 2px 2px #5d5d5d;list-style-type:none;margin-bottom:0;margin-left:-0.5em;margin-right:0;margin-top:0;padding:0.5em}.entry-meta-item{font-size:85%;margin:0.5em}.entry-tag{display:inline;font-size:85%;font-style:italic;padding-bottom:0.1em;padding-left:0.2em;padding-right:0.2em;padding-top:0.1em}.entry-tags ul{display:inline;margin:0;padding:0}.main-nav{margin-bottom:1em;margin-left:2em;margin-right:2em;margin-top:1em;padding:0.5em}.main-nav ul{margin:0;padding:0}.meta,.entry-link,.main .entry-date,.teaser .entry-date,.teaser .entry-title{float:left;font-size:75%;font-weight:700}.nav-previous{float:right;margin-right:11em}.nav-next{float:left}.post{min-height:610px;width:85%}.site-description{color:#aaa;font-size:70%;font-style:italic}.site-header{color:#aaa}.teaser{margin-bottom:0.5em}.main .entry-date,.teaser .entry-date{margin-bottom:0.5em;margin-left:0.5em;margin-right:0;margin-top:0.5em}.teaser .entry-title{font-size:85%}
+html,body,div,span,applet,object,iframe,h1,h2,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}a{text-decoration:none}article{margin-bottom:2em}blockquote{border-radius:0.5em;display:inline-block;margin-bottom:0;margin-left:0.5em;margin-right:0;margin-top:0;padding:0.5em}body{color:#404040;font-family:"Palatino Linotype",Palatino,Georgia,serif;line-height:1.5;min-height:100%;margin:0}code,pre{font-family:Inconsolata,Menlo,monospace}em{font-style:normal;font-weight:900}footer ul{list-style-type:none}h1,h2,header{font-size:140%;font-weight:900;margin:0}h2{font-size:110%;margin-bottom:0.25em}nav ul{list-style-type:none;margin-bottom:0;margin-left:0;margin-right:0;margin-top:2em;padding:0}p{margin:1em 0}section{background:#fff;margin:2em}article,header,footer,section{display:block}#about-bkgd{font-size:75%;margin-bottom:1em !important;text-align:right !important}#branding{background:-webkit-gradient(linear, to bottom, to top, color-stop(0%, #fefefe), color-stop(50%, #efeded), color-stop(100%, #e5e2e2));background:-webkit-linear-gradient(to bottom, #fefefe 0%,#efeded 50%,#e5e2e2 100%);background:-moz-linear-gradient(to bottom, #fefefe 0%,#efeded 50%,#e5e2e2 100%);background:-o-linear-gradient(to bottom, #fefefe 0%,#efeded 50%,#e5e2e2 100%);background:linear-gradient(to bottom, #fefefe 0%,#efeded 50%,#e5e2e2 100%);color:#a6a6a6;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;padding:0.5em}#branding a{color:#a6a6a6;text-transform:uppercase}#branding h1,#branding h2{font-size:1.5em;font-weight:100}#branding h2{float:right;font-size:100%;font-weight:bold;margin:-1.9em 0;text-align:right;width:300px}#copyright{border-top:1px solid #ddd;color:#a6a6a6;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;font-size:11px;padding-top:8px}#copyright *{color:#a6a6a6;margin:0;padding:0}#copyright li{text-align:center}#copyright ul{list-style-type:none;margin-bottom:0;margin-left:20%;margin-right:20%;margin-top:0.5em;padding:0}#copyright .disclaimer{text-align:left}#disqus-thread{width:85%}.ad.sky{margin-top:2em;position:absolute;right:35px;top:70px}.clear-fix{zoom:1}.clear-fix:after{clear:both;content:".";display:block;height:0;visibility:hidden}.entry-link{margin-bottom:0.5em;margin-left:0;margin-right:0;margin-top:0.5em}.entry-link:after{content:" | "}.entry-meta{background:#a6a6a6;border-radius:0.5em;box-shadow:2px 2px 2px #5a5a5a;list-style-type:none;margin-bottom:0;margin-left:-0.5em;margin-right:0;margin-top:0;padding:0.5em}.entry-meta-item{font-size:85%;margin:0.5em}.entry-tag{display:inline;font-size:85%;font-style:italic;padding-bottom:0.1em;padding-left:0.2em;padding-right:0.2em;padding-top:0.1em}.entry-tags ul{display:inline;margin:0;padding:0}.main-nav{margin-bottom:1em;margin-left:2em;margin-right:2em;margin-top:1em;padding:0.5em}.main-nav ul{margin:0;padding:0}.meta,.entry-link,.main .entry-date,.teaser .entry-date,.teaser .entry-title{float:left;font-size:75%;font-weight:700}.nav-previous{float:left;margin-right:11em}.nav-previous:before{content:"\21e0"}.nav-next{float:right}.nav-next:after{content:"\21e2"}.post{min-height:610px;width:85%}.teaser{margin-bottom:0.5em}.main .entry-date,.teaser .entry-date{margin-bottom:0.5em;margin-left:0.5em;margin-right:0;margin-top:0.5em}.teaser .entry-title{font-size:85%}
diff --git a/lib/sass/_base.scss b/lib/sass/_base.scss
index 5d993c3..e6de80e 100644
--- a/lib/sass/_base.scss
+++ b/lib/sass/_base.scss
@@ -1,4 +1,10 @@
-$font-color   : #404040;
-$font         : "Palatino Linotype", Palatino, Georgia, serif;
-$line-height  : 1.5;
-$un-important : #aaa;
+$base-font-color       : #404040;
+$base-font             : "Palatino Linotype", Palatino, Georgia, serif;
+$base-line-height      : 1.5;
+$banner-font           : "Helvetica Neue", Arial, Helvetica, sans-serif;
+$footer-border         : 1px solid rgb(221, 221, 221);
+$footer-font           : "Helvetica Neue", Arial, Helvetica, sans-serif;
+$footer-font-size      : 11px;
+$site-head-font-size   : 1.5em;
+$site-head-font-weight : 100;
+$un-important          : rgb(166, 166, 166);
diff --git a/lib/sass/application.scss b/lib/sass/application.scss
index 69b24af..5bfae1d 100644
--- a/lib/sass/application.scss
+++ b/lib/sass/application.scss
@@ -1,5 +1,6 @@
 @import "base";
-@import "compass";
+@import "compass/reset";
+@import "compass/css3";

 a {
     text-decoration: none;
@@ -24,10 +25,15 @@ blockquote {
 }

 body {
-    color: $font-color;
-    font-family: $font;
-    line-height: $line-height;
+    color: $base-font-color;
+    font-family: $base-font;
+    line-height: $base-line-height;
     min-height: 100%;
+    margin: 0;
+}
+
+code, pre {
+    font-family: Inconsolata, Menlo, monospace;
 }

 em {
@@ -38,7 +44,6 @@ em {
 }

 footer {
-    font-style: italic;
     ul {
         list-style-type: none;
     }
@@ -69,6 +74,10 @@ nav ul {
     padding: 0;
 }

+p {
+    margin: 1em 0;
+}
+
 section {
     background: #fff;
     margin: 2em;
@@ -84,26 +93,50 @@ article, header, footer, section {
     text-align: right !important;
 }

-#banner {
-    @include background-image(linear-gradient(#eee, white));
+#branding {
+    @include background(linear-gradient(to bottom, rgb(254, 254, 254) 0, rgb(239, 237, 237) 50%, rgb(229, 226, 226) 100%));
+    color: $un-important;
+    font-family: $banner-font;
     padding: 0.5em;
-}

-#banner a {
-    color: $un-important;
+    a {
+        color: $un-important;
+        text-transform: uppercase;
+    }
+
+    h1 {
+        font: {
+            size: $site-head-font-size;
+            weight: $site-head-font-weight;
+        }
+    }
+
+    h2 {
+        float: right;
+        font: {
+            size: 100%;
+            weight: bold;
+        }
+        margin: -1.9em 0;
+        text-align: right;
+        width: 300px;
+    }
 }

-    @include background-image(linear-gradient(white, #ccc));
+    border-top: $footer-border;
     color: $un-important;
     font: {
-        size: 75%;
+        family: $footer-font;
+        size: $footer-font-size;
     }
-    a {
+    padding-top: 8px;
+    * {
         color: $un-important;
+        margin: 0;
+        padding: 0;
     }
     li {
-        margin: 0.3em;
         text-align: center;
     }
     ul {
@@ -221,12 +254,18 @@ article, header, footer, section {
 }

 .nav-previous {
-    float: right;
+    float: left;
     margin-right: 11em;
+    &:before {
+        content: "\21e0";
+    }
 }

 .nav-next {
-    float: left;
+    float: right;
+    &:after {
+        content: "\21e2";
+    }
 }

 .post {
@@ -234,19 +273,6 @@ article, header, footer, section {
     width: 85%;
 }

-.site-description {
-    color: $un-important;
-    font: {
-        size: 70%;
-        style: italic;
-    }
-}
-
-.site-header {
-    @extend h1;
-    color: $un-important;
-}
-
 .teaser {
     margin: {
         bottom: 0.5em;