thomas
/
labnotes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1. Styled pagination for blog index

Browse Source 
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
main
Brandon Mathis 14 years ago
parent b0921c1e27
commit 87f300b2bc
12 changed files with 62 additions and 45 deletions
Show Stats Download Patch File Download Diff File

7
.themes/classic/sass/base/_layout.scss
Unescape Escape 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) {

4
.themes/classic/sass/base/_theme.scss
Unescape Escape 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;

38
.themes/classic/sass/partials/_blog.scss
Unescape Escape 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; }
}
}
}

2
.themes/classic/sass/partials/_navigation.scss
Unescape Escape 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) {

11
.themes/classic/sass/partials/_sharing.scss
Unescape Escape 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; }
} }

15
.themes/classic/source/_includes/article.html
Unescape Escape 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>

2
.themes/classic/source/_includes/navigation.html
Unescape Escape 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>

2
.themes/classic/source/_includes/post_categories.html
Unescape Escape 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 %}

0
.themes/classic/source/blog/archives.html → .themes/classic/source/blog/archives/index.html
Unescape Escape View File

18
.themes/classic/source/index.html
Unescape Escape 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">

2
.themes/classic/source/javascripts/octopress.js
Unescape Escape 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')){

6
_config.yml
Unescape Escape 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:

Write Preview
Loading…
Cancel
Save