From 8b6d83ae6052ee09879d30f2849716fa8e692bfe Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Fri, 15 Jul 2011 15:50:48 -0400 Subject: 1. Udated category layout 2. Improved scoping and styling for links 3. Sidebar collapse improvements --- .themes/classic/sass/base/_layout.scss | 60 ++++++++++++++-------- .themes/classic/sass/base/_theme.scss | 6 ++- .themes/classic/sass/partials/_archive.scss | 18 ++++--- .themes/classic/sass/partials/_blog.scss | 32 ++++++------ .themes/classic/sass/partials/_footer.scss | 2 +- .themes/classic/sass/partials/_navigation.scss | 1 - .themes/classic/sass/partials/_syntax.scss | 6 +++ .../classic/source/_layouts/category_index.html | 11 ++-- .themes/classic/source/javascripts/octopress.js | 4 +- 9 files changed, 84 insertions(+), 56 deletions(-) (limited to '.themes') diff --git a/.themes/classic/sass/base/_layout.scss b/.themes/classic/sass/base/_layout.scss index d1545e8c..1154714c 100644 --- a/.themes/classic/sass/base/_layout.scss +++ b/.themes/classic/sass/base/_layout.scss @@ -90,7 +90,7 @@ body { } } .collapse-sidebar & { - margin-right: 10px; + margin-right: 20px; > aside { float: none; clear: left; @@ -114,31 +114,47 @@ body { } .toggle-sidebar { outline: none; - position: absolute; right: -21px; top: 0; - width: 20px; - font-size: 1.2em; - line-height: 1.1em; - padding-bottom: .1em; - text-indent: -1px; - text-decoration: none; - @include link-colors(#ccc, #999); - @include border-bottom-right-radius(.3em); - text-align: center; - background: $main-bg; - border-bottom: 1px solid $sidebar-border; - border-right: 1px solid $sidebar-border; + position: absolute; right: -10px; top: 0; bottom: 0; display: inline-block; + text-decoration: none; + color: mix($text-color-light, $sidebar-bg); + width: 9px; + cursor: pointer; + &:hover { + background: mix($sidebar-border, $sidebar-bg); + @include background(linear-gradient(left, rgba($sidebar-border, .5), rgba($sidebar-border, 0))); + } + &:after { + position: absolute; right: -11px; top: 0; + width: 20px; + font-size: 1.2em; + line-height: 1.1em; + padding-bottom: .15em; + @include border-bottom-right-radius(.3em); + text-align: center; + background: $main-bg $noise-bg; + border-bottom: 1px solid $sidebar-border; + border-right: 1px solid $sidebar-border; + content: "\00BB"; + text-indent: -1px; + } .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); + right: -20px; + width: 19px; &:hover { - background: $sidebar-border; + background: mix($sidebar-border, $sidebar-bg); + } + &:after { + border-left: 1px solid $sidebar-border; + text-shadow: #fff 0 1px; + content: "\00AB"; + left: 0px; right: 0; + text-align: center; + text-indent: 0; + border: 0; + border-right-width: 0; + background: none; } } } diff --git a/.themes/classic/sass/base/_theme.scss b/.themes/classic/sass/base/_theme.scss index 0afa111e..75ff8e7b 100644 --- a/.themes/classic/sass/base/_theme.scss +++ b/.themes/classic/sass/base/_theme.scss @@ -41,6 +41,7 @@ $nav-border-right: lighten($nav-bg, 7) !default; $sidebar-bg: #f2f2f2 !default; $sidebar-link-color: $link-color !default; $sidebar-link-color-hover: $link-color-hover !default; +$sidebar-link-color-active: $link-color-active !default; $sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default; $sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default; $sidebar-border: darken($sidebar-bg, 7) !default; @@ -61,9 +62,12 @@ $page-border-bottom: darken($footer-bg, 5) !default; /* Core theme application */ -article a, #articles + aside a { +a { @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active); } +aside[role=sidebar] a { + @include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active); +} a { @include transition(color, .3s); } diff --git a/.themes/classic/sass/partials/_archive.scss b/.themes/classic/sass/partials/_archive.scss index 3a19af5d..9ef1e824 100644 --- a/.themes/classic/sass/partials/_archive.scss +++ b/.themes/classic/sass/partials/_archive.scss @@ -1,3 +1,6 @@ +#archive { + #content > div { &, > article { padding-top: 0; } } +} #blog-archives { article { padding: 1em 0 1em; @@ -6,12 +9,10 @@ &:last-child { background: none; } + footer { padding: 0; margin: 0;} } - h2 { - background: none; - display: none; - } - h1, h2 { color: $text-color; margin-bottom: .3em; } + h1 { color: $text-color; margin-bottom: .3em; } + h2 { display: none; } h1 { font-size: 1.5em; a { @@ -30,7 +31,7 @@ .entry-content { display: none; } time { font-size: .9em; - line-height: 1em; + line-height: 1.2em; .month, .day { display: inline-block; } .month { text-transform: uppercase; } } @@ -40,10 +41,11 @@ @media only screen and (min-width: 550px) { article { margin-left: 5em; } h2 { - background: none; + margin-bottom: .3em; + font-weight: normal; display: inline-block; + position: relative; top: -1px; float: left; - padding-top: .75em; &:first-child { padding-top: .75em; } } time { diff --git a/.themes/classic/sass/partials/_blog.scss b/.themes/classic/sass/partials/_blog.scss index 39dcecd8..ab9033f3 100644 --- a/.themes/classic/sass/partials/_blog.scss +++ b/.themes/classic/sass/partials/_blog.scss @@ -1,21 +1,10 @@ -#content { - article { ul, ol { margin-left: 1.4em; }} +article { + overflow: hidden; + padding-top: 1em; + ul, ol { margin-left: 1.4em; } @media only screen and (min-width: 768px) { ul, ol { margin-left: 0; } } - > article, > div > article { - overflow: hidden; - padding-top: 1em; - h2 { - padding-top: 0.8em; - background: $img-border top left repeat-x; - .entry-content &:first-child { padding-top: 0; } - &:first-child { background: none; } - } - .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before { - @extend .separator; - } - } header { position: relative; padding-top: 2em; @@ -43,6 +32,12 @@ background: $img-border bottom left repeat-x; } } + h2 { + padding-top: 0.8em; + background: $img-border top left repeat-x; + .entry-content &:first-child { padding-top: 0; } + &:first-child { background: none; } + } .feature { padding-top: .5em; margin-bottom: 1em; @@ -80,7 +75,7 @@ } } } - > div > article > footer { + > footer { padding-bottom: 2.5em; margin-top: 2em; @extend .sans; @@ -88,6 +83,9 @@ margin-bottom: .8em; font-size: .85em; } + .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before { + @extend .separator; + } } } @@ -129,7 +127,7 @@ article + article { display: inline-block; } -nav[role=pagination] { +#content nav[role=pagination] { text-align: center; font-size: .95em; div { diff --git a/.themes/classic/sass/partials/_footer.scss b/.themes/classic/sass/partials/_footer.scss index 350c562d..e750342c 100644 --- a/.themes/classic/sass/partials/_footer.scss +++ b/.themes/classic/sass/partials/_footer.scss @@ -13,7 +13,7 @@ body > footer { @include border-bottom-radius(.4em); z-index: 1; a { - @include link-colors($footer-link-color, $footer-link-color-hover); + @include link-colors($footer-link-color, $footer-link-color-hover, $visited: $footer-link-color); } p:last-child { margin-bottom: 0; } } diff --git a/.themes/classic/sass/partials/_navigation.scss b/.themes/classic/sass/partials/_navigation.scss index fca61322..7af9f9f7 100644 --- a/.themes/classic/sass/partials/_navigation.scss +++ b/.themes/classic/sass/partials/_navigation.scss @@ -88,7 +88,6 @@ body > nav { fieldset[role=mobile-nav] { display: none; } fieldset[role=site-search]{ width: 99%; } } - @media only screen and (min-width: 992px) { form { width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 10px; diff --git a/.themes/classic/sass/partials/_syntax.scss b/.themes/classic/sass/partials/_syntax.scss index 02ad74ba..2918599c 100644 --- a/.themes/classic/sass/partials/_syntax.scss +++ b/.themes/classic/sass/partials/_syntax.scss @@ -167,6 +167,12 @@ p code { overflow-y: hidden; overflow-x: auto; } +pre, .highlight, .gist-highlight { + &::-webkit-scrollbar { height: .5em; background: rgba(#fff, .15); } + //&::-webkit-scrollbar-track { -webkit-box-shadow: $base03 1px 1px 0 inset; } + &::-webkit-scrollbar-thumb:horizontal { background: rgba(#fff, .2); -webkit-border-radius: 4px; border-radius: 4px } +} + .highlight code { @extend .pre-code; background: #000;} figure { margin-bottom: 1.5em; diff --git a/.themes/classic/source/_layouts/category_index.html b/.themes/classic/source/_layouts/category_index.html index 699f3dec..cce9777c 100644 --- a/.themes/classic/source/_layouts/category_index.html +++ b/.themes/classic/source/_layouts/category_index.html @@ -1,10 +1,15 @@ --- -layout: post -no_meta: true +layout: page +no_footer: true --- -
+
{% for post in site.categories[page.category] %} +{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %} +{% unless year == this_year %} + {% assign year = this_year %} +

{{ year }}

+{% endunless %}
{% include archive_post.html %}
diff --git a/.themes/classic/source/javascripts/octopress.js b/.themes/classic/source/javascripts/octopress.js index 6a5ad2ea..bdc47683 100644 --- a/.themes/classic/source/javascripts/octopress.js +++ b/.themes/classic/source/javascripts/octopress.js @@ -9,15 +9,13 @@ function getNav(){ }); } function addSidebarToggler() { - $('#content').append('»'); + $('#content').append(''); $('.toggle-sidebar').bind('click', function(e){ e.preventDefault(); if($('body').hasClass('collapse-sidebar')){ $('body').removeClass('collapse-sidebar'); - e.target.innerHTML = '»'; } else { $('body').addClass('collapse-sidebar'); - e.target.innerHTML = '«'; } }); sections = $('aside[role=sidebar] > section') -- cgit v1.2.1