1. Made default layout more generic.

2. Added a page layout and improved html on post layout.
3. Improved flexibility of stylesheets for different layout types.
4. Collapsing sidebar now moves it to the bottom of the page and floats
content into columns.
5. Improved sharing settings, added Google plus one.

.themes/classic/sass/_partials.scss

@@ -1,6 +1,7 @@
 @import "partials/header";
 @import "partials/navigation";
 @import "partials/blog";
+@import "partials/sharing";
 @import "partials/syntax";
 @import "partials/archive";
 @import "partials/sidebar";

.themes/classic/sass/base/_layout.scss

@@ -19,7 +19,7 @@ body {
   max-width: $max-width;
   position: relative;
   margin: 0 auto;
-  > header, > nav, > footer, #articles > article, #articles > nav {
+  > header, > nav, > footer, #content > article, #content > div > article {
     @extend .group;
     padding-left: $pad-min;
     padding-right: $pad-min;
@@ -43,64 +43,77 @@ body {
   }
 }
 
-.toggle-sidebar { display: none; }
+#content {
-#articles { width: 100%;
+  > div, > article { width: 100%; }
-  + aside {
+  > aside {
     float: none;
     padding: 0 $pad-min 1px;
-    background-color: $sidebar-bg;
+    background-color: lighten($sidebar-bg, 2);
     border-top: 1px solid $sidebar-border;
   }
 }
 
+.toggle-sidebar { display: none; }
+
 @media only screen and (min-width: 550px) {
   body > header { font-size: 1em; }
+  #content aside {
+    @extend .group;
+    section {
+    &.odd, &.even { float: left; width: 48%; }
+    &.odd { margin-left: 0; }
+    &.even { margin-left: 4%; }
+   }
+  }
 }
 @media only screen and (min-width: 768px) {
   body { -webkit-text-size-adjust: auto; }
   body > header { font-size: 1.2em; }
-  body > nav {
+  #main {
-    + div {
+    @extend .group;
-      @extend .group;
+    padding: 0;
-      padding: 0;
+    margin: 0 auto;
-      margin: 0 auto;
-      > div {
-        @extend .group;
-        margin-right: $sidebar-width-medium;
-      }
-    }
   }
-  #articles {
+  #content {
-    padding-top: $pad-medium/2;
+    @extend .group;
-    padding-bottom: $pad-medium/2;
+    margin-right: $sidebar-width-medium;
-    float: left;
+    position: relative;
-    + aside {
+    > div, > article {
+      padding-top: $pad-medium/2;
+      padding-bottom: $pad-medium/2;
+      float: left;
+    }
+    > aside {
       width: $sidebar-width-medium - $sidebar-pad-medium*2;
       padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
       background: none;
       float: left;
       margin: 0 -100% 0 0;
+      section, section.even { width: auto; margin: 0; }
+    }
+    .collapse-sidebar & {
+      margin-right: 10px;
+      > aside {
+        float: none;
+        clear: left;
+        width: auto;
+        margin: 0;
+        padding: 0 $pad-medium 1px;
+        background-color: lighten($sidebar-bg, 2);
+        border-top: 1px solid lighten($sidebar-border, 4);
+        section {
+          &.odd, &.even { float: left; width: 48%; }
+          &.odd { margin-left: 0; }
+          &.even { margin-left: 4%; }
+        }
+      }
+      > aside.thirds section {
+        width: 30%;
+        margin-left: 5%;
+        &.first { margin-left: 0; }
+      }
     }
   }
-  body > div > div { position: relative; }
-
-  .collapse-sidebar {
-    > div > div { margin-right: 10px; }
-    #articles + aside {
-      display: none;
-    }
-    .toggle-sidebar {
-      right: -1px;
-      background-color: $sidebar-bg;
-      border-right-width: 0;
-      text-indent: 2px;
-      border-left: 1px solid $sidebar-border;
-      @include border-bottom-right-radius(0);
-      @include border-bottom-left-radius(.3em);
-      @include link-colors(#aaa, #888);
-    }
-  }
-
   .toggle-sidebar {
     outline: none;
     position: absolute; right: -21px; top: 0;
@@ -117,18 +130,37 @@ body {
     border-bottom: 1px solid $sidebar-border;
     border-right: 1px solid $sidebar-border;
     display: inline-block;
+    .collapse-sidebar & {
+      right: -11px;
+      width: 24px;
+      bottom: 0;
+      background-color: $sidebar-bg;
+      border-right-width: 0;
+      text-indent: 0px;
+      border-left: 1px solid $sidebar-border;
+      @include link-colors(#aaa, #888);
+      &:hover {
+       background: $sidebar-border;
+      }
+    }
   }
 }
 
 @media only screen and (min-width: 992px) {
   body > header { font-size: 1.3em; }
-  body > nav + div > div { margin-right: $sidebar-width-wide; }
+  #content { margin-right: $sidebar-width-wide; }
-  #articles {
+  #content {
-    padding-top: $pad-wide/2;
+    > div, > article {
-    padding-bottom: $pad-wide/2;
+      padding-top: $pad-wide/2;
-    + aside {
+      padding-bottom: $pad-wide/2;
+    }
+    > aside {
       width: $sidebar-width-wide - $sidebar-pad-wide*2;
       padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
     }
+    .collapse-sidebar & aside {
+      padding: { left: $pad-wide; right: $pad-wide; }
+      @extend .group;
+    }
   }
 }

.themes/classic/sass/partials/_archive.scss

@@ -1,4 +1,4 @@
-#articles .blog-archives {
+#blog-archives {
   article {
     padding: 1em 0 1em;
     position: relative;
@@ -57,13 +57,11 @@
       padding:{left: 4.5em; bottom: .7em;}
     }
   a.category {
-    //text-align: right;
     line-height: 1.1em;
-    //float: right;
     }
   }
 }
