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
This commit is contained in:
Brandon Mathis 2011-07-13 22:23:19 -04:00
parent b0921c1e27
commit 87f300b2bc
12 changed files with 62 additions and 45 deletions

View File

@ -19,7 +19,7 @@ body {
max-width: $max-width; max-width: $max-width;
position: relative; position: relative;
margin: 0 auto; 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; @extend .group;
padding-left: $pad-min; padding-left: $pad-min;
padding-right: $pad-min; padding-right: $pad-min;
@ -59,11 +59,6 @@ body {
body > header { font-size: 1em; } body > header { font-size: 1em; }
#content aside { #content aside {
@extend .group; @extend .group;
section {
&.odd, &.even { float: left; width: 48%; }
&.odd { margin-left: 0; }
&.even { margin-left: 4%; }
}
} }
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {

View File

@ -4,7 +4,7 @@ $img-border: inline-image('dotted-border.png');
// Main Link Colors // Main Link Colors
$link-color: lighten(#165b94, 3) !default; $link-color: lighten(#165b94, 3) !default;
$link-color-hover: adjust-color($link-color, $lightness: 10, $saturation: 25) !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; $link-color-active: adjust-color($link-color-hover, $lightness: -15) !default;
// Main Section Colors // Main Section Colors
@ -38,7 +38,7 @@ $nav-border-left: darken($nav-bg, 11) !default;
$nav-border-right: lighten($nav-bg, 7) !default; $nav-border-right: lighten($nav-bg, 7) !default;
/* Sidebar colors */ /* Sidebar colors */
$sidebar-bg: #eee !default; $sidebar-bg: #f2f2f2 !default;
$sidebar-link-color: $link-color !default; $sidebar-link-color: $link-color !default;
$sidebar-link-color-hover: $link-color-hover !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; $sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;

View File

@ -5,8 +5,7 @@
} }
> article, > div > article { > article, > div > article {
overflow: hidden; overflow: hidden;
padding-bottom: 1em; padding-top: 1em;
&:last-child { margin-bottom: 0; }
h2 { h2 {
padding-top: 0.8em; padding-top: 0.8em;
background: $img-border top left repeat-x; background: $img-border top left repeat-x;
@ -32,16 +31,16 @@
font-size: .9em; font-size: .9em;
color: $text-color-light; color: $text-color-light;
margin: 0; margin: 0;
@extend .sans;
&.meta { &.meta {
@extend .sans;
text-transform: uppercase; text-transform: uppercase;
position: absolute; top: 0;
} }
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
margin-bottom: 1.5em; margin-bottom: 1.5em;
padding-bottom: 1em; padding-bottom: 1em;
background: $img-border bottom left repeat-x; background: $img-border bottom left repeat-x;
p.meta { position: absolute; top: 0; }
} }
} }
.feature { .feature {
@ -82,12 +81,13 @@
} }
} }
> div > article > footer { > div > article > footer {
margin-bottom: 1.5em; padding-bottom: 2.5em;
background: $img-border top left repeat-x;
margin-top: 2em; margin-top: 2em;
padding-top: 1em;
@extend .sans; @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; background: $img-border top left repeat-x;
} }
#content .blog-index { #content .blog-index {
padding: { top: 0; bottom: 0; }
article { padding-top: 2em; }
article header { background: none; padding-bottom: 0; } article header { background: none; padding-bottom: 0; }
article h1 { article h1 {
font-size: 2.2em; font-size: 2.2em;
@ -126,3 +128,23 @@ article + article {
padding: 0 .4em 0 .2em; padding: 0 .4em 0 .2em;
display: inline-block; 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; }
}
}
}

View File

