diff options
author | Brandon Mathis <brandon@imathis.com> | 2011-07-12 19:40:57 -0400 |
---|---|---|
committer | Brandon Mathis <brandon@imathis.com> | 2011-07-12 19:40:57 -0400 |
commit | 5d1d04c52c014171b911c3d7c23108e64f0ee9df (patch) | |
tree | 21a58dcdfb8def51d69d4f180fce134cf4ecc9ec /.themes/classic | |
parent | 67c5edb2f6eb8747a659109fe160b4c54f6e2917 (diff) | |
download | my_new_personal_website-5d1d04c52c014171b911c3d7c23108e64f0ee9df.tar.xz my_new_personal_website-5d1d04c52c014171b911c3d7c23108e64f0ee9df.zip |
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.
Diffstat (limited to '.themes/classic')
19 files changed, 190 insertions, 102 deletions
diff --git a/.themes/classic/sass/_partials.scss b/.themes/classic/sass/_partials.scss index 2ffed5ba..99c28b63 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 b24e1b29..b1b44738 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; } } - } - 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); + .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; } + } } } - .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 fbf0dac6..3a19af5d 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 50fef177..c2c598ff 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 00000000..58a4c30b --- /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 523010bd..02ad74ba 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 861efc91..6499611f 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 ad3c7cc0..1f100960 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 %} <section> <h1>Recent Posts</h1> <ul id="recent_posts"> @@ -9,4 +8,3 @@ {% endfor %} </ul> </section> -{% 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 00000000..b69ddaeb --- /dev/null +++ b/.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 %} diff --git a/.themes/classic/source/_includes/head.html b/.themes/classic/source/_includes/head.html index 7f2b0715..ff684edd 100644 --- a/.themes/classic/source/_includes/head.html +++ b/.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> diff --git a/.themes/classic/source/_includes/sharing.html b/.themes/classic/source/_includes/sharing.html index ad3112ee..7b074af5 100644 --- a/.themes/classic/source/_includes/sharing.html +++ b/.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> diff --git a/.themes/classic/source/_includes/sidebar.html b/.themes/classic/source/_includes/sidebar.html index 0bce3c77..f2e07347 100644 --- a/.themes/classic/source/_includes/sidebar.html +++ b/.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 %} diff --git a/.themes/classic/source/_includes/twitter_sharing.html b/.themes/classic/source/_includes/twitter_sharing.html new file mode 100644 index 00000000..687e77de --- /dev/null +++ b/.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 %} diff --git a/.themes/classic/source/_layouts/default.html b/.themes/classic/source/_layouts/default.html index 4e4f81a3..15546bb5 100644 --- a/.themes/classic/source/_layouts/default.html +++ b/.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> - <div id="articles" {% if page.blog_index %} class="blog-index" {% endif %}>{{ content }}</div> + <div id="main"> + <div id="content"> + {{ 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> diff --git a/.themes/classic/source/_layouts/page.html b/.themes/classic/source/_layouts/page.html index 0c59c990..fe990dd7 100644 --- a/.themes/classic/source/_layouts/page.html +++ b/.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> diff --git a/.themes/classic/source/_layouts/post.html b/.themes/classic/source/_layouts/post.html index 5f55e89f..1e35ac72 100644 --- a/.themes/classic/source/_layouts/post.html +++ b/.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 %} - {% if site.disqus_short_name %} +</article> +{% 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 %} -</article> +{% endif %} +</div> diff --git a/.themes/classic/source/blog/archives.html b/.themes/classic/source/blog/archives.html index ebf447c9..cdc5f17c 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 --- -<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 %} diff --git a/.themes/classic/source/index.html b/.themes/classic/source/index.html index 27a93021..3f6b11b8 100644 --- a/.themes/classic/source/index.html +++ b/.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}}/">← 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 →</a> {% endif %} @@ -29,3 +30,4 @@ blog_index: true }()); </script> {% endif %} +</div> diff --git a/.themes/classic/source/javascripts/octopress.js b/.themes/classic/source/javascripts/octopress.js index 680cb76b..c26a21f3 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('<a href="#" class="toggle-sidebar">»</a>').previous().bind('click', function(e){ + $('#content').prepend('<a href="#" class="toggle-sidebar">»</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 = '«'; } }); + 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']; |