Proper grid/rhythm

content/css/_layout.sass

@@ -1,24 +1,37 @@
+$max-width: em(1280)
+
 $mobile: new-breakpoint(max-width 480px)
 
-section#page
+section#wrapper
   @include outer-container
+  border: rhythm() solid transparent
 
-  header
-    @include span-columns(12)
-    @include rhythm
+  @include media($mobile)
+    border: rhythm(0.5) solid transparent
 
-  section#main
-    section#content
-      @include span-columns(8)
+  section#page
+    @include outer-container
 
-      @include media($mobile)
-        @include span-columns(12)
+    padding: rhythm(2)
 
-    aside#sidebar
-      @include span-columns(4)
+    @include media($mobile)
+      padding: rhythm(1)
 
-      @include media($mobile)
-        @include span-columns(12)
+    header
+      @include span-columns(12)
 
-  footer
-    @include span-columns(12)
+    section#main
+      section#content
+        @include span-columns(9)
+
+        @include media($mobile)
+          @include span-columns(12)
+
+      aside#sidebar
+        @include span-columns(3)
+
+        @include media($mobile)
+          @include span-columns(12)
+
+    footer
+      @include span-columns(12)

layouts/default.haml

@@ -32,39 +32,40 @@
         (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
       })();
 
-    %section#page
-      %header#title
-        %h1= link_to "ariejan.net", "https://ariejan.net/"
+    %section#wrapper
+      %section#page
+        %header#title
+          %h1= link_to "ariejan.net", "https://ariejan.net/"
 
-        %nav#primary
-          %ol.interal
-            %li= link_to "Home", "/"
-            %li= link_to "Projects", "/projects/"
-            %li= link_to "Craftsmanship", "/craftsmanship/"
-            %li= link_to "Talks", "/talks/"
-            %li= link_to "About", "/about/"
+          %nav#primary
+            %ol.interal
+              %li= link_to "Home", "/"
+              %li= link_to "Projects", "/projects/"
+              %li= link_to "Craftsmanship", "/craftsmanship/"
+              %li= link_to "Talks", "/talks/"
+              %li= link_to "About", "/about/"
 
-      %section#main
-        %section#content
-          = yield
+        %section#main
+          %section#content
+            = yield
 
-        %aside#sidebar
-          #adpack
-            .bsarocks.bsap_a40a34b3f2d124df05e7c20ddaa79bd8#bsap_1287881
-            %a(href="http://adpacks.com" id="bsap_aplink") via Ad Packs
+          %aside#sidebar
+            #adpack
+              .bsarocks.bsap_a40a34b3f2d124df05e7c20ddaa79bd8#bsap_1287881
+              %a(href="http://adpacks.com" id="bsap_aplink") via Ad Packs
 
-          %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"
+            %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"
 
-      %footer
-        .copyright
-          %p
-            Copyright © 1999 - #{Time.now.year} Ariejan de Vroom
+        %footer
+          .copyright
+            %p
+              Copyright © 1999 - #{Time.now.year} Ariejan de Vroom
 
           %ul.tla
             :plain