@ -86,7 +86,7 @@ body > nav {
.search { width: 91%; } .search { width: 91%; }
} }
fieldset[role=mobile-nav] { display: none; } 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) { @media only screen and (min-width: 992px) {

View File

@ -1,7 +1,6 @@
footer .sharing { .sharing {
display: inline-block; p.meta + & {
position: relative; padding: { top: 1em; left: 0; }
top: .3em; background: $img-border top left repeat-x;
padding-left: .5em; }
&:first-child { padding-left: 0; }
} }

View File

@ -5,20 +5,17 @@
{% else %} {% else %}
<h1 class="entry-title">{{ page.title | titlecase }}</h1> <h1 class="entry-title">{{ page.title | titlecase }}</h1>
{% endif %} {% 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> </header>
{% if index %}
{% endif %}
{% endunless %} {% endunless %}
{% if index %} {% if index %}
<div class="entry-content">{{ content | exerpt | smart_quotes }}</div> <div class="entry-content">{{ content | exerpt | smart_quotes }}</div>
<p><a rel="full-article" href="{{ post.url }}">Read on &rarr;</a></p>
<footer> <footer>
<p class="meta"> <a rel="full-article" href="{{ post.url }}">Read on &rarr;</a>
{% 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>
</footer> </footer>
{% else %} {% else %}
<div class="entry-content">{{ content | smart_quotes }}</div> <div class="entry-content">{{ content | smart_quotes }}</div>

View File

@ -12,5 +12,5 @@
</form> </form>
<ul role="main-nav"> <ul role="main-nav">
<li><a href="/">Blog</a></li> <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> </ul>

View File

@ -1,6 +1,6 @@
{% capture category %}{% if post %}{{ post.categories | category_links | size }}{% else %}{{ page.categories | category_links | size }}{% endif %}{% endcapture %} {% capture category %}{% if post %}{{ post.categories | category_links | size }}{% else %}{{ page.categories | category_links | size }}{% endif %}{% endcapture %}
{% unless category == '0' %} {% unless category == '0' %}
<span class="categories"> in <span class="categories">
{% if post %} {% if post %}
{{ post.categories | category_links }} {{ post.categories | category_links }}
{% else %} {% else %}

View File

@ -11,13 +11,17 @@ blog_index: true
</article> </article>
{% endfor %} {% endfor %}
<nav role="pagination"> <nav role="pagination">
{% if paginator.next_page %} <div>
<a href="/page{{paginator.next_page}}/">&larr; Older</a> {% if paginator.next_page %}
{% endif %} <a class="prev" href="/page{{paginator.next_page}}/">&larr; Older</a>
<a href="/blog/archive.html">Blog Archive</a> {% endif %}
{% if paginator.previous_page %} <a href="/blog/archives/index.html">Blog Archives</a>
<a href="/page{{paginator.previous_page}}/">Newer &rarr;</a> {% if paginator.previous_page and paginator.previous_page > 1 %}
{% endif %} <a class="next" href="/page{{paginator.previous_page}}/">Newer &rarr;</a>
{% elsif paginator.previous_page %}
<a class="next" href="/">Newer &rarr;</a>
{% endif %}
</div>
</nav> </nav>
{% if site.disqus_short_name %} {% if site.disqus_short_name %}
<script type="text/javascript"> <script type="text/javascript">

View File

@ -9,7 +9,7 @@ function getNav(){
}); });
} }
function addSidebarToggler() { function addSidebarToggler() {
$('#content').prepend('<a href="#" class="toggle-sidebar">&raquo;</a>'); $('#content').append('<a href="#" class="toggle-sidebar">&raquo;</a>');
$('.toggle-sidebar').bind('click', function(e){ $('.toggle-sidebar').bind('click', function(e){
e.preventDefault(); e.preventDefault();
if($('body').hasClass('collapse-sidebar')){ if($('body').hasClass('collapse-sidebar')){

View File

@ -28,7 +28,7 @@ simple_search: http://google.com/search
email: email:
# Twitter # Twitter
twitter_user: twitter_user: imathis
twitter_tweet_count: 4 twitter_tweet_count: 4
twitter_show_replies: false twitter_show_replies: false
twitter_follow_button: true twitter_follow_button: true
@ -40,7 +40,7 @@ google_plus_one: true
google_plus_one_size: medium google_plus_one_size: medium
# Pinboard # Pinboard
pinboard_user: pinboard_user: imathis
pinboard_count: 3 pinboard_count: 3
# Delicious # Delicious
@ -48,7 +48,7 @@ delicious_user:
delicious_count: 3 delicious_count: 3
# Disqus Comments # Disqus Comments
disqus_short_name: disqus_short_name: octopress
# Google Analytics # Google Analytics
google_analytics_tracking_id: google_analytics_tracking_id: