From 353ccfd4ebec153a46b12faffff8ab2bba36efc8 Mon Sep 17 00:00:00 2001
From: Brandon Mathis <brandon@imathis.com>
Date: Mon, 27 Jun 2011 15:59:21 -0400
Subject: 1. Added Category support 2. Designed blog archives pages 3.
Restructured Sass 4. Added Categories to rake post metadata 5. Some general
style improvements
---
Rakefile | 1 +
_config.yml | 1 +
themes/classic/_plugins/category.rb | 65 ---------
themes/classic/_plugins/custom_filters.rb | 36 +++--
themes/classic/sass/core/_layout.scss | 134 ------------------
themes/classic/sass/core/_theme.scss | 71 ----------
themes/classic/sass/core/_typography.scss | 130 ------------------
themes/classic/sass/core/_utilities.scss | 21 ---
themes/classic/sass/partials/_blog.scss | 164 +++++++++++------------
themes/classic/sass/partials/_delicious.scss | 4 -
themes/classic/sass/partials/_footer.scss | 2 +-
themes/classic/sass/partials/_header.scss | 2 +-
themes/classic/sass/partials/_navigation.scss | 9 +-
themes/classic/sass/partials/_page.scss | 6 +-
themes/classic/sass/partials/_pinboard.scss | 12 --
themes/classic/sass/partials/_sidebar.scss | 63 +--------
themes/classic/sass/partials/_solarized.scss | 16 ---
themes/classic/sass/partials/_syntax.scss | 13 +-
themes/classic/sass/partials/_twitter.scss | 33 -----
themes/classic/sass/screen.scss | 16 +--
themes/classic/source/_includes/article.html | 7 +-
themes/classic/source/_includes/navigation.html | 4 +-
themes/classic/source/_includes/post_author.html | 4 +-
themes/classic/source/_includes/post_date.html | 12 +-
themes/classic/source/_layouts/post.html | 3 +
themes/classic/source/archive.html | 24 ----
themes/classic/source/index.html | 4 +-
27 files changed, 149 insertions(+), 708 deletions(-)
delete mode 100644 themes/classic/_plugins/category.rb
delete mode 100644 themes/classic/sass/core/_layout.scss
delete mode 100644 themes/classic/sass/core/_theme.scss
delete mode 100644 themes/classic/sass/core/_typography.scss
delete mode 100644 themes/classic/sass/core/_utilities.scss
delete mode 100644 themes/classic/sass/partials/_delicious.scss
delete mode 100644 themes/classic/sass/partials/_pinboard.scss
delete mode 100644 themes/classic/sass/partials/_solarized.scss
delete mode 100644 themes/classic/sass/partials/_twitter.scss
delete mode 100644 themes/classic/source/archive.html
diff --git a/Rakefile b/Rakefile
index 2d877db1..f3903a95 100644
--- a/Rakefile
+++ b/Rakefile
@@ -61,6 +61,7 @@ task :post, :filename do |t, args|
post.puts "title: #{args.filename.gsub(/[-_]/, ' ').titlecase}"
post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
post.puts "layout: post"
+ post.puts "categories: []"
post.puts "---"
end
end
diff --git a/_config.yml b/_config.yml
index 05a66f63..a9e14285 100644
--- a/_config.yml
+++ b/_config.yml
@@ -17,6 +17,7 @@ pygments: true
#posts_per_page: 10
paginate: 5
recent_posts: 5
+category_dir: category
simple_search: http://google.com/search
# Optional configurations
diff --git a/themes/classic/_plugins/category.rb b/themes/classic/_plugins/category.rb
deleted file mode 100644
index b9accdec..00000000
--- a/themes/classic/_plugins/category.rb
+++ /dev/null
@@ -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
-
diff --git a/themes/classic/_plugins/custom_filters.rb b/themes/classic/_plugins/custom_filters.rb
index d1fce0dd..f0db30ee 100644
--- a/themes/classic/_plugins/custom_filters.rb
+++ b/themes/classic/_plugins/custom_filters.rb
@@ -1,47 +1,64 @@
#custom filters for Octopress
module OctopressFilters
- def auto_exerpt(input, url, url_text="Read more …")
- if input.index(/<!--\s?more\s?-->/i)
- input.split(/<!--\s?more\s?-->/i)[0] + "<p><a rel='full-article' href='#{url}'>#{url_text}</a></p>"
+ # Used on the blog index to split posts on the <!--more--> marker
+ def exerpt(input)
+ if input.index(/<!--\s*more\s*-->/i)
+ input.split(/<!--\s*more\s*-->/i)[0]
else
input
end
end
- def exerpt(input)
- if input.index(/<!--\s*more\s*-->/i)
- input.split(/<!--\s*more\s*-->/i)[0]
+
+ # Summary is used on the Archive pages to return the first block of content from a post.
+ def summary(input)
+ if input.index(/\n\n/)
+ input.split(/\n\n/)[0]
else
input
end
end
+
+ # Replaces relative urls with full urls
def full_urls(input, url='')
input.gsub /(\s+(href|src)\s*=\s*["|']{1})(\/[^\"'>]+)/ do
$1+url+$3
end
end
+
+ # Returns a url without the http:// for use in as a search modifier eg. 'search terms site:website.com'
def search_url(input)
- input.gsub /(http:\/\/)(\S+)/ do
+ input.gsub /(https?:\/\/)(\S+)/ do
$2
end
end
+
+ # replaces primes with smartquotes using RubyPants
def smart_quotes(input)
require 'rubypants'
RubyPants.new(input).to_html
end
+
+ # Returns a title cased string based on John Gruber's title case http://daringfireball.net/2008/08/title_case_update
def titlecase(input)
input.titlecase
end
+
+ # Returns a datetime if the input is a string
def datetime(date)
if date.class == String
date = Time.parse(date)
end
date
end
+
+ # Returns an ordidinal date eg July 22 2007 -> July 22nd 2007
def ordinalize(date)
date = datetime(date)
"#{date.strftime('%b')} #{ordinal(date.strftime('%e').to_i)}, #{date.strftime('%Y')}"
end
+
+ # Returns an ordinal number. 13 -> 13th, 21 -> 21st etc.
def ordinal(number)
if (11..13).include?(number.to_i % 100)
"#{number}<span>th</span>"
@@ -54,10 +71,5 @@ module OctopressFilters
end
end
end
- #YearlyPost = Struct.new('YearlyPost', :year, :posts)
- def yearly_posts(site)
- #site.posts.reverse.group_by { |p| p.date.strftime("%Y") }.map { |k,v| YearlyPost.new(k,v) }
- site
- end
end
Liquid::Template.register_filter OctopressFilters
diff --git a/themes/classic/sass/core/_layout.scss b/themes/classic/sass/core/_layout.scss
deleted file mode 100644
index b24e1b29..00000000
--- a/themes/classic/sass/core/_layout.scss
+++ /dev/null
@@ -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;
- }
- }
-}
diff --git a/themes/classic/sass/core/_theme.scss b/themes/classic/sass/core/_theme.scss
deleted file mode 100644
index 7aac67e4..00000000
--- a/themes/classic/sass/core/_theme.scss
+++ /dev/null
@@ -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); }
diff --git a/themes/classic/sass/core/_typography.scss b/themes/classic/sass/core/_typography.scss
deleted file mode 100644
index 8ab0e657..00000000
--- a/themes/classic/sass/core/_typography.scss
+++ /dev/null
@@ -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;
-}
-
diff --git a/themes/classic/sass/core/_utilities.scss b/themes/classic/sass/core/_utilities.scss
deleted file mode 100644
index 8b718cdc..00000000
--- a/themes/classic/sass/core/_utilities.scss
+++ /dev/null
@@ -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;
-}
-
diff --git a/themes/classic/sass/partials/_blog.scss b/themes/classic/sass/partials/_blog.scss
index 12f596a1..0cf11ae8 100644
--- a/themes/classic/sass/partials/_blog.scss
+++ b/themes/classic/sass/partials/_blog.scss
@@ -1,111 +1,107 @@
-$border: inline-image('dotted-border.png');
#articles {
overflow: hidden;
- @media only screen and (max-width: 768px) {
- ul, ol { margin-left: 1.4em; }
+ ul, ol { margin-left: 1.4em; }
+ @media only screen and (min-width: 768px) {
+ ul, ol { margin-left: 0; }
}
> article {
padding-bottom: 1em;
- &:last-child { margin-bottom: 0; border-bottom: none; }
+ &:last-child { margin-bottom: 0; }
h2 {
padding-top: 0.8em;
- background: $border top left repeat-x;
- &:first-child {
- background: none;
- padding-top: 0;
- }
+ background: $img-border top left repeat-x;
+ &:first-child { background: none; padding-top: 0; }
}
- .byline + time:before, time +time:before, .comments:before {
+ .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
@extend .separator;
}
- header {
- position: relative;
- padding-top: 2em;
- margin-bottom: 1.5em;
- padding-bottom: 1em;
- background: $border bottom left repeat-x;
- h1 {
- margin: 0;
- a { text-decoration: none;
- &:hover { text-decoration: underline; } }
- }
- p {
- font-size: .9em;
- color: $text-color-light;
- margin: 0;
- @extend .sans;
- &.meta {
- text-transform: uppercase;
- position: absolute;
- top: 0;
- }
- }
- @media only screen and (max-width: 768px) {
- padding-bottom: 1em;
- margin-bottom: 1em;
- background: $border bottom left repeat-x;
- p.meta { position: static; }
+ }
+ header {
+ position: relative;
+ padding-top: 2em;
+ padding-bottom: 1em;
+ margin-bottom: 1em;
+ background: $img-border bottom left repeat-x;
+ h1 {
+ margin: 0;
+ a { text-decoration: none;
+ &:hover { text-decoration: underline; } }
+ }
+ p {
+ font-size: .9em;
+ color: $text-color-light;
+ margin: 0;
+ @extend .sans;
+ &.meta {
+ text-transform: uppercase;
}
}
- h1.feature {
- padding-top: .5em;
- margin-bottom: 1em;
+ @media only screen and (min-width: 768px) {
+ margin-bottom: 1.5em;
padding-bottom: 1em;
- background: $border bottom left repeat-x;
- font-size: 2.0em; font-style: italic;
- line-height: 1.3em;
+ background: $img-border bottom left repeat-x;
+ p.meta { position: absolute; top: 0; }
}
- .entry-content {
- img, video { max-width: 100%; height: auto; }
- video {
- width: 100%; display: block; margin-bottom: 1.5em;
- padding: .8em; background: #fff; border: 1px solid #eee;
- @include box-sizing(border-box);
- }
- .flash-video {
- max-width: 100%;
- margin-bottom: 1.5em;
- @include box-sizing(border-box);
- padding: .8em; background: #fff; border: 1px solid #eee;
- > div {
- position: relative;
- display: block;
- padding-bottom: 56.25%;
- padding-top: 1px;
- height: 0;
- overflow: hidden;
- iframe, object, embed {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- }
- }
+ }
+ h1.feature {
+ padding-top: .5em;
+ margin-bottom: 1em;
+ padding-bottom: 1em;
+ background: $img-border bottom left repeat-x;
+ font-size: 2.0em; font-style: italic;
+ line-height: 1.3em;
+ }
+ .entry-content {
+ img, video { max-width: 100%; height: auto; }
+ video {
+ width: 100%; display: block; margin-bottom: 1.5em;
+ padding: .8em; background: #fff; border: 1px solid #eee;
+ @include box-sizing(border-box);
}
- iframe.twitter-share-button {
+ }
+ .flash-video {
+ max-width: 100%;
+ margin-bottom: 1.5em;
+ @include box-sizing(border-box);
+ padding: .8em; background: #fff; border: 1px solid #eee;
+ > div {
position: relative;
- top: .3em;
- padding-left: .5em;
- }
- > footer {
- margin-top: 2em;
- padding-top: 1em;
- margin-bottom: 1.5em;
- background: $border top left repeat-x;
- time, .author { color: $text-color-light; @extend .sans; }
+ display: block;
+ padding-bottom: 56.25%;
+ padding-top: 1px;
+ height: 0;
+ overflow: hidden;
+ iframe, object, embed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
}
}
+ iframe.twitter-share-button {
+ position: relative;
+ top: .3em;
+ padding-left: .5em;
+ }
+ > article > footer {
+ margin-top: 2em;
+ padding-top: 1em;
+ margin-bottom: 1.5em;
+ background: $img-border top left repeat-x;
+ @extend .sans;
+ }
+
}
article + article {
- background: $border top left repeat-x;
+ background: $img-border top left repeat-x;
}
#articles.blog-index {
article header { background: none; padding-bottom: 0; }
article h1 {
font-size: 2.2em;
- a { color: inherit; &:hover{ color: $link-color-hover; } }
+ a { color: inherit; &:hover { color: $link-color-hover; } }
}
a[rel=full-article] {
background: darken($main-bg, 5);
@@ -125,8 +121,6 @@ article + article {
footer {
@extend .sans;
margin-top: 1em;
- p.meta { color: $text-color-light; }
- a { color: inherit; &:hover{ color: $link-color-hover;} }
}
}
diff --git a/themes/classic/sass/partials/_delicious.scss b/themes/classic/sass/partials/_delicious.scss
deleted file mode 100644
index e962702e..00000000
--- a/themes/classic/sass/partials/_delicious.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.delicious-posts {
- a.delicious-link { margin-bottom: .5em; display: block; }
- p { font-size: 1em; }
-}
diff --git a/themes/classic/sass/partials/_footer.scss b/themes/classic/sass/partials/_footer.scss
index 019bc2a4..350c562d 100644
--- a/themes/classic/sass/partials/_footer.scss
+++ b/themes/classic/sass/partials/_footer.scss
@@ -4,7 +4,7 @@ body > footer {
color: $footer-color;
text-shadow: lighten($footer-bg, 5) 0 1px;
background-color: $footer-bg;
- @include background(linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)));
+ @include background(image-url('noise.png'), linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)));
border-top: 1px solid $footer-border-top;
position: relative;
padding-top: 1em;
diff --git a/themes/classic/sass/partials/_header.scss b/themes/classic/sass/partials/_header.scss
index 9cc4601f..8ae128b1 100644
--- a/themes/classic/sass/partials/_header.scss
+++ b/themes/classic/sass/partials/_header.scss
@@ -1,5 +1,5 @@
body > header {
- background-color: $header-bg;
+ background: $header-bg;
h1 {
display: inline-block;
margin: 0;
diff --git a/themes/classic/sass/partials/_navigation.scss b/themes/classic/sass/partials/_navigation.scss
index 2fa17a1a..be132561 100644
--- a/themes/classic/sass/partials/_navigation.scss
+++ b/themes/classic/sass/partials/_navigation.scss
@@ -1,13 +1,12 @@
body > nav {
position: relative;
background-color: $nav-bg;
- @include background(linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)));
+ @include background(image-url('noise.png'), linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)));
border: {
top: 1px solid $nav-border-top;
bottom: 1px solid $nav-border-bottom; }
padding-top: .35em;
padding-bottom: .35em;
- //position: absolute; left: 0; right: 0; top: 0;
form {
@include background-clip(padding-box);
margin: 0; padding: 0;
@@ -43,7 +42,7 @@ body > nav {
@include horizontal-list(0);
float: left;
display: block;
- padding-top: .25em;
+ padding-top: .15em;
}
ul[role=subscription] {
margin-left: .8em;
@@ -59,7 +58,7 @@ body > nav {
text-shadow: lighten($nav-bg, 12) 0 1px;
float: left;
text-decoration: none;
- font-size: 1em;
+ font-size: 1.1em;
padding: .1em 0;
line-height: 1.5em;
}
@@ -132,7 +131,7 @@ body > nav {
}
}
}
- ul[role=subscription] { li, a { border: 0; padding: 0; }}
+ ul[role=subscription] { position: relative; top: .2em; li, a { border: 0; padding: 0; }}
a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); }
a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); }
}
diff --git a/themes/classic/sass/partials/_page.scss b/themes/classic/sass/partials/_page.scss
index 99a07ebc..d8ff5449 100644
--- a/themes/classic/sass/partials/_page.scss
+++ b/themes/classic/sass/partials/_page.scss
@@ -1,12 +1,12 @@
html {
- background: $page-bg inline-image('line-tile.png') top left;
+ background: $page-bg image-url('line-tile.png') top left;
}
body {
> div {
- background-color: $sidebar-bg;
+ background: $sidebar-bg image-url('noise.png') top left;
border-bottom: 1px solid $page-border-bottom;
> div {
- background-color: $main-bg;
+ background: $main-bg image-url('noise.png') top left;
border-right: 1px solid $sidebar-border;
}
}
diff --git a/themes/classic/sass/partials/_pinboard.scss b/themes/classic/sass/partials/_pinboard.scss
deleted file mode 100644
index 9f9ab461..00000000
--- a/themes/classic/sass/partials/_pinboard.scss
+++ /dev/null
@@ -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: ''; }
- }
-}
diff --git a/themes/classic/sass/partials/_sidebar.scss b/themes/classic/sass/partials/_sidebar.scss
index 8c38e2a6..ac790e04 100644
--- a/themes/classic/sass/partials/_sidebar.scss
+++ b/themes/classic/sass/partials/_sidebar.scss
@@ -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";
diff --git a/themes/classic/sass/partials/_solarized.scss b/themes/classic/sass/partials/_solarized.scss
deleted file mode 100644
index 4952120d..00000000
--- a/themes/classic/sass/partials/_solarized.scss
+++ /dev/null
@@ -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;
diff --git a/themes/classic/sass/partials/_syntax.scss b/themes/classic/sass/partials/_syntax.scss
index dc6472f2..b14b23bd 100644
--- a/themes/classic/sass/partials/_syntax.scss
+++ b/themes/classic/sass/partials/_syntax.scss
@@ -1,14 +1,16 @@
+$pre-bg: image-url('noise.png') top left;
.highlight, html .gist .gist-file .gist-syntax .gist-highlight {
.line-numbers {
text-align: right;
font-size: .8em;
line-height: 1.45em;
- background: $base02 !important;
+ background: $base02 $pre-bg !important;
border-right: 1px solid darken($base03, 2) !important;
@include box-shadow(lighten($base02, 2) -1px 0 inset);
text-shadow: darken($base02, 10) 0 -1px;
span { color: $base01 !important; }
padding: .8em !important;
+ @include border-radius(0);
}
}
html .gist .gist-file {
@@ -30,7 +32,7 @@ html .gist .gist-file {
border: 1px solid lighten($base02, 2) !important;
color: $base01;
font-size: .7em !important;
- background: $base02;
+ background: $base02 $pre-bg;
@extend .sans;
line-height: 1.5em;
a {
@@ -51,14 +53,15 @@ html .gist .gist-file {
}
}
pre {
- background: #333;
+ background: $base03 $pre-bg;
@include border-radius(.4em);
@extend .mono;
+ border: 1px solid $base02;
line-height: 1.45em;
font-size: .8em;
margin-bottom: 1.5em;
padding: .8em 1em;
- color: #ccc;
+ color: $base1;
overflow: auto;
}
h3.filename {
@@ -88,7 +91,7 @@ p code {
padding: .8em !important;
overflow-x: auto;
line-height: 1.45em;
- background: $base03 !important;
+ background: $base03 $pre-bg !important;
color: $base1 !important;
span { color: $base1 !important; }
span { font-style: normal !important; font-weight: normal !important; }
diff --git a/themes/classic/sass/partials/_twitter.scss b/themes/classic/sass/partials/_twitter.scss
deleted file mode 100644
index 36c6f62b..00000000
--- a/themes/classic/sass/partials/_twitter.scss
+++ /dev/null
@@ -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;
- }
-}
diff --git a/themes/classic/sass/screen.scss b/themes/classic/sass/screen.scss
index a26f08e2..f08da4c2 100644
--- a/themes/classic/sass/screen.scss
+++ b/themes/classic/sass/screen.scss
@@ -2,20 +2,8 @@
@include global-reset;
@include reset-html5;
-@import "core/utilities";
-@import "partials/solarized";
@import "custom/colors";
-@import "core/theme";
@import "custom/layout";
-@import "core/layout";
-@import "core/typography";
-
-/* layout partials */
-@import "partials/header";
-@import "partials/navigation";
-@import "partials/page";
-@import "partials/sidebar";
-@import "partials/blog";
-@import "partials/footer";
-@import "partials/syntax";
+@import "base";
+@import "partials";
@import "custom/styles";
diff --git a/themes/classic/source/_includes/article.html b/themes/classic/source/_includes/article.html
index 7ed6430f..b458d732 100644
--- a/themes/classic/source/_includes/article.html
+++ b/themes/classic/source/_includes/article.html
@@ -1,7 +1,7 @@
{% unless page.no_header %}
<header>
{% if index %}
- <h1 class="entry-title"><a href="{{ page.url }}">{{ page.title | titlecase }}</a></h1>
+ <h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
{% else %}
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
{% endif %}
@@ -10,12 +10,13 @@
{% endunless %}
{% if index %}
<div class="entry-content">{{ content | exerpt | smart_quotes }}</div>
- <p><a rel="full-article" href="{{ page.url }}">Read on →</a></p>
+ <p><a rel="full-article" href="{{ post.url }}">Read on →</a></p>
<footer>
<p class="meta">
{% include post_author.html %}
{% include post_date.html %}
- <span class="comments"><a rel="comments" href="{{ page.url }}#disqus_thread">Add a comment</a></span>
+ {% include post_categories.html %}
+ <span class="comments"><a rel="comments" href="{{ post.url }}#disqus_thread">Comments</a></span>
{% include sharing.html %}
</p>
</footer>
diff --git a/themes/classic/source/_includes/navigation.html b/themes/classic/source/_includes/navigation.html
index f941f1f1..e2827983 100644
--- a/themes/classic/source/_includes/navigation.html
+++ b/themes/classic/source/_includes/navigation.html
@@ -11,6 +11,6 @@
</fieldset>
</form>
<ul role="main-nav">
- <li><a href="/">Home</a></li>
- <li><a href="/archive.html">Archive</a></li>
+ <li><a href="/">Blog</a></li>
+ <li><a href="/archives.html">Archives</a></li>
</ul>
diff --git a/themes/classic/source/_includes/post_author.html b/themes/classic/source/_includes/post_author.html
index a62a68a8..b2db9043 100644
--- a/themes/classic/source/_includes/post_author.html
+++ b/themes/classic/source/_includes/post_author.html
@@ -1,5 +1,5 @@
-{% if page.author %}
- {% assign author = page.author %}
+{% if post.author %}
+ {% assign author = post.author %}
{% else %}
{% assign author = site.author %}
{% endif %}
diff --git a/themes/classic/source/_includes/post_date.html b/themes/classic/source/_includes/post_date.html
index e8455a60..f1ed4815 100644
--- a/themes/classic/source/_includes/post_date.html
+++ b/themes/classic/source/_includes/post_date.html
@@ -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 %}
diff --git a/themes/classic/source/_layouts/post.html b/themes/classic/source/_layouts/post.html
index 196bb4dd..5f55e89f 100644
--- a/themes/classic/source/_layouts/post.html
+++ b/themes/classic/source/_layouts/post.html
@@ -5,13 +5,16 @@ single: true
<article class="hentry">
{% include article.html %}
+ {% unless page.no_meta %}
<footer>
<p class="meta">
{% include post_author.html %}
{% include post_date.html %}
+ {% include post_categories.html %}
{% include sharing.html %}
</p>
</footer>
+ {% endunless %}
{% if site.disqus_short_name %}
<section>
<h1>Comments</h1>
diff --git a/themes/classic/source/archive.html b/themes/classic/source/archive.html
deleted file mode 100644
index e49c6b67..00000000
--- a/themes/classic/source/archive.html
+++ /dev/null
@@ -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 %}
diff --git a/themes/classic/source/index.html b/themes/classic/source/index.html
index d6ff868e..47d848e3 100644
--- a/themes/classic/source/index.html
+++ b/themes/classic/source/index.html
@@ -3,8 +3,8 @@ layout: default
blog_index: true
---
{% assign index = true %}
-{% for page in paginator.posts %}
-{% assign content = page.content %}
+{% for post in paginator.posts %}
+{% assign content = post.content %}
<article>
{% include article.html %}
</article>
--
cgit v1.2.1