Brandon Mathis
14 years ago
119 changed files with 16694 additions and 2447 deletions
@ -1,7 +1,8 @@ |
|||
site |
|||
.bundle |
|||
.DS_Store |
|||
.rvmrc |
|||
.sass-cache |
|||
test |
|||
source/_stash |
|||
vendor/ruby |
|||
vendor/ruby |
|||
|
|||
@ -0,0 +1 @@ |
|||
rvm 1.9.2 |
|||
@ -1,12 +1,13 @@ |
|||
source "http://rubygems.org" |
|||
source "http://gems.github.com" |
|||
source :rubygems |
|||
|
|||
gem 'activesupport', "2.3.5" |
|||
gem 'henrik-jekyll' |
|||
gem 'compass' |
|||
gem 'compass-colors' |
|||
gem 'jekyll' |
|||
gem 'rdiscount' |
|||
gem 'fssm' |
|||
gem 'RedCloth' |
|||
gem "haml", "3.1.0.alpha.147" |
|||
gem 'compass', '0.11.beta.5' |
|||
gem 'rubypants' |
|||
gem 'rb-fsevent' |
|||
gem 'guard-shell' |
|||
gem 'guard-livereload' |
|||
gem 'serve' |
|||
gem 'mongrel' |
|||
gem 'rake' |
|||
@ -0,0 +1,74 @@ |
|||
GEM |
|||
remote: http://rubygems.org/ |
|||
specs: |
|||
RedCloth (4.2.3) |
|||
activesupport (3.0.5) |
|||
addressable (2.2.4) |
|||
chunky_png (1.1.0) |
|||
classifier (1.3.3) |
|||
fast-stemmer (>= 1.0.0) |
|||
compass (0.11.beta.5) |
|||
chunky_png (~> 1.1.0) |
|||
sass (>= 3.1.0.alpha.249) |
|||
configuration (1.2.0) |
|||
directory_watcher (1.3.2) |
|||
em-websocket (0.2.1) |
|||
addressable (>= 2.1.1) |
|||
eventmachine (>= 0.12.9) |
|||
eventmachine (0.12.10) |
|||
fast-stemmer (1.0.0) |
|||
guard (0.3.0) |
|||
open_gem (~> 1.4.2) |
|||
thor (~> 0.14.6) |
|||
guard-livereload (0.1.9) |
|||
em-websocket (~> 0.2.0) |
|||
guard (>= 0.2.2) |
|||
json (~> 1.4.6) |
|||
guard-shell (0.1.1) |
|||
guard (>= 0.2.0) |
|||
haml (3.1.0.alpha.147) |
|||
i18n (0.4.2) |
|||
jekyll (0.10.0) |
|||
classifier (>= 1.3.1) |
|||
directory_watcher (>= 1.1.1) |
|||
liquid (>= 1.9.0) |
|||
maruku (>= 0.5.9) |
|||
json (1.4.6) |
|||
launchy (0.3.7) |
|||
configuration (>= 0.0.5) |
|||
rake (>= 0.8.1) |
|||
liquid (2.2.2) |
|||
maruku (0.6.0) |
|||
syntax (>= 1.0.0) |
|||
open_gem (1.4.2) |
|||
launchy (~> 0.3.5) |
|||
rack (1.2.1) |
|||
rake (0.8.7) |
|||
rb-fsevent (0.4.0) |
|||
rdiscount (1.6.8) |
|||
rubypants (0.2.0) |
|||
sass (3.1.0.alpha.252) |
|||
serve (1.0.0) |
|||
activesupport (~> 3.0.1) |
|||
i18n (~> 0.4.1) |
|||
rack (~> 1.2.1) |
|||
tzinfo (~> 0.3.23) |
|||
syntax (1.0.0) |
|||
thor (0.14.6) |
|||
tzinfo (0.3.24) |
|||
|
|||
PLATFORMS |
|||
ruby |
|||
|
|||
DEPENDENCIES |
|||
RedCloth |
|||
compass (= 0.11.beta.5) |
|||
guard-livereload |
|||
guard-shell |
|||
haml (= 3.1.0.alpha.147) |
|||
jekyll |
|||
rake |
|||
rb-fsevent |
|||
rdiscount |
|||
rubypants |
|||
serve |
|||
@ -0,0 +1,9 @@ |
|||
guard 'shell' do |
|||
watch(/source\/sass\/(.*)\.s[ac]ss/) {|m| `compass compile` } |
|||
watch(%r{public/.+\.(js|html)}) {|m| `compass compile` } |
|||
end |
|||
|
|||
guard 'livereload', :api_version => '1.6' do |
|||
watch(%r{public/.+\.(css)}) |
|||
watch(%r{public/.+\.(js|html)}) |
|||
end |
|||
@ -1,11 +1,28 @@ |
|||
source: source |
|||
destination: site |
|||
destination: public |
|||
exclude: sass, *.scss |
|||
markdown: rdiscount |
|||
pygments: true |
|||
permalink: /blog/:year/:month/:day/:title |
|||
permalink: pretty |
|||
|
|||
url: http://yoursite.com |
|||
multiviews: true |
|||
sass: false |
|||
haml: true |
|||
post_defaults: |
|||
layout: blog_post |
|||
title: My Octopress Blog |
|||
author: Your Name |
|||
email: you@domain.com #Add your email (optional) for the atom feed |
|||
|
|||
recent_posts: 10 |
|||
|
|||
twitter_user: imathis |
|||
tweet_count: 3 |
|||
show_replies: false |
|||
|
|||
delicious_user: |
|||
delicious_count: 3 |
|||
|
|||
pinboard_user: imathis |
|||
pinboard_count: 3 |
|||
|
|||
disqus_short_name: |
|||
|
|||
google_custom_search_id: |
|||
google_analytics_tracking_id: |
|||
|
|||
@ -0,0 +1,46 @@ |
|||
#custom filters for Octopress |
|||
|
|||
module OctopressFilters |
|||
def exerpt(input, url, url_text="Reade more…", permalink_text=false) |
|||
if input.index(/<!--\s?more\s?-->/i) |
|||
input.split(/<!--\s?more\s?-->/i)[0] + "<p><a href='#{url}'>#{url_text}</a></p>" |
|||
elsif permalink_text |
|||
input + "<p><a href='#{url}'>#{permalink_text}</a></p>" |
|||
else |
|||
input |
|||
end |
|||
end |
|||
def full_urls(input, url='') |
|||
input.gsub /(\s+(href|src)\s*=\s*["|']{1})(\/[^\"'>]+)/ do |
|||
$1+url+$3 |
|||
end |
|||
end |
|||
def smart_quotes(input) |
|||
require 'rubypants' |
|||
RubyPants.new(input).to_html |
|||
end |
|||
def titlecase(input) |
|||
require 'titlecase' |
|||
input.titlecase |
|||
end |
|||
def ordinalize(date) |
|||
if date.class == String |
|||
date = Time.parse(date) |
|||
end |
|||
"#{date.strftime('%B')} #{ordinal(date.strftime('%e').to_i)}, #{date.strftime('%Y')}" |
|||
end |
|||
def ordinal(number) |
|||
if (11..13).include?(number.to_i % 100) |
|||
"#{number}<span>th</span>" |
|||
else |
|||
case number.to_i % 10 |
|||
when 1; "#{number}<span>st</span>" |
|||
when 2; "#{number}<span>nd<span>" |
|||
when 3; "#{number}<span>rd</span>" |
|||
else "#{number}<span>th</span>" |
|||
end |
|||
end |
|||
end |
|||
end |
|||
|
|||
Liquid::Template.register_filter OctopressFilters |
|||
@ -0,0 +1,132 @@ |
|||
# Jekyll sitemap page generator. |
|||
# http://recursive-design.com/projects/jekyll-plugins/ |
|||
# |
|||
# Version: 0.1.3 (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 a sitemap.xml page for jekyll sites, suitable for submission to |
|||
# google etc. |
|||
# |
|||
# To use it, simply drop this script into the _plugins directory of your Jekyll site. |
|||
# |
|||
# When you compile your jekyll site, this plugin will loop through the list of pages in your |
|||
# site, and generate an entry in sitemap.xml for each one. |
|||
|
|||
require 'pathname' |
|||
|
|||
module Jekyll |
|||
|
|||
|
|||
# Monkey-patch an accessor for a page's containing folder, since |
|||
# we need it to generate the sitemap. |
|||
class Page |
|||
def subfolder |
|||
@dir |
|||
end |
|||
end |
|||
|
|||
|
|||
# Sub-class Jekyll::StaticFile to allow recovery from unimportant exception |
|||
# when writing the sitemap file. |
|||
class StaticSitemapFile < StaticFile |
|||
def write(dest) |
|||
super(dest) rescue ArgumentError |
|||
true |
|||
end |
|||
end |
|||
|
|||
|
|||
# Generates a sitemap.xml file containing URLs of all pages and posts. |
|||
class SitemapGenerator < Generator |
|||
safe true |
|||
priority :low |
|||
|
|||
# Domain that you are generating the sitemap for - update this to match your site. |
|||
BASE_URL = 'http://recursive-design.com' |
|||
|
|||
# Generates the sitemap.xml file. |
|||
# |
|||
# +site+ is the global Site object. |
|||
def generate(site) |
|||
# Create the destination folder if necessary. |
|||
site_folder = site.config['destination'] |
|||
unless File.directory?(site_folder) |
|||
p = Pathname.new(site_folder) |
|||
p.mkdir |
|||
end |
|||
|
|||
# Write the contents of sitemap.xml. |
|||
File.open(File.join(site_folder, 'sitemap.xml'), 'w') do |f| |
|||
f.write(generate_header()) |
|||
f.write(generate_content(site)) |
|||
f.write(generate_footer()) |
|||
f.close |
|||
end |
|||
|
|||
# Add a static file entry for the zip file, otherwise Site::cleanup will remove it. |
|||
site.static_files << Jekyll::StaticSitemapFile.new(site, site.dest, '/', 'sitemap.xml') |
|||
end |
|||
|
|||
private |
|||
|
|||
# Returns the XML header. |
|||
def generate_header |
|||
"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">" |
|||
end |
|||
|
|||
# Returns a string containing the the XML entries. |
|||
# |
|||
# +site+ is the global Site object. |
|||
def generate_content(site) |
|||
result = '' |
|||
|
|||
# First, try to find any stand-alone pages. |
|||
site.pages.each{ |page| |
|||
path = page.subfolder + '/' + page.name |
|||
mod_date = File.mtime(site.source + path) |
|||
|
|||
# Remove the trailing 'index.html' if there is one, and just output the folder name. |
|||
if path=~/index.html$/ |
|||
path = path[0..-11] |
|||
end |
|||
|
|||
unless path =~/error/ |
|||
result += entry(path, mod_date) |
|||
end |
|||
} |
|||
|
|||
# Next, find all the posts. |
|||
posts = site.site_payload['site']['posts'] |
|||
for post in posts do |
|||
result += entry(post.id, post.date) |
|||
end |
|||
|
|||
result |
|||
end |
|||
|
|||
# Returns the XML footer. |
|||
def generate_footer |
|||
"\n</urlset>" |
|||
end |
|||
|
|||
# Creates an XML entry from the given path and date. |
|||
# |
|||
# +path+ is the URL path to the page. |
|||
# +date+ is the date the file was modified (in the case of regular pages), or published (for blog posts). |
|||
def entry(path, date) |
|||
# Force extensions to .html from markdown, textile. |
|||
path = path.gsub(/\.(markdown|textile)$/i, '.html') |
|||
" |
|||
<url> |
|||
<loc>#{BASE_URL}#{path}</loc> |
|||
<lastmod>#{date.strftime("%Y-%m-%d")}</lastmod> |
|||
</url>" |
|||
end |
|||
|
|||
end |
|||
|
|||
end |
|||
|
|||
|
|||
@ -0,0 +1,83 @@ |
|||
# Nicked from Brandon Tilly |
|||
# Gist https://gist.github.com/803483 |
|||
# Post http://brandontilley.com/2011/01/31/gist-tag-for-jekyll.html |
|||
# |
|||
# Example usage: {% gist 803483 gist_tag.rb %} //embeds a gist for this plugin |
|||
|
|||
require 'digest/md5' |
|||
require 'net/https' |
|||
require 'uri' |
|||
|
|||
module Jekyll |
|||
class GistTag < Liquid::Tag |
|||
def initialize(tag_name, text, token) |
|||
super |
|||
system('mkdir -p .gist_cache') |
|||
@text = text |
|||
@cache = true |
|||
@cache_folder = File.expand_path "../.gist_cache", File.dirname(__FILE__) |
|||
end |
|||
|
|||
def render(context) |
|||
return "" unless @text =~ /([\d]*) (.*)/ |
|||
|
|||
gist, file = $1.strip, $2.strip |
|||
script_url = "https://gist.github.com/#{gist}.js?file=#{file}" |
|||
|
|||
code = get_cached_gist(gist, file) || get_gist_from_web(gist, file) |
|||
code = code.gsub "<", "<" |
|||
string = "<script src='#{script_url}'></script>" |
|||
string += "<noscript><pre><code>#{code}</code></pre></noscript>" |
|||
return string |
|||
end |
|||
|
|||
def get_gist_url_for(gist, file) |
|||
"https://gist.github.com/raw/#{gist}/#{file}" |
|||
end |
|||
|
|||
def cache_gist(gist, file, data) |
|||
file = get_cache_file_for gist, file |
|||
File.open(file, "w+") do |f| |
|||
f.write(data) |
|||
end |
|||
end |
|||
|
|||
def get_cached_gist(gist, file) |
|||
return nil if @cache == false |
|||
file = get_cache_file_for gist, file |
|||
return nil unless File.exist?(file) |
|||
return File.new(file).readlines.join |
|||
end |
|||
|
|||
def get_cache_file_for(gist, file) |
|||
gist.gsub! /[^a-zA-Z0-9\-_\.]/, '' |
|||
file.gsub! /[^a-zA-Z0-9\-_\.]/, '' |
|||
md5 = Digest::MD5.hexdigest "#{gist}-#{file}" |
|||
File.join @cache_folder, "#{gist}-#{file}-#{md5}.cache" |
|||
end |
|||
|
|||
def get_gist_from_web(gist, file) |
|||
gist_url = get_gist_url_for(gist, file) |
|||
raw_uri = URI.parse(gist_url) |
|||
https = Net::HTTP.new(raw_uri.host, raw_uri.port) |
|||
https.use_ssl = true |
|||
https.verify_mode = OpenSSL::SSL::VERIFY_NONE |
|||
request = Net::HTTP::Get.new(raw_uri.request_uri) |
|||
data = https.request(request) |
|||
data = data.body |
|||
cache_gist(gist, file, data) unless @cache == false |
|||
data |
|||
end |
|||
end |
|||
|
|||
class GistTagNoCache < GistTag |
|||
def initialize(tag_name, text, token) |
|||
super |
|||
@cache = false |
|||
end |
|||
end |
|||
end |
|||
|
|||
Liquid::Template.register_tag('gist', Jekyll::GistTag) |
|||
Liquid::Template.register_tag('gistnocache', Jekyll::GistTagNoCache) |
|||
|
|||
@ -0,0 +1,24 @@ |
|||
module Jekyll |
|||
require 'haml' |
|||
class HamlConverter < Converter |
|||
safe true |
|||
priority :low |
|||
|
|||
def matches(ext) |
|||
ext =~ /haml/i |
|||
end |
|||
|
|||
def output_ext(ext) |
|||
".html" |
|||
end |
|||
|
|||
def convert(content) |
|||
begin |
|||
engine = Haml::Engine.new(content) |
|||
engine.render |
|||
rescue StandardError => e |
|||
puts "!!! HAML Error: " + e.message |
|||
end |
|||
end |
|||
end |
|||
end |
|||
@ -0,0 +1,36 @@ |
|||
class String |
|||
def titlecase |
|||
small_words = %w(a an and as at but by en for if in of on or the to v v. via vs vs.) |
|||
|
|||
x = split(" ").map do |word| |
|||
# note: word could contain non-word characters! |
|||
# downcase all small_words, capitalize the rest |
|||
small_words.include?(word.gsub(/\W/, "").downcase) ? word.downcase! : word.smart_capitalize! |
|||
word |
|||
end |
|||
# capitalize first and last words |
|||
x.first.to_s.smart_capitalize! |
|||
x.last.to_s.smart_capitalize! |
|||
# small words after colons are capitalized |
|||
x.join(" ").gsub(/:\s?(\W*#{small_words.join("|")}\W*)\s/) { ": #{$1.smart_capitalize} " } |
|||
end |
|||
|
|||
def titlecase! |
|||
replace(titlecase) |
|||
end |
|||
|
|||
def smart_capitalize |
|||
# ignore any leading crazy characters and capitalize the first real character |
|||
if self =~ /^['"\(\[']*([a-z])/ |
|||
i = index($1) |
|||
x = self[i,self.length] |
|||
# word with capitals and periods mid-word are left alone |
|||
self[i,1] = self[i,1].upcase unless x =~ /[A-Z]/ or x =~ /\.\w+/ |
|||
end |
|||
self |
|||
end |
|||
|
|||
def smart_capitalize! |
|||
replace(smart_capitalize) |
|||
end |
|||
end |
|||
@ -1,10 +1,13 @@ |
|||
# Require any additional compass plugins here. |
|||
require 'compass-colors' |
|||
project_type = :stand_alone |
|||
# Set this to the root of your project when deployed: |
|||
http_path = "/" |
|||
css_dir = "site/stylesheets" |
|||
sass_dir = "stylesheets" |
|||
css_dir = "public/stylesheets" |
|||
sass_dir = "source/sass" |
|||
images_dir = "source/images" |
|||
images_dir = "source/images/" |
|||
http_images_path = "/images" |
|||
http_images_dir = "images" |
|||
fonts_dir = "source/fonts" |
|||
http_fonts_dir = "fonts" |
|||
|
|||
line_comments = false |
|||
output_style = :compressed |
|||
|
|||
@ -0,0 +1,123 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>Hello World! I'm Octopress! - My Octopress Blog</title> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|||
|
|||
|
|||
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"> |
|||
<script src="/javascripts/mootools-yui-compressed.js" type="text/javascript"></script> |
|||
<script src="/javascripts/mootools-more-1.3.1.1.js" type="text/javascript"></script> |
|||
<script src="/javascripts/octopress.js" type="text/javascript"></script> |
|||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
|||
<meta name="viewport" content="initial-scale=1.0 width=device-width"> |
|||
|
|||
<script> |
|||
var twitter_user = "imathis"; |
|||
var show_replies = false; |
|||
var tweet_count = 3; |
|||
</script> |
|||
<script src="/javascripts/twitter.js" type="text/javascript"></script> |
|||
|
|||
|
|||
<link href="/atom.xml" rel="alternate" title="My Octopress Blog" type="application/atom+xml"/> |
|||
</head> |
|||
|
|||
<body id=""> |
|||
<header><div><h1><a href="/">My Octopress Blog</a></h1> |
|||
|
|||
</div></header> |
|||
<nav id="nav"><div><ul> |
|||
<li><a href="/">Blog</a></li> |
|||
<li><a href="/about/">About</a></li> |
|||
<li class="subscribe"><a href="/atom.xml">Subscribe</a></li> |
|||
</ul> |
|||
</div></nav> |
|||
<div id="page"> |
|||
<div> |
|||
<div id="main"><article><article> |
|||
<header> |
|||
<p> |
|||
<time>November 13<span>th</span>, 2009</time> |
|||
|
|||
<span class="byline"><em>by</em> <span class="author">Your Name</span></span> |
|||
|
|||
</p> |
|||
<h1><a href="/2009/11/13/hello-world/">Hello World! I'm Octopress!</a></h1> |
|||
</header> |
|||
|
|||
<div class="entry"><p><strong>Octopress is a blogging framework designed for hackers</strong>, based on <a href="http://github.com/mojombo/jekyll">Jekyll</a> the blog aware static site generator powering <a href="http://pages.github.com/">Github pages</a>. |
|||
If you don’t know what Jekyll is, <a href="http://metajack.im/2009/01/23/blogging-with-git-emacs-and-jekyll/">Jack Moffitt</a> wrote a good summary:</p> |
|||
|
|||
<blockquote><p>Jekyll is a static blog generator; it transforms a directory of input files into another directory of files suitable for a blog. The management of the blog is handled by standard, familiar tools like creating and renaming files, the text editor of your choice, and version control.</p></blockquote> |
|||
|
|||
<p><cite><strong>Jack Moffitt</strong> <a href="http://metajack.im/2009/01/23/blogging-with-git-emacs-and-jekyll/">Blogging with Git Emacs and Jekyll</a></cite></p> |
|||
|
|||
<p>There’s no database to set up, and you get to use tools like Emacs, Vim, or TextMate to write your posts, not some lame in-browser text editor. Just write, generate, deploy, using the same tools and patterns you already use for your daily work.</p> |
|||
|
|||
<p><a href="http://wiki.github.com/imathis/octopress/">Read the wiki to learn more</a></p> |
|||
</div> |
|||
|
|||
|
|||
<p class="updated"><em>updated</em> <time>March 10<span>th</span>, 2010</time></p> |
|||
|
|||
|
|||
</article> |
|||
</article></div> |
|||
<aside><h4>About Me</h4> |
|||
<p> Yo everybody! </p> |
|||
|
|||
<section> |
|||
<h4>Recent Posts</h4> |
|||
<ul id="recent_posts"> |
|||
|
|||
<li class="post"> |
|||
<a href="/2011/04/07/test-of-typography/">Test of Typography</a> |
|||
<time>April 07, 2011</time> |
|||
</li> |
|||
|
|||
<li class="post"> |
|||
<a href="/2011/03/14/test-post/">Test Post</a> |
|||
<time>March 14, 2011</time> |
|||
</li> |
|||
|
|||
<li class="post"> |
|||
<a href="/2009/11/13/hello-world/">Hello World! I'm Octopress!</a> |
|||
<time>November 13, 2009</time> |
|||
</li> |
|||
|
|||
</ul> |
|||
</section> |
|||
|
|||
|
|||
<section><h4>On Twitter</h4> |
|||
<ul id="tweets"> |
|||
Status updating... |
|||
</ul> |
|||
<p>Follow <a href="http://twitter.com/#{page.twitter_user}">@imathis</a></p> |
|||
</section> |
|||
|
|||
|
|||
|
|||
<section><h4>My Pinboard</h4> |
|||
<ul id="pinboard_linkroll">Fetching linkroll...</ul> |
|||
<p><a href="http://pinboard.in/u:imathis">My Pinboard Bookmarks »</a></p> |
|||
</section> |
|||
|
|||
</aside> |
|||
</div> |
|||
</div> |
|||
<footer><div><p> |
|||
Copyright © 2011 - Your Name - |
|||
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span> |
|||
</p> |
|||
|
|||
<script language="javascript"> |
|||
var pinboard_user = "imathis"; |
|||
var pinboard_count = "3"; |
|||
</script> |
|||
<script language="javascript" src="/javascripts/pinboard.js"></script> |
|||
|
|||
</div></footer> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,114 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>Test Post - My Octopress Blog</title> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|||
|
|||
|
|||
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"> |
|||
<script src="/javascripts/mootools-yui-compressed.js" type="text/javascript"></script> |
|||
<script src="/javascripts/mootools-more-1.3.1.1.js" type="text/javascript"></script> |
|||
<script src="/javascripts/octopress.js" type="text/javascript"></script> |
|||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
|||
<meta name="viewport" content="initial-scale=1.0 width=device-width"> |
|||
|
|||
<script> |
|||
var twitter_user = "imathis"; |
|||
var show_replies = false; |
|||
var tweet_count = 3; |
|||
</script> |
|||
<script src="/javascripts/twitter.js" type="text/javascript"></script> |
|||
|
|||
|
|||
<link href="/atom.xml" rel="alternate" title="My Octopress Blog" type="application/atom+xml"/> |
|||
</head> |
|||
|
|||
<body id=""> |
|||
<header><div><h1><a href="/">My Octopress Blog</a></h1> |
|||
|
|||
</div></header> |
|||
<nav id="nav"><div><ul> |
|||
<li><a href="/">Blog</a></li> |
|||
<li><a href="/about/">About</a></li> |
|||
<li class="subscribe"><a href="/atom.xml">Subscribe</a></li> |
|||
</ul> |
|||
</div></nav> |
|||
<div id="page"> |
|||
<div> |
|||
<div id="main"><article><article> |
|||
<header> |
|||
<p> |
|||
<time>March 14<span>th</span>, 2011</time> |
|||
|
|||
<span class="byline"><em>by</em> <span class="author">Your Name</span></span> |
|||
|
|||
</p> |
|||
<h1><a href="/2011/03/14/test-post/">Test Post</a></h1> |
|||
</header> |
|||
|
|||
<div class="entry"><p>This is a test!</p> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</article> |
|||
</article></div> |
|||
<aside><h4>About Me</h4> |
|||
<p> Yo everybody! </p> |
|||
|
|||
<section> |
|||
<h4>Recent Posts</h4> |
|||
<ul id="recent_posts"> |
|||
|
|||
<li class="post"> |
|||
<a href="/2011/04/07/test-of-typography/">Test of Typography</a> |
|||
<time>April 07, 2011</time> |
|||
</li> |
|||
|
|||
<li class="post"> |
|||
<a href="/2011/03/14/test-post/">Test Post</a> |
|||
<time>March 14, 2011</time> |
|||
</li> |
|||
|
|||
<li class="post"> |
|||
<a href="/2009/11/13/hello-world/">Hello World! I'm Octopress!</a> |
|||
<time>November 13, 2009</time> |
|||
</li> |
|||
|
|||
</ul> |
|||
</section> |
|||
|
|||
|
|||
<section><h4>On Twitter</h4> |
|||
<ul id="tweets"> |
|||
Status updating... |
|||
</ul> |
|||
<p>Follow <a href="http://twitter.com/#{page.twitter_user}">@imathis</a></p> |
|||
</section> |
|||
|
|||
|
|||
|
|||
<section><h4>My Pinboard</h4> |
|||
<ul id="pinboard_linkroll">Fetching linkroll...</ul> |
|||
<p><a href="http://pinboard.in/u:imathis">My Pinboard Bookmarks »</a></p> |
|||
</section> |
|||
|
|||
</aside> |
|||
</div> |
|||
</div> |
|||
<footer><div><p> |
|||
Copyright © 2011 - Your Name - |
|||
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span> |
|||
</p> |
|||
|
|||
<script language="javascript"> |
|||
var pinboard_user = "imathis"; |
|||
var pinboard_count = "3"; |
|||
</script> |
|||
<script language="javascript" src="/javascripts/pinboard.js"></script> |
|||
|
|||
</div></footer> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,164 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>Test of Typography - My Octopress Blog</title> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|||
|
|||
|
|||
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"> |
|||
<script src="/javascripts/mootools-yui-compressed.js" type="text/javascript"></script> |
|||
<script src="/javascripts/mootools-more-1.3.1.1.js" type="text/javascript"></script> |
|||
<script src="/javascripts/octopress.js" type="text/javascript"></script> |
|||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
|||
<meta name="viewport" content="initial-scale=1.0 width=device-width"> |
|||
|
|||
<script> |
|||
var twitter_user = "imathis"; |
|||
var show_replies = false; |
|||
var tweet_count = 3; |
|||
</script> |
|||
<script src="/javascripts/twitter.js" type="text/javascript"></script> |
|||
|
|||
|
|||
<link href="/atom.xml" rel="alternate" title="My Octopress Blog" type="application/atom+xml"/> |
|||
</head> |
|||
|
|||
<body id=""> |
|||
<header><div><h1><a href="/">My Octopress Blog</a></h1> |
|||
|
|||
</div></header> |
|||
<nav id="nav"><div><ul> |
|||
<li><a href="/">Blog</a></li> |
|||
<li><a href="/about/">About</a></li> |
|||
<li class="subscribe"><a href="/atom.xml">Subscribe</a></li> |
|||
</ul> |
|||
</div></nav> |
|||
<div id="page"> |
|||
<div> |
|||
<div id="main"><article><article> |
|||
<header> |
|||
<p> |
|||
<time>April 7<span>th</span>, 2011</time> |
|||
|
|||
<span class="byline"><em>by</em> <span class="author">Your Name</span></span> |
|||
|
|||
</p> |
|||
<h1><a href="/2011/04/07/test-of-typography/">Test of Typography</a></h1> |
|||
</header> |
|||
|
|||
<div class="entry"><p>In the past I’ve always designed my own business cards, printed them on expensive card stock, and hand-cut them with an X-Acto knife. My cards were way nicer than those my clients had gotten <em>professionally</em> printed with bubbly ink, no-bleed designs, and cheap paper. Though I put tremendous care into my cards, I never was happy with the design.</p> |
|||
|
|||
<h2>Why Have Business Cards?</h2> |
|||
|
|||
<p>I’m rarely asked for my business card except when I attend conferences, of which I attend one or two each year. As a freelance contractor, I leave work by walking twenty-five feet from my office to the couch. Many of the |
|||
people I work for I’ve never met in-person.</p> |
|||
|
|||
<p>When someone gives me their business card, I read it, pocket it, and eventually throw it out — sometimes before I remember to copy the information to my address book (sorry, just being honest). The reality is, with the ubiquity of the internet and with frictionless social networks like Twitter, I can connect with people immediately. So why have business cards?</p> |
|||
|
|||
<!-- more --> |
|||
|
|||
|
|||
<h3>Inspiration Demands Action</h3> |
|||
|
|||
<p>In one of our campfire chats <a href="http://twitter.com/NTalbott">Nathaniel Talbott</a> showed off his business cards which he printed through <a href="http://moo.com">Moo</a>. They were half the size of regular business cards featuring the company logo on the front, and the url on the back. The unique size of the card intrigued me, and days later I couldn’t stop thinking about designing a set of mini-cards for myself.</p> |
|||
|
|||
<p><img src="/content/blog/2010/cards/box.jpg" alt="cards in a box" width="300px" class="right"/> Moo’s <a href="http://moo.com/products/minicards.php">MiniCard’s</a> are very unique. You can print 100 cards, each with a totally different back. With a typical printing service this would be prohibitively expensive, but with Moo the rules are different. This freedom encourages us to go beyond nicely styled contact information and branding. Some clever uses involve offering unique invite codes for a web application, or sharing a photography portfolio with Moo’s Flickr import feature.</p> |
|||
|
|||
<p>I realized that I could print several design iterations and decide later which worked best. Without the pressure to choose a single design, I felt the freedom to create.</p> |
|||
|
|||
<h3>The Freedom to Fail</h3> |
|||
|
|||
<p><img src="/content/blog/2010/cards/concepts.jpg" alt="card concepts" width="270px" class="left"/> I could be cheeky and print up half of my cards with my logo on one side and only my Twitter name on the other. For less than $20 for 100 cards, I wasn’t even concerned about possibly screwing up a whole batch. So that’s what I did. I designed cards that were good enough and I printed them. If the cards did’t turn out how I wanted them to, I could improve and print again.</p> |
|||
|
|||
<p><img src="/content/blog/2010/cards/handout.jpg" alt="handout cards" width="220px" class="right"/> The process was fun and simple, and as soon as I finished, I wanted to do it again. When my cards arrived, I was absolutely delighted by the print quality and the care put into their presentation. Smartly Moo even included some beautiful promotional cards to hand out when people inevitably ask about mine.</p> |
|||
|
|||
<h3>A Second Iteration</h3> |
|||
|
|||
<p>After holding the finished product, I began to see how my design could be improved. I learned that Gill Sans is harder to read at a small size in a high contrast print, so I switched to Futura. I showed my cards to some far-sighted friends and adjusted my font size accordingly. I discarded a background gradient (which I should have known wouldn’t translate well to print) in favor of a solid color. <strong>Sidenote:</strong> On screen, gradients emulate the subtleties of a natural light source, but on a real object it doesn’t make sense and generally looks bad.</p> |
|||
|
|||
<p>I changed my approach choosing a single design with multiple color variations. In the promotional cards Moo sent me, I learned that they do a fantastic job with bright colors and I wanted to use that boldness in my design. I was inspired by what <a href="http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html">Seth Godin said</a>:</p> |
|||
|
|||
<blockquote><p>Every interaction is both precious and an opportunity to delight.</p></blockquote> |
|||
|
|||
<p><img src="/content/blog/2010/cards/holder.jpg" alt="MiniCard Holder" width="220px" class="right"/> I pictured sliding a card out of my <a href="http://moo.com/products/accessories/holders/moo_minicard_holders">MiniCard Holder</a> and revealing another brightly-colored card beneath. As I hand someone a card they’ll see the flash of color and realize that their card was special, and different from my other cards. That’s what I want my clients and future clients to feel.</p> |
|||
|
|||
<h3>The Final Design</h3> |
|||
|
|||
<p><img src="/content/blog/2010/cards/all.jpg" alt="all card designs" width="640px"/></p> |
|||
|
|||
<p>The MiniCard’s unique constraints inspired me with a fresh challenge and their pricing model encouraged me to experiment. Instead of treating business cards like a necessary design task, I saw them as a opportunity to release quickly, fail cheaply, and improve. Now when I give someone a business card, it’s something valuable to me, and I hope they’re delighted.</p> |
|||
|
|||
<p><strong>Update:</strong> I thought I’d share some other great uses of Moo’s MiniCards. There’s a fantastic <a href="http://www.flickr.com/groups/moo/pool/">Flikr pool</a>, but here are some of my favorites. Enjoy:</p> |
|||
|
|||
<ul> |
|||
<li><a href="http://www.flickr.com/photos/lushlampwork/4131018201/in/pool-moo">Product</a> <a href="http://www.flickr.com/photos/lushlampwork/4297224179/in/pool-moo">tags</a></li> |
|||
<li><a href="http://www.flickr.com/photos/thisiswoly/4206576342/in/pool-moo">Photography</a> or <a href="http://www.flickr.com/photos/lesleybarnes/4276368956/in/pool-moo">art</a> <a href="http://www.flickr.com/photos/playinprogress/4158223112/in/pool-moo">portfolios</a></li> |
|||
<li><a href="http://www.flickr.com/photos/polkadotcreations/4167249758/in/pool-moo">Gift</a> <a href="http://www.flickr.com/photos/22338102@N04/4278114745/in/pool-moo">tags</a></li> |
|||
<li><a href="http://www.flickr.com/photos/bcome/4177034036/in/pool-moo">An advent calendar</a></li> |
|||
</ul> |
|||
|
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</article> |
|||
</article></div> |
|||
<aside><h4>About Me</h4> |
|||
<p> Yo everybody! </p> |
|||
|
|||
<section> |
|||
<h4>Recent Posts</h4> |
|||
<ul id="recent_posts"> |
|||
|
|||
<li class="post"> |
|||
<a href="/2011/04/07/test-of-typography/">Test of Typography</a> |
|||
<time>April 07, 2011</time> |
|||
</li> |
|||
|
|||
<li class="post"> |
|||
<a href="/2011/03/14/test-post/">Test Post</a> |
|||
<time>March 14, 2011</time> |
|||
</li> |
|||
|
|||
<li class="post"> |
|||
<a href="/2009/11/13/hello-world/">Hello World! I'm Octopress!</a> |
|||
<time>November 13, 2009</time> |
|||
</li> |
|||
|
|||
</ul> |
|||
</section> |
|||
|
|||
|
|||
<section><h4>On Twitter</h4> |
|||
<ul id="tweets"> |
|||
Status updating... |
|||
</ul> |
|||
<p>Follow <a href="http://twitter.com/#{page.twitter_user}">@imathis</a></p> |
|||
</section> |
|||
|
|||
|
|||
|
|||
<section><h4>My Pinboard</h4> |
|||
<ul id="pinboard_linkroll">Fetching linkroll...</ul> |
|||
<p><a href="http://pinboard.in/u:imathis">My Pinboard Bookmarks »</a></p> |
|||
</section> |
|||
|
|||
</aside> |
|||
</div> |
|||
</div> |
|||
<footer><div><p> |
|||
Copyright © 2011 - Your Name - |
|||
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span> |
|||
</p> |
|||
|
|||
<script language="javascript"> |
|||
var pinboard_user = "imathis"; |
|||
var pinboard_count = "3"; |
|||
</script> |
|||
<script language="javascript" src="/javascripts/pinboard.js"></script> |
|||
|
|||
</div></footer> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,103 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>About Me - My Octopress Blog</title> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|||
|
|||
|
|||
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"> |
|||
<script src="/javascripts/mootools-yui-compressed.js" type="text/javascript"></script> |
|||
<script src="/javascripts/mootools-more-1.3.1.1.js" type="text/javascript"></script> |
|||
<script src="/javascripts/octopress.js" type="text/javascript"></script> |
|||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
|||
<meta name="viewport" content="initial-scale=1.0 width=device-width"> |
|||
|
|||
<script> |
|||
var twitter_user = "imathis"; |
|||
var show_replies = false; |
|||
var tweet_count = 3; |
|||
</script> |
|||
<script src="/javascripts/twitter.js" type="text/javascript"></script> |
|||
|
|||
|
|||
<link href="/atom.xml" rel="alternate" title="My Octopress Blog" type="application/atom+xml"/> |
|||
</head> |
|||
|
|||
<body id=""> |
|||
<header><div><h1><a href="/">My Octopress Blog</a></h1> |
|||
|
|||
</div></header> |
|||
<nav id="nav"><div><ul> |
|||
<li><a href="/">Blog</a></li> |
|||
<li><a href="/about/">About</a></li> |
|||
<li class="subscribe"><a href="/atom.xml">Subscribe</a></li> |
|||
</ul> |
|||
</div></nav> |
|||
<div id="page"> |
|||
<div> |
|||
<div id="main"><article><!-- use the :mardown filter if you want to write pages with Markdown --> |
|||
<h1>About Me</h1> |
|||
|
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum.</p> |
|||
|
|||
<p>Ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p> |
|||
|
|||
<p>Dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.</p> |
|||
</article></div> |
|||
<aside><h4>About Me</h4> |
|||
<p> Yo everybody! </p> |
|||
|
|||
<section> |
|||
<h4>Recent Posts</h4> |
|||
<ul id="recent_posts"> |
|||
|
|||
<li class="post"> |
|||
<a href="/2011/04/07/test-of-typography/">Test of Typography</a> |
|||
<time>April 07, 2011</time> |
|||
</li> |
|||
|
|||
<li class="post"> |
|||
<a href="/2011/03/14/test-post/">Test Post</a> |
|||
<time>March 14, 2011</time> |
|||
</li> |
|||
|
|||
<li class="post"> |
|||
<a href="/2009/11/13/hello-world/">Hello World! I'm Octopress!</a> |
|||
<time>November 13, 2009</time> |
|||
</li> |
|||
|
|||
</ul> |
|||
</section> |
|||
|
|||
|
|||
<section><h4>On Twitter</h4> |
|||
<ul id="tweets"> |
|||
Status updating... |
|||
</ul> |
|||
<p>Follow <a href="http://twitter.com/#{page.twitter_user}">@imathis</a></p> |
|||
</section> |
|||
|
|||
|
|||
|
|||
<section><h4>My Pinboard</h4> |
|||
<ul id="pinboard_linkroll">Fetching linkroll...</ul> |
|||
<p><a href="http://pinboard.in/u:imathis">My Pinboard Bookmarks »</a></p> |
|||
</section> |
|||
|
|||
</aside> |
|||
</div> |
|||
</div> |
|||
<footer><div><p> |
|||
Copyright © 2011 - Your Name - |
|||
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span> |
|||
</p> |
|||
|
|||
<script language="javascript"> |
|||
var pinboard_user = "imathis"; |
|||
var pinboard_count = "3"; |
|||
</script> |
|||
<script language="javascript" src="/javascripts/pinboard.js"></script> |
|||
|
|||
</div></footer> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,103 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<feed xmlns="http://www.w3.org/2005/Atom"> |
|||
|
|||
<title></title> |
|||
<link href="http://yoursite.com/atom.xml" rel="self"/> |
|||
<link href="http://yoursite.com/"/> |
|||
<updated>2011-04-11T16:23:20-05:00</updated> |
|||
<id>http://yoursite.com/</id> |
|||
<author> |
|||
<name>Your Name</name> |
|||
|
|||
<email>you@domain.com</email> |
|||
|
|||
</author> |
|||
|
|||
|
|||
<entry> |
|||
<title>Test of Typography</title> |
|||
<link href="http://yoursite.com/2011/04/07/test-of-typography/"/> |
|||
<updated>2011-04-07T19:17:00-05:00</updated> |
|||
<id>http://yoursite.com/2011/04/07/test-of-typography</id> |
|||
<content type="html"><p>In the past I've always designed my own business cards, printed them on expensive card stock, and hand-cut them with an X-Acto knife. My cards were way nicer than those my clients had gotten <em>professionally</em> printed with bubbly ink, no-bleed designs, and cheap paper. Though I put tremendous care into my cards, I never was happy with the design.</p> |
|||
|
|||
<h2>Why Have Business Cards?</h2> |
|||
|
|||
<p>I'm rarely asked for my business card except when I attend conferences, of which I attend one or two each year. As a freelance contractor, I leave work by walking twenty-five feet from my office to the couch. Many of the |
|||
people I work for I've never met in-person.</p> |
|||
|
|||
<p>When someone gives me their business card, I read it, pocket it, and eventually throw it out &mdash; sometimes before I remember to copy the information to my address book (sorry, just being honest). The reality is, with the ubiquity of the internet and with frictionless social networks like Twitter, I can connect with people immediately. So why have business cards?</p> |
|||
|
|||
<!-- more --> |
|||
|
|||
|
|||
<h3>Inspiration Demands Action</h3> |
|||
|
|||
<p>In one of our campfire chats <a href="http://twitter.com/NTalbott">Nathaniel Talbott</a> showed off his business cards which he printed through <a href="http://moo.com">Moo</a>. They were half the size of regular business cards featuring the company logo on the front, and the url on the back. The unique size of the card intrigued me, and days later I couldn't stop thinking about designing a set of mini-cards for myself.</p> |
|||
|
|||
<p><img src="http://yoursite.com/content/blog/2010/cards/box.jpg" alt="cards in a box" width="300px" class="right"/> Moo's <a href="http://moo.com/products/minicards.php">MiniCard's</a> are very unique. You can print 100 cards, each with a totally different back. With a typical printing service this would be prohibitively expensive, but with Moo the rules are different. This freedom encourages us to go beyond nicely styled contact information and branding. Some clever uses involve offering unique invite codes for a web application, or sharing a photography portfolio with Moo's Flickr import feature.</p> |
|||
|
|||
<p>I realized that I could print several design iterations and decide later which worked best. Without the pressure to choose a single design, I felt the freedom to create.</p> |
|||
|
|||
<h3>The Freedom to Fail</h3> |
|||
|
|||
<p><img src="http://yoursite.com/content/blog/2010/cards/concepts.jpg" alt="card concepts" width="270px" class="left"/> I could be cheeky and print up half of my cards with my logo on one side and only my Twitter name on the other. For less than $20 for 100 cards, I wasn't even concerned about possibly screwing up a whole batch. So that's what I did. I designed cards that were good enough and I printed them. If the cards did't turn out how I wanted them to, I could improve and print again.</p> |
|||
|
|||
<p><img src="http://yoursite.com/content/blog/2010/cards/handout.jpg" alt="handout cards" width="220px" class="right"/> The process was fun and simple, and as soon as I finished, I wanted to do it again. When my cards arrived, I was absolutely delighted by the print quality and the care put into their presentation. Smartly Moo even included some beautiful promotional cards to hand out when people inevitably ask about mine.</p> |
|||
|
|||
<h3>A Second Iteration</h3> |
|||
|
|||
<p>After holding the finished product, I began to see how my design could be improved. I learned that Gill Sans is harder to read at a small size in a high contrast print, so I switched to Futura. I showed my cards to some far-sighted friends and adjusted my font size accordingly. I discarded a background gradient (which I should have known wouldn't translate well to print) in favor of a solid color. <strong>Sidenote:</strong> On screen, gradients emulate the subtleties of a natural light source, but on a real object it doesn't make sense and generally looks bad.</p> |
|||
|
|||
<p>I changed my approach choosing a single design with multiple color variations. In the promotional cards Moo sent me, I learned that they do a fantastic job with bright colors and I wanted to use that boldness in my design. I was inspired by what <a href="http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html">Seth Godin said</a>:</p> |
|||
|
|||
<blockquote><p>Every interaction is both precious and an opportunity to delight.</p></blockquote> |
|||
|
|||
<p><img src="http://yoursite.com/content/blog/2010/cards/holder.jpg" alt="MiniCard Holder" width="220px" class="right"/> I pictured sliding a card out of my <a href="http://moo.com/products/accessories/holders/moo_minicard_holders">MiniCard Holder</a> and revealing another brightly-colored card beneath. As I hand someone a card they'll see the flash of color and realize that their card was special, and different from my other cards. That's what I want my clients and future clients to feel.</p> |
|||
|
|||
<h3>The Final Design</h3> |
|||
|
|||
<p><img src="http://yoursite.com/content/blog/2010/cards/all.jpg" alt="all card designs" width="640px"/></p> |
|||
|
|||
<p>The MiniCard's unique constraints inspired me with a fresh challenge and their pricing model encouraged me to experiment. Instead of treating business cards like a necessary design task, I saw them as a opportunity to release quickly, fail cheaply, and improve. Now when I give someone a business card, it's something valuable to me, and I hope they're delighted.</p> |
|||
|
|||
<p><strong>Update:</strong> I thought I'd share some other great uses of Moo's MiniCards. There's a fantastic <a href="http://www.flickr.com/groups/moo/pool/">Flikr pool</a>, but here are some of my favorites. Enjoy:</p> |
|||
|
|||
<ul> |
|||
<li><a href="http://www.flickr.com/photos/lushlampwork/4131018201/in/pool-moo">Product</a> <a href="http://www.flickr.com/photos/lushlampwork/4297224179/in/pool-moo">tags</a></li> |
|||
<li><a href="http://www.flickr.com/photos/thisiswoly/4206576342/in/pool-moo">Photography</a> or <a href="http://www.flickr.com/photos/lesleybarnes/4276368956/in/pool-moo">art</a> <a href="http://www.flickr.com/photos/playinprogress/4158223112/in/pool-moo">portfolios</a></li> |
|||
<li><a href="http://www.flickr.com/photos/polkadotcreations/4167249758/in/pool-moo">Gift</a> <a href="http://www.flickr.com/photos/22338102@N04/4278114745/in/pool-moo">tags</a></li> |
|||
<li><a href="http://www.flickr.com/photos/bcome/4177034036/in/pool-moo">An advent calendar</a></li> |
|||
</ul> |
|||
|
|||
</content> |
|||
</entry> |
|||
|
|||
<entry> |
|||
<title>Test Post</title> |
|||
<link href="http://yoursite.com/2011/03/14/test-post/"/> |
|||
<updated>2011-03-14T00:00:00-05:00</updated> |
|||
<id>http://yoursite.com/2011/03/14/test-post</id> |
|||
<content type="html"><p>This is a test!</p> |
|||
</content> |
|||
</entry> |
|||
|
|||
<entry> |
|||
<title>Hello World! I'm Octopress!</title> |
|||
<link href="http://yoursite.com/2009/11/13/hello-world/"/> |
|||
<updated>2009-11-13T00:00:00-06:00</updated> |
|||
<id>http://yoursite.com/2009/11/13/hello-world</id> |
|||
<content type="html"><p><strong>Octopress is a blogging framework designed for hackers</strong>, based on <a href="http://github.com/mojombo/jekyll">Jekyll</a> the blog aware static site generator powering <a href="http://pages.github.com/">Github pages</a>. |
|||
If you don't know what Jekyll is, <a href="http://metajack.im/2009/01/23/blogging-with-git-emacs-and-jekyll/">Jack Moffitt</a> wrote a good summary:</p> |
|||
|
|||
<blockquote><p>Jekyll is a static blog generator; it transforms a directory of input files into another directory of files suitable for a blog. The management of the blog is handled by standard, familiar tools like creating and renaming files, the text editor of your choice, and version control.</p></blockquote> |
|||
|
|||
<p><cite><strong>Jack Moffitt</strong> <a href="http://metajack.im/2009/01/23/blogging-with-git-emacs-and-jekyll/">Blogging with Git Emacs and Jekyll</a></cite></p> |
|||
|
|||
<p>There's no database to set up, and you get to use tools like Emacs, Vim, or TextMate to write your posts, not some lame in-browser text editor. Just write, generate, deploy, using the same tools and patterns you already use for your daily work.</p> |
|||
|
|||
<p><a href="http://wiki.github.com/imathis/octopress/">Read the wiki to learn more</a></p> |
|||
</content> |
|||
</entry> |
|||
|
|||
</feed> |
|||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 239 B |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,177 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>Octopress - My Octopress Blog</title> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|||
|
|||
|
|||
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"> |
|||
<script src="/javascripts/mootools-yui-compressed.js" type="text/javascript"></script> |
|||
<script src="/javascripts/mootools-more-1.3.1.1.js" type="text/javascript"></script> |
|||
<script src="/javascripts/octopress.js" type="text/javascript"></script> |
|||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
|||
<meta name="viewport" content="initial-scale=1.0 width=device-width"> |
|||
|
|||
<script> |
|||
var twitter_user = "imathis"; |
|||
var show_replies = false; |
|||
var tweet_count = 3; |
|||
</script> |
|||
<script src="/javascripts/twitter.js" type="text/javascript"></script> |
|||
|
|||
|
|||
<link href="/atom.xml" rel="alternate" title="My Octopress Blog" type="application/atom+xml"/> |
|||
</head> |
|||
|
|||
<body id=""> |
|||
<header><div><h1><a href="/">My Octopress Blog</a></h1> |
|||
|
|||
</div></header> |
|||
<nav id="nav"><div><ul> |
|||
<li><a href="/">Blog</a></li> |
|||
<li><a href="/about/">About</a></li> |
|||
<li class="subscribe"><a href="/atom.xml">Subscribe</a></li> |
|||
</ul> |
|||
</div></nav> |
|||
<div id="page"> |
|||
<div> |
|||
<div id="main"><article> |
|||
|
|||
|
|||
<article> |
|||
<header> |
|||
<p> |
|||
<time>April 7<span>th</span>, 2011</time> |
|||
|
|||
<span class="byline"><em>by</em> <span class="author">Your Name</span></span> |
|||
|
|||
</p> |
|||
<h1><a href="/2011/04/07/test-of-typography/">Test of Typography</a></h1> |
|||
</header> |
|||
|
|||
<div class="entry"><p>In the past I’ve always designed my own business cards, printed them on expensive card stock, and hand-cut them with an X-Acto knife. My cards were way nicer than those my clients had gotten <em>professionally</em> printed with bubbly ink, no-bleed designs, and cheap paper. Though I put tremendous care into my cards, I never was happy with the design.</p> |
|||
|
|||
<h2>Why Have Business Cards?</h2> |
|||
|
|||
<p>I’m rarely asked for my business card except when I attend conferences, of which I attend one or two each year. As a freelance contractor, I leave work by walking twenty-five feet from my office to the couch. Many of the |
|||
people I work for I’ve never met in-person.</p> |
|||
|
|||
<p>When someone gives me their business card, I read it, pocket it, and eventually throw it out — sometimes before I remember to copy the information to my address book (sorry, just being honest). The reality is, with the ubiquity of the internet and with frictionless social networks like Twitter, I can connect with people immediately. So why have business cards?</p> |
|||
|
|||
<p><a href='/2011/04/07/test-of-typography/'>Continue reading »</a></p></div> |
|||
|
|||
|
|||
|
|||
|
|||
</article> |
|||
|
|||
|
|||
|
|||
<article> |
|||
<header> |
|||
<p> |
|||
<time>March 14<span>th</span>, 2011</time> |
|||
|
|||
<span class="byline"><em>by</em> <span class="author">Your Name</span></span> |
|||
|
|||
</p> |
|||
<h1><a href="/2011/03/14/test-post/">Test Post</a></h1> |
|||
</header> |
|||
|
|||
<div class="entry"><p>This is a test!</p> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
</article> |
|||
|
|||
|
|||
|
|||
<article> |
|||
<header> |
|||
<p> |
|||
<time>November 13<span>th</span>, 2009</time> |
|||
|
|||
<span class="byline"><em>by</em> <span class="author">Your Name</span></span> |
|||
|
|||
</p> |
|||
<h1><a href="/2009/11/13/hello-world/">Hello World! I'm Octopress!</a></h1> |
|||
</header> |
|||
|
|||
<div class="entry"><p><strong>Octopress is a blogging framework designed for hackers</strong>, based on <a href="http://github.com/mojombo/jekyll">Jekyll</a> the blog aware static site generator powering <a href="http://pages.github.com/">Github pages</a>. |
|||
If you don’t know what Jekyll is, <a href="http://metajack.im/2009/01/23/blogging-with-git-emacs-and-jekyll/">Jack Moffitt</a> wrote a good summary:</p> |
|||
|
|||
<blockquote><p>Jekyll is a static blog generator; it transforms a directory of input files into another directory of files suitable for a blog. The management of the blog is handled by standard, familiar tools like creating and renaming files, the text editor of your choice, and version control.</p></blockquote> |
|||
|
|||
<p><cite><strong>Jack Moffitt</strong> <a href="http://metajack.im/2009/01/23/blogging-with-git-emacs-and-jekyll/">Blogging with Git Emacs and Jekyll</a></cite></p> |
|||
|
|||
<p>There’s no database to set up, and you get to use tools like Emacs, Vim, or TextMate to write your posts, not some lame in-browser text editor. Just write, generate, deploy, using the same tools and patterns you already use for your daily work.</p> |
|||
|
|||
<p><a href="http://wiki.github.com/imathis/octopress/">Read the wiki to learn more</a></p> |
|||
</div> |
|||
|
|||
|
|||
<p class="updated"><em>updated</em> <time>March 10<span>th</span>, 2010</time></p> |
|||
|
|||
</article> |
|||
|
|||
|
|||
</article></div> |
|||
<aside><h4>About Me</h4> |
|||
<p> Yo everybody! </p> |
|||
|
|||
<section> |
|||
<h4>Recent Posts</h4> |
|||
<ul id="recent_posts"> |
|||
|
|||
<li class="post"> |
|||
<a href="/2011/04/07/test-of-typography/">Test of Typography</a> |
|||
<time>April 07, 2011</time> |
|||
</li> |
|||
|
|||
<li class="post"> |
|||
<a href="/2011/03/14/test-post/">Test Post</a> |
|||
<time>March 14, 2011</time> |
|||
</li> |
|||
|
|||
<li class="post"> |
|||
<a href="/2009/11/13/hello-world/">Hello World! I'm Octopress!</a> |
|||
<time>November 13, 2009</time> |
|||
</li> |
|||
|
|||
</ul> |
|||
</section> |
|||
|
|||
|
|||
<section><h4>On Twitter</h4> |
|||
<ul id="tweets"> |
|||
Status updating... |
|||
</ul> |
|||
<p>Follow <a href="http://twitter.com/#{page.twitter_user}">@imathis</a></p> |
|||
</section> |
|||
|
|||
|
|||
|
|||
<section><h4>My Pinboard</h4> |
|||
<ul id="pinboard_linkroll">Fetching linkroll...</ul> |
|||
<p><a href="http://pinboard.in/u:imathis">My Pinboard Bookmarks »</a></p> |
|||
</section> |
|||
|
|||
</aside> |
|||
</div> |
|||
</div> |
|||
<footer><div><p> |
|||
Copyright © 2011 - Your Name - |
|||
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span> |
|||
</p> |
|||
|
|||
<script language="javascript"> |
|||
var pinboard_user = "imathis"; |
|||
var pinboard_count = "3"; |
|||
</script> |
|||
<script language="javascript" src="/javascripts/pinboard.js"></script> |
|||
|
|||
</div></footer> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,100 @@ |
|||
//MooTools More, <http://mootools.net/more>. Copyright (c) 2006-2009 Aaron Newton <http://clientcide.com/>, Valerio Proietti <http://mad4milk.net> & the MooTools team <http://mootools.net/developers>, MIT Style License.
|
|||
|
|||
MooTools.More={version:"1.2.4.2",build:"bd5a93c0913cce25917c48cbdacde568e15e02ef"};(function(){var a={language:"en-US",languages:{"en-US":{}},cascades:["en-US"]}; |
|||
var b;MooTools.lang=new Events();$extend(MooTools.lang,{setLanguage:function(c){if(!a.languages[c]){return this;}a.language=c;this.load();this.fireEvent("langChange",c); |
|||
return this;},load:function(){var c=this.cascade(this.getCurrentLanguage());b={};$each(c,function(e,d){b[d]=this.lambda(e);},this);},getCurrentLanguage:function(){return a.language; |
|||
},addLanguage:function(c){a.languages[c]=a.languages[c]||{};return this;},cascade:function(e){var c=(a.languages[e]||{}).cascades||[];c.combine(a.cascades); |
|||
c.erase(e).push(e);var d=c.map(function(f){return a.languages[f];},this);return $merge.apply(this,d);},lambda:function(c){(c||{}).get=function(e,d){return $lambda(c[e]).apply(this,$splat(d)); |
|||
};return c;},get:function(e,d,c){if(b&&b[e]){return(d?b[e].get(d,c):b[e]);}},set:function(d,e,c){this.addLanguage(d);langData=a.languages[d];if(!langData[e]){langData[e]={}; |
|||
}$extend(langData[e],c);if(d==this.getCurrentLanguage()){this.load();this.fireEvent("langChange",d);}return this;},list:function(){return Hash.getKeys(a.languages); |
|||
}});})();(function(){var i=this.Date;if(!i.now){i.now=$time;}i.Methods={ms:"Milliseconds",year:"FullYear",min:"Minutes",mo:"Month",sec:"Seconds",hr:"Hours"}; |
|||
["Date","Day","FullYear","Hours","Milliseconds","Minutes","Month","Seconds","Time","TimezoneOffset","Week","Timezone","GMTOffset","DayOfYear","LastMonth","LastDayOfMonth","UTCDate","UTCDay","UTCFullYear","AMPM","Ordinal","UTCHours","UTCMilliseconds","UTCMinutes","UTCMonth","UTCSeconds"].each(function(p){i.Methods[p.toLowerCase()]=p; |
|||
});var d=function(q,p){return new Array(p-String(q).length+1).join("0")+q;};i.implement({set:function(t,r){switch($type(t)){case"object":for(var s in t){this.set(s,t[s]); |
|||
}break;case"string":t=t.toLowerCase();var q=i.Methods;if(q[t]){this["set"+q[t]](r);}}return this;},get:function(q){q=q.toLowerCase();var p=i.Methods;if(p[q]){return this["get"+p[q]](); |
|||
}return null;},clone:function(){return new i(this.get("time"));},increment:function(p,r){p=p||"day";r=$pick(r,1);switch(p){case"year":return this.increment("month",r*12); |
|||
case"month":var q=this.get("date");this.set("date",1).set("mo",this.get("mo")+r);return this.set("date",q.min(this.get("lastdayofmonth")));case"week":return this.increment("day",r*7); |
|||
case"day":return this.set("date",this.get("date")+r);}if(!i.units[p]){throw new Error(p+" is not a supported interval");}return this.set("time",this.get("time")+r*i.units[p]()); |
|||
},decrement:function(p,q){return this.increment(p,-1*$pick(q,1));},isLeapYear:function(){return i.isLeapYear(this.get("year"));},clearTime:function(){return this.set({hr:0,min:0,sec:0,ms:0}); |
|||
},diff:function(q,p){if($type(q)=="string"){q=i.parse(q);}return((q-this)/i.units[p||"day"](3,3)).toInt();},getLastDayOfMonth:function(){return i.daysInMonth(this.get("mo"),this.get("year")); |
|||
},getDayOfYear:function(){return(i.UTC(this.get("year"),this.get("mo"),this.get("date")+1)-i.UTC(this.get("year"),0,1))/i.units.day();},getWeek:function(){return(this.get("dayofyear")/7).ceil(); |
|||
},getOrdinal:function(p){return i.getMsg("ordinal",p||this.get("date"));},getTimezone:function(){return this.toString().replace(/^.*? ([A-Z]{3}).[0-9]{4}.*$/,"$1").replace(/^.*?\(([A-Z])[a-z]+ ([A-Z])[a-z]+ ([A-Z])[a-z]+\)$/,"$1$2$3"); |
|||
},getGMTOffset:function(){var p=this.get("timezoneOffset");return((p>0)?"-":"+")+d((p.abs()/60).floor(),2)+d(p%60,2);},setAMPM:function(p){p=p.toUpperCase(); |
|||
var q=this.get("hr");if(q>11&&p=="AM"){return this.decrement("hour",12);}else{if(q<12&&p=="PM"){return this.increment("hour",12);}}return this;},getAMPM:function(){return(this.get("hr")<12)?"AM":"PM"; |
|||
},parse:function(p){this.set("time",i.parse(p));return this;},isValid:function(p){return !!(p||this).valueOf();},format:function(p){if(!this.isValid()){return"invalid date"; |
|||
}p=p||"%x %X";p=k[p.toLowerCase()]||p;var q=this;return p.replace(/%([a-z%])/gi,function(s,r){switch(r){case"a":return i.getMsg("days")[q.get("day")].substr(0,3); |
|||
case"A":return i.getMsg("days")[q.get("day")];case"b":return i.getMsg("months")[q.get("month")].substr(0,3);case"B":return i.getMsg("months")[q.get("month")]; |
|||
case"c":return q.toString();case"d":return d(q.get("date"),2);case"H":return d(q.get("hr"),2);case"I":return((q.get("hr")%12)||12);case"j":return d(q.get("dayofyear"),3); |
|||
case"m":return d((q.get("mo")+1),2);case"M":return d(q.get("min"),2);case"o":return q.get("ordinal");case"p":return i.getMsg(q.get("ampm"));case"S":return d(q.get("seconds"),2); |
|||
case"U":return d(q.get("week"),2);case"w":return q.get("day");case"x":return q.format(i.getMsg("shortDate"));case"X":return q.format(i.getMsg("shortTime")); |
|||
case"y":return q.get("year").toString().substr(2);case"Y":return q.get("year");case"T":return q.get("GMTOffset");case"Z":return q.get("Timezone");}return r; |
|||
});},toISOString:function(){return this.format("iso8601");}});i.alias("toISOString","toJSON");i.alias("diff","compare");i.alias("format","strftime");var k={db:"%Y-%m-%d %H:%M:%S",compact:"%Y%m%dT%H%M%S",iso8601:"%Y-%m-%dT%H:%M:%S%T",rfc822:"%a, %d %b %Y %H:%M:%S %Z","short":"%d %b %H:%M","long":"%B %d, %Y %H:%M"}; |
|||
var g=[];var e=i.parse;var n=function(s,u,r){var q=-1;var t=i.getMsg(s+"s");switch($type(u)){case"object":q=t[u.get(s)];break;case"number":q=t[month-1]; |
|||
if(!q){throw new Error("Invalid "+s+" index: "+index);}break;case"string":var p=t.filter(function(v){return this.test(v);},new RegExp("^"+u,"i"));if(!p.length){throw new Error("Invalid "+s+" string"); |
|||
}if(p.length>1){throw new Error("Ambiguous "+s);}q=p[0];}return(r)?t.indexOf(q):q;};i.extend({getMsg:function(q,p){return MooTools.lang.get("Date",q,p); |
|||
},units:{ms:$lambda(1),second:$lambda(1000),minute:$lambda(60000),hour:$lambda(3600000),day:$lambda(86400000),week:$lambda(608400000),month:function(q,p){var r=new i; |
|||
return i.daysInMonth($pick(q,r.get("mo")),$pick(p,r.get("year")))*86400000;},year:function(p){p=p||new i().get("year");return i.isLeapYear(p)?31622400000:31536000000; |
|||
}},daysInMonth:function(q,p){return[31,i.isLeapYear(p)?29:28,31,30,31,30,31,31,30,31,30,31][q];},isLeapYear:function(p){return((p%4===0)&&(p%100!==0))||(p%400===0); |
|||
},parse:function(r){var q=$type(r);if(q=="number"){return new i(r);}if(q!="string"){return r;}r=r.clean();if(!r.length){return null;}var p;g.some(function(t){var s=t.re.exec(r); |
|||
return(s)?(p=t.handler(s)):false;});return p||new i(e(r));},parseDay:function(p,q){return n("day",p,q);},parseMonth:function(q,p){return n("month",q,p); |
|||
},parseUTC:function(q){var p=new i(q);var r=i.UTC(p.get("year"),p.get("mo"),p.get("date"),p.get("hr"),p.get("min"),p.get("sec"));return new i(r);},orderIndex:function(p){return i.getMsg("dateOrder").indexOf(p)+1; |
|||
},defineFormat:function(p,q){k[p]=q;},defineFormats:function(p){for(var q in p){i.defineFormat(q,p[q]);}},parsePatterns:g,defineParser:function(p){g.push((p.re&&p.handler)?p:l(p)); |
|||
},defineParsers:function(){Array.flatten(arguments).each(i.defineParser);},define2DigitYearStart:function(p){h=p%100;m=p-h;}});var m=1900;var h=70;var j=function(p){return new RegExp("(?:"+i.getMsg(p).map(function(q){return q.substr(0,3); |
|||
}).join("|")+")[a-z]*");};var a=function(p){switch(p){case"x":return((i.orderIndex("month")==1)?"%m[.-/]%d":"%d[.-/]%m")+"([.-/]%y)?";case"X":return"%H([.:]%M)?([.:]%S([.:]%s)?)? ?%p? ?%T?"; |
|||
}return null;};var o={d:/[0-2]?[0-9]|3[01]/,H:/[01]?[0-9]|2[0-3]/,I:/0?[1-9]|1[0-2]/,M:/[0-5]?\d/,s:/\d+/,o:/[a-z]*/,p:/[ap]\.?m\.?/,y:/\d{2}|\d{4}/,Y:/\d{4}/,T:/Z|[+-]\d{2}(?::?\d{2})?/}; |
|||
o.m=o.I;o.S=o.M;var c;var b=function(p){c=p;o.a=o.A=j("days");o.b=o.B=j("months");g.each(function(r,q){if(r.format){g[q]=l(r.format);}});};var l=function(r){if(!c){return{format:r}; |
|||
}var p=[];var q=(r.source||r).replace(/%([a-z])/gi,function(t,s){return a(s)||t;}).replace(/\((?!\?)/g,"(?:").replace(/ (?!\?|\*)/g,",? ").replace(/%([a-z%])/gi,function(t,s){var u=o[s]; |
|||
if(!u){return s;}p.push(s);return"("+u.source+")";}).replace(/\[a-z\]/gi,"[a-z\\u00c0-\\uffff]");return{format:r,re:new RegExp("^"+q+"$","i"),handler:function(u){u=u.slice(1).associate(p); |
|||
var s=new i().clearTime();if("d" in u){f.call(s,"d",1);}if("m" in u){f.call(s,"m",1);}for(var t in u){f.call(s,t,u[t]);}return s;}};};var f=function(p,q){if(!q){return this; |
|||
}switch(p){case"a":case"A":return this.set("day",i.parseDay(q,true));case"b":case"B":return this.set("mo",i.parseMonth(q,true));case"d":return this.set("date",q); |
|||
case"H":case"I":return this.set("hr",q);case"m":return this.set("mo",q-1);case"M":return this.set("min",q);case"p":return this.set("ampm",q.replace(/\./g,"")); |
|||
case"S":return this.set("sec",q);case"s":return this.set("ms",("0."+q)*1000);case"w":return this.set("day",q);case"Y":return this.set("year",q);case"y":q=+q; |
|||
if(q<100){q+=m+(q<h?100:0);}return this.set("year",q);case"T":if(q=="Z"){q="+00";}var r=q.match(/([+-])(\d{2}):?(\d{2})?/);r=(r[1]+"1")*(r[2]*60+(+r[3]||0))+this.getTimezoneOffset(); |
|||
return this.set("time",this-r*60000);}return this;};i.defineParsers("%Y([-./]%m([-./]%d((T| )%X)?)?)?","%Y%m%d(T%H(%M%S?)?)?","%x( %X)?","%d%o( %b( %Y)?)?( %X)?","%b( %d%o)?( %Y)?( %X)?","%Y %b( %d%o( %X)?)?","%o %b %d %X %T %Y"); |
|||
MooTools.lang.addEvent("langChange",function(p){if(MooTools.lang.get("Date")){b(p);}}).fireEvent("langChange",MooTools.lang.getCurrentLanguage());})(); |
|||
Date.implement({timeDiffInWords:function(a){return Date.distanceOfTimeInWords(this,a||new Date);},timeDiff:function(g,b){if(g==null){g=new Date;}var f=((g-this)/1000).toInt(); |
|||
if(!f){return"0s";}var a={s:60,m:60,h:24,d:365,y:0};var e,d=[];for(var c in a){if(!f){break;}if((e=a[c])){d.unshift((f%e)+c);f=(f/e).toInt();}else{d.unshift(f+c); |
|||
}}return d.join(b||":");}});Date.alias("timeDiffInWords","timeAgoInWords");Date.extend({distanceOfTimeInWords:function(b,a){return Date.getTimePhrase(((a-b)/1000).toInt()); |
|||
},getTimePhrase:function(f){var d=(f<0)?"Until":"Ago";if(f<0){f*=-1;}var b={minute:60,hour:60,day:24,week:7,month:52/12,year:12,eon:Infinity};var e="lessThanMinute"; |
|||
for(var c in b){var a=b[c];if(f<1.5*a){if(f>0.75*a){e=c;}break;}f/=a;e=c+"s";}return Date.getMsg(e+d).substitute({delta:f.round()});}});Date.defineParsers({re:/^(?:tod|tom|yes)/i,handler:function(a){var b=new Date().clearTime(); |
|||
switch(a[0]){case"tom":return b.increment();case"yes":return b.decrement();default:return b;}}},{re:/^(next|last) ([a-z]+)$/i,handler:function(e){var f=new Date().clearTime(); |
|||
var b=f.getDay();var c=Date.parseDay(e[2],true);var a=c-b;if(c<=b){a+=7;}if(e[1]=="last"){a-=7;}return f.set("date",f.getDate()+a);}});Element.implement({measure:function(e){var g=function(h){return !!(!h||h.offsetHeight||h.offsetWidth); |
|||
};if(g(this)){return e.apply(this);}var d=this.getParent(),f=[],b=[];while(!g(d)&&d!=document.body){b.push(d.expose());d=d.getParent();}var c=this.expose(); |
|||
var a=e.apply(this);c();b.each(function(h){h();});return a;},expose:function(){if(this.getStyle("display")!="none"){return $empty;}var a=this.style.cssText; |
|||
this.setStyles({display:"block",position:"absolute",visibility:"hidden"});return function(){this.style.cssText=a;}.bind(this);},getDimensions:function(a){a=$merge({computeSize:false},a); |
|||
var f={};var d=function(g,e){return(e.computeSize)?g.getComputedSize(e):g.getSize();};var b=this.getParent("body");if(b&&this.getStyle("display")=="none"){f=this.measure(function(){return d(this,a); |
|||
});}else{if(b){try{f=d(this,a);}catch(c){}}else{f={x:0,y:0};}}return $chk(f.x)?$extend(f,{width:f.x,height:f.y}):$extend(f,{x:f.width,y:f.height});},getComputedSize:function(a){a=$merge({styles:["padding","border"],plains:{height:["top","bottom"],width:["left","right"]},mode:"both"},a); |
|||
var c={width:0,height:0};switch(a.mode){case"vertical":delete c.width;delete a.plains.width;break;case"horizontal":delete c.height;delete a.plains.height; |
|||
break;}var b=[];$each(a.plains,function(g,f){g.each(function(h){a.styles.each(function(i){b.push((i=="border")?i+"-"+h+"-width":i+"-"+h);});});});var e={}; |
|||
b.each(function(f){e[f]=this.getComputedStyle(f);},this);var d=[];$each(a.plains,function(g,f){var h=f.capitalize();c["total"+h]=c["computed"+h]=0;g.each(function(i){c["computed"+i.capitalize()]=0; |
|||
b.each(function(k,j){if(k.test(i)){e[k]=e[k].toInt()||0;c["total"+h]=c["total"+h]+e[k];c["computed"+i.capitalize()]=c["computed"+i.capitalize()]+e[k];}if(k.test(i)&&f!=k&&(k.test("border")||k.test("padding"))&&!d.contains(k)){d.push(k); |
|||
c["computed"+h]=c["computed"+h]-e[k];}});});});["Width","Height"].each(function(g){var f=g.toLowerCase();if(!$chk(c[f])){return;}c[f]=c[f]+this["offset"+g]+c["computed"+g]; |
|||
c["total"+g]=c[f]+c["total"+g];delete c["computed"+g];},this);return $extend(e,c);}});Element.implement({isDisplayed:function(){return this.getStyle("display")!="none"; |
|||
},isVisible:function(){var a=this.offsetWidth,b=this.offsetHeight;return(a==0&&b==0)?false:(a>0&&b>0)?true:this.isDisplayed();},toggle:function(){return this[this.isDisplayed()?"hide":"show"](); |
|||
},hide:function(){var b;try{if((b=this.getStyle("display"))=="none"){b=null;}}catch(a){}return this.store("originalDisplay",b||"block").setStyle("display","none"); |
|||
},show:function(a){return this.setStyle("display",a||this.retrieve("originalDisplay")||"block");},swapClass:function(a,b){return this.removeClass(a).addClass(b); |
|||
}});Fx.Reveal=new Class({Extends:Fx.Morph,options:{link:"cancel",styles:["padding","border","margin"],transitionOpacity:!Browser.Engine.trident4,mode:"vertical",display:"block",hideInputs:Browser.Engine.trident?"select, input, textarea, object, embed":false},dissolve:function(){try{if(!this.hiding&&!this.showing){if(this.element.getStyle("display")!="none"){this.hiding=true; |
|||
this.showing=false;this.hidden=true;this.cssText=this.element.style.cssText;var d=this.element.getComputedSize({styles:this.options.styles,mode:this.options.mode}); |
|||
this.element.setStyle("display","block");if(this.options.transitionOpacity){d.opacity=1;}var b={};$each(d,function(f,e){b[e]=[f,0];},this);this.element.setStyle("overflow","hidden"); |
|||
var a=this.options.hideInputs?this.element.getElements(this.options.hideInputs):null;this.$chain.unshift(function(){if(this.hidden){this.hiding=false;$each(d,function(f,e){d[e]=f; |
|||
},this);this.element.style.cssText=this.cssText;this.element.setStyle("display","none");if(a){a.setStyle("visibility","visible");}}this.fireEvent("hide",this.element); |
|||
this.callChain();}.bind(this));if(a){a.setStyle("visibility","hidden");}this.start(b);}else{this.callChain.delay(10,this);this.fireEvent("complete",this.element); |
|||
this.fireEvent("hide",this.element);}}else{if(this.options.link=="chain"){this.chain(this.dissolve.bind(this));}else{if(this.options.link=="cancel"&&!this.hiding){this.cancel(); |
|||
this.dissolve();}}}}catch(c){this.hiding=false;this.element.setStyle("display","none");this.callChain.delay(10,this);this.fireEvent("complete",this.element); |
|||
this.fireEvent("hide",this.element);}return this;},reveal:function(){try{if(!this.showing&&!this.hiding){if(this.element.getStyle("display")=="none"||this.element.getStyle("visiblity")=="hidden"||this.element.getStyle("opacity")==0){this.showing=true; |
|||
this.hiding=this.hidden=false;var d;this.cssText=this.element.style.cssText;this.element.measure(function(){d=this.element.getComputedSize({styles:this.options.styles,mode:this.options.mode}); |
|||
}.bind(this));$each(d,function(f,e){d[e]=f;});if($chk(this.options.heightOverride)){d.height=this.options.heightOverride.toInt();}if($chk(this.options.widthOverride)){d.width=this.options.widthOverride.toInt(); |
|||
}if(this.options.transitionOpacity){this.element.setStyle("opacity",0);d.opacity=1;}var b={height:0,display:this.options.display};$each(d,function(f,e){b[e]=0; |
|||
});this.element.setStyles($merge(b,{overflow:"hidden"}));var a=this.options.hideInputs?this.element.getElements(this.options.hideInputs):null;if(a){a.setStyle("visibility","hidden"); |
|||
}this.start(d);this.$chain.unshift(function(){this.element.style.cssText=this.cssText;this.element.setStyle("display",this.options.display);if(!this.hidden){this.showing=false; |
|||
}if(a){a.setStyle("visibility","visible");}this.callChain();this.fireEvent("show",this.element);}.bind(this));}else{this.callChain();this.fireEvent("complete",this.element); |
|||
this.fireEvent("show",this.element);}}else{if(this.options.link=="chain"){this.chain(this.reveal.bind(this));}else{if(this.options.link=="cancel"&&!this.showing){this.cancel(); |
|||
this.reveal();}}}}catch(c){this.element.setStyles({display:this.options.display,visiblity:"visible",opacity:1});this.showing=false;this.callChain.delay(10,this); |
|||
this.fireEvent("complete",this.element);this.fireEvent("show",this.element);}return this;},toggle:function(){if(this.element.getStyle("display")=="none"||this.element.getStyle("visiblity")=="hidden"||this.element.getStyle("opacity")==0){this.reveal(); |
|||
}else{this.dissolve();}return this;},cancel:function(){this.parent.apply(this,arguments);this.element.style.cssText=this.cssText;this.hidding=false;this.showing=false; |
|||
}});Element.Properties.reveal={set:function(a){var b=this.retrieve("reveal");if(b){b.cancel();}return this.eliminate("reveal").store("reveal:options",a); |
|||
},get:function(a){if(a||!this.retrieve("reveal")){if(a||!this.retrieve("reveal:options")){this.set("reveal",a);}this.store("reveal",new Fx.Reveal(this,this.retrieve("reveal:options"))); |
|||
}return this.retrieve("reveal");}};Element.Properties.dissolve=Element.Properties.reveal;Element.implement({reveal:function(a){this.get("reveal",a).reveal(); |
|||
return this;},dissolve:function(a){this.get("reveal",a).dissolve();return this;},nix:function(){var a=Array.link(arguments,{destroy:Boolean.type,options:Object.type}); |
|||
this.get("reveal",a.options).dissolve().chain(function(){this[a.destroy?"destroy":"dispose"]();}.bind(this));return this;},wink:function(){var b=Array.link(arguments,{duration:Number.type,options:Object.type}); |
|||
var a=this.get("reveal",b.options);a.reveal().chain(function(){(function(){a.dissolve();}).delay(b.duration||2000);});}});MooTools.lang.set("en-US","Date",{months:["January","February","March","April","May","June","July","August","September","October","November","December"],days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],dateOrder:["month","date","year"],shortDate:"%m/%d/%Y",shortTime:"%I:%M%p",AM:"AM",PM:"PM",ordinal:function(a){return(a>3&&a<21)?"th":["th","st","nd","rd","th"][Math.min(a%10,4)]; |
|||
},lessThanMinuteAgo:"less than a minute ago",minuteAgo:"about a minute ago",minutesAgo:"{delta} minutes ago",hourAgo:"about an hour ago",hoursAgo:"about {delta} hours ago",dayAgo:"1 day ago",daysAgo:"{delta} days ago",weekAgo:"1 week ago",weeksAgo:"{delta} weeks ago",monthAgo:"1 month ago",monthsAgo:"{delta} months ago",yearAgo:"1 year ago",yearsAgo:"{delta} years ago",lessThanMinuteUntil:"less than a minute from now",minuteUntil:"about a minute from now",minutesUntil:"{delta} minutes from now",hourUntil:"about an hour from now",hoursUntil:"about {delta} hours from now",dayUntil:"1 day from now",daysUntil:"{delta} days from now",weekUntil:"1 week from now",weeksUntil:"{delta} weeks from now",monthUntil:"1 month from now",monthsUntil:"{delta} months from now",yearUntil:"1 year from now",yearsUntil:"{delta} years from now"}); |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,76 @@ |
|||
window.addEvent('domready', function() { |
|||
codeblocks = $$('div.highlight'); |
|||
codeblocks.each(addExpander); |
|||
}); |
|||
|
|||
window.addEvents({ |
|||
domready: function(){ |
|||
if(twitter_user){ |
|||
new Request.Twitter(twitter_user, { |
|||
include_replies: false, |
|||
data: { count: 3 }, |
|||
onSuccess: function(tweets){ |
|||
$('tweets').empty(); |
|||
for (var i = tweets.length; i--; ){ |
|||
new Element('li', { |
|||
'class': 'tweet' |
|||
}).adopt( |
|||
new Element('p', { 'html': tweets[i].text+' ' }).adopt( |
|||
new Element('a', { |
|||
'href': 'http://twitter.com/'+twitter_user+'/status/'+tweets[i].id_str, |
|||
'text': new Date(tweets[i].created_at).timeDiffInWords() |
|||
})) |
|||
).inject('tweets', 'top'); |
|||
} |
|||
} |
|||
}).send(); |
|||
} |
|||
$$('#recent_posts time').each(function(date){ |
|||
date.set('text', new Date(date.get('text')).timeDiffInWords()); |
|||
}); |
|||
}, |
|||
}); |
|||
|
|||
|
|||
function addExpander(div){ |
|||
new Element('span',{ |
|||
html: 'expand »', |
|||
'class': 'pre_expander', |
|||
'events': { |
|||
'click': function(){ |
|||
toggleExpander(this); |
|||
} |
|||
} |
|||
}).inject(div, 'top'); |
|||
} |
|||
function toggleExpander(expander){ |
|||
var html = ''; |
|||
var expanderPos = expander.getPosition().y; |
|||
if($('page').toggleClass('expanded').hasClass('expanded')) |
|||
html = '« contract'; |
|||
else |
|||
html = 'expand »'; |
|||
$$('div.highlight span.pre_expander').each(function(span){ |
|||
span.set('html',html); |
|||
}); |
|||
fixScroll(expander, expanderPos); |
|||
} |
|||
function fixScroll(el, position){ |
|||
pos = el.getPosition().y - position; |
|||
window.scrollTo(window.getScroll().x ,window.getScroll().y + pos); |
|||
} |
|||
function enableCompressedLayout(codeblocks){ |
|||
if(!codeblocks.length) return; |
|||
new Element('span',{ |
|||
html: 'Collapse layout', |
|||
'id': 'collapser', |
|||
'events': { |
|||
'click': function(){ |
|||
if($('page').toggleClass('collapsed').hasClass('collapsed')) |
|||
this.set('html','Expand layout'); |
|||
else |
|||
this.set('html','Collapse layout'); |
|||
} |
|||
} |
|||
}).inject($('main'), 'top'); |
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
var count = pinboard_count; |
|||
var linkroll = 'pinboard_linkroll'; |
|||
function pinboardNS_fetch_script(url) { |
|||
document.writeln('<s'+'cript type="text/javascript" src="' + url + '"></s'+'cript>'); |
|||
} |
|||
|
|||
function pinboardNS_show_bmarks(r) { |
|||
var lr = new Pinboard_Linkroll(); |
|||
lr.set_items(r); |
|||
lr.show_bmarks(); |
|||
} |
|||
|
|||
var json_URL = "http://feeds.pinboard.in/json/v1/u:"+pinboard_user+"/?cb=pinboardNS_show_bmarks\&count=" + count; |
|||
pinboardNS_fetch_script(json_URL); |
|||
|
|||
function Pinboard_Linkroll() { |
|||
var items; |
|||
|
|||
this.set_items = function(i) { |
|||
this.items = i; |
|||
} |
|||
this.show_bmarks = function() { |
|||
var lines = []; |
|||
for (var i = 0; i < this.items.length; i++) { |
|||
var item = this.items[i]; |
|||
var str = this.format_item(item); |
|||
lines.push(str); |
|||
} |
|||
$(linkroll).set('html', lines.join("\n")); |
|||
} |
|||
this.cook = function(v) { |
|||
return v.replace('<', '<').replace('>', '>>'); |
|||
} |
|||
|
|||
this.format_item = function(it) { |
|||
var str = "<li class=\"pin-item\">"; |
|||
if (!it.d) { return; } |
|||
str += "<p><a class=\"pin-title\" href=\"" + this.cook(it.u) + "\">" + this.cook(it.d) + "</a>"; |
|||
if (it.n) { |
|||
str += "<span class=\"pin-description\">" + this.cook(it.n) + "</span>\n"; |
|||
} |
|||
if (it.t.length > 0) { |
|||
for (var i = 0; i < it.t.length; i++) { |
|||
var tag = it.t[i]; |
|||
str += " <a class=\"pin-tag\" href=\"http://pinboard.in/u:"+ this.cook(it.a) + "/t:" + this.cook(tag) + "\">" + this.cook(tag) + "</a> "; |
|||
} |
|||
} |
|||
str += "</p></li>\n"; |
|||
return str; |
|||
} |
|||
} |
|||
Pinboard_Linkroll.prototype = new Pinboard_Linkroll(); |
|||
@ -0,0 +1,52 @@ |
|||
Request.Twitter = new Class({ |
|||
|
|||
Extends: Request.JSONP, |
|||
|
|||
options: { |
|||
linkify: true, |
|||
url: 'http://twitter.com/statuses/user_timeline/{term}.json', |
|||
include_replies: true, |
|||
data: { |
|||
count: 5, |
|||
trim_user: true |
|||
} |
|||
}, |
|||
|
|||
initialize: function(term, options){ |
|||
this.parent(options); |
|||
if(this.options.include_replies == false){ |
|||
this.options.count = this.options.data.count |
|||
this.options.data.count += 30; // adds 30 tweets to request for filtering
|
|||
} |
|||
this.options.url = this.options.url.substitute({term: term}); |
|||
console.log(this.options.url); |
|||
}, |
|||
|
|||
success: function(args, index){ |
|||
if(!this.options.include_replies){ |
|||
args[0] = args[0].filter(function(item, index, array){ |
|||
return item.in_reply_to_screen_name == null; |
|||
}); |
|||
if(args[0].length > this.options.count){ args[0].length = this.options.count; } |
|||
} |
|||
var data = args[0]; |
|||
|
|||
if (this.options.linkify) data.each(function(tweet){ |
|||
tweet.text = this.linkify(tweet.text); |
|||
}, this); |
|||
|
|||
if (data[0]) this.options.data.since_id = data[0].id; // keep subsequent calls newer
|
|||
|
|||
this.parent(args, index); |
|||
}, |
|||
|
|||
linkify: function(text){ |
|||
// modified from TwitterGitter by David Walsh (davidwalsh.name)
|
|||
// courtesy of Jeremy Parrish (rrish.org)
|
|||
return text.replace(/(https?:\/\/[\w\-:;?&=+.%#\/]+)/gi, '<a href="$1">$1</a>') |
|||
.replace(/(^|\W)@(\w+)/g, '$1<a href="http://twitter.com/$2">@$2</a>') |
|||
.replace(/(^|\W)#(\w+)/g, '$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>'); |
|||
} |
|||
|
|||
}); |
|||
|
|||
@ -0,0 +1,35 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> |
|||
<url> |
|||
<loc>http://recursive-design.com/about.haml</loc> |
|||
<lastmod>2009-11-24</lastmod> |
|||
</url> |
|||
<url> |
|||
<loc>http://recursive-design.com/atom.xml</loc> |
|||
<lastmod>2011-03-13</lastmod> |
|||
</url> |
|||
<url> |
|||
<loc>http://recursive-design.com/</loc> |
|||
<lastmod>2011-04-08</lastmod> |
|||
</url> |
|||
<url> |
|||
<loc>http://recursive-design.com/test/syntax.html</loc> |
|||
<lastmod>2010-04-10</lastmod> |
|||
</url> |
|||
<url> |
|||
<loc>http://recursive-design.com/test/typography.haml</loc> |
|||
<lastmod>2009-11-24</lastmod> |
|||
</url> |
|||
<url> |
|||
<loc>http://recursive-design.com/2011/04/07/test-of-typography</loc> |
|||
<lastmod>2011-04-07</lastmod> |
|||
</url> |
|||
<url> |
|||
<loc>http://recursive-design.com/2011/03/14/test-post</loc> |
|||
<lastmod>2011-03-14</lastmod> |
|||
</url> |
|||
<url> |
|||
<loc>http://recursive-design.com/2009/11/13/hello-world</loc> |
|||
<lastmod>2009-11-13</lastmod> |
|||
</url> |
|||
</urlset> |
|||
@ -0,0 +1,3 @@ |
|||
@charset "UTF-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.group,.inner-wrap,.core-layout > div,body > header > div,body > nav > div,body > footer > div,#page,#page > div{*zoom:1}.group:after,.inner-wrap:after,.core-layout > div:after,body > header > div:after,body > nav > div:after,body > footer > div:after,#page:after,#page > div:after{content:"\0020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden}.inner-wrap,.core-layout > div,body > header > div,body > nav > div,body > footer > div{position:relative;margin:0 auto;padding:0 40px;max-width:1440px}body > header,body > nav,body > footer{min-width:320px}#page{padding:0;max-width:1520px;margin:0 auto}#page > div{margin-right:320px}#page > div > aside{float:left;width:260px;margin:0 -100% 0 0;padding:30px}#main{float:left;width:100%;padding-top:25px;padding-bottom:25px}#main > *{padding-right:40px;padding-left:40px}@media (min-device-width:1024px) and (max-width:800px), |
|||
screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), |
|||
(min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait){#page > div{margin-right:0}#page > div #main{float:none}#page > div > aside{margin:0;float:none}page > div > aside{float:none}body > header > div,body > nav > div,body > footer > div{padding:0 15px}#main > *{padding-left:15px;padding-right:15px}}@media only screen and (min-device-width: 320px) and (max-device-width: 480px){body > header > div,body > nav > div,body > footer > div{padding:0 10px}#main > *{padding-left:10px;padding-right:10px}#page > div{margin:none}#page > div > aside{float:none}}@font-face{font-family:"Adelle";src:url('/fonts/adellebasic_bold-webfont.eot');src:url('/fonts/adellebasic_bold-webfont.eot?iefix') format('eot'), url('/fonts/adellebasic_bold-webfont.woff') format('woff'), url('/fonts/adellebasic_bold-webfont.ttf') format('truetype'), url('/fonts/adellebasic_bold-webfont.svg#webfontKykxqSyz') format('svg')}.heading-font,body > header h1,h1,h2,h3,h4,h5,h6{font-family:Adelle, "Helvetica Neue", Helvetica, Arial, sans}body > header h1{font-size:3em;line-height:1.2em;margin-bottom:0.6667em}body{font-size:1em;line-height:1.5em;color:black;font-family:Georgia, Times, serif}article{margin-bottom:1.5em;padding-bottom:1.5em;padding-top:1em}article + article{border-top:3px solid #555555}article:last-child{border-bottom:none}article h2{padding-top:0.8em;border-top:3px double #dddddd}article .author,article time{text-transform:uppercase}article .updated{font-size:.8em;color:#555555}article time span{font-size:.7em;line-height:0;position:relative;top:-0.4em}article header p{padding:0 0 1.5em;font-size:.8em;color:#555555;font-family:Palatino, Times, "Times New Roman";top-width:1px}h1,h2,h3,h4,h5,h6{font-weight:normal;line-height:1em;text-rendering:optimizelegibility}h1{font-size:2.6em;margin-bottom:0.6667em}h2,section h1{font-size:1.8em;margin-bottom:0.6667em}h3,section h2,section section h1{font-size:1.6em;margin-bottom:0.875em}h4,section h3,section section h2,section section section h1{font-size:1.3em;margin-bottom:0.875em}h5,section h4,section section h3{font-size:1.1em;margin-bottom:0.75em}h6,section h5,section section h4,section section section h3{font-size:1em;margin-bottom:0.5em}p,blockquote,ul,ol{margin-bottom:1.5em}ul{list-style-type:disc}ol{list-style-type:decimal}ol ol{list-style-type:lower-alpha}ul ul,ol ol{margin-left:1.75em}li{margin-bottom:.5em}strong{font-weight:bold}em{font-style:italic}sup,sub{font-size:0.8em;position:relative;display:inline-block}sup{top:-0.5em}sub{bottom:-0.5em}q{font-style:italic}q:before{content:"\201C"}q: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}sub,sup{line-height:0}hr{margin-bottom:0.2em}small{font-size:.8em}big{font-size:1.2em}blockquote{font-style:italic;position:relative;margin-left:2em}blockquote > p:first-child:before{content:"\201C";position:absolute;top:0.1em;left:-0.7em;font-size:3em;color:#dddddd}blockquote > p:last-child:after{content:"\201D";position:relative;top:0.3em;line-height:0;font-size:2em;color:#dddddd}blockquote + p > cite{margin-left:2em;text-align:right}blockquote + p > cite:before{content:'– ';color:#555555}blockquote + p > cite a{font-style:italic} |
|||
@ -1,483 +0,0 @@ |
|||
# |
|||
# = RubyPants - SmartyPants ported to Ruby |
|||
# |
|||
# Ported by Christian Neukirchen <mailto:chneukirchen@gmail.com> |
|||
# Copyright (C) 2004 Christian Neukirchen |
|||
# |
|||
# Incooporates ideas, comments and documentation by Chad Miller |
|||
# Copyright (C) 2004 Chad Miller |
|||
# |
|||
# Original SmartyPants by John Gruber |
|||
# Copyright (C) 2003 John Gruber |
|||
# |
|||
|
|||
# |
|||
# = RubyPants - SmartyPants ported to Ruby |
|||
# |
|||
# == Synopsis |
|||
# |
|||
# RubyPants is a Ruby port of the smart-quotes library SmartyPants. |
|||
# |
|||
# The original "SmartyPants" is a free web publishing plug-in for |
|||
# Movable Type, Blosxom, and BBEdit that easily translates plain ASCII |
|||
# punctuation characters into "smart" typographic punctuation HTML |
|||
# entities. |
|||
# |
|||
# |
|||
# == Description |
|||
# |
|||
# RubyPants can perform the following transformations: |
|||
# |
|||
# * Straight quotes (<tt>"</tt> and <tt>'</tt>) into "curly" quote |
|||
# HTML entities |
|||
# * Backticks-style quotes (<tt>``like this''</tt>) into "curly" quote |
|||
# HTML entities |
|||
# * Dashes (<tt>--</tt> and <tt>---</tt>) into en- and em-dash |
|||
# entities |
|||
# * Three consecutive dots (<tt>...</tt> or <tt>. . .</tt>) into an |
|||
# ellipsis entity |
|||
# |
|||
# This means you can write, edit, and save your posts using plain old |
|||
# ASCII straight quotes, plain dashes, and plain dots, but your |
|||
# published posts (and final HTML output) will appear with smart |
|||
# quotes, em-dashes, and proper ellipses. |
|||
# |
|||
# RubyPants does not modify characters within <tt><pre></tt>, |
|||
# <tt><code></tt>, <tt><kbd></tt>, <tt><math></tt> or |
|||
# <tt><script></tt> tag blocks. Typically, these tags are used to |
|||
# display text where smart quotes and other "smart punctuation" would |
|||
# not be appropriate, such as source code or example markup. |
|||
# |
|||
# |
|||
# == Backslash Escapes |
|||
# |
|||
# If you need to use literal straight quotes (or plain hyphens and |
|||
# periods), RubyPants accepts the following backslash escape sequences |
|||
# to force non-smart punctuation. It does so by transforming the |
|||
# escape sequence into a decimal-encoded HTML entity: |
|||
# |
|||
# \\ \" \' \. \- \` |
|||
# |
|||
# This is useful, for example, when you want to use straight quotes as |
|||
# foot and inch marks: 6'2" tall; a 17" iMac. (Use <tt>6\'2\"</tt> |
|||
# resp. <tt>17\"</tt>.) |
|||
# |
|||
# |
|||
# == Algorithmic Shortcomings |
|||
# |
|||
# One situation in which quotes will get curled the wrong way is when |
|||
# apostrophes are used at the start of leading contractions. For |
|||
# example: |
|||
# |
|||
# 'Twas the night before Christmas. |
|||
# |
|||
# In the case above, RubyPants will turn the apostrophe into an |
|||
# opening single-quote, when in fact it should be a closing one. I |
|||
# don't think this problem can be solved in the general case--every |
|||
# word processor I've tried gets this wrong as well. In such cases, |
|||
# it's best to use the proper HTML entity for closing single-quotes |
|||
# (``’``) by hand. |
|||
# |
|||
# |
|||
# == Bugs |
|||
# |
|||
# To file bug reports or feature requests (except see above) please |
|||
# send email to: mailto:chneukirchen@gmail.com |
|||
# |
|||
# If the bug involves quotes being curled the wrong way, please send |
|||
# example text to illustrate. |
|||
# |
|||
# |
|||
# == Authors |
|||
# |
|||
# John Gruber did all of the hard work of writing this software in |
|||
# Perl for Movable Type and almost all of this useful documentation. |
|||
# Chad Miller ported it to Python to use with Pyblosxom. |
|||
# |
|||
# Christian Neukirchen provided the Ruby port, as a general-purpose |
|||
# library that follows the *Cloth api. |
|||
# |
|||
# |
|||
# == Copyright and License |
|||
# |
|||
# === SmartyPants license: |
|||
# |
|||
# Copyright (c) 2003 John Gruber |
|||
# (http://daringfireball.net) |
|||
# All rights reserved. |
|||
# |
|||
# Redistribution and use in source and binary forms, with or without |
|||
# modification, are permitted provided that the following conditions |
|||
# are met: |
|||
# |
|||
# * Redistributions of source code must retain the above copyright |
|||
# notice, this list of conditions and the following disclaimer. |
|||
# |
|||
# * Redistributions in binary form must reproduce the above copyright |
|||
# notice, this list of conditions and the following disclaimer in |
|||
# the documentation and/or other materials provided with the |
|||
# distribution. |
|||
# |
|||
# * Neither the name "SmartyPants" nor the names of its contributors |
|||
# may be used to endorse or promote products derived from this |
|||
# software without specific prior written permission. |
|||
# |
|||
# This software is provided by the copyright holders and contributors |
|||
# "as is" and any express or implied warranties, including, but not |
|||
# limited to, the implied warranties of merchantability and fitness |
|||
# for a particular purpose are disclaimed. In no event shall the |
|||
# copyright owner or contributors be liable for any direct, indirect, |
|||
# incidental, special, exemplary, or consequential damages (including, |
|||
# but not limited to, procurement of substitute goods or services; |
|||
# loss of use, data, or profits; or business interruption) however |
|||
# caused and on any theory of liability, whether in contract, strict |
|||
# liability, or tort (including negligence or otherwise) arising in |
|||
# any way out of the use of this software, even if advised of the |
|||
# possibility of such damage. |
|||
# |
|||
# === RubyPants license |
|||
# |
|||
# RubyPants is a derivative work of SmartyPants and smartypants.py. |
|||
# |
|||
# Redistribution and use in source and binary forms, with or without |
|||
# modification, are permitted provided that the following conditions |
|||
# are met: |
|||
# |
|||
# * Redistributions of source code must retain the above copyright |
|||
# notice, this list of conditions and the following disclaimer. |
|||
# |
|||
# * Redistributions in binary form must reproduce the above copyright |
|||
# notice, this list of conditions and the following disclaimer in |
|||
# the documentation and/or other materials provided with the |
|||
# distribution. |
|||
# |
|||
# This software is provided by the copyright holders and contributors |
|||
# "as is" and any express or implied warranties, including, but not |
|||
# limited to, the implied warranties of merchantability and fitness |
|||
# for a particular purpose are disclaimed. In no event shall the |
|||
# copyright owner or contributors be liable for any direct, indirect, |
|||
# incidental, special, exemplary, or consequential damages (including, |
|||
# but not limited to, procurement of substitute goods or services; |
|||
# loss of use, data, or profits; or business interruption) however |
|||
# caused and on any theory of liability, whether in contract, strict |
|||
# liability, or tort (including negligence or otherwise) arising in |
|||
# any way out of the use of this software, even if advised of the |
|||
# possibility of such damage. |
|||
# |
|||
# |
|||
# == Links |
|||
# |
|||
# John Gruber:: http://daringfireball.net |
|||
# SmartyPants:: http://daringfireball.net/projects/smartypants |
|||
# |
|||
# Chad Miller:: http://web.chad.org |
|||
# |
|||
# Christian Neukirchen:: http://kronavita.de/chris |
|||
# |
|||
|
|||
|
|||
class RubyPants < String |
|||
VERSION = "0.1" |
|||
|
|||
# Allowed elements in the options array: |
|||
# |
|||
# 0 :: do nothing |
|||
# 1 :: set all |
|||
# 2 :: set all, using old school en- and em- dash shortcuts |
|||
# 3 :: set all, using inverted old school en and em- dash shortcuts |
|||
# -1 :: stupefy (translate HTML entities to their ASCII-counterparts) |
|||
# |
|||
# <tt>:quotes</tt> :: quotes |
|||
# <tt>:backticks</tt> :: backtick quotes (``double'' only) |
|||
# <tt>:allbackticks</tt> :: backtick quotes (``double'' and `single') |
|||
# <tt>:dashes</tt> :: dashes |
|||
# <tt>:oldschool</tt> :: old school dashes |
|||
# <tt>:inverted</tt> :: inverted old school dashes |
|||
# <tt>:ellipses</tt> :: ellipses |
|||
# <tt>:convertquotes</tt> :: convert <tt>"</tt> entities to |
|||
# <tt>"</tt> for Dreamweaver users |
|||
# <tt>:stupefy</tt> :: translate SmartyPants HTML entities |
|||
# to their ASCII counterparts. |
|||
# |
|||
def initialize(string, options=[2]) |
|||
super string |
|||
@options = [*options] |
|||
end |
|||
|
|||
# Apply SmartyPants transformations. |
|||
def to_html |
|||
do_quotes = do_backticks = do_dashes = do_ellipses = do_stupify = nil |
|||
convert_quotes = false |
|||
|
|||
if @options.include? 0 |
|||
# Do nothing. |
|||
return self |
|||
elsif @options.include? 1 |
|||
# Do everything, turn all options on. |
|||
do_quotes = do_backticks = do_ellipses = true |
|||
do_dashes = :normal |
|||
elsif @options.include? 2 |
|||
# Do everything, turn all options on, use old school dash shorthand. |
|||
do_quotes = do_backticks = do_ellipses = true |
|||
do_dashes = :oldschool |
|||
elsif @options.include? 3 |
|||
# Do everything, turn all options on, use inverted old school |
|||
# dash shorthand. |
|||
do_quotes = do_backticks = do_ellipses = true |
|||
do_dashes = :inverted |
|||
elsif @options.include?(-1) |
|||
do_stupefy = true |
|||
else |
|||
do_quotes = @options.include? :quotes |
|||
do_backticks = @options.include? :backticks |
|||
do_backticks = :both if @options.include? :allbackticks |
|||
do_dashes = :normal if @options.include? :dashes |
|||
do_dashes = :oldschool if @options.include? :oldschool |
|||
do_dashes = :inverted if @options.include? :inverted |
|||
do_ellipses = @options.include? :ellipses |
|||
convert_quotes = @options.include? :convertquotes |
|||
do_stupefy = @options.include? :stupefy |
|||
end |
|||
|
|||
# Parse the HTML |
|||
tokens = tokenize |
|||
|
|||
# Keep track of when we're inside <pre> or <code> tags. |
|||
in_pre = false |
|||
|
|||
# Here is the result stored in. |
|||
result = "" |
|||
|
|||
# This is a cheat, used to get some context for one-character |
|||
# tokens that consist of just a quote char. What we do is remember |
|||
# the last character of the previous text token, to use as context |
|||
# to curl single- character quote tokens correctly. |
|||
prev_token_last_char = "" |
|||
|
|||
tokens.each { |token| |
|||
if token.first == :tag |
|||
result << token[1] |
|||
if token[1] =~ %r!<(/?)(?:pre|code|kbd|script|math)[\s>]! |
|||
in_pre = ($1 != "/") # Opening or closing tag? |
|||
end |
|||
else |
|||
t = token[1] |
|||
|
|||
# Remember last char of this token before processing. |
|||
last_char = t[-1] |
|||
|
|||
unless in_pre |
|||
t = process_escapes t |
|||
|
|||
t.gsub!(/"/, '"') if convert_quotes |
|||
|
|||
if do_dashes |
|||
t = educate_dashes t if do_dashes == :normal |
|||
t = educate_dashes_oldschool t if do_dashes == :oldschool |
|||
t = educate_dashes_inverted t if do_dashes == :inverted |
|||
end |
|||
|
|||
t = educate_ellipses t if do_ellipses |
|||
|
|||
# Note: backticks need to be processed before quotes. |
|||
if do_backticks |
|||
t = educate_backticks t |
|||
t = educate_single_backticks t if do_backticks == :both |
|||
end |
|||
|
|||
if do_quotes |
|||
if t == "'" |
|||
# Special case: single-character ' token |
|||
if prev_token_last_char =~ /\S/ |
|||
t = "’" |
|||
else |
|||
t = "‘" |
|||
end |
|||
elsif t == '"' |
|||
# Special case: single-character " token |
|||
if prev_token_last_char =~ /\S/ |
|||
t = "”" |
|||
else |
|||
t = "“" |
|||
end |
|||
else |
|||
# Normal case: |
|||
t = educate_quotes t |
|||
end |
|||
end |
|||
|
|||
t = stupefy_entities t if do_stupefy |
|||
end |
|||
|
|||
prev_token_last_char = last_char |
|||
result << t |
|||
end |
|||
} |
|||
|
|||
# Done |
|||
result |
|||
end |
|||
|
|||
protected |
|||
|
|||
# Return the string, with after processing the following backslash |
|||
# escape sequences. This is useful if you want to force a "dumb" quote |
|||
# or other character to appear. |
|||
# |
|||
# Escaped are: |
|||
# \\ \" \' \. \- \` |
|||
# |
|||
def process_escapes(str) |
|||
str.gsub(/\\\\/, '\'). |
|||
gsub(/\\"/, '"'). |
|||
gsub(/\\'/, '''). |
|||
gsub(/\\\./, '.'). |
|||
gsub(/\\-/, '-'). |
|||
gsub(/\\`/, '`') |
|||
end |
|||
|
|||
# The string, with each instance of "<tt>--</tt>" translated to an |
|||
# em-dash HTML entity. |
|||
# |
|||
def educate_dashes(str) |
|||
str.gsub(/--/, '—') |
|||
end |
|||
|
|||
# The string, with each instance of "<tt>--</tt>" translated to an |
|||
# en-dash HTML entity, and each "<tt>---</tt>" translated to an |
|||
# em-dash HTML entity. |
|||
# |
|||
def educate_dashes_oldschool(str) |
|||
str.gsub(/---/, '—').gsub(/--/, '–') |
|||
end |
|||
|
|||
# Return the string, with each instance of "<tt>--</tt>" translated |
|||
# to an em-dash HTML entity, and each "<tt>---</tt>" translated to |
|||
# an en-dash HTML entity. Two reasons why: First, unlike the en- and |
|||
# em-dash syntax supported by +educate_dashes_oldschool+, it's |
|||
# compatible with existing entries written before SmartyPants 1.1, |
|||
# back when "<tt>--</tt>" was only used for em-dashes. Second, |
|||
# em-dashes are more common than en-dashes, and so it sort of makes |
|||
# sense that the shortcut should be shorter to type. (Thanks to |
|||
# Aaron Swartz for the idea.) |
|||
# |
|||
def educate_dashes_inverted(str) |
|||
str.gsub(/---/, '–').gsub(/--/, '—') |
|||
end |
|||
|
|||
# Return the string, with each instance of "<tt>...</tt>" translated |
|||
# to an ellipsis HTML entity. Also converts the case where there are |
|||
# spaces between the dots. |
|||
# |
|||
def educate_ellipses(str) |
|||
str.gsub('...', '…').gsub('. . .', '…') |
|||
end |
|||
|
|||
# Return the string, with <tt>``backticks''</tt>-style single quotes |
|||
# translated into HTML curly quote entities. |
|||
# |
|||
def educate_backticks(str) |
|||
str.gsub("``", '“').gsub("''", '”') |
|||
end |
|||
|
|||
# Return the string, with <tt>`backticks'</tt>-style single quotes |
|||
# translated into HTML curly quote entities. |
|||
# |
|||
def educate_single_backticks(str) |
|||
str.gsub("`", '‘').gsub("'", '’') |
|||
end |
|||
|
|||
# Return the string, with "educated" curly quote HTML entities. |
|||
# |
|||
def educate_quotes(str) |
|||
punct_class = '[!"#\$\%\'()*+,\-.\/:;<=>?\@\[\\\\\]\^_`{|}~]' |
|||
|
|||
str = str.dup |
|||
|
|||
# Special case if the very first character is a quote followed by |
|||
# punctuation at a non-word-break. Close the quotes by brute |
|||
# force: |
|||
str.gsub!(/^'(?=#{punct_class}\B)/, '’') |
|||
str.gsub!(/^"(?=#{punct_class}\B)/, '”') |
|||
|
|||
# Special case for double sets of quotes, e.g.: |
|||
# <p>He said, "'Quoted' words in a larger quote."</p> |
|||
str.gsub!(/"'(?=\w)/, '“‘') |
|||
str.gsub!(/'"(?=\w)/, '‘“') |
|||
|
|||
# Special case for decade abbreviations (the '80s): |
|||
str.gsub!(/'(?=\d\ds)/, '’') |
|||
|
|||
close_class = %![^\ \t\r\n\\[\{\(\-]! |
|||
dec_dashes = '–|—' |
|||
|
|||
# Get most opening single quotes: |
|||
str.gsub!(/(\s| |--|&[mn]dash;|#{dec_dashes}|ȁ[34];)'(?=\w)/, |
|||
'\1‘') |
|||
# Single closing quotes: |
|||
str.gsub!(/(#{close_class})'/, '\1’') |
|||
str.gsub!(/'(\s|s\b|$)/, '’\1') |
|||
# Any remaining single quotes should be opening ones: |
|||
str.gsub!(/'/, '‘') |
|||
|
|||
# Get most opening double quotes: |
|||
str.gsub!(/(\s| |--|&[mn]dash;|#{dec_dashes}|ȁ[34];)"(?=\w)/, |
|||
'\1“') |
|||
# Double closing quotes: |
|||
str.gsub!(/(#{close_class})"/, '\1”') |
|||
str.gsub!(/"(\s|s\b|$)/, '”\1') |
|||
# Any remaining quotes should be opening ones: |
|||
str.gsub!(/"/, '“') |
|||
|
|||
str |
|||
end |
|||
|
|||
# Return the string, with each SmartyPants HTML entity translated to |
|||
# its ASCII counterpart. |
|||
# |
|||
def stupefy_entities(str) |
|||
str. |
|||
gsub(/–/, '-'). # en-dash |
|||
gsub(/—/, '--'). # em-dash |
|||
|
|||
gsub(/‘/, "'"). # open single quote |
|||
gsub(/’/, "'"). # close single quote |
|||
|
|||
gsub(/“/, '"'). # open double quote |
|||
gsub(/”/, '"'). # close double quote |
|||
|
|||
gsub(/…/, '...') # ellipsis |
|||
end |
|||
|
|||
# Return an array of the tokens comprising the string. Each token is |
|||
# either a tag (possibly with nested, tags contained therein, such |
|||
# as <tt><a href="<MTFoo>"></tt>, or a run of text between |
|||
# tags. Each element of the array is a two-element array; the first |
|||
# is either :tag or :text; the second is the actual value. |
|||
# |
|||
# Based on the <tt>_tokenize()</tt> subroutine from Brad Choate's |
|||
# MTRegex plugin. <http://www.bradchoate.com/past/mtregex.php> |
|||
# |
|||
# This is actually the easier variant using tag_soup, as used by |
|||
# Chad Miller in the Python port of SmartyPants. |
|||
# |
|||
def tokenize |
|||
tag_soup = /([^<]*)(<[^>]*>)/ |
|||
|
|||
tokens = [] |
|||
|
|||
prev_end = 0 |
|||
scan(tag_soup) { |
|||
tokens << [:text, $1] if $1 != "" |
|||
tokens << [:tag, $2] |
|||
|
|||
prev_end = $~.end(0) |
|||
} |
|||
|
|||
if prev_end < size |
|||
tokens << [:text, self[prev_end..-1]] |
|||
end |
|||
|
|||
tokens |
|||
end |
|||
end |
|||
@ -1,219 +0,0 @@ |
|||
gem 'activesupport', "2.3.5" |
|||
require 'active_support' |
|||
require 'rubypants' |
|||
|
|||
module Helpers |
|||
module EscapeHelper |
|||
HTML_ESCAPE = { '&' => '& ', '>' => '>', '<' => '<', '"' => '"' } |
|||
JSON_ESCAPE = { '&' => '\u0026 ', '>' => '\u003E', '<' => '\u003C' } |
|||
|
|||
# A utility method for escaping HTML tag characters. |
|||
# This method is also aliased as <tt>h</tt>. |
|||
# |
|||
# In your ERb templates, use this method to escape any unsafe content. For example: |
|||
# <%=h @person.name %> |
|||
# |
|||
# ==== Example: |
|||
# puts html_escape("is a > 0 & a < 10?") |
|||
# # => is a > 0 & a < 10? |
|||
def html_escape(html) |
|||
html.to_s.gsub(/[&"><]/) { |special| HTML_ESCAPE[special] } |
|||
end |
|||
def escape_once(html) |
|||
html.to_s.gsub(/[\"><]|&(?!([a-zA-Z]+|(#\d+));)/) { |special| HTML_ESCAPE[special] } |
|||
end |
|||
alias h escape_once |
|||
|
|||
# A utility method for escaping HTML entities in JSON strings. |
|||
# This method is also aliased as <tt>j</tt>. |
|||
# |
|||
# In your ERb templates, use this method to escape any HTML entities: |
|||
# <%=j @person.to_json %> |
|||
# |
|||
# ==== Example: |
|||
# puts json_escape("is a > 0 & a < 10?") |
|||
# # => is a \u003E 0 \u0026 a \u003C 10? |
|||
def json_escape(s) |
|||
s.to_s.gsub(/[&"><]/) { |special| JSON_ESCAPE[special] } |
|||
end |
|||
|
|||
alias j json_escape |
|||
end |
|||
include EscapeHelper |
|||
|
|||
module ParamsHelper |
|||
def params |
|||
@params ||= begin |
|||
q = request.query.dup |
|||
q.each { |(k,v)| q[k.to_s.intern] = v } |
|||
q |
|||
end |
|||
end |
|||
end |
|||
include ParamsHelper |
|||
|
|||
module TagHelper |
|||
def content_tag(name, content, html_options={}) |
|||
%{<#{name}#{html_attributes(html_options)}>#{content}</#{name}>} |
|||
end |
|||
|
|||
def tag(name, html_options={}) |
|||
%{<#{name}#{html_attributes(html_options)} />} |
|||
end |
|||
|
|||
def image_tag(src, html_options = {}) |
|||
tag(:img, html_options.merge({:src=>src})) |
|||
end |
|||
|
|||
def javascript_tag(content = nil, html_options = {}) |
|||
content_tag(:script, javascript_cdata_section(content), html_options.merge(:type => "text/javascript")) |
|||
end |
|||
|
|||
def link_to(name, href, html_options = {}) |
|||
html_options = html_options.stringify_keys |
|||
confirm = html_options.delete("confirm") |
|||
onclick = "if (!confirm('#{html_escape(confirm)}')) return false;" if confirm |
|||
content_tag(:a, name, html_options.merge(:href => href, :onclick=>onclick)) |
|||
end |
|||
|
|||
def link_to_function(name, *args, &block) |
|||
html_options = {} |
|||
html_options = args.pop if args.last.is_a? Hash |
|||
function = args[0] || '' |
|||
onclick = "#{"#{html_options[:onclick]}; " if html_options[:onclick]}#{function}; return false;" |
|||
href = html_options[:href] || '#' |
|||
content_tag(:a, name, html_options.merge(:href => href, :onclick => onclick)) |
|||
end |
|||
|
|||
private |
|||
|
|||
def cdata_section(content) |
|||
"<![CDATA[#{content}]]>" |
|||
end |
|||
|
|||
def javascript_cdata_section(content) #:nodoc: |
|||
"\n//#{cdata_section("\n#{content}\n//")}\n" |
|||
end |
|||
|
|||
def html_attributes(options) |
|||
unless options.blank? |
|||
attrs = [] |
|||
options.each_pair do |key, value| |
|||
if value == true |
|||
attrs << %(#{key}="#{key}") if value |
|||
else |
|||
attrs << %(#{key}="#{value}") unless value.nil? |
|||
end |
|||
end |
|||
" #{attrs.sort * ' '}" unless attrs.empty? |
|||
end |
|||
end |
|||
end |
|||
include TagHelper |
|||
|
|||
def to_html_email(address) |
|||
email = string_to_html(address) |
|||
"<a href=\"#{string_to_html('mailto:')}#{email}\">#{email}</a>" |
|||
end |
|||
|
|||
def string_to_html(s) |
|||
s.strip.unpack("C*").map{|ch| "&#" + ch.to_s + ";" }.to_s |
|||
end |
|||
|
|||
def show_part (file) |
|||
data = '' |
|||
f = File.open(Dir.pwd+"/source/"+file) |
|||
f.each_line do |line| |
|||
data += line |
|||
end |
|||
data |
|||
end |
|||
|
|||
def shorten_words (string, word_limit = 25) |
|||
words = string.split(/\s/) |
|||
if words.size >= word_limit |
|||
words[0,(word_limit-1)].join(" ") + '…' |
|||
else |
|||
string |
|||
end |
|||
end |
|||
|
|||
def shorten (string, char_limit = 55) |
|||
chars = string.scan(/.{1,1}/) |
|||
if chars.size >= char_limit |
|||
chars[0,(char_limit-1)].join + '…' |
|||
else |
|||
"blah2" |
|||
end |
|||
end |
|||
|
|||
def absolute_url(input, url) |
|||
input.gsub(/(href|src)(\s*=\s*)(["'])(\/.*?)\3/) { $1 + $2 + $3 + url + $4 + $3 } |
|||
end |
|||
|
|||
def rp(input) |
|||
RubyPants.new(input).to_html |
|||
end |
|||
def style_amp(input) |
|||
input.gsub(" & "," <span class='amp'>&</span> ") |
|||
end |
|||
|
|||
module PartialsHelper |
|||
|
|||
# A very hackish way to handle partials. We'll go with it till it breaks... |
|||
def include(partial_name) |
|||
file_ext = partial_name[(partial_name.index('.') + 1)..partial_name.length] |
|||
contents = IO.read("source/_includes/#{partial_name}") |
|||
case file_ext |
|||
when 'haml' |
|||
Haml::Engine.new(contents).render(binding) |
|||
when 'textile' |
|||
RedCloth.new(contents).to_html |
|||
when 'markdown' |
|||
RDiscount.new(contents).to_html |
|||
else |
|||
contents |
|||
end |
|||
end |
|||
end |
|||
|
|||
include PartialsHelper |
|||
|
|||
end |
|||
|
|||
class String |
|||
def titlecase |
|||
small_words = %w(a an and as at but by en for if in of on or the to v v. via vs vs.) |
|||
|
|||
x = split(" ").map do |word| |
|||
# note: word could contain non-word characters! |
|||
# downcase all small_words, capitalize the rest |
|||
small_words.include?(word.gsub(/\W/, "").downcase) ? word.downcase! : word.smart_capitalize! |
|||
word |
|||
end |
|||
# capitalize first and last words |
|||
x.first.to_s.smart_capitalize! |
|||
x.last.to_s.smart_capitalize! |
|||
# small words after colons are capitalized |
|||
x.join(" ").gsub(/:\s?(\W*#{small_words.join("|")}\W*)\s/) { ": #{$1.smart_capitalize} " } |
|||
end |
|||
|
|||
def titlecase! |
|||
replace(titlecase) |
|||
end |
|||
|
|||
def smart_capitalize |
|||
# ignore any leading crazy characters and capitalize the first real character |
|||
if self =~ /^['"\(\[']*([a-z])/ |
|||
i = index($1) |
|||
x = self[i,self.length] |
|||
# word with capitals and periods mid-word are left alone |
|||
self[i,1] = self[i,1].upcase unless x =~ /[A-Z]/ or x =~ /\.\w+/ |
|||
end |
|||
self |
|||
end |
|||
|
|||
def smart_capitalize! |
|||
replace(smart_capitalize) |
|||
end |
|||
end |
|||
@ -0,0 +1,18 @@ |
|||
<header> |
|||
<p> |
|||
<time>{{ page.date | ordinalize }}</time> |
|||
{% if site.author or site.author == page.author %} |
|||
<span class="byline"><em>by</em> <span class="author">{{ site.author }}</span></span> |
|||
{% elsif page.author %} |
|||
<span class="byline"><em>by</em> <span class="author">{{ page.author }}</span></span> |
|||
{% endif %} |
|||
</p> |
|||
<h1><a href="{{ page.url }}">{{ page.title }}</a></h1> |
|||
</header> |
|||
{% if index %} |
|||
<div class="entry">{{ content | exerpt(content, page.url, 'Continue reading »') | smart_quotes }}</div> |
|||
{% else %} |
|||
<div class="entry">{{ content | smart_quotes }}</div> |
|||
{% endif %} |
|||
|
|||
{% if page.updated %}<p class="updated"><em>updated</em> <time>{{ page.updated | ordinalize }}</time></p>{% endif %} |
|||
@ -1,3 +0,0 @@ |
|||
%h4 My Delicious <a class="small" href="http://delicious.com/#{page.delicious_user}">more →</a> |
|||
#delicious |
|||
%script(type="text/javascript" src="http://feeds.delicious.com/v2/js/#{page.delicious_user}?title=&count=#{page.delicious_count}&sort=date&extended") |
|||
@ -0,0 +1,3 @@ |
|||
<h4>On Delicious</h4> |
|||
<script type="text/javascript" src="http://feeds.delicious.com/v2/js/{{ site.delicious_user }}?title=&count={{ site.delicious_count }}&sort=date&extended"></script> |
|||
<p><a href="http://delicious.com/{{ site.delicious_user }}">My Delicious Bookmarks »</a></p> |
|||
@ -1,11 +0,0 @@ |
|||
:javascript |
|||
(function() { |
|||
var links = document.getElementsByTagName('a'); |
|||
var query = '?'; |
|||
for(var i = 0; i < links.length; i++) { |
|||
if(links[i].href.indexOf('#disqus_thread') >= 0) { |
|||
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&'; |
|||
} |
|||
} |
|||
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/#{page.disqus_short_name}/get_num_replies.js' + query + '"></' + 'script>'); |
|||
})(); |
|||
@ -1,5 +0,0 @@ |
|||
:javascript |
|||
var disqus_url = "#{page.full_url}#{page.url}"; |
|||
%noscript |
|||
%a(href="http://#{page.disqus_short_name}.disqus.com/?url=ref") View the discussion thread |
|||
%script(type="text/javascript" src="http://disqus.com/forums/#{page.disqus_short_name}/embed.js") |
|||
@ -0,0 +1,7 @@ |
|||
<script type="text/javascript"> |
|||
var disqus_url = "{{ site.url }}{{ page.url }}"; |
|||
</script> |
|||
<noscript> |
|||
<a href="http://{{ site.disqus_short_name }}.disqus.com/?url=ref">View the discussion thread</a> |
|||
</noscript> |
|||
<script type="text/javascript" src="http://disqus.com/forums/{{ site.disqus_short_name }}/embed.js"></script> |
|||
@ -1,7 +0,0 @@ |
|||
#footer |
|||
.content |
|||
Copyright © #{Time.now.strftime('%Y')} - #{page.blog_title} - |
|||
%span.credit Powered by <a href="http://octopress.org">Octopress</a> |
|||
|
|||
= include "disqus_hook.haml" if page.respond_to?(:disqus_short_name) && page.disqus_short_name |
|||
= include "google_analytics.haml" if page.respond_to?(:google_analytics_tracking_id) && page.google_analytics_tracking_id |
|||
@ -0,0 +1,11 @@ |
|||
<p> |
|||
Copyright © {{ site.time | date: "%Y" }} - {{ site.author }} - |
|||
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span> |
|||
</p> |
|||
{% if site.pinboard_user %} |
|||
<script language="javascript"> |
|||
var pinboard_user = "{{ site.pinboard_user }}"; |
|||
var pinboard_count = "{{ site.pinboard_count }}"; |
|||
</script> |
|||
<script language="javascript" src="/javascripts/pinboard.js"></script> |
|||
{% endif %} |
|||
@ -1,22 +0,0 @@ |
|||
%head |
|||
%title #{page.blog_title} :: #{page.title} |
|||
%meta(http-equiv="Content-Type" content="text/html; charset=utf-8") |
|||
- if page.respond_to? :description |
|||
%meta(name="description" content="#{page.description}")/ |
|||
- if page.respond_to? :keywords |
|||
%meta(name="keywords" content="#{page.keywords}")/ |
|||
%link(href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css") |
|||
%script(src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" type="text/javascript") |
|||
%script(src="/javascripts/mootools-1.2.4.2-more.js" type="text/javascript") |
|||
- if page.respond_to? :twitter_user |
|||
:javascript |
|||
var twitter_user = "#{page.twitter_user}" |
|||
var show_replies = #{page.show_replies}; |
|||
var tweet_count = #{page.tweet_count}; |
|||
%script(src="/javascripts/octopress.js" type="text/javascript") |
|||
%script(src="/javascripts/twitter.js" type="text/javascript") |
|||
- if page.respond_to? :google_analytics |
|||
%script(src="http://www.google-analytics.com/ga.js" type="text/javascript") |
|||
|
|||
- # RSS Feed |
|||
%link(href="/atom.xml" rel="alternate" title="#{page.blog_title}" type="application/atom+xml") |
|||
@ -0,0 +1,28 @@ |
|||
<head> |
|||
<title>{{page.title}} - {{site.title}}</title> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|||
{% if page.description %} |
|||
<meta name="description" content="{{page.description}}"/> |
|||
{% endif %} |
|||
{% if page.keywords %} |
|||
<meta name="keywords" content="{{page.keywords}}"/> |
|||
{% endif %} |
|||
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"> |
|||
<script src="/javascripts/mootools-yui-compressed.js" type="text/javascript"></script> |
|||
<script src="/javascripts/mootools-more-1.3.1.1.js" type="text/javascript"></script> |
|||
<script src="/javascripts/octopress.js" type="text/javascript"></script> |
|||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
|||
<meta name="viewport" content="initial-scale=1.0 width=device-width"> |
|||
{% if site.twitter_user %} |
|||
<script> |
|||
var twitter_user = "{{site.twitter_user}}"; |
|||
var show_replies = {{site.show_replies}}; |
|||
var tweet_count = {{site.tweet_count}}; |
|||
</script> |
|||
<script src="/javascripts/twitter.js" type="text/javascript"></script> |
|||
{% endif %} |
|||
{% if site.google_analytics_tracking_id %} |
|||
{% include google_analytics.html %} |
|||
{% endif %} |
|||
<link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml"/> |
|||
</head> |
|||
@ -1,9 +0,0 @@ |
|||
.content |
|||
%h1 |
|||
%a.title(href="/")=page.blog_title |
|||
- if page.respond_to?(:google_custom_search_id) && page.google_custom_search_id |
|||
#search |
|||
%form(action="http://www.google.com/cse" id="cse-search-box") |
|||
%input(type="hidden" name="cx" value="#{page.google_custom_search_id}") |
|||
%input(type="hidden" name="ie" value="UTF-8") |
|||
%input#q(type="text" name="q") |
|||
@ -0,0 +1,10 @@ |
|||
<h1><a href="/">{{ site.title }}</a></h1> |
|||
{% if site.google_custom_search_id && site.google_custom_search_id %} |
|||
<div id="search"> |
|||
<form action="http://www.google.com/cse" id="cse-search-box"> |
|||
<input type="hidden" name="cx" value="{{ site.google_custom_search_id }}"> |
|||
<input type="hidden" name="ie" value="UTF-8"> |
|||
<input#q type="text" name="q"> |
|||
</form> |
|||
</div> |
|||
{% endif %} |
|||
@ -1,8 +0,0 @@ |
|||
.content |
|||
%ul |
|||
%li.alpha |
|||
%a(href="/") Blog |
|||
%li.omega |
|||
%a(href="/about.html") About |
|||
%li.subscribe |
|||
%a(href="/atom.xml") Subscribe |
|||
@ -0,0 +1,5 @@ |
|||
<ul> |
|||
<li><a href="/">Blog</a></li> |
|||
<li><a href="/about/">About</a></li> |
|||
<li class="subscribe"><a href="/atom.xml">Subscribe</a></li> |
|||
</ul> |
|||
@ -0,0 +1,3 @@ |
|||
<h4>My Pinboard</h4> |
|||
<ul id="pinboard_linkroll">Fetching linkroll...</ul> |
|||
<p><a href="http://pinboard.in/u:{{ site.pinboard_user }}">My Pinboard Bookmarks »</a></p> |
|||
@ -1,8 +0,0 @@ |
|||
.article |
|||
%h2= page.title |
|||
.meta |
|||
- author = (page.respond_to?(:author) && page.author) ? 'by: ' + page.author + ' |' : '' |
|||
#{author} posted: #{page.date.strftime("%B #{page.date.day.ordinalize}, %Y")} |
|||
= (page.respond_to?(:updated) && page.updated) ? " | updated: #{page.updated}" : '' |
|||
= preserve rp(content) |
|||
#disqus_thread= include "disqus_thread.haml" if page.respond_to?(:disqus_short_name) && page.disqus_short_name |
|||
@ -1,2 +0,0 @@ |
|||
= include "twitter.haml" if page.respond_to?(:twitter_user) && page.twitter_user |
|||
= include "delicious.haml" if page.respond_to?(:delicious_user) && page.delicious_user |
|||
@ -0,0 +1,24 @@ |
|||
<h4>About Me</h4> |
|||
<p> Yo everybody! </p> |
|||
{% if site.recent_posts %} |
|||
<section> |
|||
<h4>Recent Posts</h4> |
|||
<ul id="recent_posts"> |
|||
{% for post in site.posts limit: site.recent_posts %} |
|||
<li class="post"> |
|||
<a href="{{ post.url }}">{{ post.title }}</a> |
|||
<time>{{ post.date | date: "%B %d, %Y" }}</time> |
|||
</li> |
|||
{% endfor %} |
|||
</ul> |
|||
</section> |
|||
{% endif %} |
|||
{% if site.twitter_user %} |
|||
<section>{% include twitter.html %}</section> |
|||
{% endif %} |
|||
{% if site.delicious_user %} |
|||
<section>{% include delicious.html %}</section> |
|||
{% endif %} |
|||
{% if site.pinboard_user %} |
|||
<section>{% include pinboard.html %}</section> |
|||
{% endif %} |
|||
@ -1,4 +0,0 @@ |
|||
%h4 Twitter <a class="small" href="http://twitter.com/#{page.twitter_user}">@#{page.twitter_user}</a> |
|||
#twitter |
|||
%ul#twitter_status |
|||
Status updating... |
|||
@ -0,0 +1,5 @@ |
|||
<h4>On Twitter</h4> |
|||
<ul id="tweets"> |
|||
Status updating... |
|||
</ul> |
|||
<p>Follow <a href="http://twitter.com/#{page.twitter_user}">@{{ site.twitter_user }}</a></p> |
|||
@ -1,32 +0,0 @@ |
|||
--- |
|||
blog_title: My Octopress Blog |
|||
author: |
|||
|
|||
twitter_user: |
|||
tweet_count: 3 |
|||
show_replies: false |
|||
|
|||
delicious_user: |
|||
delicious_count: 3 |
|||
|
|||
full_url: |
|||
disqus_short_name: |
|||
|
|||
google_custom_search_id: |
|||
google_analytics_tracking_id: |
|||
|
|||
--- |
|||
|
|||
!!! 1.1 Transitional |
|||
%html(xmlns="http://www.w3.org/1999/xhtml" xml:lang="en") |
|||
|
|||
= include "head.haml" |
|||
%body(id="#{(page.respond_to?(:body_id) ? page.body_id : nil)}") |
|||
#header= include "header.haml" |
|||
#nav= include "navigation.haml" |
|||
#page |
|||
#content |
|||
#main |
|||
.blog.content= include "post.haml" |
|||
#sidebar= include "sidebar.haml" |
|||
= include "footer.haml" |
|||
@ -1,32 +0,0 @@ |
|||
--- |
|||
blog_title: My Octopress Blog |
|||
author: |
|||
|
|||
twitter_user: imathis |
|||
tweet_count: 3 |
|||
show_replies: false |
|||
|
|||
delicious_user: |
|||
delicious_count: 3 |
|||
|
|||
full_url: |
|||
disqus_short_name: |
|||
|
|||
google_custom_search_id: |
|||
google_analytics_tracking_id: |
|||
|
|||
--- |
|||
|
|||
!!! 1.1 Transitional |
|||
%html(xmlns="http://www.w3.org/1999/xhtml" xml:lang="en") |
|||
|
|||
= include "head.haml" |
|||
%body(id="#{(page.respond_to?(:body_id) ? page.body_id : nil)}") |
|||
#header= include "header.haml" |
|||
#nav= include "navigation.haml" |
|||
#page |
|||
#content |
|||
#main |
|||
.content= preserve rp(content) |
|||
#sidebar= include "sidebar.haml" |
|||
= include "footer.haml" |
|||
@ -0,0 +1,15 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
{% include head.html %} |
|||
<body id="{{ page.body_id }}"> |
|||
<header><div>{% include header.html %}</div></header> |
|||
<nav id="nav"><div>{% include navigation.html %}</div></nav> |
|||
<div id="page"> |
|||
<div> |
|||
<div id="main"><article>{{ content }}</article></div> |
|||
<aside>{% include sidebar.html %}</aside> |
|||
</div> |
|||
</div> |
|||
<footer><div>{% include footer.html %}</div></footer> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,10 @@ |
|||
--- |
|||
layout: default |
|||
--- |
|||
|
|||
<article> |
|||
{% include article.html %} |
|||
{% if site.disqus_short_name %} |
|||
<div id="disqus_thread">{% include disqus_thread.html %}</div> |
|||
{% endif %} |
|||
</article> |
|||
@ -0,0 +1,6 @@ |
|||
--- |
|||
title: Test Post |
|||
layout: post |
|||
--- |
|||
|
|||
This is a test! |
|||
@ -0,0 +1,50 @@ |
|||
--- |
|||
title: "Test of Typography" |
|||
date: 2011-04-07 19:17 |
|||
layout: post |
|||
--- |
|||
|
|||
In the past I've always designed my own business cards, printed them on expensive card stock, and hand-cut them with an X-Acto knife. My cards were way nicer than those my clients had gotten *professionally* printed with bubbly ink, no-bleed designs, and cheap paper. Though I put tremendous care into my cards, I never was happy with the design. |
|||
|
|||
## Why Have Business Cards? |
|||
I'm rarely asked for my business card except when I attend conferences, of which I attend one or two each year. As a freelance contractor, I leave work by walking twenty-five feet from my office to the couch. Many of the |
|||
people I work for I've never met in-person. |
|||
|
|||
When someone gives me their business card, I read it, pocket it, and eventually throw it out — sometimes before I remember to copy the information to my address book (sorry, just being honest). The reality is, with the ubiquity of the internet and with frictionless social networks like Twitter, I can connect with people immediately. So why have business cards? |
|||
|
|||
<!-- more --> |
|||
|
|||
### Inspiration Demands Action |
|||
In one of our campfire chats [Nathaniel Talbott](http://twitter.com/NTalbott) showed off his business cards which he printed through [Moo](http://moo.com). They were half the size of regular business cards featuring the company logo on the front, and the url on the back. The unique size of the card intrigued me, and days later I couldn't stop thinking about designing a set of mini-cards for myself. |
|||
|
|||
<img src="/content/blog/2010/cards/box.jpg" alt="cards in a box" width="300px" class="right"/> Moo's [MiniCard's](http://moo.com/products/minicards.php) are very unique. You can print 100 cards, each with a totally different back. With a typical printing service this would be prohibitively expensive, but with Moo the rules are different. This freedom encourages us to go beyond nicely styled contact information and branding. Some clever uses involve offering unique invite codes for a web application, or sharing a photography portfolio with Moo's Flickr import feature. |
|||
|
|||
I realized that I could print several design iterations and decide later which worked best. Without the pressure to choose a single design, I felt the freedom to create. |
|||
|
|||
### The Freedom to Fail |
|||
<img src="/content/blog/2010/cards/concepts.jpg" alt="card concepts" width="270px" class="left"/> I could be cheeky and print up half of my cards with my logo on one side and only my Twitter name on the other. For less than $20 for 100 cards, I wasn't even concerned about possibly screwing up a whole batch. So that's what I did. I designed cards that were good enough and I printed them. If the cards did't turn out how I wanted them to, I could improve and print again. |
|||
|
|||
<img src="/content/blog/2010/cards/handout.jpg" alt="handout cards" width="220px" class="right"/> The process was fun and simple, and as soon as I finished, I wanted to do it again. When my cards arrived, I was absolutely delighted by the print quality and the care put into their presentation. Smartly Moo even included some beautiful promotional cards to hand out when people inevitably ask about mine. |
|||
|
|||
### A Second Iteration |
|||
After holding the finished product, I began to see how my design could be improved. I learned that Gill Sans is harder to read at a small size in a high contrast print, so I switched to Futura. I showed my cards to some far-sighted friends and adjusted my font size accordingly. I discarded a background gradient (which I should have known wouldn't translate well to print) in favor of a solid color. **Sidenote:** On screen, gradients emulate the subtleties of a natural light source, but on a real object it doesn't make sense and generally looks bad. |
|||
|
|||
I changed my approach choosing a single design with multiple color variations. In the promotional cards Moo sent me, I learned that they do a fantastic job with bright colors and I wanted to use that boldness in my design. I was inspired by what [Seth Godin said](http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html): |
|||
|
|||
> Every interaction is both precious and an opportunity to delight. |
|||
|
|||
<img src="/content/blog/2010/cards/holder.jpg" alt="MiniCard Holder" width="220px" class="right"/> I pictured sliding a card out of my [MiniCard Holder](http://moo.com/products/accessories/holders/moo_minicard_holders) and revealing another brightly-colored card beneath. As I hand someone a card they'll see the flash of color and realize that their card was special, and different from my other cards. That's what I want my clients and future clients to feel. |
|||
|
|||
### The Final Design |
|||
|
|||
<img src="/content/blog/2010/cards/all.jpg" alt="all card designs" width="640px"/> |
|||
|
|||
The MiniCard's unique constraints inspired me with a fresh challenge and their pricing model encouraged me to experiment. Instead of treating business cards like a necessary design task, I saw them as a opportunity to release quickly, fail cheaply, and improve. Now when I give someone a business card, it's something valuable to me, and I hope they're delighted. |
|||
|
|||
**Update:** I thought I'd share some other great uses of Moo's MiniCards. There's a fantastic [Flikr pool](http://www.flickr.com/groups/moo/pool/), but here are some of my favorites. Enjoy: |
|||
|
|||
- [Product](http://www.flickr.com/photos/lushlampwork/4131018201/in/pool-moo) [tags](http://www.flickr.com/photos/lushlampwork/4297224179/in/pool-moo) |
|||
- [Photography](http://www.flickr.com/photos/thisiswoly/4206576342/in/pool-moo) or [art](http://www.flickr.com/photos/lesleybarnes/4276368956/in/pool-moo) [portfolios](http://www.flickr.com/photos/playinprogress/4158223112/in/pool-moo) |
|||
- [Gift](http://www.flickr.com/photos/polkadotcreations/4167249758/in/pool-moo) [tags](http://www.flickr.com/photos/22338102@N04/4278114745/in/pool-moo) |
|||
- [An advent calendar](http://www.flickr.com/photos/bcome/4177034036/in/pool-moo) |
|||
|
|||
@ -1,14 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Blog Archives |
|||
--- |
|||
%h2 Blog Archives |
|||
|
|||
- posts = site.posts.reverse.group_by { |p| p.date.strftime("%Y") } |
|||
- posts.keys.each do |year| |
|||
%h3= year |
|||
%ul |
|||
- posts[year].each do |post| |
|||
%li(class="#{(post.data['link'] ? "link" : nil )}") |
|||
= link_to(post.title, post.url) |
|||
%span.pubdate= post.date.strftime("%d %b, %Y") |
|||
@ -1,25 +0,0 @@ |
|||
--- |
|||
layout: nil |
|||
author: Your Name |
|||
email: author@domain.com |
|||
blog_title: My Octopress Blog |
|||
full_url: http://yoursite.com |
|||
--- |
|||
!!! XML |
|||
%feed(xmlns="http://www.w3.org/2005/Atom") |
|||
%title= page.blog_title |
|||
%link(href="#{page.full_url}/atom.xml" rel="self") |
|||
%link(href="#{page.full_url}") |
|||
%updated= Time.now.xmlschema |
|||
%id=page.full_url |
|||
%author |
|||
%name= page.author |
|||
%email= page.email |
|||
- site.posts.reverse[0..14].each do |post| |
|||
%entry |
|||
%title= rp(post.title) |
|||
%link(href="#{page.full_url}#{post.url}") |
|||
%updated=post.date.xmlschema |
|||
%id= "#{page.full_url}#{post.id}" |
|||
%content(type="html") |
|||
= h(absolute_url(rp(post.content), page.full_url)) |
|||
@ -0,0 +1,28 @@ |
|||
--- |
|||
layout: nil |
|||
--- |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<feed xmlns="http://www.w3.org/2005/Atom"> |
|||
|
|||
<title>{{ site.blog_title }}</title> |
|||
<link href="{{ site.url }}/atom.xml" rel="self"/> |
|||
<link href="{{ site.url }}/"/> |
|||
<updated>{{ site.time | date_to_xmlschema }}</updated> |
|||
<id>{{ site.url }}/</id> |
|||
<author> |
|||
<name>{{ site.author }}</name> |
|||
{% if site.email %} |
|||
<email>{{ site.email }}</email> |
|||
{% endif %} |
|||
</author> |
|||
|
|||
{% for post in site.posts %} |
|||
<entry> |
|||
<title>{{ post.title }}</title> |
|||
<link href="{{ site.url }}{{ post.url }}"/> |
|||
<updated>{{ post.date | date_to_xmlschema }}</updated> |
|||
<id>{{ site.url }}{{ post.id }}</id> |
|||
<content type="html">{{ post.content | full_urls: site.url | xml_escape }}</content> |
|||
</entry> |
|||
{% endfor %} |
|||
</feed> |
|||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
Binary file not shown.
@ -1,22 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Blog |
|||
author: |
|||
disqus: |
|||
--- |
|||
.blog |
|||
- site.posts.sort_by(&:date).reverse[0..9].each_with_index do |post,index| |
|||
.article |
|||
%h2= link_to(post.title, post.url, {:class=>"title"}) |
|||
.meta |
|||
- author = (page.respond_to?(:author) && page.author) ? 'by: ' + page.author + ' |' : '' |
|||
#{author} posted: #{post.date.strftime("%B #{post.date.day.ordinalize}, %Y")} |
|||
= (page.respond_to?(:updated) && page.updated) ? " | updated: #{page.updated}" : '' |
|||
= preserve rp(post.content) |
|||
- if page.respond_to?(:disqus) && page.disqus |
|||
- if post.data["comments_off"] |
|||
%em.comments_off Comments disabled |
|||
- else |
|||
%a(href="#{post.url}/#disqus_thread")Comments |
|||
.footer |
|||
%a(href="/archives.html" title="archives") « Blog Archives |
|||
@ -0,0 +1,12 @@ |
|||
--- |
|||
layout: default |
|||
title: Octopress |
|||
--- |
|||
{% for page in site.posts limit:3 %} |
|||
{% assign content = page.content %} |
|||
{% assign index = true %} |
|||
<article> |
|||
{% include article.html %} |
|||
</article> |
|||
{% endfor %} |
|||
|
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,52 @@ |
|||
var count = pinboard_count; |
|||
var linkroll = 'pinboard_linkroll'; |
|||
function pinboardNS_fetch_script(url) { |
|||
document.writeln('<s'+'cript type="text/javascript" src="' + url + '"></s'+'cript>'); |
|||
} |
|||
|
|||
function pinboardNS_show_bmarks(r) { |
|||
var lr = new Pinboard_Linkroll(); |
|||
lr.set_items(r); |
|||
lr.show_bmarks(); |
|||
} |
|||
|
|||
var json_URL = "http://feeds.pinboard.in/json/v1/u:"+pinboard_user+"/?cb=pinboardNS_show_bmarks\&count=" + count; |
|||
pinboardNS_fetch_script(json_URL); |
|||
|
|||
function Pinboard_Linkroll() { |
|||
var items; |
|||
|
|||
this.set_items = function(i) { |
|||
this.items = i; |
|||
} |
|||
this.show_bmarks = function() { |
|||
var lines = []; |
|||
for (var i = 0; i < this.items.length; i++) { |
|||
var item = this.items[i]; |
|||
var str = this.format_item(item); |
|||
lines.push(str); |
|||
} |
|||
$(linkroll).set('html', lines.join("\n")); |
|||
} |
|||
this.cook = function(v) { |
|||
return v.replace('<', '<').replace('>', '>>'); |
|||
} |
|||
|
|||
this.format_item = function(it) { |
|||
var str = "<li class=\"pin-item\">"; |
|||
if (!it.d) { return; } |
|||
str += "<p><a class=\"pin-title\" href=\"" + this.cook(it.u) + "\">" + this.cook(it.d) + "</a>"; |
|||
if (it.n) { |
|||
str += "<span class=\"pin-description\">" + this.cook(it.n) + "</span>\n"; |
|||
} |
|||
if (it.t.length > 0) { |
|||
for (var i = 0; i < it.t.length; i++) { |
|||
var tag = it.t[i]; |
|||
str += " <a class=\"pin-tag\" href=\"http://pinboard.in/u:"+ this.cook(it.a) + "/t:" + this.cook(tag) + "\">" + this.cook(tag) + "</a> "; |
|||
} |
|||
} |
|||
str += "</p></li>\n"; |
|||
return str; |
|||
} |
|||
} |
|||
Pinboard_Linkroll.prototype = new Pinboard_Linkroll(); |
|||
@ -1,151 +1,52 @@ |
|||
//
|
|||
// The Octopress Twitter Feed is based on the following work:
|
|||
// Valerio's javascript framework Mootools: Mootools.net
|
|||
// David Walsh's Twitter Gitter plugin: http://davidwalsh.name/mootools-twitter-plugin
|
|||
// Aaron Newton’s JSONP plugin: http://clientcide.com/js
|
|||
// PrettyDate by John Resig at http://ejohn.org/files/pretty.js
|
|||
//
|
|||
Request.Twitter = new Class({ |
|||
|
|||
/* |
|||
Plugin: Octopress Twitter Feed |
|||
Author: Brandon Mathis |
|||
Website: http://brandonmathis.com
|
|||
Date: 11/07/2009 |
|||
*/ |
|||
Extends: Request.JSONP, |
|||
|
|||
var tweet_container = 'li'; |
|||
var twitter_container = 'twitter_status'; |
|||
var key = '-!-!-'; |
|||
var show_source = false; |
|||
|
|||
window.addEvent('domready',function() { |
|||
getTwitterStatus(twitter_user); |
|||
}); |
|||
|
|||
function showTweets(the_tweets, from_cookie){ |
|||
if(from_cookie){ |
|||
the_tweets = the_tweets.split('^!^!^'); |
|||
options: { |
|||
linkify: true, |
|||
url: 'http://twitter.com/statuses/user_timeline/{term}.json', |
|||
include_replies: true, |
|||
data: { |
|||
count: 5, |
|||
trim_user: true |
|||
} |
|||
$(twitter_container).set('html', ''); |
|||
the_tweets.each(function(tweet){ |
|||
tweet = parseTweetMeta(tweet) |
|||
tweet = '<p>' + tweet.replace(/\n\n/gi,'</p><p>') + '</p>'; |
|||
new Element(tweet_container,{ |
|||
html: tweet |
|||
}).inject(twitter_container); |
|||
}); |
|||
} |
|||
|
|||
function parseTweetMeta(tweet_data){ |
|||
var tweet_data = tweet_data.split(key); |
|||
var tweet = tweet_data[0]; |
|||
var date = tweet_data[1]; |
|||
var tweet_id = tweet_data[2]; |
|||
var source = tweet_data[3]; |
|||
|
|||
date = prettyDate(new Date().parse(date)); |
|||
return tweet + '<span class="meta"><a href="http://twitter.com/'+twitter_user + '/status/' + tweet_id + '">' + date + '</a>' + (show_source ? ' from '+source : '') + '</span>'; |
|||
} |
|||
|
|||
function prettyDate(time){ |
|||
var date = time; |
|||
var diff = (((new Date()).getTime() - date.getTime()) / 1000) |
|||
var day_diff = Math.floor(diff / 86400); |
|||
|
|||
if ( isNaN(day_diff) || day_diff < 0) |
|||
return; |
|||
|
|||
return day_diff == 0 && ( |
|||
diff < 60 && "just now" || |
|||
diff < 120 && "1 minute ago" || |
|||
diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" || |
|||
diff < 7200 && "1 hour ago" || |
|||
diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") || |
|||
day_diff == 1 && "1 day ago" || |
|||
day_diff < 7 && day_diff + " days ago" || |
|||
day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago" || |
|||
true && Math.ceil( day_diff / 30 ) + " months ago"; |
|||
} |
|||
}, |
|||
|
|||
function getTwitterStatus(twitter_name){ |
|||
var container = $(twitter_container); |
|||
if(!container) return; |
|||
var tweet_cookie = 'tweets_by_' + twitter_name + tweet_count; |
|||
container.set('html', 'Fetching tweets...'); |
|||
if(!Cookie.read(tweet_cookie)) { |
|||
var myTwitterGitter = new TwitterGitter(twitter_name,{ |
|||
count: ((show_replies) ? tweet_count : 15 + tweet_count), |
|||
onComplete: function(tweets,user) { |
|||
the_tweets = Array(); |
|||
tweets.each(function(tweet,i) { |
|||
if((tweet.in_reply_to_status_id && show_replies) || !tweet.in_reply_to_status_id){ |
|||
if(the_tweets.length == tweet_count) return; |
|||
the_tweets.push(tweet.text + key + tweet.created_at + key + tweet.id + key + tweet.source); |
|||
initialize: function(term, options){ |
|||
this.parent(options); |
|||
if(this.options.include_replies == false){ |
|||
this.options.count = this.options.data.count |
|||
this.options.data.count += 30; // adds 30 tweets to request for filtering
|
|||
} |
|||
this.options.url = this.options.url.substitute({term: term}); |
|||
console.log(this.options.url); |
|||
}, |
|||
|
|||
success: function(args, index){ |
|||
if(!this.options.include_replies){ |
|||
args[0] = args[0].filter(function(item, index, array){ |
|||
return item.in_reply_to_screen_name == null; |
|||
}); |
|||
Cookie.write(tweet_cookie,the_tweets.join('^!^!^'), { duration: 0.02 }); |
|||
showTweets(the_tweets); |
|||
} |
|||
}).retrieve(); |
|||
} else { |
|||
showTweets(Cookie.read(tweet_cookie),true); |
|||
if(args[0].length > this.options.count){ args[0].length = this.options.count; } |
|||
} |
|||
} |
|||
var data = args[0]; |
|||
|
|||
/* |
|||
Plugin: TwitterGitter |
|||
Author: David Walsh |
|||
Website: http://davidwalsh.name
|
|||
Date: 2/21/2009 |
|||
*/ |
|||
if (this.options.linkify) data.each(function(tweet){ |
|||
tweet.text = this.linkify(tweet.text); |
|||
}, this); |
|||
|
|||
var TwitterGitter = new Class({ |
|||
|
|||
//implements
|
|||
Implements: [Options,Events], |
|||
|
|||
//options
|
|||
options: { |
|||
count: 2, |
|||
sinceID: 1, |
|||
link: true, |
|||
onRequest: $empty, |
|||
onComplete: $empty |
|||
}, |
|||
if (data[0]) this.options.data.since_id = data[0].id; // keep subsequent calls newer
|
|||
|
|||
//initialization
|
|||
initialize: function(username,options) { |
|||
//set options
|
|||
this.setOptions(options); |
|||
this.info = {}; |
|||
this.username = username; |
|||
this.parent(args, index); |
|||
}, |
|||
|
|||
//get it!
|
|||
retrieve: function() { |
|||
new JsonP('http://twitter.com/statuses/user_timeline/' + this.username + '.json',{ |
|||
data: { |
|||
count: this.options.count, |
|||
since_id: this.options.sinceID |
|||
}, |
|||
onRequest: this.fireEvent('request'), |
|||
onComplete: function(data) { |
|||
//linkify?
|
|||
if(this.options.link) { |
|||
data.each(function(tweet) { tweet.text = this.linkify(tweet.text); },this); |
|||
linkify: function(text){ |
|||
// modified from TwitterGitter by David Walsh (davidwalsh.name)
|
|||
// courtesy of Jeremy Parrish (rrish.org)
|
|||
return text.replace(/(https?:\/\/[\w\-:;?&=+.%#\/]+)/gi, '<a href="$1">$1</a>') |
|||
.replace(/(^|\W)@(\w+)/g, '$1<a href="http://twitter.com/$2">@$2</a>') |
|||
.replace(/(^|\W)#(\w+)/g, '$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>'); |
|||
} |
|||
//complete!
|
|||
this.fireEvent('complete',[data,data[0].user]); |
|||
}.bind(this) |
|||
}).request(); |
|||
return this; |
|||
}, |
|||
|
|||
//format
|
|||
linkify: function(text) { |
|||
//courtesy of Jeremy Parrish (rrish.org)
|
|||
return text.replace(/(https?:\/\/[\w\-:;?&=+.%#\/]+)/gi,'<a href="$1">$1</a>').replace(/(^|\s)@(\w+)/g,'$1<a class="user" href="http://twitter.com/$2">@$2</a>').replace(/(^|\s)#(\w+)/g,'$1<a class="topic" href="http://search.twitter.com/search?q=%23$2">#$2</a>'); |
|||
} |
|||
}); |
|||
//Compact Jsonp from http://clientcide.com/js
|
|||
MooTools.More={'version':'1.2.3.1'};var Log=new Class({log:function(){Log.logger.call(this,arguments)}});Log.logged=[];Log.logger=function(){if(window.console&&console.log)console.log.apply(console,arguments);else Log.logged.push(arguments)};Class.refactor=function(original,refactors){$each(refactors,function(item,name){var origin=original.prototype[name];if(origin&&(origin=origin._origin)&&typeof item=='function')original.implement(name,function(){var old=this.previous;this.previous=origin;var value=item.apply(this,arguments);this.previous=old;return value});else original.implement(name,item)});return original};Request.JSONP=new Class({Implements:[Chain,Events,Options,Log],options:{url:'',data:{},retries:0,timeout:0,link:'ignore',callbackKey:'callback',injectScript:document.head},initialize:function(options){this.setOptions(options);this.running=false;this.requests=0;this.triesRemaining=[]},check:function(){if(!this.running)return true;switch(this.options.link){case'cancel':this.cancel();return true;case'chain':this.chain(this.caller.bind(this,arguments));return false}return false},send:function(options){if(!$chk(arguments[1])&&!this.check(options))return this;var type=$type(options),old=this.options,index=$chk(arguments[1])?arguments[1]:this.requests++;if(type=='string'||type=='element')options={data:options};options=$extend({data:old.data,url:old.url},options);if(!$chk(this.triesRemaining[index]))this.triesRemaining[index]=this.options.retries;var remaining=this.triesRemaining[index];(function(){var script=this.getScript(options);this.log('JSONP retrieving script with url: '+script.get('src'));this.fireEvent('request',script);this.running=true;(function(){if(remaining){this.triesRemaining[index]=remaining-1;if(script){script.destroy();this.send(options,index);this.fireEvent('retry',this.triesRemaining[index])}}else if(script&&this.options.timeout){script.destroy();this.cancel();this.fireEvent('failure')}}).delay(this.options.timeout,this)}).delay(Browser.Engine.trident?50:0,this);return this},cancel:function(){if(!this.running)return this;this.running=false;this.fireEvent('cancel');return this},getScript:function(options){var index=Request.JSONP.counter,data;Request.JSONP.counter++;switch($type(options.data)){case'element':data=document.id(options.data).toQueryString();break;case'object':case'hash':data=Hash.toQueryString(options.data)}var src=options.url+(options.url.test('\\?')?'&':'?')+(options.callbackKey||this.options.callbackKey)+'=Request.JSONP.request_map.request_'+index+(data?'&'+data:'');if(src.length>2083)this.log('JSONP '+src+' will fail in Internet Explorer, which enforces a 2083 bytes length limit on URIs');var script=new Element('script',{type:'text/javascript',src:src});Request.JSONP.request_map['request_'+index]=function(data){this.success(data,script)}.bind(this);return script.inject(this.options.injectScript)},success:function(data,script){if(script)script.destroy();this.running=false;this.log('JSONP successfully retrieved: ',data);this.fireEvent('complete',[data]).fireEvent('success',[data]).callChain()}});Request.JSONP.counter=0;Request.JSONP.request_map={};var JsonP=Class.refactor(Request.JSONP,{initialize:function(){var params=Array.link(arguments,{url:String.type,options:Object.type});options=(params.options||{});options.url=options.url||params.url;if(options.callBackKey)options.callbackKey=options.callBackKey;this.previous(options)},getScript:function(options){var queryString=options.queryString||this.options.queryString;if(options.url&&queryString)options.url+=(options.url.indexOf("?")>=0?"&":"?")+queryString;var script=this.previous(options);if($chk(options.globalFunction)){window[options.globalFunction]=function(r){JsonP.requestors[index].handleResults(r)}}return script},request:function(url){this.send({url:url||this.options.url})}}); |
|||
|
|||
|
|||
@ -0,0 +1,17 @@ |
|||
@import "compass"; |
|||
@import "compass/layout"; |
|||
|
|||
@include global-reset; |
|||
|
|||
@include reset-html5; |
|||
|
|||
/* SASS mixins */ |
|||
//@import "library/typography"; |
|||
|
|||
/* primary SASS */ |
|||
//@import "theme"; |
|||
//@import "typography"; |
|||
@import "themes/classic/style"; |
|||
|
|||
/* specific SASS */ |
|||
//@import "partials"; |
|||
@ -0,0 +1,13 @@ |
|||
@import "partials/shared"; |
|||
@import "partials/syntax"; |
|||
@import "partials/search"; |
|||
@import "partials/sidebar"; |
|||
@import "partials/twitter"; |
|||
|
|||
/* layout partials */ |
|||
@import "partials/header"; |
|||
@import "partials/navigation"; |
|||
@import "partials/page"; |
|||
@import "partials/sidebar"; |
|||
@import "partials/blog"; |
|||
@import "partials/footer"; |
|||
@ -0,0 +1,4 @@ |
|||
@import "core/layout"; |
|||
@import "core/theme"; |
|||
@import "core/typography"; |
|||
//@import "partials"; |
|||
@ -0,0 +1,91 @@ |
|||
$page-pad: 40px; |
|||
$min-width: 320px; |
|||
$max-width: 1440px; |
|||
$sidebar-width: 320px; |
|||
$sidebar-pad: 30px; |
|||
$default-border-radius: 4px; |
|||
|
|||
//html { background-color: $body_bg; } |
|||
|
|||
//body { color: $body_color; } |
|||
|
|||
//a { |
|||
//color: $link_color; |
|||
//&:hover, &:focus { |
|||
//color: saturate(darken($link_color, 15), 20); } |
|||
//&:visited { |
|||
//color: darken(adjust_hue($link_color, 70), 10); } } |
|||
|
|||
.group { @include pie-clearfix; } |
|||
|
|||
.inner-wrap { |
|||
position: relative; |
|||
margin: 0 auto; |
|||
padding: 0 $page_pad; |
|||
max-width: $max-width; |
|||
@extend .group; |
|||
} |
|||
|
|||
.core-layout { > div { @extend .inner-wrap; } } |
|||
|
|||
body { > header, > nav, > footer { |
|||
@extend .core-layout; |
|||
min-width: $min-width; |
|||
} |
|||
} |
|||
|
|||
#page { |
|||
@extend .group; |
|||
padding: 0; |
|||
max-width: $max-width + $page-pad*2; |
|||
margin: 0 auto; |
|||
> div { |
|||
@extend .group; |
|||
//min-width: 480px; |
|||
margin-right: $sidebar-width; |
|||
> aside { |
|||
float: left; |
|||
width: $sidebar-width - $sidebar-pad*2; |
|||
margin: 0 -100% 0 0; |
|||
padding: $sidebar-pad; |
|||
} |
|||
} |
|||
} |
|||
|
|||
#main { |
|||
float: left; |
|||
width: 100%; |
|||
padding-top: 25px; |
|||
padding-bottom: 25px; |
|||
> * { |
|||
padding-right: $page-pad; |
|||
padding-left: $page-pad; |
|||
} |
|||
} |
|||
|
|||
@media (min-device-width:1024px) and (max-width:800px), |
|||
screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), |
|||
(min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) { |
|||
#page > div { margin-right: 0; |
|||
#main { float: none; } |
|||
> aside { margin: 0; float: none; } |
|||
} |
|||
page > div > aside { float: none; } |
|||
body { > header, > nav, > footer { > div { padding: 0 15px; }}} |
|||
#main > * { padding-left: 15px; padding-right: 15px; } |
|||
} |
|||
|
|||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { |
|||
body { > header, > nav, > footer { > div { padding: 0 10px; }}} |
|||
#main > * { padding-left: 10px; padding-right: 10px; } |
|||
#page > div { margin: none; > aside { float: none; }} |
|||
} |
|||
|
|||
//*{ |
|||
//transition: width .5s; |
|||
//-moz-transition: width .5s; |
|||
//-webkit-transition: margin .5s; |
|||
//} |
|||
|
|||
|
|||
//#search { left: $page-width + $sidebar-margin - $sidebar-width; } |
|||
@ -0,0 +1,45 @@ |
|||
// Link Colors |
|||
$link_color: lighten(#165b94, 0.3); |
|||
|
|||
// Main Section Colors |
|||
$body_color: #333333; |
|||
$light_text: #999999; |
|||
$body_bg: #323232; |
|||
|
|||
$header_bg: #323232; |
|||
$header_border: #181818; |
|||
$title_color: #dddddd; |
|||
|
|||
$nav_color: #555555; |
|||
$nav_color_hover: black; |
|||
$nav_bg: #e8e8e8; |
|||
$nav_border_top: white; |
|||
$nav_border_bottom: #aaaaaa; |
|||
$nav_border_left: #cccccc; |
|||
$nav_border_right: white; |
|||
|
|||
$sidebar_bg: #f2f2f2; |
|||
$sidebar_border: #d5d5d5; |
|||
|
|||
// Blog |
|||
$article_border: #eeeeee; |
|||
$main_bg: #fff; |
|||
|
|||
$footer_color: #999999; |
|||
$footer_bg: #444444; |
|||
|
|||
// 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; |
|||
|
|||
$twitter_topic: #888888; |
|||
@ -0,0 +1,159 @@ |
|||
$type-border: #ddd; |
|||
$type-color-light: #555; |
|||
$type-color: #000; |
|||
$blockquote: $type-border !default; //darken($type-border, 20) !default; |
|||
|
|||
|
|||
// Fonts |
|||
@include font-face("Adelle", font-files("adellebasic_bold-webfont.woff", woff, "adellebasic_bold-webfont.ttf", truetype, "adellebasic_bold-webfont.svg#webfontKykxqSyz", svg), $eot: "adellebasic_bold-webfont.eot" ); |
|||
.heading-font { font-family: Adelle, "Helvetica Neue", Helvetica, Arial, sans; } |
|||
|
|||
body > header h1 { |
|||
font-size: 3em; |
|||
@extend .heading-font; |
|||
line-height: 1.2em; |
|||
margin-bottom: 0.6667em; |
|||
} |
|||
|
|||
|
|||
body { |
|||
font-size: 1em; |
|||
line-height: 1.5em; |
|||
color: $type-color; |
|||
font-family: Georgia, Times, serif; |
|||
} |
|||
|
|||
article { |
|||
margin-bottom: 1.5em; |
|||
padding-bottom: 1.5em; |
|||
padding-top: 1em; |
|||
+ article { border-top: 3px solid $type-color-light; } |
|||
&:last-child { border-bottom: none; } |
|||
h2 { |
|||
padding-top: 0.8em; |
|||
border-top: 3px double $type-border; |
|||
} |
|||
.author, time { text-transform: uppercase; } |
|||
.updated { font-size: .8em; color: $type-color-light; } |
|||
time span { |
|||
font-size: .7em; |
|||
line-height: 0; |
|||
position: relative; |
|||
top: -.4em; |
|||
} |
|||
header { |
|||
p { |
|||
padding: 0 0 1.5em; |
|||
font-size: .8em; |
|||
color: $type-color-light; |
|||
font-family: Palatino, Times, "Times New Roman"; |
|||
//margin-top: -1.2em; |
|||
//border: { |
|||
top-width: 1px; |
|||
//bottom-width: 1px; |
|||
//style: dashed; |
|||
//color: $type-border; |
|||
//} |
|||
} |
|||
} |
|||
} |
|||
|
|||
#{headings()}{ |
|||
@extend .heading-font; font-weight: normal; |
|||
line-height: 1em; |
|||
text-rendering: optimizelegibility; |
|||
} |
|||
h1 { |
|||
font-size: 2.6em; |
|||
margin-bottom: 0.6667em; |
|||
} |
|||
h2, section h1 { |
|||
font-size: 1.8em; |
|||
margin-bottom: 0.6667em; |
|||
} |
|||
h3, section h2, section section h1 { |
|||
font-size: 1.6em; |
|||
margin-bottom: 0.875em; |
|||
} |
|||
h4, section h3, section section h2, section section section h1 { |
|||
font-size: 1.3em; |
|||
margin-bottom: 0.875em; |
|||
} |
|||
h5, section h4, section section h3 { |
|||
font-size: 1.1em; |
|||
margin-bottom: 0.75em; |
|||
} |
|||
h6, section h5, section section h4, section section section h3 { |
|||
font-size: 1em; |
|||
margin-bottom: 0.5em; |
|||
} |
|||
p, blockquote, ul, ol { margin-bottom: 1.5em; } |
|||
|
|||
ul{ list-style-type: disc; } |
|||
|
|||
ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } } |
|||
ul ul, ol ol { margin-left: 1.75em; } |
|||
|
|||
li { margin-bottom: .5em; } |
|||
|
|||
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: 2em; |
|||
font-style: italic; |
|||
position: relative; |
|||
margin-left: $bq-margin; |
|||
> p { |
|||
&:first-child:before { |
|||
content: "\201C"; |
|||
position: absolute; |
|||
top: 0.1em; |
|||
left: -.7em; |
|||
font-size: 3em; |
|||
color: $blockquote; |
|||
} |
|||
&:last-child:after { |
|||
content: "\201D"; |
|||
position: relative; |
|||
top: 0.3em; |
|||
line-height: 0; |
|||
font-size: 2em; |
|||
color: $blockquote; |
|||
} |
|||
} |
|||
+ p > cite { |
|||
margin-left: $bq-margin; |
|||
text-align: right; |
|||
&:before { content: '– '; color: $type-color-light; } |
|||
a { font-style: italic; } |
|||
} |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
article { |
|||
h2 { |
|||
padding-top: 0; |
|||
margin-bottom: 0.1em; } |
|||
.title { |
|||
text-decoration: none; |
|||
&:hover { |
|||
text-decoration: underline; } } |
|||
.entry { |
|||
border-bottom: 1px solid $article-border; |
|||
&:first-child { |
|||
padding-top: 0; } } |
|||
#disqus_thread { } |
|||
.meta { |
|||
border-bottom: 1px dashed #dddddd; |
|||
text-transform: uppercase; |
|||
color: #777777; |
|||
padding: 8px 0 5px; |
|||
margin-bottom: 1.5em; |
|||
font-size: 75%; |
|||
letter-spacing: 1px; } |
|||
.footer { |
|||
padding-top: 15px; } } |
|||
@ -0,0 +1,11 @@ |
|||
footer { |
|||
@include background(linear-gradient(darken($body-bg, 5), $body-bg)); |
|||
//color: $footer-color; |
|||
//border-top: 10px solid $footer-bg; |
|||
padding: 15px 0; |
|||
position: relative; |
|||
z-index: 2; |
|||
a { |
|||
color: #dddddd; |
|||
&:hover { |
|||
color: white; } } } |
|||
@ -0,0 +1,11 @@ |
|||
body > header { |
|||
background-color: $header_bg; |
|||
border-bottom: 1px solid $header_border; |
|||
padding: 25px 0; |
|||
h1 { |
|||
display: inline-block; |
|||
margin: 0; |
|||
a, a:visited { |
|||
font-weight: normal; |
|||
color: $title_color; |
|||
text-decoration: none; } } } |
|||
@ -0,0 +1,30 @@ |
|||
#nav { |
|||
@extend .group; |
|||
position: relative; |
|||
z-index: 1; |
|||
background-color: $nav-bg; |
|||
@include background-image(linear-gradient(#fcfcfc, #f4f4f4 0.3, #dddddd)); |
|||
border: { |
|||
top: 1px solid $nav-border-top; |
|||
bottom: 1px solid $nav-border-bottom; }; |
|||
ul { |
|||
position: relative; |
|||
@include horizontal-list; |
|||
margin: 0 auto; |
|||
padding: 6px 0; |
|||
li { |
|||
padding: 0 15px; |
|||
border-left: 1px solid $nav-border-left; |
|||
border-right: 1px solid $nav-border-right; |
|||
&:first-child { |
|||
border-left: none; |
|||
padding-left: 0; } |
|||
&:last-child { |
|||
border-right: 0; } |
|||
a { |
|||
display: inline-block; |
|||
color: $nav-color; |
|||
line-height: 150%; |
|||
text-decoration: none; |
|||
&:hover { |
|||
color: $nav-color-hover; } } } } } |
|||
@ -0,0 +1,8 @@ |
|||
body { |
|||
background-color: $sidebar_bg; |
|||
} |
|||
|
|||
#page > div { |
|||
background-color: $main_bg; border-right: 1px solid $sidebar_border; |
|||
@include box-shadow(rgba(#000, .1) 0 0 18px); |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
#search { |
|||
position: absolute; |
|||
top: 30%; |
|||
form { |
|||
background: image-url("search_bg.png") no-repeat; |
|||
padding: 0; |
|||
height: 28px; |
|||
width: 218px; } |
|||
#q { |
|||
background: none; |
|||
position: relative; |
|||
top: 1px; |
|||
width: 160px; |
|||
margin-left: 30px; |
|||
font-size: 15px; |
|||
border: none; |
|||
color: #aaaaaa; |
|||
&:focus { |
|||
outline: none; } } } |
|||
@ -0,0 +1,12 @@ |
|||
#collapser { |
|||
display: block; |
|||
cursor: pointer; |
|||
background: #f8f8f8; |
|||
color: #888888; |
|||
padding: 5px 10px; |
|||
font-size: 10px; |
|||
line-height: 150%; |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; } |
|||
@ -0,0 +1,38 @@ |
|||
.subscribe a { |
|||
display: inline-block; |
|||
padding-left: 28px; |
|||
background: image-url("rss.png") left top no-repeat; } |
|||
#sidebar { |
|||
line-height: 1.45em; |
|||
font-size: 90%; |
|||
h3 { |
|||
margin: 20px -15px 10px; |
|||
padding: 12px 15px; |
|||
background: white; |
|||
border-bottom: 1px solid #e5e5e5; |
|||
border-top: 1px solid #e5e5e5; |
|||
&:first-child { |
|||
margin-top: 0; } } } |
|||
|
|||
#twitter, #delicious { |
|||
@include border-radius; |
|||
background: #f8f8f8; |
|||
border: 1px solid #eeeeee; |
|||
padding: 5px 0; |
|||
ul { |
|||
list-style-type: none; |
|||
margin: 0; } |
|||
li { |
|||
margin: 0 15px; |
|||
padding: 10px 0 0; |
|||
border-bottom: #dddddd 1px dashed; |
|||
&:last-child { |
|||
border-bottom: 0; } } } |
|||
|
|||
#delicious { |
|||
p { |
|||
font-style: italic; } |
|||
li { |
|||
color: #666666; |
|||
font-style: normal; |
|||
padding-bottom: 8px; } } |
|||
@ -0,0 +1,279 @@ |
|||
.code_window { |
|||
@include border-top-radius(5px); |
|||
@include border-bottom-radius(2px); |
|||
background: #aaaaaa image-url("code_bg.png") top repeat-x; |
|||
position: relative; |
|||
margin: 0.3em 0 1.3em; |
|||
padding: 0 3px 3px; |
|||
font-size: 14px; |
|||
border: 1px solid #898989; |
|||
border-top-color: #cbcbcb; |
|||
border-left-color: #a5a5a5; |
|||
border-right-color: #a5a5a5; |
|||
em { |
|||
text-align: center; |
|||
text-shadow: #cccccc 1px 1px 1px; |
|||
display: block; |
|||
padding: 1px 0; |
|||
color: #333333; |
|||
font-style: normal; } |
|||
.highlight { |
|||
margin: 0; } } |
|||
|
|||
pre { |
|||
color: #cccccc; |
|||
font-size: 13px; |
|||
background: #222222; |
|||
line-height: 1.5em; |
|||
border: #aaaaaa 1px solid; |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
padding: 25px 20px; |
|||
.lineno { |
|||
color: #888888; |
|||
background: #e3e3e3; |
|||
display: inline-block; |
|||
padding: 0 0 0 10px; |
|||
&:first-child { |
|||
padding-top: 15px; |
|||
display: inline-block; } } } |
|||
|
|||
.highlight { |
|||
position: relative; |
|||
.pre_expander { |
|||
font-size: 10px; |
|||
text-align: right; |
|||
padding: 4px 8px; |
|||
line-height: 150%; |
|||
position: absolute; |
|||
cursor: pointer; |
|||
top: 2px; |
|||
right: 2px; |
|||
@include border-bottom-left-radius; |
|||
display: block; |
|||
color: #777777; |
|||
background: #333333; |
|||
&:hover { |
|||
background: #444444; |
|||
color: #cccccc; } } } |
|||
|
|||
// based on: http://github.com/mojombo/tpw/raw/master/css/syntax.css |
|||
.editor { |
|||
background: rgb(0, 22, 41); |
|||
line-height: 1.25; } |
|||
|
|||
pre.console { |
|||
background-color: black; |
|||
color: lighten(green, 25); |
|||
letter-spacing: 1px; |
|||
padding: 0.5em; |
|||
.prompt { |
|||
color: lighten(navy, 50); |
|||
&:before { |
|||
color: white; |
|||
content: "["; } |
|||
&:after { |
|||
color: white; |
|||
content: "]"; } } |
|||
.stdin { |
|||
font-weight: bold; |
|||
color: lighten(green, 75); } } |
|||
|
|||
.highlight { |
|||
padding: 0 0 0.1em; |
|||
color: white; |
|||
// Comment |
|||
.c { |
|||
color: #999988; |
|||
font-style: italic; } |
|||
// Error |
|||
.err { |
|||
color: #a61717; |
|||
background-color: #e3d2d2; } |
|||
// Name |
|||
.n { |
|||
color: white; } |
|||
// Keyword |
|||
.k { |
|||
color: rgb(255, 157, 0); } |
|||
// Paren |
|||
.p { |
|||
color: darken(#ff9d00, 33); } |
|||
// Operator |
|||
.o { |
|||
color: rgb(255, 157, 0); } |
|||
// Comment.Multiline |
|||
.cm { |
|||
color: #999988; |
|||
font-style: italic; } |
|||
// Comment.Preproc |
|||
.cp { |
|||
color: #999999; } |
|||
// Comment.Single |
|||
.c1 { |
|||
color: #999988; |
|||
font-style: italic; } |
|||
// Comment.Special |
|||
.cs { |
|||
color: #999999; |
|||
font-style: italic; } |
|||
// Generic.Deleted |
|||
.gd { |
|||
color: black; |
|||
background-color: #ffdddd; } |
|||
// Generic.Deleted.Specific |
|||
.gd .x { |
|||
color: black; |
|||
background-color: #ffaaaa; } |
|||
// Generic.Emph |
|||
.ge { |
|||
font-style: italic; } |
|||
// Generic.Error |
|||
.gr { |
|||
color: #aa0000; } |
|||
// Generic.Heading |
|||
.gh { |
|||
color: #999999; } |
|||
// Generic.Inserted |
|||
.gi { |
|||
color: black; |
|||
background-color: #ddffdd; } |
|||
// Generic.Inserted.Specific |
|||
.gi .x { |
|||
color: black; |
|||
background-color: #aaffaa; } |
|||
// Generic.Output |
|||
.go { |
|||
color: #888888; } |
|||
// Generic.Prompt |
|||
.gp { |
|||
color: #555555; } |
|||
// Generic.Strong |
|||
.gs { |
|||
color: white; } |
|||
// Generic.Subheading |
|||
.gu { |
|||
color: #aaaaaa; } |
|||
// Generic.Traceback |
|||
.gt { |
|||
color: #aa0000; } |
|||
// Keyword.Constant |
|||
.kc { |
|||
color: white; } |
|||
// Keyword.Declaration |
|||
.kd { |
|||
color: white; } |
|||
// Keyword.Pseudo |
|||
.kp { |
|||
color: white; } |
|||
// Keyword.Reserved |
|||
.kr { |
|||
color: white; } |
|||
// Keyword.Type |
|||
.kt { |
|||
color: #445588; } |
|||
// Literal.Number |
|||
.m { |
|||
color: rgb(255, 98, 140); } |
|||
// Literal.String |
|||
.s { |
|||
color: #dd1144; } |
|||
// Name.Attribute |
|||
.na { |
|||
color: teal; } |
|||
// Name.Builtin |
|||
.nb { |
|||
color: darken(rgb(128, 255, 187), 20); } |
|||
// Name.Class |
|||
.nc { |
|||
color: darken(rgb(128, 255, 187), 20); } |
|||
// Name.Constant |
|||
.no { |
|||
color: rgb(128, 255, 187); } |
|||
// Name.Entity |
|||
.ni { |
|||
color: purple; } |
|||
// Name.Exception |
|||
.ne { |
|||
color: rgb(255, 221, 0); } |
|||
// Name.Function |
|||
.nf { |
|||
color: rgb(255, 221, 0); } |
|||
// Name.Namespace |
|||
.nn { |
|||
color: #555555; } |
|||
// Name.Tag |
|||
.nt { |
|||
color: white; } |
|||
// Name.Variable |
|||
.nv { |
|||
color: teal; } |
|||
// Operator.Word |
|||
.ow { |
|||
color: white; } |
|||
// Text.Whitespace |
|||
.w { |
|||
color: #bbbbbb; } |
|||
// Literal.Number |
|||
.nl { |
|||
color: rgb(255, 98, 140); } |
|||
// Literal.Number.Float |
|||
.mf { |
|||
color: rgb(255, 98, 140); } |
|||
// Literal.Number.Hex |
|||
.mh { |
|||
color: rgb(255, 98, 140); } |
|||
// Literal.Number.Integer |
|||
.mi { |
|||
color: rgb(255, 98, 140); } |
|||
// Literal.Number.Oct |
|||
.mo { |
|||
color: rgb(255, 98, 140); } |
|||
// Literal.String.Backtick |
|||
.sb { |
|||
color: rgb(58, 217, 0); } |
|||
// Literal.String.Char |
|||
.sc { |
|||
color: rgb(58, 217, 0); } |
|||
// Literal.String.Doc |
|||
.sd { |
|||
color: rgb(58, 217, 0); } |
|||
// Literal.String.Double |
|||
.s2 { |
|||
color: rgb(58, 217, 0); } |
|||
// Literal.String.Escape |
|||
.se { |
|||
color: rgb(58, 217, 0); } |
|||
// Literal.String.Heredoc |
|||
.sh { |
|||
color: rgb(58, 217, 0); } |
|||
// Literal.String.Interpol |
|||
.si { |
|||
color: rgb(158, 255, 128); } |
|||
// Literal.String.Other |
|||
.sx { |
|||
color: rgb(58, 217, 0); } |
|||
// Literal.String.Regex |
|||
.sr { |
|||
color: #009926; } |
|||
// Literal.String.Single |
|||
.s1 { |
|||
color: rgb(58, 217, 0); } |
|||
// Literal.String.Symbol |
|||
.ss { |
|||
color: rgb(255, 98, 140); } |
|||
// Name.Builtin.Pseudo |
|||
.bp { |
|||
color: #999999; } |
|||
// Name.Variable.Class |
|||
.vc { |
|||
color: teal; } |
|||
// Name.Variable.Global |
|||
.vg { |
|||
color: teal; } |
|||
// Name.Variable.Instance |
|||
.vi { |
|||
color: teal; } |
|||
// Literal.Number.Integer.Long |
|||
.il { |
|||
color: rgb(255, 98, 140); } } |
|||
@ -0,0 +1,15 @@ |
|||
#twitter { |
|||
p { |
|||
padding-bottom: 10px; |
|||
a.topic { |
|||
color: $twitter_topic; } } |
|||
.meta { |
|||
color: $light_text; |
|||
font-size: 80%; |
|||
display: block; |
|||
padding: 8px 0 0; |
|||
a { |
|||
color: inherit; |
|||
text-decoration: none; |
|||
&:hover { |
|||
text-decoration: underline; } } } } |
|||
@ -1,3 +0,0 @@ |
|||
//compass default reset |
|||
+global-reset |
|||
@import compass |
|||
@ -1,51 +0,0 @@ |
|||
$page_pad: 30px |
|||
$page_width: 980px |
|||
$sidebar_margin: 20px |
|||
$sidebar_width: 280px |
|||
$default_border_radius: 4px |
|||
|
|||
html body |
|||
background-color: $body_bg |
|||
color: $body_color |
|||
a |
|||
color: $link_color |
|||
&:hover, &:focus |
|||
color: saturate(darken($link_color, 15), 20) |
|||
&:visited |
|||
color: darken(adjust_hue($link_color, 70), 10) |
|||
|
|||
#header, #footer, #nav |
|||
.content |
|||
position: relative |
|||
margin: 0 auto |
|||
width: $page_width - $page_pad |
|||
padding: 0 $page_pad/2 |
|||
|
|||
#page, #header, #footer, #nav |
|||
min-width: $page_width |
|||
#page, #content, .content |
|||
+pie-clearfix |
|||
#content |
|||
margin: 0 auto |
|||
width: $page_width - $sidebar_width - $page_pad/2 |
|||
padding: 0 $sidebar_width 0 $page_pad/2 |
|||
#main |
|||
float: left |
|||
width: 100% |
|||
.content |
|||
padding-right: $sidebar_margin |
|||
|
|||
#sidebar |
|||
float: left |
|||
width: $sidebar_width - $sidebar_margin |
|||
margin: 0 -100% 0 0 |
|||
padding: $page_pad 0 $page_pad $sidebar_margin |
|||
|
|||
#page.expanded |
|||
#content |
|||
width: $page_width - $page_pad/2 |
|||
padding: 0 0 0 $page_pad/2 |
|||
#sidebar |
|||
float: none |
|||
margin: 0 |
|||
padding: 0 0 $page_pad |
|||
@ -1,7 +0,0 @@ |
|||
@import compass/utilities |
|||
@import compass/css3 |
|||
|
|||
@import library/reset |
|||
@import library/list_borders |
|||
@import library/typography |
|||
@import library/link_colors |
|||
@ -1,13 +0,0 @@ |
|||
@import partials/shared |
|||
@import partials/syntax |
|||
@import partials/search |
|||
@import partials/sidebar |
|||
@import partials/twitter |
|||
|
|||
/* layout partials */ |
|||
@import partials/header |
|||
@import partials/navigation |
|||
@import partials/page |
|||
@import partials/sidebar |
|||
@import partials/blog |
|||
@import partials/footer |
|||
@ -1,47 +0,0 @@ |
|||
// Link Colors |
|||
$link_color: lighten(#165B94, .30) |
|||
|
|||
// Main Section Colors |
|||
$body_color: #333 |
|||
$light_text: #999 |
|||
$body_bg: #323232 |
|||
|
|||
$header_bg: #323232 |
|||
$header_border: #181818 |
|||
$title_color: #ddd |
|||
|
|||
$nav_color: #555 |
|||
$nav_color_hover: #000 |
|||
$nav_bg: #e8e8e8 |
|||
$nav_border_top: #fff |
|||
$nav_border_bottom: #aaa |
|||
$nav_border_left: #ccc |
|||
$nav_border_right: #fff |
|||
|
|||
$page_border_sides: #ccc |
|||
$page_bg: #f0f0f0 |
|||
$sidebar_bg: #fcfcfc |
|||
$sidebar_border: #eee |
|||
|
|||
// Blog |
|||
$article_border: #eee |
|||
$main_bg: #fff |
|||
|
|||
$footer_color: #999 |
|||
$footer_bg: #444 |
|||
|
|||
// Form Colors |
|||
$fieldset_bg: #ececec |
|||
$fieldset_border: #c3c3c3 |
|||
|
|||
$textinput_color: #333 |
|||
$textinput_bg: #f4f4f4 |
|||
$textinput_bg_focus: #fefeee |
|||
|
|||
$textinput_border_top: #aaa |
|||
$textinput_border_bottom: #c6c6c6 |
|||
$textinput_border_left: #c3c3c3 |
|||
$textinput_border_right: #c3c3c3 |
|||
$textinput_border_focus: #989898 |
|||
|
|||
$twitter_topic: #888 |
|||
@ -1,45 +0,0 @@ |
|||
$base_font_size: 16px |
|||
$base_font_size_small: 13px |
|||
$base_font_color: #333 |
|||
$default_border_radius: 6px |
|||
|
|||
+general-typography |
|||
=heading-font |
|||
+serif-font |
|||
=quote-font |
|||
+serif-font |
|||
|
|||
body |
|||
font-size: $base_font_size |
|||
+serif-font |
|||
|
|||
h1,h2,h3,h4,h5,h6 |
|||
color: #333 |
|||
font-weight: bold |
|||
+heading-font |
|||
|
|||
h1,h2,h3,h4 |
|||
letter-spacing: -1px |
|||
|
|||
blockquote |
|||
+quote-font |
|||
font-style: italic |
|||
color: #555 |
|||
background: #f8f8f8 |
|||
border: |
|||
top: 1px solid #e5e5e5 |
|||
bottom: 1px solid #e5e5e5 |
|||
&:before |
|||
color: #ddd |
|||
cite |
|||
+sans-font |
|||
font-size: $base_font_size - 2px |
|||
display: block |
|||
padding-top: $base_font_size |
|||
&:before |
|||
content: "\30FC" |
|||
padding-right: 2px |
|||
a |
|||
color: inherit !important |
|||
&:hover |
|||
color: $link_color !important |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue