diff options
author | Brandon Mathis <brandon@imathis.com> | 2011-07-13 22:23:19 -0400 |
---|---|---|
committer | Brandon Mathis <brandon@imathis.com> | 2011-07-13 22:23:19 -0400 |
commit | 87f300b2bcf166474e5f7824fb3126a7992613ba (patch) | |
tree | 15ab7545844898a2095ba9cbff73d904d7a59c2c | |
parent | b0921c1e2707e561d71c4debd3b54466fa3f3b4a (diff) | |
download | my_new_personal_website-87f300b2bcf166474e5f7824fb3126a7992613ba.tar.xz my_new_personal_website-87f300b2bcf166474e5f7824fb3126a7992613ba.zip |
1. Styled pagination for blog index
2. Fixed Newer pagination link on page 2
3. Improved sidebar section breakdown on collapse
4. Removed sharing links from the blog index page (moved to pages)
5. Improved styling for metadata on the blog index
6. Moved /blog/archives.html to /blog/archives/index.html
7. Improved responsive layout styling bugs
-rw-r--r-- | .themes/classic/sass/base/_layout.scss | 7 | ||||
-rw-r--r-- | .themes/classic/sass/base/_theme.scss | 4 | ||||
-rw-r--r-- | .themes/classic/sass/partials/_blog.scss | 38 | ||||
-rw-r--r-- | .themes/classic/sass/partials/_navigation.scss | 2 | ||||
-rw-r--r-- | .themes/classic/sass/partials/_sharing.scss | 11 | ||||
-rw-r--r-- | .themes/classic/source/_includes/article.html | 15 | ||||
-rw-r--r-- | .themes/classic/source/_includes/navigation.html | 2 | ||||
-rw-r--r-- | .themes/classic/source/_includes/post_categories.html | 2 | ||||
-rw-r--r-- | .themes/classic/source/blog/archives/index.html (renamed from .themes/classic/source/blog/archives.html) | 0 | ||||
-rw-r--r-- | .themes/classic/source/index.html | 18 | ||||
-rw-r--r-- | .themes/classic/source/javascripts/octopress.js | 2 | ||||
-rw-r--r-- | _config.yml | 6 |
12 files changed, 62 insertions, 45 deletions
diff --git a/.themes/classic/sass/base/_layout.scss b/.themes/classic/sass/base/_layout.scss index 64344c82..d1545e8c 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, #content > article, #content > div > article, #content > div > nav { + > header, > nav, > footer, #content > article, #content > div > article, #content > div > section, nav[role=pagination] { @extend .group; padding-left: $pad-min; padding-right: $pad-min; @@ -59,11 +59,6 @@ body { 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) { diff --git a/.themes/classic/sass/base/_theme.scss b/.themes/classic/sass/base/_theme.scss index 27a6aabf..0afa111e 100644 --- a/.themes/classic/sass/base/_theme.scss +++ b/.themes/classic/sass/base/_theme.scss @@ -4,7 +4,7 @@ $img-border: inline-image('dotted-border.png'); // Main Link Colors $link-color: lighten(#165b94, 3) !default; $link-color-hover: adjust-color($link-color, $lightness: 10, $saturation: 25) !default; -$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -2) !default; +$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -4) !default; $link-color-active: adjust-color($link-color-hover, $lightness: -15) !default; // Main Section Colors @@ -38,7 +38,7 @@ $nav-border-left: darken($nav-bg, 11) !default; $nav-border-right: lighten($nav-bg, 7) !default; /* Sidebar colors */ -$sidebar-bg: #eee !default; +$sidebar-bg: #f2f2f2 !default; $sidebar-link-color: $link-color !default; $sidebar-link-color-hover: $link-color-hover !default; $sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default; diff --git a/.themes/classic/sass/partials/_blog.scss b/.themes/classic/sass/partials/_blog.scss index c2c598ff..39dcecd8 100644 --- a/.themes/classic/sass/partials/_blog.scss +++ b/.themes/classic/sass/partials/_blog.scss @@ -5,8 +5,7 @@ } > article, > div > article { overflow: hidden; - padding-bottom: 1em; - &:last-child { margin-bottom: 0; } + padding-top: 1em; h2 { padding-top: 0.8em; background: $img-border top left repeat-x; @@ -32,16 +31,16 @@ font-size: .9em; color: $text-color-light; margin: 0; - @extend .sans; &.meta { + @extend .sans; text-transform: uppercase; + position: absolute; top: 0; } } @media only screen and (min-width: 768px) { margin-bottom: 1.5em; padding-bottom: 1em; background: $img-border bottom left repeat-x; - p.meta { position: absolute; top: 0; } } } .feature { @@ -82,12 +81,13 @@ } } > div > article > footer { - margin-bottom: 1.5em; - background: $img-border top left repeat-x; + padding-bottom: 2.5em; margin-top: 2em; - padding-top: 1em; @extend .sans; - p.meta { display: inline-block; font-size: .8em; } + p.meta { + margin-bottom: .8em; + font-size: .85em; + } } } @@ -95,6 +95,8 @@ article + article { background: $img-border top left repeat-x; } #content .blog-index { + padding: { top: 0; bottom: 0; } + article { padding-top: 2em; } article header { background: none; padding-bottom: 0; } article h1 { font-size: 2.2em; @@ -126,3 +128,23 @@ article + article { padding: 0 .4em 0 .2em; display: inline-block; } + +nav[role=pagination] { + text-align: center; + font-size: .95em; + div { + position: relative; + background: $img-border top left repeat-x; + padding: {top: 1.5em; bottom: 1.5em;} + } + a { + text-decoration: none; + color: $text-color-light; + &.prev { position: absolute; left: 0; } + &.next { position: absolute; right: 0; } + &:hover { color: $link-color-hover; } + &[href*=archive] { + &:before, &:after { content: '\2014'; padding: 0 .3em; } + } + } +} diff --git a/.themes/classic/sass/partials/_navigation.scss b/.themes/classic/sass/partials/_navigation.scss index be132561..fca61322 100644 --- a/.themes/classic/sass/partials/_navigation.scss +++ b/.themes/classic/sass/partials/_navigation.scss @@ -86,7 +86,7 @@ body > nav { .search { width: 91%; } } fieldset[role=mobile-nav] { display: none; } - fieldset[role=site-search]{ width: 100%; } + fieldset[role=site-search]{ width: 99%; } } @media only screen and (min-width: 992px) { diff --git a/.themes/classic/sass/partials/_sharing.scss b/.themes/classic/sass/partials/_sharing.scss index 58a4c30b..1fa97750 100644 --- a/.themes/classic/sass/partials/_sharing.scss +++ b/.themes/classic/sass/partials/_sharing.scss @@ -1,7 +1,6 @@ -footer .sharing { - display: inline-block; - position: relative; - top: .3em; - padding-left: .5em; - &:first-child { padding-left: 0; } +.sharing { + p.meta + & { + padding: { top: 1em; left: 0; } + background: $img-border top left repeat-x; + } } diff --git a/.themes/classic/source/_includes/article.html b/.themes/classic/source/_includes/article.html index b458d732..603c2f97 100644 --- a/.themes/classic/source/_includes/article.html +++ b/.themes/classic/source/_includes/article.html @@ -5,20 +5,17 @@ {% else %} <h1 class="entry-title">{{ page.title | titlecase }}</h1> {% endif %} - {% unless page.no_meta or !index %}<p class="meta">{% include post_date.html %}</p>{% endunless %} + {% unless page.no_meta %} + <p class="meta">{% include post_date.html %}</p> + {% endunless %} </header> + {% if index %} + {% endif %} {% endunless %} {% if index %} <div class="entry-content">{{ content | exerpt | smart_quotes }}</div> - <p><a rel="full-article" href="{{ post.url }}">Read on →</a></p> <footer> - <p class="meta"> - {% include post_author.html %} - {% include post_date.html %} - {% include post_categories.html %} - <span class="comments"><a rel="comments" href="{{ post.url }}#disqus_thread">Comments</a></span> - {% include sharing.html %} - </p> + <a rel="full-article" href="{{ post.url }}">Read on →</a> </footer> {% else %} <div class="entry-content">{{ content | smart_quotes }}</div> diff --git a/.themes/classic/source/_includes/navigation.html b/.themes/classic/source/_includes/navigation.html index 6c8efaad..ec18512b 100644 --- a/.themes/classic/source/_includes/navigation.html +++ b/.themes/classic/source/_includes/navigation.html @@ -12,5 +12,5 @@ </form> <ul role="main-nav"> <li><a href="/">Blog</a></li> - <li><a href="/blog/archives.html">Archives</a></li> + <li><a href="/blog/archives/index.html">Archives</a></li> </ul> diff --git a/.themes/classic/source/_includes/post_categories.html b/.themes/classic/source/_includes/post_categories.html index 7bf7528f..4a98b29d 100644 --- a/.themes/classic/source/_includes/post_categories.html +++ b/.themes/classic/source/_includes/post_categories.html @@ -1,6 +1,6 @@ {% capture category %}{% if post %}{{ post.categories | category_links | size }}{% else %}{{ page.categories | category_links | size }}{% endif %}{% endcapture %} {% unless category == '0' %} -<span class="categories"> in +<span class="categories"> {% if post %} {{ post.categories | category_links }} {% else %} diff --git a/.themes/classic/source/blog/archives.html b/.themes/classic/source/blog/archives/index.html index cdc5f17c..cdc5f17c 100644 --- a/.themes/classic/source/blog/archives.html +++ b/.themes/classic/source/blog/archives/index.html diff --git a/.themes/classic/source/index.html b/.themes/classic/source/index.html index 3f6b11b8..8754a82b 100644 --- a/.themes/classic/source/index.html +++ b/.themes/classic/source/index.html @@ -11,13 +11,17 @@ blog_index: true </article> {% endfor %} <nav role="pagination"> - {% if paginator.next_page %} - <a href="/page{{paginator.next_page}}/">← Older</a> - {% endif %} - <a href="/blog/archive.html">Blog Archive</a> - {% if paginator.previous_page %} - <a href="/page{{paginator.previous_page}}/">Newer →</a> - {% endif %} + <div> + {% if paginator.next_page %} + <a class="prev" href="/page{{paginator.next_page}}/">← Older</a> + {% endif %} + <a href="/blog/archives/index.html">Blog Archives</a> + {% if paginator.previous_page and paginator.previous_page > 1 %} + <a class="next" href="/page{{paginator.previous_page}}/">Newer →</a> + {% elsif paginator.previous_page %} + <a class="next" href="/">Newer →</a> + {% endif %} + </div> </nav> {% if site.disqus_short_name %} <script type="text/javascript"> diff --git a/.themes/classic/source/javascripts/octopress.js b/.themes/classic/source/javascripts/octopress.js index 949f7a03..6a5ad2ea 100644 --- a/.themes/classic/source/javascripts/octopress.js +++ b/.themes/classic/source/javascripts/octopress.js @@ -9,7 +9,7 @@ function getNav(){ }); } function addSidebarToggler() { - $('#content').prepend('<a href="#" class="toggle-sidebar">»</a>'); + $('#content').append('<a href="#" class="toggle-sidebar">»</a>'); $('.toggle-sidebar').bind('click', function(e){ e.preventDefault(); if($('body').hasClass('collapse-sidebar')){ diff --git a/_config.yml b/_config.yml index 9ee6b536..35e55899 100644 --- a/_config.yml +++ b/_config.yml @@ -28,7 +28,7 @@ simple_search: http://google.com/search email: # Twitter -twitter_user: +twitter_user: imathis twitter_tweet_count: 4 twitter_show_replies: false twitter_follow_button: true @@ -40,7 +40,7 @@ google_plus_one: true google_plus_one_size: medium # Pinboard -pinboard_user: +pinboard_user: imathis pinboard_count: 3 # Delicious @@ -48,7 +48,7 @@ delicious_user: delicious_count: 3 # Disqus Comments -disqus_short_name: +disqus_short_name: octopress # Google Analytics google_analytics_tracking_id: |