From 5d1d04c52c014171b911c3d7c23108e64f0ee9df Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Tue, 12 Jul 2011 19:40:57 -0400 Subject: [PATCH] 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 + .themes/classic/sass/base/_layout.scss | 120 +++++++++++------- .themes/classic/sass/partials/_archive.scss | 6 +- .themes/classic/sass/partials/_blog.scss | 25 ++-- .themes/classic/sass/partials/_sharing.scss | 7 + .themes/classic/sass/partials/_syntax.scss | 6 +- .../classic/sass/partials/sidebar/_base.scss | 4 +- .../source/_includes/asides/recent_posts.html | 2 - .../source/_includes/google_plus_one.html | 9 ++ .themes/classic/source/_includes/head.html | 4 +- .themes/classic/source/_includes/sharing.html | 9 +- .themes/classic/source/_includes/sidebar.html | 4 - .../source/_includes/twitter_sharing.html | 11 ++ .themes/classic/source/_layouts/default.html | 19 +-- .themes/classic/source/_layouts/page.html | 30 ++++- .themes/classic/source/_layouts/post.html | 14 +- .themes/classic/source/blog/archives.html | 7 +- .themes/classic/source/index.html | 4 +- .../classic/source/javascripts/octopress.js | 12 +- _config.yml | 5 + 20 files changed, 196 insertions(+), 103 deletions(-) create mode 100644 .themes/classic/sass/partials/_sharing.scss create mode 100644 .themes/classic/source/_includes/google_plus_one.html create mode 100644 .themes/classic/source/_includes/twitter_sharing.html diff --git a/.themes/classic/sass/_partials.scss b/.themes/classic/sass/_partials.scss index 2ffed5ba58..99c28b6378 100644 --- a/.themes/classic/sass/_partials.scss +++ b/.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"; diff --git a/.themes/classic/sass/base/_layout.scss b/.themes/classic/sass/base/_layout.scss index b24e1b2952..b1b44738f8 100644 --- a/.themes/classic/sass/base/_layout.scss +++ b/.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; } -#articles { width: 100%; - + aside { +#content { + > div, > article { width: 100%; } + > 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 { - + div { - @extend .group; - padding: 0; - margin: 0 auto; - > div { - @extend .group; - margin-right: $sidebar-width-medium; - } - } + #main { + @extend .group; + padding: 0; + margin: 0 auto; } - #articles { - padding-top: $pad-medium/2; - padding-bottom: $pad-medium/2; - float: left; - + aside { + #content { + @extend .group; + margin-right: $sidebar-width-medium; + position: relative; + > 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; } - #articles { - padding-top: $pad-wide/2; - padding-bottom: $pad-wide/2; - + aside { + #content { margin-right: $sidebar-width-wide; } + #content { + > div, > article { + padding-top: $pad-wide/2; + 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; + } } } diff --git a/.themes/classic/sass/partials/_archive.scss b/.themes/classic/sass/partials/_archive.scss index fbf0dac64b..3a19af5dd7 100644 --- a/.themes/classic/sass/partials/_archive.scss +++ b/.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; diff --git a/.themes/classic/sass/partials/_blog.scss b/.themes/classic/sass/partials/_blog.scss index 50fef1778f..c2c598ffac 100644 --- a/.themes/classic/sass/partials/_blog.scss +++ b/.themes/classic/sass/partials/_blog.scss @@ -1,16 +1,17 @@ -#articles { - overflow: hidden; - ul, ol { margin-left: 1.4em; } +#content { + article { 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 { - position: relative; - top: .3em; - padding-left: .5em; - } - > article > footer { - margin-top: 2em; - padding-top: 1em; + > div > article > footer { 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; diff --git a/.themes/classic/sass/partials/_sharing.scss b/.themes/classic/sass/partials/_sharing.scss new file mode 100644 index 0000000000..58a4c30bd3 --- /dev/null +++ b/.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; } +} diff --git a/.themes/classic/sass/partials/_syntax.scss b/.themes/classic/sass/partials/_syntax.scss index 523010bd5b..02ad74ba32 100644 --- a/.themes/classic/sass/partials/_syntax.scss +++ b/.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; diff --git a/.themes/classic/sass/partials/sidebar/_base.scss b/.themes/classic/sass/partials/sidebar/_base.scss index 861efc91fd..6499611fda 100644 --- a/.themes/classic/sass/partials/sidebar/_base.scss +++ b/.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; diff --git a/.themes/classic/source/_includes/asides/recent_posts.html b/.themes/classic/source/_includes/asides/recent_posts.html index ad3c7cc09c..1f100960ce 100644 --- a/.themes/classic/source/_includes/asides/recent_posts.html +++ b/.themes/classic/source/_includes/asides/recent_posts.html @@ -1,4 +1,3 @@ -{% if page.single and site.recent_posts %}

Recent Posts

