Browse Source

1. Udated category layout

2. Improved scoping and styling for links
3. Sidebar collapse improvements
unreleased_contents
Brandon Mathis 13 years ago
parent
commit
8b6d83ae60
  1. 48
      .themes/classic/sass/base/_layout.scss
  2. 6
      .themes/classic/sass/base/_theme.scss
  3. 18
      .themes/classic/sass/partials/_archive.scss
  4. 32
      .themes/classic/sass/partials/_blog.scss
  5. 2
      .themes/classic/sass/partials/_footer.scss
  6. 1
      .themes/classic/sass/partials/_navigation.scss
  7. 6
      .themes/classic/sass/partials/_syntax.scss
  8. 11
      .themes/classic/source/_layouts/category_index.html
  9. 4
      .themes/classic/source/javascripts/octopress.js

48
.themes/classic/sass/base/_layout.scss

@ -90,7 +90,7 @@ body {
} }
} }
.collapse-sidebar & { .collapse-sidebar & {
margin-right: 10px; margin-right: 20px;
> aside { > aside {
float: none; float: none;
clear: left; clear: left;
@ -114,31 +114,47 @@ body {
} }
.toggle-sidebar { .toggle-sidebar {
outline: none; outline: none;
position: absolute; right: -21px; top: 0; 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; width: 20px;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.1em; line-height: 1.1em;
padding-bottom: .1em; padding-bottom: .15em;
text-indent: -1px;
text-decoration: none;
@include link-colors(#ccc, #999);
@include border-bottom-right-radius(.3em); @include border-bottom-right-radius(.3em);
text-align: center; text-align: center;
background: $main-bg; background: $main-bg $noise-bg;
border-bottom: 1px solid $sidebar-border; border-bottom: 1px solid $sidebar-border;
border-right: 1px solid $sidebar-border; border-right: 1px solid $sidebar-border;
display: inline-block; content: "\00BB";
text-indent: -1px;
}
.collapse-sidebar & { .collapse-sidebar & {
right: -11px;
width: 24px;
bottom: 0;
background-color: $sidebar-bg;
border-right-width: 0;
text-indent: 0px; text-indent: 0px;
border-left: 1px solid $sidebar-border; right: -20px;
@include link-colors(#aaa, #888); width: 19px;
&:hover { &: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;
} }
} }
} }

6
.themes/classic/sass/base/_theme.scss

@ -41,6 +41,7 @@ $nav-border-right: lighten($nav-bg, 7) !default;
$sidebar-bg: #f2f2f2 !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-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-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: desaturate(darken($sidebar-bg, 7), 10) !default;
$sidebar-border: darken($sidebar-bg, 7) !default; $sidebar-border: darken($sidebar-bg, 7) !default;
@ -61,9 +62,12 @@ $page-border-bottom: darken($footer-bg, 5) !default;
/* Core theme application */ /* 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); @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 { a {
@include transition(color, .3s); @include transition(color, .3s);
} }

18
.themes/classic/sass/partials/_archive.scss

@ -1,3 +1,6 @@
#archive {
#content > div { &, > article { padding-top: 0; } }
}
#blog-archives { #blog-archives {
article { article {
padding: 1em 0 1em; padding: 1em 0 1em;
@ -6,12 +9,10 @@
&:last-child { &:last-child {
background: none; background: none;
} }
footer { padding: 0; margin: 0;}
} }
h2 { h1 { color: $text-color; margin-bottom: .3em; }
background: none; h2 { display: none; }
display: none;
}
h1, h2 { color: $text-color; margin-bottom: .3em; }
h1 { h1 {
font-size: 1.5em; font-size: 1.5em;
a { a {
@ -30,7 +31,7 @@
.entry-content { display: none; } .entry-content { display: none; }
time { time {
font-size: .9em; font-size: .9em;
line-height: 1em; line-height: 1.2em;
.month, .day { display: inline-block; } .month, .day { display: inline-block; }
.month { text-transform: uppercase; } .month { text-transform: uppercase; }
} }
@ -40,10 +41,11 @@
@media only screen and (min-width: 550px) { @media only screen and (min-width: 550px) {
article { margin-left: 5em; } article { margin-left: 5em; }
h2 { h2 {
background: none; margin-bottom: .3em;
font-weight: normal;
display: inline-block; display: inline-block;
position: relative; top: -1px;
float: left; float: left;
padding-top: .75em;
&:first-child { padding-top: .75em; } &:first-child { padding-top: .75em; }
} }
time { time {

32
.themes/classic/sass/partials/_blog.scss

@ -1,20 +1,9 @@
#content { article {
article { ul, ol { margin-left: 1.4em; }}
@media only screen and (min-width: 768px) {
ul, ol { margin-left: 0; }
}
> article, > div > article {
overflow: hidden; overflow: hidden;
padding-top: 1em; padding-top: 1em;
h2 { ul, ol { margin-left: 1.4em; }
padding-top: 0.8em; @media only screen and (min-width: 768px) {
background: $img-border top left repeat-x; ul, ol { margin-left: 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;
}
} }
header { header {
position: relative; position: relative;
@ -43,6 +32,12 @@
background: $img-border bottom left repeat-x; 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 { .feature {
padding-top: .5em; padding-top: .5em;
margin-bottom: 1em; margin-bottom: 1em;
@ -80,7 +75,7 @@
} }
} }
} }
> div > article > footer { > footer {
padding-bottom: 2.5em; padding-bottom: 2.5em;
margin-top: 2em; margin-top: 2em;
@extend .sans; @extend .sans;
@ -88,6 +83,9 @@
margin-bottom: .8em; margin-bottom: .8em;
font-size: .85em; 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; display: inline-block;
} }
nav[role=pagination] { #content nav[role=pagination] {
text-align: center; text-align: center;
font-size: .95em; font-size: .95em;
div { div {

2
.themes/classic/sass/partials/_footer.scss

@ -13,7 +13,7 @@ body > footer {
@include border-bottom-radius(.4em); @include border-bottom-radius(.4em);
z-index: 1; z-index: 1;
a { 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; } p:last-child { margin-bottom: 0; }
} }

1
.themes/classic/sass/partials/_navigation.scss

@ -88,7 +88,6 @@ body > nav {
fieldset[role=mobile-nav] { display: none; } fieldset[role=mobile-nav] { display: none; }
fieldset[role=site-search]{ width: 99%; } fieldset[role=site-search]{ width: 99%; }
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
form { form {
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 10px; width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 10px;

6
.themes/classic/sass/partials/_syntax.scss

@ -167,6 +167,12 @@ p code {
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; 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;} .highlight code { @extend .pre-code; background: #000;}
figure { figure {
margin-bottom: 1.5em; margin-bottom: 1.5em;

11
.themes/classic/source/_layouts/category_index.html

@ -1,10 +1,15 @@
--- ---
layout: post layout: page
no_meta: true no_footer: true
--- ---
<div class="blog-archives category"> <div id="blog-archives" class="category">
{% for post in site.categories[page.category] %} {% for post in site.categories[page.category] %}
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% unless year == this_year %}
{% assign year = this_year %}
<h2>{{ year }}</h2>
{% endunless %}
<article> <article>
{% include archive_post.html %} {% include archive_post.html %}
</article> </article>

4
.themes/classic/source/javascripts/octopress.js

@ -9,15 +9,13 @@ function getNav(){
}); });
} }
function addSidebarToggler() { function addSidebarToggler() {
$('#content').append('<a href="#" class="toggle-sidebar">&raquo;</a>'); $('#content').append('<span class="toggle-sidebar"></span>');
$('.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')){
$('body').removeClass('collapse-sidebar'); $('body').removeClass('collapse-sidebar');
e.target.innerHTML = '&raquo;';
} else { } else {
$('body').addClass('collapse-sidebar'); $('body').addClass('collapse-sidebar');
e.target.innerHTML = '&laquo;';
} }
}); });
sections = $('aside[role=sidebar] > section') sections = $('aside[role=sidebar] > section')

Loading…
Cancel
Save