diff --git a/.gitignore b/.gitignore index bf425bd..2190de3 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,5 @@ _code_cache _deploy public source/_stash +source/stylesheets/screen.css vendor diff --git a/themes/classic/_plugins/category_generator.rb b/themes/classic/_plugins/category_generator.rb new file mode 100644 index 0000000..c5dbbcd --- /dev/null +++ b/themes/classic/_plugins/category_generator.rb @@ -0,0 +1,161 @@ +# Jekyll category page generator. +# http://recursive-design.com/projects/jekyll-plugins/ +# +# Version: 0.1.4 (201101061053) +# +# Copyright (c) 2010 Dave Perrett, http://recursive-design.com/ +# Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php) +# +# A generator that creates category pages for jekyll sites. +# +# To use it, simply drop this script into the _plugins directory of your Jekyll site. You should +# also create a file called 'category_index.html' in the _layouts directory of your jekyll site +# with the following contents (note: you should remove the leading '# ' characters): +# +# ================================== COPY BELOW THIS LINE ================================== +# --- +# layout: default +# --- +# +#

{{ page.title }}

+# +# ================================== COPY ABOVE THIS LINE ================================== +# +# You can alter the _layout_ setting if you wish to use an alternate layout, and obviously you +# can change the HTML above as you see fit. +# +# When you compile your jekyll site, this plugin will loop through the list of categories in your +# site, and use the layout above to generate a page for each one with a list of links to the +# individual posts. +# +# Included filters : +# - category_links: Outputs the list of categories as comma-separated links. +# - date_to_html_string: Outputs the post.date as formatted html, with hooks for CSS styling. +# +# Available _config.yml settings : +# - category_dir: The subfolder to build category pages in (default is 'categories'). +# - category_title_prefix: The string used before the category name in the page title (default is +# 'Category: '). +module Jekyll + + + # The CategoryIndex class creates a single category page for the specified category. + class CategoryIndex < Page + + # Initializes a new CategoryIndex. + # + # +base+ is the String path to the . + # +category_dir+ is the String path between and the category folder. + # +category+ is the category currently being processed. + def initialize(site, base, category_dir, category) + @site = site + @base = base + @dir = category_dir + @name = 'index.html' + self.process(@name) + # Read the YAML data from the layout page. + self.read_yaml(File.join(base, '_layouts'), 'category_index.html') + self.data['category'] = category + # Set the title for this page. + title_prefix = site.config['category_title_prefix'] || 'Category: ' + self.data['title'] = "#{title_prefix}#{category}" + # Set the meta-description for this page. + meta_description_prefix = site.config['category_meta_description_prefix'] || 'Category: ' + self.data['description'] = "#{meta_description_prefix}#{category}" + end + + end + + + # The Site class is a built-in Jekyll class with access to global site config information. + class Site + + # Creates an instance of CategoryIndex for each category page, renders it, and + # writes the output to a file. + # + # +category_dir+ is the String path to the category folder. + # +category+ is the category currently being processed. + def write_category_index(category_dir, category) + index = CategoryIndex.new(self, self.source, category_dir, category) + index.render(self.layouts, site_payload) + index.write(self.dest) + # Record the fact that this page has been added, otherwise Site::cleanup will remove it. + self.pages << index + end + + # Loops through the list of category pages and processes each one. + def write_category_indexes + if self.layouts.key? 'category_index' + dir = self.config['category_dir'] || 'categories' + self.categories.keys.each do |category| + self.write_category_index(File.join(dir, category.gsub(/_|\W/, '-')), category) + end + + # Throw an exception if the layout couldn't be found. + else + throw "No 'category_index' layout found." + end + end + + end + + + # Jekyll hook - the generate method is called by jekyll, and generates all of the category pages. + class GenerateCategories < Generator + safe true + priority :low + + def generate(site) + site.write_category_indexes + end + + end + + + # Adds some extra filters used during the category creation process. + module Filters + + # Outputs a list of categories as comma-separated links. This is used + # to output the category list for each post on a category page. + # + # +categories+ is the list of categories to format. + # + # Returns string + # + def category_links(categories) + categories = categories.sort!.map do |item| + "#{item}" + end + + case categories.length + when 0 + "" + when 1 + categories[0].to_s + else + "#{categories[0...-1].join(', ')}, #{categories[-1]}" + end + end + + # Outputs the post.date as formatted html, with hooks for CSS styling. + # + # +date+ is the date object to format as HTML. + # + # Returns string + def date_to_html_string(date) + result = '' + date.strftime('%b').upcase + ' ' + result += date.strftime('%d ') + result += date.strftime('%Y ') + result + end + + end + +end + diff --git a/themes/classic/sass/_base.scss b/themes/classic/sass/_base.scss new file mode 100644 index 0000000..f6583f1 --- /dev/null +++ b/themes/classic/sass/_base.scss @@ -0,0 +1,5 @@ +@import "base/utilities"; +@import "base/solarized"; +@import "base/theme"; +@import "base/layout"; +@import "base/typography"; diff --git a/themes/classic/sass/_partials.scss b/themes/classic/sass/_partials.scss new file mode 100644 index 0000000..2ffed5b --- /dev/null +++ b/themes/classic/sass/_partials.scss @@ -0,0 +1,7 @@ +@import "partials/header"; +@import "partials/navigation"; +@import "partials/blog"; +@import "partials/syntax"; +@import "partials/archive"; +@import "partials/sidebar"; +@import "partials/footer"; diff --git a/themes/classic/sass/base/_layout.scss b/themes/classic/sass/base/_layout.scss new file mode 100644 index 0000000..b24e1b2 --- /dev/null +++ b/themes/classic/sass/base/_layout.scss @@ -0,0 +1,134 @@ +$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/base/_solarized.scss b/themes/classic/sass/base/_solarized.scss new file mode 100644 index 0000000..4952120 --- /dev/null +++ b/themes/classic/sass/base/_solarized.scss @@ -0,0 +1,16 @@ +$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/base/_theme.scss b/themes/classic/sass/base/_theme.scss new file mode 100644 index 0000000..adf3364 --- /dev/null +++ b/themes/classic/sass/base/_theme.scss @@ -0,0 +1,76 @@ +$img-border: inline-image('dotted-border.png'); + +// 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: #888 !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; + + +/* Core theme application */ + +article 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); } + +html { + background: $page-bg image-url('line-tile.png') top left; +} +body { + > div { + background: $sidebar-bg image-url('noise.png') top left; + border-bottom: 1px solid $page-border-bottom; + > div { + background: $main-bg image-url('noise.png') top left; + border-right: 1px solid $sidebar-border; + } + } +} diff --git a/themes/classic/sass/base/_typography.scss b/themes/classic/sass/base/_typography.scss new file mode 100644 index 0000000..8ab0e65 --- /dev/null +++ b/themes/classic/sass/base/_typography.scss @@ -0,0 +1,130 @@ +$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/base/_utilities.scss b/themes/classic/sass/base/_utilities.scss new file mode 100644 index 0000000..8b718cd --- /dev/null +++ b/themes/classic/sass/base/_utilities.scss @@ -0,0 +1,21 @@ +@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/_archive.scss b/themes/classic/sass/partials/_archive.scss new file mode 100644 index 0000000..fbf0dac --- /dev/null +++ b/themes/classic/sass/partials/_archive.scss @@ -0,0 +1,72 @@ +#articles .blog-archives { + article { + padding: 1em 0 1em; + position: relative; + background: $img-border bottom left repeat-x; + &:last-child { + background: none; + } + } + h2 { + background: none; + display: none; + } + h1, h2 { color: $text-color; margin-bottom: .3em; } + h1 { + font-size: 1.5em; + a { + @include hover-link; + color: inherit; + &:hover { color: $link-color-hover; } + font-weight: normal; + display: inline-block; + } + } + a.category, time { + @extend .sans; + color: $text-color-light; + } + color: $text-color-light; + .entry-content { display: none; } + time { + font-size: .9em; + line-height: 1em; + .month, .day { display: inline-block; } + .month { text-transform: uppercase; } + } + p { margin-bottom: 1em; } + &, .entry-content { a { @include link-colors(inherit, $link-color-hover); }} + a:hover { color: $link-color-hover; } + @media only screen and (min-width: 550px) { + article { margin-left: 5em; } + h2 { + background: none; + display: inline-block; + float: left; + padding-top: .75em; + &:first-child { padding-top: .75em; } + } + time { + position: absolute; + text-align: right; + left: 0em; + top: 1.8em; + } + .year { display: none; } + article { + padding:{left: 4.5em; bottom: .7em;} + } + a.category { + //text-align: right; + line-height: 1.1em; + //float: right; + } + } +} +#articles .blog-archives.category { + article { + margin-left: 0; + padding-left: 6.8em; + } + .year { display: inline; } +} diff --git a/themes/classic/sass/partials/_page.scss b/themes/classic/sass/partials/_page.scss deleted file mode 100644 index d8ff544..0000000 --- a/themes/classic/sass/partials/_page.scss +++ /dev/null @@ -1,13 +0,0 @@ -html { - background: $page-bg image-url('line-tile.png') top left; -} -body { - > div { - background: $sidebar-bg image-url('noise.png') top left; - border-bottom: 1px solid $page-border-bottom; - > div { - background: $main-bg image-url('noise.png') top left; - border-right: 1px solid $sidebar-border; - } - } -} diff --git a/themes/classic/sass/partials/sidebar/_base.scss b/themes/classic/sass/partials/sidebar/_base.scss new file mode 100644 index 0000000..861efc9 --- /dev/null +++ b/themes/classic/sass/partials/sidebar/_base.scss @@ -0,0 +1,56 @@ +.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; + } + } +} +.aside-alt-link { + color: $sidebar-link-color-subdued; + &:hover { + color: $sidebar-link-color-subdued-hover; + } +} diff --git a/themes/classic/sass/partials/sidebar/_delicious.scss b/themes/classic/sass/partials/sidebar/_delicious.scss new file mode 100644 index 0000000..e962702 --- /dev/null +++ b/themes/classic/sass/partials/sidebar/_delicious.scss @@ -0,0 +1,4 @@ +.delicious-posts { + a.delicious-link { margin-bottom: .5em; display: block; } + p { font-size: 1em; } +} diff --git a/themes/classic/sass/partials/sidebar/_pinboard.scss b/themes/classic/sass/partials/sidebar/_pinboard.scss new file mode 100644 index 0000000..9f9ab46 --- /dev/null +++ b/themes/classic/sass/partials/sidebar/_pinboard.scss @@ -0,0 +1,12 @@ +#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/_twitter.scss b/themes/classic/sass/partials/sidebar/_twitter.scss new file mode 100644 index 0000000..36c6f62 --- /dev/null +++ b/themes/classic/sass/partials/sidebar/_twitter.scss @@ -0,0 +1,33 @@ +#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; + } +}