added ability to collapse layout

5 files changed, 58 insertions, 22 deletions

diff --git a/source/javascripts/octopress.js b/source/javascripts/octopress.js
index a91d30e8..23716351 100644
--- a/source/javascripts/octopress.js
+++ b/source/javascripts/octopress.js
@@ -1,14 +1,13 @@
 window.addEvent('domready', function() {
-  $$('div.highlight').each(addExpander);
+  codeblocks = $$('div.highlight');
+  codeblocks.each(addExpander);
+  enableCompressedLayout(codeblocks);
 });
 
 function addExpander(div){
   new Element('span',{
 		html: 'expand »',
 		'class': 'pre_expander',
-		'styles': {
-      'display': 'block'
-    },
     'events': {
       'click': function(){
         toggleExpander();
@@ -18,12 +17,26 @@ function addExpander(div){
 }
 function toggleExpander(){
   var html = '';
-  if($('main').toggleClass('expanded').hasClass('expanded')){
+  if($('main').toggleClass('expanded').hasClass('expanded'))
     html = '« contract';
-  } else {
+  else
     html = 'expand »';
-  }
   $$('div.highlight span.pre_expander').each(function(span){
       span.set('html',html);
   });
+}
+function enableCompressedLayout(codeblocks){
+  if(!codeblocks.length) return;
+  new Element('span',{
+		html: 'Collapse layout',
+		'id': 'collapser',
+    'events': {
+      'click': function(){
+        if($('page').toggleClass('collapsed').hasClass('collapsed'))
+          this.set('html','Expand layout');
+        else
+          this.set('html','Collapse layout');
+      }
+    }
+	}).inject($('main'), 'top');
 }
\ No newline at end of file
diff --git a/stylesheets/_layout.sass b/stylesheets/_layout.sass
index 94c6015e..348c1a92 100644
--- a/stylesheets/_layout.sass
+++ b/stylesheets/_layout.sass
@@ -75,8 +75,18 @@ html body
 #page
   +clearfix
   background-color= !page_bg
+  &.collapsed
+    .page_width
+      width= !page_width - !sidebar_width
+    #main
+      width: 100%
+      .pre_expander
+        display: none
+    #sidebar
+      float: none
   .page_width
     +clearfix
+    position: relative
     padding:
       top: 25px
       bottom: 25px
@@ -91,6 +101,20 @@ html body
   &.expanded
     width: 100%
 
+#sidebar
+  float: left
+  width= !sidebar_width
+  margin-left= !sidebar_margin
+  font-size: 80%
+  line-height: 1.625em
+  h4
+    margin: 20px 0 0
+    &:first-child
+      margin-top: 10px
+    .small
+      +sans-font
+      font-size: 50%
+
 #footer
   position: relative
   z-index: 2
diff --git a/stylesheets/_partials.sass b/stylesheets/_partials.sass
index 846297bc..815d9581 100644
--- a/stylesheets/_partials.sass
+++ b/stylesheets/_partials.sass
@@ -1,3 +1,4 @@
+@import partials/shared.sass
 @import partials/blog.sass
 @import partials/syntax.sass
 @import partials/search.sass
diff --git a/stylesheets/partials/_shared.sass b/stylesheets/partials/_shared.sass
new file mode 100644
index 00000000..3c5a62db
--- /dev/null
+++ b/stylesheets/partials/_shared.sass
@@ -0,0 +1,13 @@
+#collapser
+  +sans-font
+  display: block
+  cursor: pointer
+  background: #f8f8f8
+  color: #888
+  padding: 5px 10px
+  font-size: 10px
+  line-height: 150%
+  cursor: pointer
+  position: absolute
+  top: 0
+  right: 0
\ No newline at end of file
diff --git a/stylesheets/partials/_sidebar.sass b/stylesheets/partials/_sidebar.sass
index 341455a5..44331b18 100644
--- a/stylesheets/partials/_sidebar.sass
+++ b/stylesheets/partials/_sidebar.sass
@@ -1,18 +1,3 @@
-#sidebar
-  float: left
-  width= !sidebar_width
-  margin-left= !sidebar_margin
-  
-  h4
-    margin: 20px 0 0
-    &:first-child
-      margin-top: 10px
-    .small
-      +sans-font
-      font-size: 50%  
-  font-size: 80%
-  line-height: 1.625em
-
 #twitter, #delicious
   +border-radius
   background: #f8f8f8