Browse code

1. Added Category support 2. Designed blog archives pages 3. Restructured Sass 4. Added Categories to rake post metadata 5. Some general style improvements

Brandon Mathis authored on 27/06/2011 at 19:59:21
Showing 27 changed files
... ...
@@ -61,6 +61,7 @@ task :post, :filename do |t, args|
61 61
     post.puts "title: #{args.filename.gsub(/[-_]/, ' ').titlecase}"
62 62
     post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
63 63
     post.puts "layout: post"
64
+    post.puts "categories: []"
64 65
     post.puts "---"
65 66
   end
66 67
 end
... ...
@@ -17,6 +17,7 @@ pygments: true
17 17
 #posts_per_page: 10
18 18
 paginate: 5
19 19
 recent_posts: 5
20
+category_dir: category
20 21
 simple_search: http://google.com/search
21 22
 
22 23
 # Optional configurations
23 24
deleted file mode 100644
... ...
@@ -1,65 +0,0 @@
1
-module Jekyll
2
-
3
-  class CategoryIndex < Page
4
-    def initialize(site, base, dir, category)
5
-      @site = site
6
-      @base = base
7
-      @dir = dir
8
-      @name = 'index.html'
9
-
10
-      self.process(@name)
11
-      self.read_yaml(File.join(base, '_layouts'), 'category_index.html')
12
-      self.data['category'] = category
13
-
14
-      category_title_prefix = site.config['category_title_prefix'] || 'Category: '
15
-      self.data['title'] = "#{category_title_prefix}#{category}"
16
-    end
17
-  end
18
-
19
-  class CategoryList < Page
20
-    def initialize(site,  base, dir, categories)
21
-      @site = site
22
-      @base = base
23
-      @dir = dir
24
-      @name = 'index.html'
25
-
26
-      self.process(@name)
27
-      self.read_yaml(File.join(base, '_layouts'), 'category_list.html')
28
-      self.data['categories'] = categories
29
-    end
30
-  end
31
-
32
-  class CategoryGenerator < Generator
33
-    safe true
34
-
35
-    def generate(site)
36
-      if site.layouts.key? 'category_index'
37
-        dir = site.config['category_dir'] || 'categories'
38
-        site.categories.keys.each do |category|
39
-          write_category_index(site, File.join(dir, category.gsub(/\s/, "-").gsub(/[^\w-]/, '').downcase), category)
40
-        end
41
-      end
42
-
43
-      if site.layouts.key? 'category_list'
44
-        dir = site.config['category_dir'] || 'categories'
45
-        write_category_list(site, dir, site.categories.keys.sort)
46
-      end
47
-    end
48
-
49
-    def write_category_index(site, dir, category)
50
-      index = CategoryIndex.new(site, site.source, dir, category)
51
-      index.render(site.layouts, site.site_payload)
52
-      index.write(site.dest)
53
-      site.static_files << index
54
-    end
55
-
56
-    def write_category_list(site, dir, categories)
57
-      index = CategoryList.new(site, site.source, dir, categories)
58
-      index.render(site.layouts, site.site_payload)
59
-      index.write(site.dest)
60
-      site.static_files << index
61
-    end
62
-  end
63
-
64
-end
65
-
... ...
@@ -1,47 +1,64 @@
1 1
 #custom filters for Octopress
2 2
 
3 3
 module OctopressFilters
4
-  def auto_exerpt(input, url, url_text="Read more &hellip;")
5
-    if input.index(/<!--\s?more\s?-->/i)
6
-      input.split(/<!--\s?more\s?-->/i)[0] + "<p><a rel='full-article' href='#{url}'>#{url_text}</a></p>"
4
+  # Used on the blog index to split posts on the <!--more--> marker
5
+  def exerpt(input)
6
+    if input.index(/<!--\s*more\s*-->/i)
7
+      input.split(/<!--\s*more\s*-->/i)[0]
7 8
     else
8 9
       input
9 10
     end
10 11
   end
11
-  def exerpt(input)
12
-    if input.index(/<!--\s*more\s*-->/i)
13
-      input.split(/<!--\s*more\s*-->/i)[0]
12
+
13
+  # Summary is used on the Archive pages to return the first block of content from a post.
14
+  def summary(input)
15
+    if input.index(/\n\n/)
16
+      input.split(/\n\n/)[0]
14 17
     else
15 18
       input
16 19
     end
17 20
   end
21
+
22
+  # Replaces relative urls with full urls
18 23
   def full_urls(input, url='')
