Done with post page

content/css/_bootstrap.scss

@@ -1052,6 +1052,7 @@ pre code {
   }
 }
 
+/*
 @media (min-width: 992px) {
   .container {
     max-width: 940px;
@@ -1205,7 +1206,9 @@ pre code {
     margin-left: 91.66666666666666%;
   }
 }
+*/
 
+/*
 @media (min-width: 1200px) {
   .container {
     max-width: 1140px;
@@ -1359,6 +1362,7 @@ pre code {
     margin-left: 91.66666666666666%;
   }
 }
+*/
 
 table {
   max-width: 100%;
@@ -5580,4 +5584,4 @@ td.visible-print {
   td.hidden-print {
     display: none !important;
   }
-}
+}

content/css/screen.sass

@@ -3,16 +3,13 @@
 @import "pygments"
 
 $text-color: #696969
-$focus-color: #ff0000
+$focus-color: $peterriver
 
 body
   color: $text-color
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
   font-weight: 400
 
-.container
-  width: 720px
-
 a, a:hover, a:active, a:visited
   color: $focus-color
 
@@ -31,7 +28,7 @@ h1, h2, h3, h4, h5, h6
     display: inline-block
 
   h1
-    padding-right: 0.4em
+    padding-right: 0.8em
 
     a
       color: darken($text-color, 15%)
@@ -44,29 +41,65 @@ h1, h2, h3, h4, h5, h6
 
     li
       display: inline-block
-      padding-right: 0.4em
+      padding-right: 0.8em
+
+  .align-right
+    text-align: right
+
+  ol.social
+    margin-top: 15px
+
+    li
+      padding-right: 0
+      padding-left: 0.4em
+
+      a
+        font-size: 1.2em
+        color: $focus-color
 
 #main
-  #content
-
   #adpacks
     text-align: right
     font-size: 0.8em
 
-  #posts
+    .bsa_it_i
-    .post
+      float: right
+      display: block
+      width: 130px
+      margin-bottom: 10px
+
+    .bsa_it_t,
+    .bsa_it_d
+      display: inline-block
+      clear: right
+      text-align: right
+      width: 130px
+      margin-bottom: 10px
+
+    .bsa_it_t
+      color: darken($text-color, 30%)
+
+    .bsa_it_d
+      color: $text-color
+
+    .bsa_it_p
+      display: none
+
+    a#bsap_aplink,
+      display: inline
+      color: lighten($text-color, 30%)
+
+  .post
+    h1.title
+      margin-top: 0
       margin-bottom: 20px
 
-      h2.title
+      a
-        margin-top: 0
+        color: darken($text-color, 15%)
 
-        a
+    p.meta
-          color: darken($text-color, 15%)
+      margin-top: 20px
-
+      margin-bottom: 0
-      .date
-        margin-bottom: 0
-
-      .summary
 
 #footer
   ul.tla

layouts/default.haml

@@ -19,31 +19,43 @@
     %link(href="https://ariejan.net/rss.xml" rel="alternate" type="application/rss+xml" title="RSS")
 
     %link(href="/css/screen.css" rel="stylesheet" type="text/css" media="screen")
+    %link(href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet")
 
     %title= "#{@item[:title]} — ariejan de vroom"
 
   %body
     .container
       .row#header
-        .col-sm-12
+        .col-sm-9
           %h1
             %a(href="/") ariejan <span>de vroom</span>
           %ol
-            %li= link_to "home", "/"
             %li= link_to "projects", "/projects/"
             %li= link_to "craftsmanship", "/craftsmanship/"
             %li= link_to "talks", "/talks/"
             %li= link_to "about", "/about/"
 
-      .row#main
+        .col-sm-3.align-right.hidden-xs
-        .col-sm-9
+          %ol.social
-          #content
+            %li
-            = yield
+              %a(href="https://github.com/ariejan")
+                %i.icon-github
 
-        .col-sm-3
+            %li
-          #adpacks
+              %a(href="https://twitter.com/ariejan")
-            .bsarocks.bsap_a40a34b3f2d124df05e7c20ddaa79bd8#bsap_1287881
+                %i.icon-twitter
-            %a(href="http://adpacks.com" id="bsap_aplink") via Ad Packs
+
+            %li
+              %a(href="http://www.linkedin.com/in/ariejan")
+                %i.icon-linkedin
+
+            %li
+              %a(href="https://ariejan.net/rss.xml")
+                %i.icon-rss
+
+      .row#main
+        .col-sm-12
+          = yield
 
       .row#footer
         .col-sm-12
@@ -57,15 +69,6 @@
               <li><a href="http://www.rankexecutives.com/white-hat-seo">White Hat SEO</a></li>
               <li><a href="http://www.healthy-dietplans.com/coupons/medifast-promo-codes/">Medifast Coupon Code</a></li>
 
-    -#
-            %nav#social
-              %ol
-                %li= link_to "github", "https://github.com/ariejan"
-                %li= link_to "twitter", "https://twitter.com/ariejan"
-                %li= link_to "linkedin", "http://www.linkedin.com/in/ariejan"
-                %li= link_to "RSS", "https://ariejan.net/rss.xml"
-                %li= link_to "Contact", "mailto:ariejan@ariejan.net"
-
     :javascript
       (function(){
         var bsa = document.createElement('script');

layouts/post.haml

@@ -1,20 +1,27 @@
-%article.post
+.row
-  %section#meta
+  .col-sm-12
-    %h1= item[:title]
+    .post
+      %p.meta= get_pretty_date(item)
+      %h1.title= item[:title]
 
-    %p.meta
+.row
-      Written by <strong>Ariejan de Vroom</strong> on #{get_pretty_date(item)}.
+  .col-sm-9
+    .post
+      .body
+        = yield
 
-  %section#body
+      #comments
-    = yield
+        #disqus_thread
 
-  %section#comments
+      :javascript
-    #disqus_thread
+        var disqus_url = "#{url_for(item)}";
+        (function() {
+            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+            dsq.src = '//ariejannet.disqus.com/embed.js';
+            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+        })();
 
-  :javascript
+  .col-sm-3.hidden-xs
-    var disqus_url = "#{url_for(item)}";
+    #adpacks
-    (function() {
+      .bsarocks.bsap_a40a34b3f2d124df05e7c20ddaa79bd8#bsap_1287881
-        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+      %a(href="http://adpacks.com" id="bsap_aplink") via Ad Packs
-        dsq.src = '//ariejannet.disqus.com/embed.js';
-        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-    })();