-{% endif %} diff --git a/.themes/classic/source/_includes/google_plus_one.html b/.themes/classic/source/_includes/google_plus_one.html new file mode 100644 index 0000000000..b69ddaeb49 --- /dev/null +++ b/.themes/classic/source/_includes/google_plus_one.html @@ -0,0 +1,9 @@ +{% if site.google_plus_one %} + +{% endif %} diff --git a/.themes/classic/source/_includes/head.html b/.themes/classic/source/_includes/head.html index 7f2b071548..ff684eddba 100644 --- a/.themes/classic/source/_includes/head.html +++ b/.themes/classic/source/_includes/head.html @@ -26,6 +26,8 @@ - {% include google_analytics.html %} + {% include google_analytics.html %} + {% include google_plus_one.html %} + {% include twitter_sharing.html %} diff --git a/.themes/classic/source/_includes/sharing.html b/.themes/classic/source/_includes/sharing.html index ad3112eeb3..7b074af535 100644 --- a/.themes/classic/source/_includes/sharing.html +++ b/.themes/classic/source/_includes/sharing.html @@ -1 +1,8 @@ -Tweet +
+ {% if site.twitter_tweet_button %} + + {% endif %} + {% if site.google_plus_one %} + + {% endif %} +
diff --git a/.themes/classic/source/_includes/sidebar.html b/.themes/classic/source/_includes/sidebar.html index 0bce3c775c..f2e0734723 100644 --- a/.themes/classic/source/_includes/sidebar.html +++ b/.themes/classic/source/_includes/sidebar.html @@ -1,7 +1,3 @@ -
-

About Me

-

Hi, I'm Octopress!

-
{% include asides/recent_posts.html %} {% include asides/twitter.html %} {% include asides/delicious.html %} diff --git a/.themes/classic/source/_includes/twitter_sharing.html b/.themes/classic/source/_includes/twitter_sharing.html new file mode 100644 index 0000000000..687e77de43 --- /dev/null +++ b/.themes/classic/source/_includes/twitter_sharing.html @@ -0,0 +1,11 @@ +{% if site.twitter_follow_button or site.twitter_tweet_button %} + +{% endif %} diff --git a/.themes/classic/source/_layouts/default.html b/.themes/classic/source/_layouts/default.html index 4e4f81a372..15546bb59f 100644 --- a/.themes/classic/source/_layouts/default.html +++ b/.themes/classic/source/_layouts/default.html @@ -2,25 +2,14 @@
{% include header.html %}
-
-
-
{{ content }}
+
+
+ {{ content }} {% unless page.sidebar == 'none' %} - + {% endunless %}
{% include footer.html %}
- {% if site.twitter_follow_button or site.twitter_tweet_button %} - - {% endif %} diff --git a/.themes/classic/source/_layouts/page.html b/.themes/classic/source/_layouts/page.html index 0c59c9901b..fe990dd79e 100644 --- a/.themes/classic/source/_layouts/page.html +++ b/.themes/classic/source/_layouts/page.html @@ -1,5 +1,31 @@ --- -layout: post +layout: default --- - +
+
+
+

{{ page.title | titlecase }}

+ {% unless page.no_meta or !index %}

{% include post_date.html %}

{% endunless %} +
+ {{ content | smart_quotes }} + {% unless page.no_footer %} +
+ {% if page.date %} +

+ {% include post_date.html %} +

+ {% endif %} + {% unless page.no_sharing %} + {% include sharing.html %} + {% endunless %} +
+ {% endunless %} +
+{% if site.disqus_short_name and page.comments == true %} +
+

Comments

+
{% include disqus_thread.html %}
+
+{% endif %} +
diff --git a/.themes/classic/source/_layouts/post.html b/.themes/classic/source/_layouts/post.html index 5f55e89fc1..1e35ac72eb 100644 --- a/.themes/classic/source/_layouts/post.html +++ b/.themes/classic/source/_layouts/post.html @@ -3,22 +3,24 @@ layout: default single: true --- +
{% include article.html %} - {% unless page.no_meta %}

{% include post_author.html %} {% include post_date.html %} {% include post_categories.html %} - {% include sharing.html %}

+ {% unless page.no_sharing %} + {% include sharing.html %} + {% endunless %}
- {% endunless %} - {% if site.disqus_short_name %} +
+{% if site.disqus_short_name and page.no_comments != true %}

Comments

{% include disqus_thread.html %}
- {% endif %} - +{% endif %} +
diff --git a/.themes/classic/source/blog/archives.html b/.themes/classic/source/blog/archives.html index ebf447c9e9..cdc5f17c2e 100644 --- a/.themes/classic/source/blog/archives.html +++ b/.themes/classic/source/blog/archives.html @@ -1,9 +1,10 @@ --- -layout: post +layout: page title: Blog Archive -no_meta: true +no_footer: true --- -
+ +
{% for post in site.posts reverse %} {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %} {% unless year == this_year %} diff --git a/.themes/classic/source/index.html b/.themes/classic/source/index.html index 27a93021a0..3f6b11b837 100644 --- a/.themes/classic/source/index.html +++ b/.themes/classic/source/index.html @@ -2,6 +2,7 @@ layout: default blog_index: true --- +
{% assign index = true %} {% for post in paginator.posts %} {% assign content = post.content %} @@ -13,7 +14,7 @@ blog_index: true {% if paginator.next_page %} ← Older {% endif %} - Blog Archive + Blog Archive {% if paginator.previous_page %} Newer → {% endif %} @@ -29,3 +30,4 @@ blog_index: true }()); {% endif %} +
diff --git a/.themes/classic/source/javascripts/octopress.js b/.themes/classic/source/javascripts/octopress.js index 680cb76b31..c26a21f369 100644 --- a/.themes/classic/source/javascripts/octopress.js +++ b/.themes/classic/source/javascripts/octopress.js @@ -9,7 +9,8 @@ function getNav(){ }); } function addSidebarToggler() { - $('#articles').before('»').previous().bind('click', function(e){ + $('#content').prepend('»'); + $('.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 = '«'; } }); + 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']; diff --git a/_config.yml b/_config.yml index d6201f192d..9ee6b53618 100644 --- a/_config.yml +++ b/_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