19 24
     input.gsub /(\s+(href|src)\s*=\s*["|']{1})(\/[^\"'>]+)/ do
20 25
       $1+url+$3
21 26
     end
22 27
   end
28
+
29
+  # Returns a url without the http:// for use in as a search modifier eg. 'search terms site:website.com'
23 30
   def search_url(input)
24
-    input.gsub /(http:\/\/)(\S+)/ do
31
+    input.gsub /(https?:\/\/)(\S+)/ do
25 32
       $2
26 33
     end
27 34
   end
35
+
36
+  # replaces primes with smartquotes using RubyPants
28 37
   def smart_quotes(input)
29 38
     require 'rubypants'
30 39
     RubyPants.new(input).to_html
31 40
   end
41
+
42
+  # Returns a title cased string based on John Gruber's title case http://daringfireball.net/2008/08/title_case_update
32 43
   def titlecase(input)
33 44
     input.titlecase
34 45
   end
46
+
47
+  # Returns a datetime if the input is a string
35 48
   def datetime(date)
36 49
     if date.class == String
37 50
       date = Time.parse(date)
38 51
     end
39 52
     date
40 53
   end
54
+
55
+  # Returns an ordidinal date eg July 22 2007 -> July 22nd 2007
41 56
   def ordinalize(date)
42 57
     date = datetime(date)
43 58
     "#{date.strftime('%b')} #{ordinal(date.strftime('%e').to_i)}, #{date.strftime('%Y')}"
44 59
   end
60
+
61
+  # Returns an ordinal number. 13 -> 13th, 21 -> 21st etc.
45 62
   def ordinal(number)
46 63
     if (11..13).include?(number.to_i % 100)
47 64
       "#{number}<span>th</span>"
... ...
@@ -54,10 +71,5 @@ module OctopressFilters
54 54
       end
55 55
     end
56 56
   end
57
-  #YearlyPost = Struct.new('YearlyPost', :year, :posts)
58
-  def yearly_posts(site)
59
-    #site.posts.reverse.group_by { |p| p.date.strftime("%Y") }.map { |k,v| YearlyPost.new(k,v) }
60
-    site
61
-  end
62 57
 end
63 58
 Liquid::Template.register_filter OctopressFilters
64 59
deleted file mode 100644
... ...
@@ -1,134 +0,0 @@
1
-$max-width: 1200px !default;
2
-
3
-// Padding used for layout margins
4
-$pad-min: 18px !default;
5
-$pad-narrow: 25px !default;
6
-$pad-medium: 35px !default;
7
-$pad-wide: 55px !default;
8
-
9
-// Sidebar widths used in media queries
10
-$sidebar-width-medium: 240px !default;
11
-$sidebar-pad-medium: 15px !default;
12
-$sidebar-pad-wide: 20px !default;
13
-$sidebar-width-wide: 300px !default;
14
-
15
-.group { @include pie-clearfix; }
16
-
17
-body {
18
-  -webkit-text-size-adjust: none;
19
-  max-width: $max-width;
20
-  position: relative;
21
-  margin: 0 auto;
22
-  > header, > nav, > footer, #articles > article, #articles > nav {
23
-    @extend .group;
24
-    padding-left: $pad-min;
25
-    padding-right: $pad-min;
26
-    @media only screen and (min-width: 480px) {
27
-      padding-left: $pad-narrow;
28
-      padding-right: $pad-narrow;
29
-    }
30
-    @media only screen and (min-width: 768px) {
31
-      padding-left: $pad-medium;
32
-      padding-right: $pad-medium;
33
-    }
34
-    @media only screen and (min-width: 992px) {
35
-      padding-left: $pad-wide;
36
-      padding-right: $pad-wide;
37
-    }
38
-  }
39
-  > header {
40
-    font-size: 1em;
41
-    padding-top: 1.5em;
42
-    padding-bottom: 1.5em;
43
-  }
44
-}
45
-
46
-.toggle-sidebar { display: none; }
47
-#articles { width: 100%;
48
-  + aside {
49
-    float: none;
50
-    padding: 0 $pad-min 1px;
51
-    background-color: $sidebar-bg;
52
-    border-top: 1px solid $sidebar-border;
53
-  }
54
-}
55
-
56
-@media only screen and (min-width: 550px) {
57
-  body > header { font-size: 1em; }
58
-}
59
-@media only screen and (min-width: 768px) {
60
-  body { -webkit-text-size-adjust: auto; }
61
-  body > header { font-size: 1.2em; }
62
-  body > nav {
63
-    + div {
64
-      @extend .group;
65
-      padding: 0;
66
-      margin: 0 auto;
67
-      > div {
68
-        @extend .group;
69
-        margin-right: $sidebar-width-medium;
70
-      }
71
-    }
72
-  }
73
-  #articles {
74
-    padding-top: $pad-medium/2;
75
-    padding-bottom: $pad-medium/2;
76
-    float: left;
77
-    + aside {
78
-      width: $sidebar-width-medium - $sidebar-pad-medium*2;
79
-      padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
80
-      background: none;
81
-      float: left;
82
-      margin: 0 -100% 0 0;
83
-    }
84
-  }
85
-  body > div > div { position: relative; }
86
-
87
-  .collapse-sidebar {
88
-    > div > div { margin-right: 10px; }
89
-    #articles + aside {
90
-      display: none;
91
-    }
92
-    .toggle-sidebar {
93
-      right: -1px;
94
-      background-color: $sidebar-bg;
95
-      border-right-width: 0;
96
-      text-indent: 2px;
97
-      border-left: 1px solid $sidebar-border;
98
-      @include border-bottom-right-radius(0);
99
-      @include border-bottom-left-radius(.3em);
100
-      @include link-colors(#aaa, #888);
101
-    }
102
-  }
103
-
104
-  .toggle-sidebar {
105
-    outline: none;
106
-    position: absolute; right: -21px; top: 0;
107
-    width: 20px;
108
-    font-size: 1.2em;
109
-    line-height: 1.1em;
110
-    padding-bottom: .1em;
111
-    text-indent: -1px;
112
-    text-decoration: none;
113
-    @include link-colors(#ccc, #999);
114
-    @include border-bottom-right-radius(.3em);
115
-    text-align: center;
116
-    background: $main-bg;
117
-    border-bottom: 1px solid $sidebar-border;
118
-    border-right: 1px solid $sidebar-border;
119
-    display: inline-block;
120
-  }
121
-}
122
-
123
-@media only screen and (min-width: 992px) {
124
-  body > header { font-size: 1.3em; }
125
-  body > nav + div > div { margin-right: $sidebar-width-wide; }
126
-  #articles {
127
-    padding-top: $pad-wide/2;
128
-    padding-bottom: $pad-wide/2;
129
-    + aside {
130
-      width: $sidebar-width-wide - $sidebar-pad-wide*2;
131
-      padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
132
-    }
133
-  }
134
-}
135 1
deleted file mode 100644
... ...
@@ -1,71 +0,0 @@
1
-// Main Link Colors
2
-$link-color: lighten(#165b94, 3) !default;
3
-$link-color-hover: adjust-hue($link-color, -200) !default;
4
-$link-color-visited: darken(adjust_hue($link_color, 70), 10) !default;
5
-$link-color-active: darken($link-color-hover, 15) !default;
6
-
7
-// Main Section Colors
8
-$page-bg: #252525 !default;
9
-$article-border: #eeeeee !default;
10
-$main-bg: #f5f5f5 !default;
11
-
12
-$header-bg: #333 !default;
13
-$header-border: lighten($header-bg, 15) !default;
14
-$title-color: #f2f2f2 !default;
15
-$subtitle-color: #aaa !default;
16
-
17
-$text-color: #222 !default;
18
-$text-color-light: #aaa !default;
19
-$type-border: #ddd !default;
20
-
21
-
22
-/* Navigation */
23
-$nav-bg: #ccc !default;
24
-$nav-color: darken($nav-bg, 38) !default;
25
-$nav-color-hover: darken($nav-color, 25) !default;
26
-$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default;
27
-$nav-border: darken($nav-bg, 10) !default;
28
-$nav-border-top: lighten($nav-bg, 15) !default;
29
-$nav-border-bottom: darken($nav-bg, 25) !default;
30
-$nav-border-left: darken($nav-bg, 11) !default;
31
-$nav-border-right: lighten($nav-bg, 7) !default;
32
-
33
-/* Sidebar colors */
34
-$sidebar-bg: #eee !default;
35
-$sidebar-link-color: $link-color !default;
36
-$sidebar-link-color-hover: $link-color-hover !default;
37
-$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
38
-$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default;
39
-$sidebar-border: darken($sidebar-bg, 7) !default;
40
-$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default;
41
-$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default;
42
-$twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default;
43
-
44
-$footer-color: #999999 !default;
45
-$footer-bg: #ccc !default;
46
-$footer-color: darken($footer-bg, 38) !default;
47
-$footer-color-hover: darken($footer-color, 10) !default;
48
-$footer-border-top: lighten($footer-bg, 15) !default;
49
-$footer-border-bottom: darken($footer-bg, 15) !default;
50
-$footer-link-color: darken($footer-bg, 38) !default;
51
-$footer-link-color-hover: darken($footer-color, 25) !default;
52
-$page-border-bottom: darken($footer-bg, 5) !default;
53
-
54
-// Form Colors
55
-$fieldset-bg: #ececec;
56
-$fieldset-border: #c3c3c3;
57
-
58
-$textinput-color: #333333;
59
-$textinput-bg: #f4f4f4;
60
-$textinput-bg-focus: #fefeee;
61
-
62
-$textinput-border-top: #aaaaaa;
63
-$textinput-border-bottom: #c6c6c6;
64
-$textinput-border-left: #c3c3c3;
65
-$textinput-border-right: #c3c3c3;
66
-$textinput-border-focus: #989898;
67
-
68
-#articles a, #articles + aside a {
69
-  @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
70
-}
71
-a { @include transition(color, .5s); }
72 1
deleted file mode 100644
... ...
@@ -1,130 +0,0 @@
1
-$blockquote: $type-border !default;
2
-$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
3
-
4
-// Fonts
5
-.heading {
6
-  font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif;
7
-}
8
-.sans { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; }
9
-.serif { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; }
10
-.mono { font-family: $mono; }
11
-
12
-body > header h1 {
13
-  font-size: 2.6em;
14
-  @extend .heading;
15
-  font-weight: normal;
16
-  line-height: 1.2em;
17
-  margin-bottom: 0.6667em;
18
-}
19
-
20
-body {
21
-  line-height: 1.5em;
22
-  color: $text-color;
23
-  @extend .serif;
24
-}
25
-
26
-#{headings()}{
27
-  @extend .heading;
28
-  text-rendering: optimizelegibility;
29
-  margin-bottom: 1em;
30
-  font-weight: bold;
31
-}
32
-h1 {
33
-  font-size: 3.2em;
34
-  line-height: 1.2em;
35
-  @media only screen and (max-width: 768px) { font-size: 2.2em; }
36
-}
37
-
38
-
39
-h2, section h1 {
40
-  font-size: 1.5em;
41
-}
42
-h3, section h2, section section h1 {
43
-  font-size: 1.3em;
44
-}
45
-h4, section h3, section section h2, section section section h1 {
46
-  font-size: 1em;
47
-}
48
-h5, section h4, section section h3 {
49
-  font-size: .9em;
50
-}
51
-h6, section h5, section section h4, section section section h3 {
52
-  font-size: .8em;
53
-}
54
-p, blockquote, ul, ol { margin-bottom: 1.5em; }
55
-
56
-ul{ list-style-type: circle; }
57
-
58
-ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } }
59
-ul ul, ol ol { margin-left: 1.75em; }
60
-
61
-strong { font-weight: bold; }
62
-
63
-em { font-style: italic; }
64
-
65
-sup, sub { font-size: 0.8em; position: relative;  display: inline-block; }
66
-sup { top: -.5em; }
67
-sub { bottom: -.5em; }
68
-
69
-q { font-style: italic;
70
-  &:before { content: "\201C"; }
71
-  &:after { content: "\201D"; }
72
-}
73
-
74
-em, dfn { font-style: italic; }
75
-
76
-strong, dfn { font-weight: bold; }
77
-
78
-del, s { text-decoration: line-through; }
79
-
80
-abbr, acronym { border-bottom: 1px dotted; cursor: help; }
81
-
82
-pre, code, tt { @extend .mono-font; }
83
-
84
-sub, sup { line-height: 0; }
85
-
86
-hr { margin-bottom: 0.2em; }
87
-
88
-small { font-size: .8em; }
89
-
90
-big { font-size: 1.2em; }
91
-
92
-blockquote {
93
-  $bq-margin: 1.2em;
94
-  font-style: italic;
95
-  position: relative;
96
-  font-size: 1.2em;
97
-  line-height: 1.5em;
98
-  padding-left: 1em;
99
-  border-left: 4px solid rgba($text-color-light, .5);
100
-  cite {
101
-    font-style: italic;
102
-    a { color: $text-color-light !important; word-wrap: break-word; }
103
-    &:before { content: '–'; padding:{right: .3em; left: .3em;} color: $text-color-light; }
104
-  }
105
-  @media only screen and (min-width: 992px) {
106
-    padding-left: 1.5em;
107
-    border-left-width: 4px;
108
-  }
109
-}
110
-
111
-.has-pullquote:before {
112
-  /* Reset metrics. */
113
-  padding: 0;
114
-  border: none;
115
-
116
-  /* Content */
117
-  content: attr(data-pullquote);
118
-
119
-  /* Pull out to the right, modular scale based margins. */
120
-  float: right;
121
-  width: 45%;
122
-  margin: .5em 0 1em 1.5em;
123
-
124
-  /* Baseline correction */
125
-  position: relative;
126
-  top: 7px;
127
-  font-size: 1.4em;
128
-  line-height: 1.45em;
129
-}
130
-
131 1
deleted file mode 100644
... ...
@@ -1,21 +0,0 @@
1
-@mixin mask-image($img, $repeat: no-repeat){
2
-  @include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms);
3
-  @include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms);
4
-  width: image-width($img);
5
-  height: image-height($img);
6
-}
7
-
8
-@mixin selection($bg, $color: inherit, $text-shadow: none){
9
-  * {
10
-    &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
11
-    &::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
12
-    &::selection { background: $bg; color: $color; text-shadow: $text-shadow; }
13
-  }
14
-}
15
-
16
-@function text-color($color, $dark: dark, $light: light){
17
-  $text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000;
18
-  $text-color: if($text-color >= 150, $dark, $light);
19
-  @return $text-color;
20
-}
21
-
... ...
@@ -1,111 +1,107 @@
1
-$border: inline-image('dotted-border.png');
2 1
 #articles {
3 2
   overflow: hidden;
4
-  @media only screen and (max-width: 768px) {
5
-    ul, ol { margin-left: 1.4em; }
3
+  ul, ol { margin-left: 1.4em; }
4
+  @media only screen and (min-width: 768px) {
5
+    ul, ol { margin-left: 0; }
6 6
   }
7 7
   > article {
8 8
     padding-bottom: 1em;
9
-    &:last-child { margin-bottom: 0; border-bottom: none; }
9
+    &:last-child { margin-bottom: 0;  }
10 10
     h2 {
11 11
       padding-top: 0.8em;
12
-      background: $border top left repeat-x;
13
-      &:first-child {
14
-        background: none;
15
-        padding-top: 0;
16
-      }
12
+      background: $img-border top left repeat-x;
13
+      &:first-child { background: none; padding-top: 0; }
17 14
     }
18
-    .byline + time:before, time +time:before, .comments:before {
15
+    .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
19 16
       @extend .separator;
20 17
     }
21
-    header {
22
-      position: relative;
23
-      padding-top: 2em;
24
-      margin-bottom: 1.5em;
25
-      padding-bottom: 1em;
26
-      background: $border bottom left repeat-x;
27
-      h1 {
28
-        margin: 0;
29
-        a { text-decoration: none;
30
-          &:hover { text-decoration: underline; } }
31
-      }
32
-      p {
33
-        font-size: .9em;
34
-        color: $text-color-light;
35
-        margin: 0;
36
-        @extend .sans;
37
-        &.meta {
38
-          text-transform: uppercase;
39
-          position: absolute;
40
-          top: 0;
41
-        }
42
-      }
43
-      @media only screen and (max-width: 768px) {
44
-        padding-bottom: 1em;
45
-        margin-bottom: 1em;
46
-        background: $border bottom left repeat-x;
47
-        p.meta { position: static; }
18
+  }
19
+  header {
20
+    position: relative;
21
+    padding-top: 2em;
22
+    padding-bottom: 1em;
23
+    margin-bottom: 1em;
24
+    background: $img-border bottom left repeat-x;
25
+    h1 {
26
+      margin: 0;
27
+      a { text-decoration: none;
28
+        &:hover { text-decoration: underline; } }
29
+    }
30
+    p {
31
+      font-size: .9em;
32
+      color: $text-color-light;
33
+      margin: 0;
34
+      @extend .sans;
35
+      &.meta {
36
+        text-transform: uppercase;
48 37
       }
49 38
     }
50
-    h1.feature {
51
-      padding-top: .5em;
52
-      margin-bottom: 1em;
39
+    @media only screen and (min-width: 768px) {
40
+      margin-bottom: 1.5em;
53 41
       padding-bottom: 1em;
54
-      background: $border bottom left repeat-x;
55
-      font-size: 2.0em; font-style: italic;
56
-      line-height: 1.3em;
42
+      background: $img-border bottom left repeat-x;
43
+      p.meta { position: absolute; top: 0; }
57 44
     }
58
-    .entry-content {
59
-      img, video { max-width: 100%; height: auto; }
60
-      video {
61
-        width: 100%; display: block; margin-bottom: 1.5em;
62
-        padding: .8em; background: #fff; border: 1px solid #eee;
63
-        @include box-sizing(border-box);
64
-      }
65
-      .flash-video {
66
-        max-width: 100%;
67
-        margin-bottom: 1.5em;
68
-        @include box-sizing(border-box);
69
-        padding: .8em; background: #fff; border: 1px solid #eee;
70
-        > div {
71
-          position: relative;
72
-          display: block;
73
-          padding-bottom: 56.25%;
74
-          padding-top: 1px;
75
-          height: 0;
76
-          overflow: hidden;
77
-          iframe, object, embed {
78
-            position: absolute;
79
-            top: 0;
80
-            left: 0;
81
-            width: 100%;
82
-            height: 100%;
83
-          }
84
-        }
85
-      }
45
+  }
46
+  h1.feature {
47
+    padding-top: .5em;
48
+    margin-bottom: 1em;
49
+    padding-bottom: 1em;
50
+    background: $img-border bottom left repeat-x;
51
+    font-size: 2.0em; font-style: italic;
52
+    line-height: 1.3em;
53
+  }
54
+  .entry-content {
55
+    img, video { max-width: 100%; height: auto; }
56
+    video {
57
+      width: 100%; display: block; margin-bottom: 1.5em;
58
+      padding: .8em; background: #fff; border: 1px solid #eee;
59
+      @include box-sizing(border-box);
86 60
     }
87
-    iframe.twitter-share-button {
61
+  }
62
+  .flash-video {
63
+    max-width: 100%;
64
+    margin-bottom: 1.5em;
65
+    @include box-sizing(border-box);
66
+    padding: .8em; background: #fff; border: 1px solid #eee;
67
+    > div {
88 68
       position: relative;
89
-      top: .3em;
90
-      padding-left: .5em;
91
-    }
92
-    > footer {
93
-      margin-top: 2em;
94
-      padding-top: 1em;
95
-      margin-bottom: 1.5em;
96
-      background: $border top left repeat-x;
97
-      time, .author { color: $text-color-light; @extend .sans; }
69
+      display: block;
70
+      padding-bottom: 56.25%;
71
+      padding-top: 1px;
72
+      height: 0;
73
+      overflow: hidden;
74
+      iframe, object, embed {
75
+        position: absolute;
76
+        top: 0;
77
+        left: 0;
78
+        width: 100%;
79
+        height: 100%;
80
+      }
98 81
     }
99 82
   }
83
+  iframe.twitter-share-button {
84
+    position: relative;
85
+    top: .3em;
86
+    padding-left: .5em;
87
+  }
88
+  > article > footer {
89
+    margin-top: 2em;
90
+    padding-top: 1em;
91
+    margin-bottom: 1.5em;
92
+    background: $img-border top left repeat-x;
93
+    @extend .sans;
94
+  }
95
+
100 96
 }
101 97
 article + article {
102
-  background: $border top left repeat-x;
98
+  background: $img-border top left repeat-x;
103 99
 }
104 100
 #articles.blog-index {
105 101
   article header { background: none; padding-bottom: 0; }
106 102
   article h1 {
107 103
     font-size: 2.2em;
108
-    a { color: inherit; &:hover{ color: $link-color-hover; } }
104
+    a { color: inherit; &:hover { color: $link-color-hover; } }
109 105
   }
110 106
   a[rel=full-article] {
111 107
     background: darken($main-bg, 5);
... ...
@@ -125,8 +121,6 @@ article + article {
125 125
   footer {
126 126
     @extend .sans;
127 127
     margin-top: 1em;
128
-    p.meta { color: $text-color-light; }
129
-    a { color: inherit; &:hover{ color: $link-color-hover;} }
130 128
   }
131 129
 }
132 130
 
133 131
deleted file mode 100644
... ...
@@ -1,4 +0,0 @@
1
-.delicious-posts {
2
-  a.delicious-link { margin-bottom: .5em; display: block; }
3
-  p { font-size: 1em; }
4
-}
... ...
@@ -4,7 +4,7 @@ body > footer {
4 4
   color: $footer-color;
5 5
   text-shadow: lighten($footer-bg, 5) 0 1px;
6 6
   background-color: $footer-bg;
7
-  @include background(linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)));
7
+  @include background(image-url('noise.png'), linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)));
8 8
   border-top: 1px solid $footer-border-top;
9 9
   position: relative;
10 10
   padding-top: 1em;
... ...
@@ -1,5 +1,5 @@
1 1
 body > header {
2
-  background-color: $header-bg;
2
+  background: $header-bg;
3 3
   h1 {
4 4
     display: inline-block;
5 5
     margin: 0;
... ...
@@ -1,13 +1,12 @@
1 1
 body > nav {
2 2
   position: relative;
3 3
   background-color: $nav-bg;
4
-  @include background(linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)));
4
+  @include background(image-url('noise.png'), linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)));
5 5
   border: {
6 6
     top: 1px solid $nav-border-top;
7 7
     bottom: 1px solid $nav-border-bottom; }
8 8
   padding-top: .35em;
9 9
   padding-bottom: .35em;
10
-  //position: absolute; left: 0; right: 0; top: 0;
11 10
   form {
12 11
     @include background-clip(padding-box);
13 12
     margin: 0; padding: 0;
... ...
@@ -43,7 +42,7 @@ body > nav {
43 43
       @include horizontal-list(0);
44 44
       float: left;
45 45
       display: block;
46
-      padding-top: .25em;
46
+      padding-top: .15em;
47 47
     }
48 48
     ul[role=subscription] {
49 49
       margin-left: .8em;
... ...
@@ -59,7 +58,7 @@ body > nav {
59 59
       text-shadow: lighten($nav-bg, 12) 0 1px;
60 60
       float: left;
61 61
       text-decoration: none;
62
-      font-size: 1em;
62
+      font-size: 1.1em;
63 63
       padding: .1em 0;
64 64
       line-height: 1.5em;
65 65
     }
... ...
@@ -132,7 +131,7 @@ body > nav {
132 132
       }
133 133
     }
134 134
   }
135
-  ul[role=subscription] { li, a { border: 0; padding: 0; }}
135
+  ul[role=subscription] { position: relative; top: .2em; li, a { border: 0; padding: 0; }}
136 136
   a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); }
137 137
   a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); }
138 138
 }
... ...
@@ -1,12 +1,12 @@
1 1
 html {
2
-  background: $page-bg inline-image('line-tile.png') top left;
2
+  background: $page-bg image-url('line-tile.png') top left;
3 3
 }
4 4
 body {
5 5
   > div {
6
-    background-color: $sidebar-bg;
6
+    background: $sidebar-bg image-url('noise.png') top left;
7 7
     border-bottom: 1px solid $page-border-bottom;
8 8
     > div {
9
-      background-color: $main-bg;
9
+      background: $main-bg image-url('noise.png') top left;
10 10
       border-right: 1px solid $sidebar-border;
11 11
     }
12 12
   }
13 13
deleted file mode 100644
... ...
@@ -1,12 +0,0 @@
1
-#pinboard_linkroll {
2
-  .pin-title, .pin-description {
3
-    display: block;
4
-    margin-bottom: .5em;
5
-  }
6
-  .pin-tag {
7
-    @include hover-link;
8
-    @extend .aside-alt-link;
9
-    &:after { content: ','; }
10
-    &:last-child:after { content: ''; }
11
-  }
12
-}
... ...
@@ -1,59 +1,4 @@
1
-.side-shadow-border {
2
-  @include box-shadow(lighten($sidebar-bg, 5) 0 1px);
3
-}
4
-#articles + aside {
5
-  color: $sidebar-color;
6
-  padding-top: 1.2em;
7
-  text-shadow: lighten($sidebar-bg, 8) 0 1px;
8
-  section {
9
-    @extend .sans;
10
-    font-size: .8em;
11
-    line-height: 1.4em;
12
-    margin-bottom: 1.5em;
13
-    h1 {
14
-      margin: 1.5em 0 0;
15
-      padding-bottom: .2em;
16
-      border-bottom: 1px solid $sidebar-border;
17
-      @extend .side-shadow-border;
18
-      + p {
19
-        padding-top: .4em;
20
-      }
21
-    }
22
-  }
23
-  ul {
24
-    margin-bottom: 0.5em;
25
-  }
26
-  li {
27
-    list-style: none;
28
-    padding: .5em 0;
29
-    margin: 0;
30
-    border-bottom: 1px solid $sidebar-border;
31
-    @extend .side-shadow-border;
32
-    p:last-child {
33
-      margin-bottom: 0;
34
-    }
35
-  }
36
-  a {
37
-    color: inherit;
38
-    @include transition(color, .5s);
39
-  }
40
-  &:hover a, &:hover #tweets a { color: $sidebar-link-color;
41
-    &:hover { color: $sidebar-link-color-hover; }
42
-  }
43
-  #recent_posts {
44
-    time {
45
-      text-transform: uppercase;
46
-      font-size: .9em;
47
-      color: #666;
48
-    }
49
-  }
50
-  @import "twitter";
51
-  @import "pinboard";
52
-  @import "delicious";
53
-}
54
-.aside-alt-link {
55
-  color: $sidebar-link-color-subdued;
56
-  &:hover {
57
-    color: $sidebar-link-color-subdued-hover;
58
-  }
59
-}
1
+@import "sidebar/base";
2
+@import "sidebar/twitter";
3
+@import "sidebar/pinboard";
4
+@import "sidebar/delicious";
60 5
deleted file mode 100644
... ...
@@ -1,16 +0,0 @@
1
-$base03:    #002b36; //darkest blue
2
-$base02:    #073642; //dark blue
3
-$base01:    #586e75; //darkest gray
4
-$base00:    #657b83; //dark gray
5
-$base0:     #839496; //medium gray
6
-$base1:     #93a1a1; //medium light gray
7
-$base2:     #eee8d5; //cream
8
-$base3:     #fdf6e3; //white
9
-$yellow:    #b58900;
10
-$orange:    #cb4b16;
11
-$red:       #dc322f;
12
-$magenta:   #d33682;
13
-$violet:    #6c71c4;
14
-$blue:      #268bd2;
15
-$cyan:      #2aa198;
16
-$green:     #859900;
... ...
@@ -1,14 +1,16 @@
1
+$pre-bg: image-url('noise.png') top left;
1 2
 .highlight, html .gist .gist-file .gist-syntax .gist-highlight {
2 3
   .line-numbers {
3 4
     text-align: right;
4 5
     font-size: .8em;
5 6
     line-height: 1.45em;
6
-    background: $base02 !important;
7
+    background: $base02 $pre-bg !important;
7 8
     border-right: 1px solid darken($base03, 2) !important;
8 9
     @include box-shadow(lighten($base02, 2) -1px 0 inset);
9 10
     text-shadow: darken($base02, 10) 0 -1px;
10 11
     span { color: $base01 !important; }
11 12
     padding: .8em !important;
13
+    @include border-radius(0);
12 14
   }
13 15
 }
14 16
 html .gist .gist-file {
... ...
@@ -30,7 +32,7 @@ html .gist .gist-file {
30 30
    border: 1px solid lighten($base02, 2) !important;
31 31
    color: $base01;
32 32
    font-size: .7em !important;
33
-   background: $base02;
33
+   background: $base02 $pre-bg;
34 34
    @extend .sans;
35 35
    line-height: 1.5em;
36 36
     a {
... ...
@@ -51,14 +53,15 @@ html .gist .gist-file {
51 51
   }
52 52
 }
53 53
 pre {
54
-  background: #333;
54
+  background: $base03 $pre-bg;
55 55
   @include border-radius(.4em);
56 56
   @extend .mono;
57
+  border: 1px solid $base02;
57 58
   line-height: 1.45em;
58 59
   font-size: .8em;
59 60
   margin-bottom: 1.5em;
60 61
   padding: .8em 1em;
61
-  color: #ccc;
62
+  color: $base1;
62 63
   overflow: auto;
63 64
 }
64 65
 h3.filename {
... ...
@@ -88,7 +91,7 @@ p code {
88 88
   padding: .8em !important;
89 89
   overflow-x: auto;
90 90
   line-height: 1.45em;
91
-  background: $base03 !important;
91
+  background: $base03 $pre-bg !important;
92 92
   color: $base1 !important;
93 93
   span { color: $base1 !important; }
94 94
   span { font-style: normal !important; font-weight: normal !important; }
95 95
deleted file mode 100644
... ...
@@ -1,33 +0,0 @@
1
-#tweets {
2
-  .loading {
3
-    background: inline-image('bird_32_gray.png') no-repeat center .5em;
4
-    color: darken($sidebar-bg, 18);
5
-    text-shadow: $main-bg 0 1px;
6
-    text-align: center;
7
-    padding: 2.5em 0 .5em;
8
-    &.error {
9
-      background: inline-image('bird_32_gray_fail.png') no-repeat center .5em;
10
-    }
11
-  }
12
-  a { color: $sidebar-link-color-subdued; @include hover-link; }
13
-  p {
14
-    position: relative;
15
-    padding-right: 1em;
16
-  }
17
-  a[href*=status]{
18
-    color: $twitter-status-link;
19
-    float: right;
20
-    padding: 0 0 .1em 1em;
21
-    position: relative; right: -1.3em;
22
-    text-shadow: #fff 0 1px;
23
-    font-size: .7em;
24
-    span { font-size: 1.5em; }
25
-    &:hover {
26
-      color: $sidebar-link-color-subdued-hover;
27
-      text-decoration: none;
28
-    }
29
-  }
30
-  a[href*='twitter.com/search']{
31
-    @extend .aside-alt-link;
32
-  }
33
-}
... ...
@@ -2,20 +2,8 @@
2 2
 @include global-reset;
3 3
 @include reset-html5;
4 4
 
5
-@import "core/utilities";
6
-@import "partials/solarized";
7 5
 @import "custom/colors";
8
-@import "core/theme";
9 6
 @import "custom/layout";
10
-@import "core/layout";
11
-@import "core/typography";
12
-
13
-/* layout partials */
14
-@import "partials/header";
15
-@import "partials/navigation";
16
-@import "partials/page";
17
-@import "partials/sidebar";
18
-@import "partials/blog";
19
-@import "partials/footer";
20
-@import "partials/syntax";
7
+@import "base";
8
+@import "partials";
21 9
 @import "custom/styles";
... ...
@@ -1,7 +1,7 @@
1 1
 {% unless page.no_header %}
2 2
   <header>
3 3
     {% if index %}
4
-      <h1 class="entry-title"><a href="{{ page.url }}">{{ page.title | titlecase }}</a></h1>
4
+      <h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
5 5
     {% else %}
6 6
       <h1 class="entry-title">{{ page.title | titlecase }}</h1>
7 7
     {% endif %}
... ...
@@ -10,12 +10,13 @@
10 10
 {% endunless %}
11 11
 {% if index %}
12 12
   <div class="entry-content">{{ content | exerpt | smart_quotes }}</div>
13
-  <p><a rel="full-article" href="{{ page.url }}">Read on &rarr;</a></p>
13
+  <p><a rel="full-article" href="{{ post.url }}">Read on &rarr;</a></p>
14 14
   <footer>
15 15
     <p class="meta">
16 16
       {% include post_author.html %}
17 17
       {% include post_date.html %}
18
-      <span class="comments"><a rel="comments" href="{{ page.url }}#disqus_thread">Add a comment</a></span>
18
+      {% include post_categories.html %}
19
+      <span class="comments"><a rel="comments" href="{{ post.url }}#disqus_thread">Comments</a></span>
19 20
       {% include sharing.html %}
20 21
     </p>
21 22
   </footer>
... ...
@@ -11,6 +11,6 @@
11 11
   </fieldset>
12 12
 </form>
13 13
 <ul role="main-nav">
14
-  <li><a href="/">Home</a></li>
15
-  <li><a href="/archive.html">Archive</a></li>
14
+  <li><a href="/">Blog</a></li>
15
+  <li><a href="/archives.html">Archives</a></li>
16 16
 </ul>
... ...
@@ -1,5 +1,5 @@
1
-{% if page.author %}
2
-  {% assign author = page.author %}
1
+{% if post.author %}
2
+  {% assign author = post.author %}
3 3
 {% else %}
4 4
   {% assign author = site.author %}
5 5
 {% endif %}
... ...
@@ -1,6 +1,10 @@
1
-{% if page.date %}
2
-<time datetime="{{ page.date | datetime }}" pubdate {% if page.updated %} updated {% endif %}>{{ page.date | ordinalize }}</time>
1
+{% capture date %}{{ page.date }}{{ post.date }}{% endcapture %}
2
+{% capture has_date %}{{ date | size }}{% endcapture %}
3
+{% capture updated %}{{ page.updated }}{{ post.updated }}{% endcapture %}
4
+{% capture was_updated %}{{ updated | size }}{% endcapture %}
5
+{% if has_date != '0' %}
6
+<time datetime="{{ date | datetime }}" pubdate {% if updated %} updated {% endif %}>{{ date | ordinalize }}</time>
3 7
 {% endif %}
4
-{% if page.updated %}
5
-<time class="updated" datetime="{{ page.updated | datetime }}"></time>
8
+{% if was_updated != '0' %}
9
+<time class="updated" datetime="{{ updated | datetime }}"></time>
6 10
 {% endif %}
... ...
@@ -5,13 +5,16 @@ single: true
5 5
 
6 6
 <article class="hentry">
7 7
   {% include article.html %}
8
+  {% unless page.no_meta %}
8 9
   <footer>
9 10
     <p class="meta">
10 11
       {% include post_author.html %}
11 12
       {% include post_date.html %}
13
+      {% include post_categories.html %}
12 14
       {% include sharing.html %}
13 15
     </p>
14 16
   </footer>
17
+  {% endunless %}
15 18
   {% if site.disqus_short_name %}
16 19
   <section>
17 20
     <h1>Comments</h1>
18 21
deleted file mode 100644
... ...
@@ -1,24 +0,0 @@
1
-layout: post
2
-title: Blog Archive
3
-no_meta: true
4
-{% for post in site.posts reverse %}
5
-  {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
6
-  {% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %}
7
-  {% unless year == this_year %}
8
-    {% unless forloop.first %}</ul>{% endunless %}
9
-    {% assign year = this_year %}
10
-    <h2>{{ year }}</h2>
11
-    <ul class="blog_archives">
12
-  {% endunless %}
13
-  {% unless month == this_month %}
14
-    {% assign month = this_month %}
15
-    <li><h4>{{ month }}</h4></li>
16
-  {% endunless %}
17
-  <li>
18
-    <time datetime="{{ post.date | datetime }}" pubdate>{{ post.date | date: "%d"}}</time>
19
-    <a href="{{ post.url }}">{{post.title}}</a>
20
-  </li>
21
-  {% if forloop.last %}</ul>{% endif %}
22
-{% endfor %}
... ...
@@ -3,8 +3,8 @@ layout: default
3 3
 blog_index: true
4 4
 ---
5 5
 {% assign index = true %}
6
-{% for page in paginator.posts %}
7
-{% assign content = page.content %}
6
+{% for post in paginator.posts %}
7
+{% assign content = post.content %}
8 8
   <article>
9 9
     {% include article.html %}
10 10
   </article>