Permalink
Browse files

1. Replaced Rdiscount in favor of Kramdown (better html5 support) for…

… markdown processing.

2. Added updated instructions to the README
3. Removed unused media css directories
4. Improved use of color variables for page theming.
5. Improved Typography and blog styling.
6. Added support for simple pre and code styles
7. Misc styling and markup improvements.
  • Loading branch information...
1 parent b0405cc commit 21813059f255dcd338d4cc42aad51700126d6058 @imathis imathis committed Jun 18, 2011
View
@@ -2,7 +2,7 @@ source "http://rubygems.org"
gem 'rake'
gem 'jekyll'
-gem 'rdiscount'
+gem 'kramdown'
gem 'RedCloth'
gem 'haml', '>= 3.1'
gem 'compass', '>= 0.11'
View
@@ -5,8 +5,8 @@ GEM
chunky_png (1.2.0)
classifier (1.3.3)
fast-stemmer (>= 1.0.0)
- compass (0.11.1)
- chunky_png (~> 1.1)
+ compass (0.11.3)
+ chunky_png (~> 1.2)
fssm (>= 0.2.7)
sass (~> 3.1)
directory_watcher (1.4.0)
@@ -18,14 +18,14 @@ GEM
directory_watcher (>= 1.1.1)
liquid (>= 1.9.0)
maruku (>= 0.5.9)
+ kramdown (0.13.3)
liquid (2.2.2)
maruku (0.6.0)
syntax (>= 1.0.0)
rake (0.9.0)
rb-fsevent (0.4.0)
- rdiscount (1.6.8)
rubypants (0.2.0)
- sass (3.1.1)
+ sass (3.1.2)
syntax (1.0.0)
PLATFORMS
@@ -36,7 +36,7 @@ DEPENDENCIES
compass (>= 0.11)
haml (>= 3.1)
jekyll
+ kramdown
rake
rb-fsevent
- rdiscount
rubypants
View
@@ -1,59 +1,84 @@
-# What is Octopress?
-Octopress gives developers a well designed starting point for a Jekyll blog. It's easy to configure and easy to deploy. Sweet huh?
-
-#### Octopress comes with
-1. A nice, easy to configure theme that focuses on readability.
-2. Built in support for Twitter, Delicious, Disqus Comments, Google Analytics, and Custom Search.
-3. Rake tasks that make development fast, and deploying easy.
-
-## Why?
-1. Building a Jekyll blog from scratch is a lot of work.
-2. Jekyll doesn't have default layouts or themes.
-3. Most developers don't want to do design.
-
-## Octopress is made of
-- [Jekyll](http://github.com/henrik/jekyll) a blog aware static site generator (Henrik's fork adds [HAML](http://haml-lang.com) support)
-- [Compass](http://compass-style.org) an awesome [SASS](http://sass-lang.com) framework
-- [FSSM](http://github.com/ttilley/fssm/tree/master) + a rake task, automatically regenerates the blog as you work
-- [Serve](http://github.com/jlong/serve) for live previews of the site while in development
-- [Rsync](http://samba.anu.edu.au/rsync/) for easy deployment
-
-## Setup
-Setup is really simple.
-
-1. Download Octopress: <code>git clone git://github.com/imathis/octopress.git</code>
-2. Install dependencies (requires the bundler gem): <code>bundle install</code>
-3. Run <code>rake preview</code> to build the site and preview it in a local webserver.
-
-You'll want to change some settings, so check out the wiki for [Setup & Configurations](http://wiki.github.com/imathis/octopress/configuration).
-
-#### Optional:
-- Install Pygments (Python syntax highlighter), if you wish to enable _Syntax Highlighting_. Download from [pygments.org](http://pygments.org), or <code>sudo aptitude install python-pigments</code> for Debian/Ubuntu users.
-
-## Usage
-Octopress is almost like a front-end for Jekyll. It provides some really handy rake tasks and automation to make blogging as simple as possible. With Octopress you can:
-
-- Preview the site locally with the power of Serve.
-- Automatically regenerate your blog while you work.
-- Generate and deploy with a single command.
-
-See the wiki to learn more about [Usage](http://wiki.github.com/imathis/octopress/usage).
-
-## Third Party Integration
-With search, comments, and analytics, you have no need for a database. This is what makes a statically generated blog possible.
-
-- Twitter
-- Disqus Comments
-- Google Custom Search
-- Google Analytics
-- Delicious Bookmarks
-
-If you already have an account with these services, you can get set up within seconds. Check out the wiki for [Third Party Configuration](http://wiki.github.com/imathis/octopress/third-party-integration) details, and to learn how to setup or remove these services.
-
-## Octopress Style
-- Stylesheets use [SASS](http://sass-lang.com) and [Compass](http://compass-style.org)
-- They're broken up into Layout, Typography, Theme (colors), and Partials
-- Checkout [the wiki](http://wiki.github.com/imathis/octopress/style-customization) for help with customization.
+1. **It sports a clean responsive theme** written in semantic HTML5, focused on readability and friendliness toward mobile devices.
+2. **Octopress loves programmers.** Embed code (with [Solarized](http://ethanschoonover.com/solarized) styling) in your posts from gists or from your filesystem.
+3. **Third party integration is simple** with built-in support for Twitter, Pinboard, Delicious, Disqus Comments, and Google Analytics.
+4. **It's easy to use.** A collection of rake tasks simplifies development and makes deploying a cinch.
+5. **Get curated plugins.** Plugins are hand selected from the Jekyll community then tested and improved.
+
+## Get Setup
+
+[Fork Octopress](https://github.com/imathis/octopress), then open the console and follow along.
+
+ git clone (your repo url)
+
+ # Optionally add a branch for pulling in Octopress updates
+ git remote add octopress git://github.com/imathis/octopress.git
+
+Setup an [RVM](http://beginrescueend.com/) and install dependencies.
+
+ source .rvmrc
+ bundle install
+
+ # Install pygments (for syntax highlighing)
+ sudo easy_install pip
+ sudo pip install pygments
+
+ # Install the default Octopress theme
+ rake install
+
+### Write A Post
+
+ rake post['hello world']
+
+This will create a new post named something like `2011-06-17-hello-world.markdown` in the `source/_posts` directory.
+Open that file in your favorite text editor and you'll see a block of [yaml front matter](https://github.com/mojombo/jekyll/wiki/yaml-front-matter)
+which tells Jekyll how to processes posts and pages.
+
+ ---
+ title: Hello World
+ date: 2011-06-17 14:34
+ layout: post
+ ---
+
+Octopress adds some custom paramaters to give you more publishing flexibility and you can [read about those here](#include_link),
+but for now. Go ahead and type up a sample post or use some [inspired filler](http://baconipsum.com/).
+
+### Generate Your Blog
+
+ rake preview
+
+This will generate your blog, watch your `sass` and `source` directories for changes regenerating automatically, and mount Jekyll's built in webbrick server. Open your browser to `http://localhost:4000` and check it out.
+
+If you'd rather use [POW](http://pow.cx) to serve up your site, you can do this instead.
+
+ cd ~/.pow
+ ln -s /path/to/octopress
+
+ #Then generate your site
+ rake watch
+
+`rake watch` does the same thing as `rake preview` except it doesn't mount Jekyll's webbrick server.
+
+### Configure Octopress
+
+http://gmarik.info/blog/2010/05/10/blogging-with-jekyll-and-heroku-for-free
+http://jstorimer.com/2009/12/29/jekyll-on-heroku.html
+
+Octopress keeps configurations in two places, the `Rakefile` and the `_config.yml`.
+
+In the `rakefile` you'll want to set up your deployment configurations.
+
+ ## -- Rsync Deploy config -- ##
+ # Be sure your public key is listed in your server's ~/.ssh/authorized_keys file
+ ssh_user = "mathisweb@imathis.com"
+ document_root = "~/dev.octopress.org/"
+
+ ## -- Git deploy config -- ##
+ source_branch = "source" # this compiles to your deploy branch
+ deploy_branch = "master" # For user/organization pages, use "master" for project pages use "gh-pages"
+
+If you want to deploy with github pages, read [http://pages.github.com](http://pages.github.com) for guidance.
+
+TODO : Write _configt.yml instructions…
## License
(The MIT License)
View
@@ -1,7 +1,6 @@
require "rubygems"
require "bundler/setup"
-port = "4000" # preview project port eg. http://localhost:4000
site = "public" # compiled site directory
source = "source" # source file directory
stash = "_stash" # directory to stash posts for speedy generation
@@ -10,8 +9,8 @@ post_format = "markdown" # file format for new posts when using the post rake t
## -- Rsync Deploy config -- ##
# Be sure your public key is listed in your server's ~/.ssh/authorized_keys file
-ssh_user = "user@host.com" # for rsync deployment
-document_root = "~/document_root/" # for rsync deployment
+ssh_user = "mathisweb@imathis.com"
+document_root = "~/dev.octopress.org/"
## -- Github Pages deploy config -- ##
# Read http://pages.github.com for guidance
@@ -28,7 +27,7 @@ task :install, :theme do |t, args|
system "mkdir -p #{source}; cp -R themes/"+theme+"/source/ #{source}/"
system "mkdir -p sass; cp -R themes/"+theme+"/sass/ sass/"
system "mkdir -p _plugins; cp -R themes/"+theme+"/_plugins/ _plugins/"
- system "mkdir -p #{source}/_posts";
+ system "mkdir -p #{source}/#{posts}";
puts "## Layouts, images, and javascritps from the #{theme} theme have been installed into ./#{source}"
puts "## Sass stylesheet sources from the #{theme} theme have been installed into ./sass"
puts "## Plugins from the #{theme} theme have been installed into ./_plugins"
@@ -54,8 +53,9 @@ task :post, :filename do |t, args|
require './_plugins/titlecase.rb'
args.with_defaults(:filename => 'new-post')
open("#{source}/_posts/#{Time.now.strftime('%Y-%m-%d')}-#{args.filename.downcase.gsub(/[ _]/, '-')}.#{post_format}", 'w') do |post|
+ system "mkdir -p #{source}/#{posts}";
post.puts "---"
- post.puts "title: \"#{args.filename.gsub(/[-_]/, ' ').titlecase}\""
+ post.puts "title: #{args.filename.gsub(/[-_]/, ' ').titlecase}"
post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
post.puts "layout: post"
post.puts "---"
@@ -77,6 +77,11 @@ task :integrate do
FileUtils.mv Dir.glob("#{source}/#{stash}/*.*"), "#{source}/#{posts}/"
end
+desc "Clean out caches: _code_cache, _gist_cache, .sass-cache"
+task :clean do
+ system "rm -rf _code_cache/** _gist_cache/** .sass-cache/**"
+end
+
##############
# Deploying #
##############
View
@@ -4,14 +4,14 @@ destination: public
code_dir: downloads/code
port: 4000
-url: http://octopress.dev
-title: My Octopress Blog
+url: http://dev.octopress.org
+title: Octopress
subtitle: A blogging framework for hackers.
author: Your Name
subscribe_rss: /atom.xml
-subscribe_email: http://feedburner.com/asdfasdf
+subscribe_email:
-#markdown: rdiscount
+markdown: kramdown
pygments: true
recent_posts: 1
simple_search: http://google.com/search
@@ -1,9 +1,9 @@
$default-border-radius: 4px;
$pad-min: 18px;
-$pad-narrow: 18px;
-$pad-medium: 24px;
-$pad-wide: 30px;
+$pad-narrow: 20px;
+$pad-medium: 35px;
+$pad-wide: 55px;
$sidebar-width-medium: 240px;
$sidebar-pad-medium: 15px;
$sidebar-pad-wide: 20px;
@@ -117,8 +117,6 @@ body {
}
body > nav + div > div { margin-right: $sidebar-width-wide; }
#articles {
- padding-top: $pad-wide/2;
- padding-bottom: $pad-wide/2;
+ aside {
width: $sidebar-width-wide - $sidebar-pad-wide*2;
padding: 0 $sidebar-pad-wide $sidebar-pad-wide;
@@ -1,37 +1,53 @@
-// Link Colors
+// Main Link Colors
$link-color: lighten(#165b94, 3);
-$link-color-hover: darken(#165b94, 5);
+$link-color-hover: adjust-hue($link-color, -200);
+$link-color-visited: darken(adjust_hue($link_color, 70), 10);
+$link-color-active: darken($link-color-hover, 15);
// Main Section Colors
$body-color: #333333;
$light-text: #999999;
$page-bg: #252525;
+$article-border: #eeeeee;
+$main-bg: #f5f5f5;
-$header-bg: #333; //#0c2e46; //darken(#238bd2, 32); //#263448; //#323232;
+$header-bg: #333;
$header-border: lighten($header-bg, 15);
$title-color: #f2f2f2;
$subtitle-color: #aaa;
-$nav-bg: #ccc;//#3a6ea5;
+$type-border: #ddd;
+$type-color-light: #555;
+$type-color: #222;
+
+$nav-bg: #ccc;
$nav-color: darken($nav-bg, 38);
$nav-color-hover: darken($nav-color, 25);
$nav-border: darken($nav-bg, 10);
$nav-border-top: lighten($nav-bg, 15);
-$nav-border-bottom: darken($nav-bg, 25);//darken($nav-bg, 5);
+$nav-border-bottom: darken($nav-bg, 25);
$nav-border-left: darken($nav-bg, 11);
$nav-border-right: lighten($nav-bg, 7);
-$sidebar-bg: #eee; //#f8f8f8; //desaturate(change-color(#e8f4f4, $hue: 207), 100); //mix(#f5f5f5, aqua, 93%);
+$sidebar-bg: #eee;
+$sidebar-color: change-color(mix($type-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2);
+$sidebar-border: desaturate(darken($sidebar-bg, 7), 10);
$sidebar-border: darken($sidebar-bg, 7);
-
-// Blog
-$article-border: #eeeeee;
-$main-bg: #f9f8f6;
+$sidebar-link-color: $link-color;
+$sidebar-link-color-hover: $link-color-hover;
+$sidebar-link-color-subdued: lighten($sidebar-color, 20);
+$sidebar-link-color-subdued-hover: $link-color-hover;//darken($sidebar-link-color-subdued, 20);
+$twitter-status-link: lighten($sidebar-link-color-subdued, 15);
$footer-color: #999999;
-//$footer-bg: #444444;
-$footer-bg: $nav-bg;//$page-bg;
-$footer-border: $nav-border-top;//$page-bg;
+$footer-bg: #ccc;
+$footer-color: darken($footer-bg, 38);
+$footer-color-hover: darken($footer-color, 10);
+$footer-placeholder: desaturate(darken($footer-bg, 10), 15);
+$footer-border-top: lighten($footer-bg, 15);
+$footer-link-color: darken($footer-bg, 38);
+$footer-link-color-hover: darken($footer-color, 25);
+$page-border-bottom: darken($footer-bg, 5);
// Form Colors
$fieldset-bg: #ececec;
@@ -48,6 +64,6 @@ $textinput-border-right: #c3c3c3;
$textinput-border-focus: #989898;
#articles a, #articles + aside a {
- @include link-colors($link-color, $hover: saturate(darken($link_color, 15), 20), $focus: saturate(darken($link_color, 15), 20), $visited: darken(adjust_hue($link_color, 70), 10));
+ @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
}
a { @include transition(color, .5s); }
@@ -1,11 +1,7 @@
-$type-border: #ddd;
-$type-color-light: #555;
-$type-color: #000;
-$blockquote: $type-border !default; //darken($type-border, 20) !default;
+$blockquote: $type-border !default;
$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
// 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-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif;
}
@@ -14,7 +10,7 @@ $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
.mono { font-family: $mono; }
body > header h1 {
- font-size: 2em;
+ font-size: 3em;
@extend .heading;
font-weight: normal;
line-height: 1.2em;
@@ -31,10 +27,10 @@ body {
@extend .heading;
text-rendering: optimizelegibility;
margin-bottom: 1em;
- font-weight: normal;
+ font-weight: bold;
}
h1 {
- font-size: 2.4em;
+ font-size: 3.2em;
line-height: 1.2em
}
h2, section h1 {
@@ -59,8 +55,6 @@ 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; }
Oops, something went wrong.

0 comments on commit 2181305

Please sign in to comment.