Browse Source
2. Designed blog archives pages 3. Restructured Sass 4. Added Categories to rake post metadata 5. Some general style improvementsunreleased_contents
Brandon Mathis
14 years ago
27 changed files with 149 additions and 708 deletions
@ -1,65 +0,0 @@ |
|||
module Jekyll |
|||
|
|||
class CategoryIndex < Page |
|||
def initialize(site, base, dir, category) |
|||
@site = site |
|||
@base = base |
|||
@dir = dir |
|||
@name = 'index.html' |
|||
|
|||
self.process(@name) |
|||
self.read_yaml(File.join(base, '_layouts'), 'category_index.html') |
|||
self.data['category'] = category |
|||
|
|||
category_title_prefix = site.config['category_title_prefix'] || 'Category: ' |
|||
self.data['title'] = "#{category_title_prefix}#{category}" |
|||
end |
|||
end |
|||
|
|||
class CategoryList < Page |
|||
def initialize(site, base, dir, categories) |
|||
@site = site |
|||
@base = base |
|||
@dir = dir |
|||
@name = 'index.html' |
|||
|
|||
self.process(@name) |
|||
self.read_yaml(File.join(base, '_layouts'), 'category_list.html') |
|||
self.data['categories'] = categories |
|||
end |
|||
end |
|||
|
|||
class CategoryGenerator < Generator |
|||
safe true |
|||
|
|||
def generate(site) |
|||
if site.layouts.key? 'category_index' |
|||
dir = site.config['category_dir'] || 'categories' |
|||
site.categories.keys.each do |category| |
|||
write_category_index(site, File.join(dir, category.gsub(/\s/, "-").gsub(/[^\w-]/, '').downcase), category) |
|||
end |
|||
end |
|||
|
|||
if site.layouts.key? 'category_list' |
|||
dir = site.config['category_dir'] || 'categories' |
|||
write_category_list(site, dir, site.categories.keys.sort) |
|||
end |
|||
end |
|||
|
|||
def write_category_index(site, dir, category) |
|||
index = CategoryIndex.new(site, site.source, dir, category) |
|||
index.render(site.layouts, site.site_payload) |
|||
index.write(site.dest) |
|||
site.static_files << index |
|||
end |
|||
|
|||
def write_category_list(site, dir, categories) |
|||
index = CategoryList.new(site, site.source, dir, categories) |
|||
index.render(site.layouts, site.site_payload) |
|||
index.write(site.dest) |
|||
site.static_files << index |
|||
end |
|||
end |
|||
|
|||
end |
|||
|
|||
@ -1,134 +0,0 @@ |
|||
$max-width: 1200px !default; |
|||
|
|||
// Padding used for layout margins |
|||
$pad-min: 18px !default; |
|||
$pad-narrow: 25px !default; |
|||
$pad-medium: 35px !default; |
|||
$pad-wide: 55px !default; |
|||
|
|||
// Sidebar widths used in media queries |
|||
$sidebar-width-medium: 240px !default; |
|||
$sidebar-pad-medium: 15px !default; |
|||
$sidebar-pad-wide: 20px !default; |
|||
$sidebar-width-wide: 300px !default; |
|||
|
|||
.group { @include pie-clearfix; } |
|||
|
|||
body { |
|||
-webkit-text-size-adjust: none; |
|||
max-width: $max-width; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
> header, > nav, > footer, #articles > article, #articles > nav { |
|||
@extend .group; |
|||
padding-left: $pad-min; |
|||
padding-right: $pad-min; |
|||
@media only screen and (min-width: 480px) { |
|||
padding-left: $pad-narrow; |
|||
padding-right: $pad-narrow; |
|||
} |
|||
@media only screen and (min-width: 768px) { |
|||
padding-left: $pad-medium; |
|||
padding-right: $pad-medium; |
|||
} |
|||
@media only screen and (min-width: 992px) { |
|||
padding-left: $pad-wide; |
|||
padding-right: $pad-wide; |
|||
} |
|||
} |
|||
> header { |
|||
font-size: 1em; |
|||
padding-top: 1.5em; |
|||
padding-bottom: 1.5em; |
|||
} |
|||
} |
|||
|
|||
.toggle-sidebar { display: none; } |
|||
#articles { width: 100%; |
|||
+ aside { |
|||
float: none; |
|||
padding: 0 $pad-min 1px; |
|||
background-color: $sidebar-bg; |
|||
border-top: 1px solid $sidebar-border; |
|||
} |
|||
} |
|||
|
|||
@media only screen and (min-width: 550px) { |
|||
body > header { font-size: 1em; } |
|||
} |
|||
@media only screen and (min-width: 768px) { |
|||
body { -webkit-text-size-adjust: auto; } |
|||
body > header { font-size: 1.2em; } |
|||
body > nav { |
|||
+ div { |
|||
@extend .group; |
|||
padding: 0; |
|||
margin: 0 auto; |
|||
> div { |
|||
@extend .group; |
|||
margin-right: $sidebar-width-medium; |
|||
} |
|||
} |
|||
} |
|||
#articles { |
|||
padding-top: $pad-medium/2; |
|||
padding-bottom: $pad-medium/2; |
|||
float: left; |
|||
+ aside { |
|||
width: $sidebar-width-medium - $sidebar-pad-medium*2; |
|||
padding: 0 $sidebar-pad-medium $sidebar-pad-medium; |
|||
background: none; |
|||
float: left; |
|||
margin: 0 -100% 0 0; |
|||
} |
|||
} |
|||
body > div > div { position: relative; } |
|||
|
|||
.collapse-sidebar { |
|||
> div > div { margin-right: 10px; } |
|||
#articles + aside { |
|||
display: none; |
|||
} |
|||
.toggle-sidebar { |
|||
right: -1px; |
|||
background-color: $sidebar-bg; |
|||
border-right-width: 0; |
|||
text-indent: 2px; |
|||
border-left: 1px solid $sidebar-border; |
|||
@include border-bottom-right-radius(0); |
|||
@include border-bottom-left-radius(.3em); |
|||
@include link-colors(#aaa, #888); |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
|
|||
@media only screen and (min-width: 992px) { |
|||
body > header { font-size: 1.3em; } |
|||
body > nav + div > div { margin-right: $sidebar-width-wide; } |
|||
#articles { |
|||
padding-top: $pad-wide/2; |
|||
padding-bottom: $pad-wide/2; |
|||
+ aside { |
|||
width: $sidebar-width-wide - $sidebar-pad-wide*2; |
|||
padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide; |
|||
} |
|||
} |
|||
} |
|||
@ -1,71 +0,0 @@ |
|||
// Main Link Colors |
|||
$link-color: lighten(#165b94, 3) !default; |
|||
$link-color-hover: adjust-hue($link-color, -200) !default; |
|||
$link-color-visited: darken(adjust_hue($link_color, 70), 10) !default; |
|||
$link-color-active: darken($link-color-hover, 15) !default; |
|||
|
|||
// Main Section Colors |
|||
$page-bg: #252525 !default; |
|||
$article-border: #eeeeee !default; |
|||
$main-bg: #f5f5f5 !default; |
|||
|
|||
$header-bg: #333 !default; |
|||
$header-border: lighten($header-bg, 15) !default; |
|||
$title-color: #f2f2f2 !default; |
|||
$subtitle-color: #aaa !default; |
|||
|
|||
$text-color: #222 !default; |
|||
$text-color-light: #aaa !default; |
|||
$type-border: #ddd !default; |
|||
|
|||
|
|||
/* Navigation */ |
|||
$nav-bg: #ccc !default; |
|||
$nav-color: darken($nav-bg, 38) !default; |
|||
$nav-color-hover: darken($nav-color, 25) !default; |
|||
$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default; |
|||
$nav-border: darken($nav-bg, 10) !default; |
|||
$nav-border-top: lighten($nav-bg, 15) !default; |
|||
$nav-border-bottom: darken($nav-bg, 25) !default; |
|||
$nav-border-left: darken($nav-bg, 11) !default; |
|||
$nav-border-right: lighten($nav-bg, 7) !default; |
|||
|
|||
/* Sidebar colors */ |
|||
$sidebar-bg: #eee !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; |
|||
$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default; |
|||
$sidebar-border: darken($sidebar-bg, 7) !default; |
|||
$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default; |
|||
$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default; |
|||
$twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default; |
|||
|
|||
$footer-color: #999999 !default; |
|||
$footer-bg: #ccc !default; |
|||
$footer-color: darken($footer-bg, 38) !default; |
|||
$footer-color-hover: darken($footer-color, 10) !default; |
|||
$footer-border-top: lighten($footer-bg, 15) !default; |
|||
$footer-border-bottom: darken($footer-bg, 15) !default; |
|||
$footer-link-color: darken($footer-bg, 38) !default; |
|||
$footer-link-color-hover: darken($footer-color, 25) !default; |
|||
$page-border-bottom: darken($footer-bg, 5) !default; |
|||
|
|||
// Form Colors |
|||
$fieldset-bg: #ececec; |
|||
$fieldset-border: #c3c3c3; |
|||
|
|||
$textinput-color: #333333; |
|||
$textinput-bg: #f4f4f4; |
|||
$textinput-bg-focus: #fefeee; |
|||
|
|||
$textinput-border-top: #aaaaaa; |
|||
$textinput-border-bottom: #c6c6c6; |
|||
$textinput-border-left: #c3c3c3; |
|||
$textinput-border-right: #c3c3c3; |
|||
$textinput-border-focus: #989898; |
|||
|
|||
#articles a, #articles + aside a { |
|||
@include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active); |
|||
} |
|||
a { @include transition(color, .5s); } |
|||
@ -1,130 +0,0 @@ |
|||
$blockquote: $type-border !default; |
|||
$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; |
|||
|
|||
// Fonts |
|||
.heading { |
|||
font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif; |
|||
} |
|||
.sans { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; } |
|||
.serif { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; } |
|||
.mono { font-family: $mono; } |
|||
|
|||
body > header h1 { |
|||
font-size: 2.6em; |
|||
@extend .heading; |
|||
font-weight: normal; |
|||
line-height: 1.2em; |
|||
margin-bottom: 0.6667em; |
|||
} |
|||
|
|||
body { |
|||
line-height: 1.5em; |
|||
color: $text-color; |
|||
@extend .serif; |
|||
} |
|||
|
|||
#{headings()}{ |
|||
@extend .heading; |
|||
text-rendering: optimizelegibility; |
|||
margin-bottom: 1em; |
|||
font-weight: bold; |
|||
} |
|||
h1 { |
|||
font-size: 3.2em; |
|||
line-height: 1.2em; |
|||
@media only screen and (max-width: 768px) { font-size: 2.2em; } |
|||
} |
|||
|
|||
|
|||
h2, section h1 { |
|||
font-size: 1.5em; |
|||
} |
|||
h3, section h2, section section h1 { |
|||
font-size: 1.3em; |
|||
} |
|||
h4, section h3, section section h2, section section section h1 { |
|||
font-size: 1em; |
|||
} |
|||
h5, section h4, section section h3 { |
|||
font-size: .9em; |
|||
} |
|||
h6, section h5, section section h4, section section section h3 { |
|||
font-size: .8em; |
|||
} |
|||
p, blockquote, ul, ol { margin-bottom: 1.5em; } |
|||
|
|||
ul{ list-style-type: circle; } |
|||
|
|||
ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } } |
|||
ul ul, ol ol { margin-left: 1.75em; } |
|||
|
|||
strong { font-weight: bold; } |
|||
|
|||
em { font-style: italic; } |
|||
|
|||
sup, sub { font-size: 0.8em; position: relative; display: inline-block; } |
|||
sup { top: -.5em; } |
|||
sub { bottom: -.5em; } |
|||
|
|||
q { font-style: italic; |
|||
&:before { content: "\201C"; } |
|||
&:after { content: "\201D"; } |
|||
} |
|||
|
|||
em, dfn { font-style: italic; } |
|||
|
|||
strong, dfn { font-weight: bold; } |
|||
|
|||
del, s { text-decoration: line-through; } |
|||
|
|||
abbr, acronym { border-bottom: 1px dotted; cursor: help; } |
|||
|
|||
pre, code, tt { @extend .mono-font; } |
|||
|
|||
sub, sup { line-height: 0; } |
|||
|
|||
hr { margin-bottom: 0.2em; } |
|||
|
|||
small { font-size: .8em; } |
|||
|
|||
big { font-size: 1.2em; } |
|||
|
|||
blockquote { |
|||
$bq-margin: 1.2em; |
|||
font-style: italic; |
|||
position: relative; |
|||
font-size: 1.2em; |
|||
line-height: 1.5em; |
|||
padding-left: 1em; |
|||
border-left: 4px solid rgba($text-color-light, .5); |
|||
cite { |
|||
font-style: italic; |
|||
a { color: $text-color-light !important; word-wrap: break-word; } |
|||
&:before { content: '–'; padding:{right: .3em; left: .3em;} color: $text-color-light; } |
|||
} |
|||
@media only screen and (min-width: 992px) { |
|||
padding-left: 1.5em; |
|||
border-left-width: 4px; |
|||
} |
|||
} |
|||
|
|||
.has-pullquote:before { |
|||
/* Reset metrics. */ |
|||
padding: 0; |
|||
border: none; |
|||
|
|||
/* Content */ |
|||
content: attr(data-pullquote); |
|||
|
|||
/* Pull out to the right, modular scale based margins. */ |
|||
float: right; |
|||
width: 45%; |
|||
margin: .5em 0 1em 1.5em; |
|||
|
|||
/* Baseline correction */ |
|||
position: relative; |
|||
top: 7px; |
|||
font-size: 1.4em; |
|||
line-height: 1.45em; |
|||
} |
|||
|
|||
@ -1,21 +0,0 @@ |
|||
@mixin mask-image($img, $repeat: no-repeat){ |
|||
@include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms); |
|||
@include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms); |
|||
width: image-width($img); |
|||
height: image-height($img); |
|||
} |
|||
|
|||
@mixin selection($bg, $color: inherit, $text-shadow: none){ |
|||
* { |
|||
&::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; } |
|||
&::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; } |
|||
&::selection { background: $bg; color: $color; text-shadow: $text-shadow; } |
|||
} |
|||
} |
|||
|
|||
@function text-color($color, $dark: dark, $light: light){ |
|||
$text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000; |
|||
$text-color: if($text-color >= 150, $dark, $light); |
|||
@return $text-color; |
|||
} |
|||
|
|||
@ -1,4 +0,0 @@ |
|||
.delicious-posts { |
|||
a.delicious-link { margin-bottom: .5em; display: block; } |
|||
p { font-size: 1em; } |
|||
} |
|||
@ -1,12 +0,0 @@ |
|||
#pinboard_linkroll { |
|||
.pin-title, .pin-description { |
|||
display: block; |
|||
margin-bottom: .5em; |
|||
} |
|||
.pin-tag { |
|||
@include hover-link; |
|||
@extend .aside-alt-link; |
|||
&:after { content: ','; } |
|||
&:last-child:after { content: ''; } |
|||
} |
|||
} |
|||
@ -1,59 +1,4 @@ |
|||
.side-shadow-border { |
|||
@include box-shadow(lighten($sidebar-bg, 5) 0 1px); |
|||
} |
|||
#articles + aside { |
|||
color: $sidebar-color; |
|||
padding-top: 1.2em; |
|||
text-shadow: lighten($sidebar-bg, 8) 0 1px; |
|||
section { |
|||
@extend .sans; |
|||
font-size: .8em; |
|||
line-height: 1.4em; |
|||
margin-bottom: 1.5em; |
|||
h1 { |
|||
margin: 1.5em 0 0; |
|||
padding-bottom: .2em; |
|||
border-bottom: 1px solid $sidebar-border; |
|||
@extend .side-shadow-border; |
|||
+ p { |
|||
padding-top: .4em; |
|||
} |
|||
} |
|||
} |
|||
ul { |
|||
margin-bottom: 0.5em; |
|||
} |
|||
li { |
|||
list-style: none; |
|||
padding: .5em 0; |
|||
margin: 0; |
|||
border-bottom: 1px solid $sidebar-border; |
|||
@extend .side-shadow-border; |
|||
p:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
a { |
|||
color: inherit; |
|||
@include transition(color, .5s); |
|||
} |
|||
&:hover a, &:hover #tweets a { color: $sidebar-link-color; |
|||
&:hover { color: $sidebar-link-color-hover; } |
|||
} |
|||
#recent_posts { |
|||
time { |
|||
text-transform: uppercase; |
|||
font-size: .9em; |
|||
color: #666; |
|||
} |
|||
} |
|||
@import "twitter"; |
|||
@import "pinboard"; |
|||
@import "delicious"; |
|||
} |
|||
.aside-alt-link { |
|||
color: $sidebar-link-color-subdued; |
|||
&:hover { |
|||
color: $sidebar-link-color-subdued-hover; |
|||
} |
|||
} |
|||
@import "sidebar/base"; |
|||
@import "sidebar/twitter"; |
|||
@import "sidebar/pinboard"; |
|||
@import "sidebar/delicious"; |
|||
|
|||
@ -1,16 +0,0 @@ |
|||
$base03: #002b36; //darkest blue |
|||
$base02: #073642; //dark blue |
|||
$base01: #586e75; //darkest gray |
|||
$base00: #657b83; //dark gray |
|||
$base0: #839496; //medium gray |
|||
$base1: #93a1a1; //medium light gray |
|||
$base2: #eee8d5; //cream |
|||
$base3: #fdf6e3; //white |
|||
$yellow: #b58900; |
|||
$orange: #cb4b16; |
|||
$red: #dc322f; |
|||
$magenta: #d33682; |
|||
$violet: #6c71c4; |
|||
$blue: #268bd2; |
|||
$cyan: #2aa198; |
|||
$green: #859900; |
|||
@ -1,33 +0,0 @@ |
|||
#tweets { |
|||
.loading { |
|||
background: inline-image('bird_32_gray.png') no-repeat center .5em; |
|||
color: darken($sidebar-bg, 18); |
|||
text-shadow: $main-bg 0 1px; |
|||
text-align: center; |
|||
padding: 2.5em 0 .5em; |
|||
&.error { |
|||
background: inline-image('bird_32_gray_fail.png') no-repeat center .5em; |
|||
} |
|||
} |
|||
a { color: $sidebar-link-color-subdued; @include hover-link; } |
|||
p { |
|||
position: relative; |
|||
padding-right: 1em; |
|||
} |
|||
a[href*=status]{ |
|||
color: $twitter-status-link; |
|||
float: right; |
|||
padding: 0 0 .1em 1em; |
|||
position: relative; right: -1.3em; |
|||
text-shadow: #fff 0 1px; |
|||
font-size: .7em; |
|||
span { font-size: 1.5em; } |
|||
&:hover { |
|||
color: $sidebar-link-color-subdued-hover; |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
a[href*='twitter.com/search']{ |
|||
@extend .aside-alt-link; |
|||
} |
|||
} |
|||
@ -1,6 +1,10 @@ |
|||
{% if page.date %} |
|||
<time datetime="{{ page.date | datetime }}" pubdate {% if page.updated %} updated {% endif %}>{{ page.date | ordinalize }}</time> |
|||
{% capture date %}{{ page.date }}{{ post.date }}{% endcapture %} |
|||
{% capture has_date %}{{ date | size }}{% endcapture %} |
|||
{% capture updated %}{{ page.updated }}{{ post.updated }}{% endcapture %} |
|||
{% capture was_updated %}{{ updated | size }}{% endcapture %} |
|||
{% if has_date != '0' %} |
|||
<time datetime="{{ date | datetime }}" pubdate {% if updated %} updated {% endif %}>{{ date | ordinalize }}</time> |
|||
{% endif %} |
|||
{% if page.updated %} |
|||
<time class="updated" datetime="{{ page.updated | datetime }}"></time> |
|||
{% if was_updated != '0' %} |
|||
<time class="updated" datetime="{{ updated | datetime }}"></time> |
|||
{% endif %} |
|||
|
|||
@ -1,24 +0,0 @@ |
|||
--- |
|||
layout: post |
|||
title: Blog Archive |
|||
no_meta: true |
|||
--- |
|||
{% for post in site.posts reverse %} |
|||
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %} |
|||
{% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %} |
|||
{% unless year == this_year %} |
|||
{% unless forloop.first %}</ul>{% endunless %} |
|||
{% assign year = this_year %} |
|||
<h2>{{ year }}</h2> |
|||
<ul class="blog_archives"> |
|||
{% endunless %} |
|||
{% unless month == this_month %} |
|||
{% assign month = this_month %} |
|||
<li><h4>{{ month }}</h4></li> |
|||
{% endunless %} |
|||
<li> |
|||
<time datetime="{{ post.date | datetime }}" pubdate>{{ post.date | date: "%d"}}</time> |
|||
<a href="{{ post.url }}">{{post.title}}</a> |
|||
</li> |
|||
{% if forloop.last %}</ul>{% endif %} |
|||
{% endfor %} |
|||
Loading…
Reference in new issue