-#articles .blog-archives.category {
+#content > .category {
   article {
     margin-left: 0;
     padding-left: 6.8em;

.themes/classic/sass/partials/_blog.scss

@@ -1,16 +1,17 @@
-#articles {
+#content {
-  overflow: hidden;
+  article { ul, ol { margin-left: 1.4em; }}
-  ul, ol { margin-left: 1.4em; }
   @media only screen and (min-width: 768px) {
     ul, ol { margin-left: 0; }
   }
-  > article {
+  > article, > div > article {
+    overflow: hidden;
     padding-bottom: 1em;
     &:last-child { margin-bottom: 0;  }
     h2 {
       padding-top: 0.8em;
       background: $img-border top left repeat-x;
-      &:first-child { background: none; padding-top: 0; }
+      .entry-content &:first-child { padding-top: 0; }
+      &:first-child { background: none; }
     }
     .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
       @extend .separator;
@@ -80,24 +81,20 @@
       }
     }
   }
-  iframe.twitter-share-button {
+  > div > article > footer {
-    position: relative;
-    top: .3em;
-    padding-left: .5em;
-  }
-  > article > footer {
-    margin-top: 2em;
-    padding-top: 1em;
     margin-bottom: 1.5em;
     background: $img-border top left repeat-x;
+    margin-top: 2em;
+    padding-top: 1em;
     @extend .sans;
+    p.meta { display: inline-block; font-size: .8em; }
   }
 
 }
 article + article {
   background: $img-border top left repeat-x;
 }
-#articles.blog-index {
+#content .blog-index {
   article header { background: none; padding-bottom: 0; }
   article h1 {
     font-size: 2.2em;

.themes/classic/sass/partials/_sharing.scss

@@ -0,0 +1,7 @@
+footer .sharing {
+  display: inline-block;
+  position: relative;
+  top: .3em;
+  padding-left: .5em;
+  &:first-child { padding-left: 0; }
+}

.themes/classic/sass/partials/_syntax.scss

@@ -1,7 +1,7 @@
 .highlight, html .gist .gist-file .gist-syntax .gist-highlight {
   .line-numbers {
     text-align: right;
-    font-size: .8em;
+    font-size: 13px;
     line-height: 1.45em;
     background: $base02 $noise-bg !important;
     border-right: 1px solid darken($base03, 2) !important;
@@ -57,7 +57,7 @@ pre {
   @extend .mono;
   border: 1px solid $pre-border;
   line-height: 1.45em;
-  font-size: .8em;
+  font-size: 13px;
   margin-bottom: 1.5em;
   padding: .8em 1em;
   color: $pre-color;
@@ -73,7 +73,7 @@ p code {
   display: inline-block;
   white-space: no-wrap;
   background: #fff;
-  font-size: .9em;
+  font-size: .8em;
   line-height: 1.5em;
   color: #555;
   border: 1px solid #ddd;

.themes/classic/sass/partials/sidebar/_base.scss

@@ -1,9 +1,9 @@
 .side-shadow-border {
   @include box-shadow(lighten($sidebar-bg, 5) 0 1px);
 }
-#articles + aside {
+#content > aside {
   color: $sidebar-color;
-  padding-top: 1.2em;
+  //padding-top: 1.2em;
   text-shadow: lighten($sidebar-bg, 8) 0 1px;
   section {
     @extend .sans;

.themes/classic/source/_includes/asides/recent_posts.html

@@ -1,4 +1,3 @@
-{% if page.single and site.recent_posts %}
 <section>
   <h1>Recent Posts</h1>
   <ul id="recent_posts">
@@ -9,4 +8,3 @@
     {% endfor %}
   </ul>
 </section>
-{% endif %}

.themes/classic/source/_includes/google_plus_one.html

@@ -0,0 +1,9 @@
+{% if site.google_plus_one %}
+  <script type="text/javascript">
+    (function() {
+      var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
+      script.src = 'https://apis.google.com/js/plusone.js';
+      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);
+    })();
+  </script>
+{% endif %}

.themes/classic/source/_includes/head.html

@@ -26,6 +26,8 @@
   <script src="/javascripts/octopress.js" type="text/javascript"></script>
   <link href='http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
   <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
-  {% include google_analytics.html %}
   <link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml"/>
+  {% include google_analytics.html %}
+  {% include google_plus_one.html %}
+  {% include twitter_sharing.html %}
 </head>

.themes/classic/source/_includes/sharing.html

@@ -1 +1,8 @@
-<a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" >Tweet</a>
+<div class="sharing">
+  {% if site.twitter_tweet_button %}
+  <a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" >Tweet</a>
+  {% endif %}
+  {% if site.google_plus_one %}
+  <g:plusone size="{{ site.google_plus_one_size }}"></g:plusone>
+  {% endif %}
+</div>

.themes/classic/source/_includes/sidebar.html

@@ -1,7 +1,3 @@
-<section>
-  <h1>About Me</h1>
-  <p>Hi, I'm Octopress!</p>
-</section>
 {% include asides/recent_posts.html %}
 {% include asides/twitter.html %}
 {% include asides/delicious.html %}

.themes/classic/source/_includes/twitter_sharing.html

@@ -0,0 +1,11 @@
+{% if site.twitter_follow_button or site.twitter_tweet_button %}
+  <script type="text/javascript">
+    (function(){
+      var twitterWidgets = document.createElement('script');
+      twitterWidgets.type = 'text/javascript';
+      twitterWidgets.async = true;
+      twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
+      document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
+    })();
+  </script>
+{% endif %}

.themes/classic/source/_layouts/default.html

@@ -2,25 +2,14 @@
 <body {% if page.body_id %} id="{{ page.body_id }}" {% endif %} {% if page.sidebar == 'none' %} class="no-sidebar" {% endif %}>
   <header>{% include header.html %}</header>
   <nav>{% include navigation.html %}</nav>
-  <div>
+  <div id="main">
-    <div>
+    <div id="content">
-      <div id="articles" {% if page.blog_index %} class="blog-index" {% endif %}>{{ content }}</div>
+      {{ content }}
       {% unless page.sidebar == 'none' %}
-        <aside>{% include sidebar.html %}</aside>
+        <aside role=sidebar>{% include sidebar.html %}</aside>
       {% endunless %}
     </div>
   </div>
   <footer>{% include footer.html %}</footer>
-  {% if site.twitter_follow_button or site.twitter_tweet_button %}
-    <script type="text/javascript">
-      (function(){
-        var twitterWidgets = document.createElement('script');
-        twitterWidgets.type = 'text/javascript';
-        twitterWidgets.async = true;
-        twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
-        document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
-      })();
-    </script>
-  {% endif %}
 </body>
 </html>

.themes/classic/source/_layouts/page.html

@@ -1,5 +1,31 @@
 ---
-layout: post
+layout: default
 ---
 
-<!-- if you want a page layout -->
+<div>
+<article>
+  <header>
+    <h1 class="entry-title">{{ page.title | titlecase }}</h1>
+    {% unless page.no_meta or !index %}<p class="meta">{% include post_date.html %}</p>{% endunless %}
+  </header>
+  {{ content | smart_quotes }}
+  {% unless page.no_footer %}
+    <footer>
+      {% if page.date %}
+      <p class="meta">
+        {% include post_date.html %}
+      </p>
+      {% endif %}
+      {% unless page.no_sharing %}
+        {% include sharing.html %}
+      {% endunless %}
+    </footer>
+  {% endunless %}
+</article>
+{% if site.disqus_short_name and page.comments == true %}
+  <section>
+    <h1>Comments</h1>
+    <div id="disqus_thread">{% include disqus_thread.html %}</div>
+  </section>
+{% endif %}
+</div>

.themes/classic/source/_layouts/post.html

@@ -3,22 +3,24 @@ layout: default
 single: true
 ---
 
+<div>
 <article class="hentry">
   {% include article.html %}
-  {% unless page.no_meta %}
   <footer>
     <p class="meta">
       {% include post_author.html %}
       {% include post_date.html %}
       {% include post_categories.html %}
-      {% include sharing.html %}
     </p>
+    {% unless page.no_sharing %}
+    {% include sharing.html %}
+    {% endunless %}
   </footer>
-  {% endunless %}
+</article>
-  {% if site.disqus_short_name %}
+{% if site.disqus_short_name and page.no_comments != true %}
   <section>
     <h1>Comments</h1>
     <div id="disqus_thread">{% include disqus_thread.html %}</div>
   </section>
-  {% endif %}
+{% endif %}
-</article>
+</div>

.themes/classic/source/blog/archives.html

@@ -1,9 +1,10 @@
 ---
-layout: post
+layout: page
 title: Blog Archive
-no_meta: true
+no_footer: true
 ---
-<div class="blog-archives">
+
+<div id="blog-archives">
 {% for post in site.posts reverse %}
 {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
 {% unless year == this_year %}

.themes/classic/source/index.html

@@ -2,6 +2,7 @@
 layout: default
 blog_index: true
 ---
+<div class="blog-index">
 {% assign index = true %}
 {% for post in paginator.posts %}
 {% assign content = post.content %}
@@ -13,7 +14,7 @@ blog_index: true
   {% if paginator.next_page %}
     <a href="/page{{paginator.next_page}}/">&larr; Older</a>
   {% endif %}
-  <a href="/blog/archives.html">Blog Archive</a>
+  <a href="/blog/archive.html">Blog Archive</a>
   {% if paginator.previous_page %}
     <a href="/page{{paginator.previous_page}}/">Newer &rarr;</a>
   {% endif %}
@@ -29,3 +30,4 @@ blog_index: true
     }());
 </script>
 {% endif %}
+</div>

.themes/classic/source/javascripts/octopress.js

@@ -9,7 +9,8 @@ function getNav(){
   });
 }
 function addSidebarToggler() {
-  $('#articles').before('<a href="#" class="toggle-sidebar">&raquo;</a>').previous().bind('click', function(e){
+  $('#content').prepend('<a href="#" class="toggle-sidebar">&raquo;</a>');
+  $('.toggle-sidebar').bind('click', function(e){
     e.preventDefault();
     if($('body').hasClass('collapse-sidebar')){
       $('body').removeClass('collapse-sidebar');
@@ -19,6 +20,15 @@ function addSidebarToggler() {
       e.target.innerHTML = '&laquo;';
     }
   });
+  sections = $('aside[role=sidebar] > section')
+  if(sections.length >= 3){ $('aside[role=sidebar]').addClass('thirds') }
+  sections.each(function(section, index){
+    if ((sections.length >= 3) && index % 3 == 0) {
+      $(section).addClass("first");
+    }
+    count = ((index +1) % 2) ? "odd" : "even";
+    $(section).addClass(count);
+  });
 }
 function testFeatures() {
   var features = ['maskImage'];

_config.yml

@@ -1,6 +1,7 @@
 # Required configuration
 source: source
 destination: public
+plugins: plugins
 code_dir: downloads/code
 port: 4000
 
@@ -34,6 +35,10 @@ twitter_follow_button: true
 twitter_show_follower_count: false
 twitter_tweet_button: true
 
+# Google Plus
+google_plus_one: true
+google_plus_one_size: medium
+
 # Pinboard
 pinboard_user:
 pinboard_count: 3