Browse Source

Update theme to support Jekyll 2.x newness

- Cleanup _config.yml
- Move navigation and author info to data files
- Convert .less stylesheets to .scss
- Update documentation
- Include Octopress gem for new post/page creation
Michael Rose 4 years ago
parent
commit
e711f8b839
88 changed files with 3774 additions and 3780 deletions
  1. 2
    1
      .gitignore
  2. 1
    0
      Gemfile
  3. 0
    22
      Gruntfile.js
  4. 8
    134
      README.md
  5. 0
    88
      Rakefile.rb
  6. 37
    55
      _config.yml
  7. 20
    0
      _data/authors.yml
  8. 16
    0
      _data/navigation.yml
  9. 4
    2
      _includes/disqus_comments.html
  10. 10
    9
      _includes/footer.html
  11. 17
    24
      _includes/head.html
  12. 12
    20
      _includes/navigation.html
  13. 19
    0
      _includes/open-graph.html
  14. 7
    4
      _includes/scripts.html
  15. 7
    0
      _includes/site-search.html
  16. 24
    28
      _layouts/post.html
  17. 10
    0
      _octopress.yml
  18. 0
    25
      _posts/2014-06-19-author-override.md
  19. 2
    2
      _posts/articles/2011-03-10-sample-post.md
  20. 2
    2
      _posts/articles/2012-05-22-readability-post.md
  21. 2
    2
      _posts/articles/2013-05-22-sample-post-images.md
  22. 2
    2
      _posts/articles/2013-05-23-readability-feature-post.md
  23. 2
    2
      _posts/articles/2013-06-25-video-post.md
  24. 2
    3
      _posts/articles/2013-08-12-sample-link-post.md
  25. 2
    2
      _posts/articles/2013-08-16-code-highlighting-post.md
  26. 45
    0
      _posts/articles/2014-06-19-author-override.md
  27. 33
    0
      _posts/blog/2014-08-08-hello-world.md
  28. 9
    8
      _sass/coderay.scss
  29. 35
    18
      _sass/elements.scss
  30. 31
    42
      _sass/forms.scss
  31. 47
    0
      _sass/grid.scss
  32. 269
    0
      _sass/mixins.scss
  33. 93
    92
      _sass/page.scss
  34. 6
    2
      _sass/pygments.scss
  35. 2
    2
      _sass/reset.scss
  36. 46
    0
      _sass/site.scss
  37. 31
    30
      _sass/typography.scss
  38. 36
    0
      _sass/variables.scss
  39. 16
    0
      _sass/vendor/font-awesome/_bordered-pulled.scss
  40. 12
    0
      _sass/vendor/font-awesome/_core.scss
  41. 6
    0
      _sass/vendor/font-awesome/_fixed-width.scss
  42. 506
    0
      _sass/vendor/font-awesome/_icons.scss
  43. 13
    0
      _sass/vendor/font-awesome/_larger.scss
  44. 19
    0
      _sass/vendor/font-awesome/_list.scss
  45. 20
    0
      _sass/vendor/font-awesome/_mixins.scss
  46. 14
    0
      _sass/vendor/font-awesome/_path.scss
  47. 9
    0
      _sass/vendor/font-awesome/_rotated-flipped.scss
  48. 32
    0
      _sass/vendor/font-awesome/_spinning.scss
  49. 20
    0
      _sass/vendor/font-awesome/_stacked.scss
  50. 515
    0
      _sass/vendor/font-awesome/_variables.scss
  51. 17
    0
      _sass/vendor/font-awesome/font-awesome.scss
  52. 46
    0
      _sass/vendor/magnific-popup/_settings.scss
  53. 645
    0
      _sass/vendor/magnific-popup/magnific-popup.scss
  54. 9
    0
      _templates/archive
  55. 9
    0
      _templates/page
  56. 10
    0
      _templates/post
  57. 2
    3
      about/index.md
  58. 3
    4
      articles/index.md
  59. 0
    25
      assets/css/main.min.css
  60. 27
    0
      assets/css/main.scss
  61. BIN
      assets/fonts/FontAwesome.otf
  62. BIN
      assets/fonts/fontawesome-webfont.eot
  63. 471
    306
      assets/fonts/fontawesome-webfont.svg
  64. BIN
      assets/fonts/fontawesome-webfont.ttf
  65. BIN
      assets/fonts/fontawesome-webfont.woff
  66. 1
    1
      assets/js/_main.js
  67. 104
    81
      assets/js/plugins/jquery.magnific-popup.js
  68. 2
    2
      assets/js/scripts.min.js
  69. 8
    0
      assets/js/vendor/html5shiv.min.js
  70. 0
    4
      assets/js/vendor/modernizr-2.6.2.custom.min.js
  71. 4
    0
      assets/js/vendor/modernizr-2.7.1.custom.min.js
  72. 3
    0
      assets/js/vendor/respond.min.js
  73. 0
    1471
      assets/less/font-awesome.less
  74. 0
    47
      assets/less/grid.less
  75. 0
    454
      assets/less/magnific-popup.less
  76. 0
    33
      assets/less/main.less
  77. 0
    305
      assets/less/mixins.less
  78. 0
    66
      assets/less/site.less
  79. 0
    31
      assets/less/variables.less
  80. 11
    0
      blog/index.md
  81. BIN
      images/bio-photo-2.jpg
  82. 1
    2
      index.html
  83. 0
    1
      package.json
  84. 0
    28
      post.thor
  85. 1
    0
      search.json
  86. 1
    2
      tags/index.md
  87. 0
    293
      theme-setup.md
  88. 326
    0
      theme-setup/index.md

+ 2
- 1
.gitignore View File

@@ -4,4 +4,5 @@ _site
4 4
 *.sublime-workspace
5 5
 codekit-config.json
6 6
 node_modules
7
-Gemfile.lock
7
+Gemfile.lock
8
+.sass-cache

+ 1
- 0
Gemfile View File

@@ -2,6 +2,7 @@ source 'https://rubygems.org'
2 2
 
3 3
 gem 'jekyll'
4 4
 gem 'jekyll-sitemap'
5
+gem 'octopress', '~> 3.0.0.rc.12'
5 6
 
6 7
 group :test do
7 8
   gem 'html-proofer'

+ 0
- 22
Gruntfile.js View File

@@ -13,19 +13,6 @@ module.exports = function(grunt) {
13 13
         '!assets/js/scripts.min.js'
14 14
       ]
15 15
     },
16
-    recess: {
17
-      dist: {
18
-        options: {
19
-          compile: true,
20
-          compress: true
21
-        },
22
-        files: {
23
-          'assets/css/main.min.css': [
24
-            'assets/less/main.less'
25
-          ]
26
-        }
27
-      }
28
-    },
29 16
     uglify: {
30 17
       dist: {
31 18
         files: {
@@ -61,12 +48,6 @@ module.exports = function(grunt) {
61 48
       }
62 49
     },
63 50
     watch: {
64
-      less: {
65
-        files: [
66
-          'assets/less/*.less'
67
-        ],
68
-        tasks: ['recess']
69
-      },
70 51
       js: {
71 52
         files: [
72 53
           '<%= jshint.all %>'
@@ -76,7 +57,6 @@ module.exports = function(grunt) {
76 57
     },
77 58
     clean: {
78 59
       dist: [
79
-        'assets/css/main.min.css',
80 60
         'assets/js/scripts.min.js'
81 61
       ]
82 62
     }
@@ -87,14 +67,12 @@ module.exports = function(grunt) {
87 67
   grunt.loadNpmTasks('grunt-contrib-jshint');
88 68
   grunt.loadNpmTasks('grunt-contrib-uglify');
89 69
   grunt.loadNpmTasks('grunt-contrib-watch');
90
-  grunt.loadNpmTasks('grunt-recess');
91 70
   grunt.loadNpmTasks('grunt-contrib-imagemin');
92 71
   grunt.loadNpmTasks('grunt-svgmin');
93 72
 
94 73
   // Register tasks
95 74
   grunt.registerTask('default', [
96 75
     'clean',
97
-    'recess',
98 76
     'uglify',
99 77
     'imagemin',
100 78
     'svgmin'

+ 8
- 134
README.md View File

@@ -7,150 +7,24 @@ Looking for a simple, responsive, theme for your Jekyll powered blog? Well look
7 7
 ## So Simple Theme is all about:
8 8
 
9 9
 * Responsive templates. Looking good on mobile, tablet, and desktop.
10
-* Readable typography to make your words shine.
11 10
 * Gracefully degrading in older browsers. Compatible with Internet Explorer 9+ and all modern browsers.
12 11
 * Minimal embellishments and subtle animations.
13
-* Support for large images to call out your favorite posts.
14
-* Disqus comments if you choose to enable.
15
-* Tags for [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) for a better social sharing experience.
16
-* Vanilla [custom 404 page]({{ site.url }}/404.html) to get you started.
17
-* Stylesheets for Pygments and Coderay [syntax highlighting](http://mmistakes.github.io/articles/so-simple-theme/code-highlighting-post/) to make your code examples look snazzy.
18
-* Simple search that overlays results based on post title.
19
-* Grunt build script for easier theme development.
20
-* [Sitemap](https://github.com/mmistakes/so-simple-theme/blob/master/sitemap.xml) for search engines
12
+* Optional large feature images for posts and pages.
13
+* [Custom 404 page](http://mmistakes.github.io/so-simple-theme/404.html) to get you started.
14
+* [Simple site search](https://github.com/christian-fei/Simple-Jekyll-Search)
15
+* Support for Disqus Comments
21 16
 
22 17
 ![screenshot of So Simple Theme](http://mmistakes.github.io/so-simple-theme/images/so-simple-theme-preview.jpg)
23 18
 
24
-General notes and suggestions for customizing So Simple Theme.
19
+See a [live version of So Simple](http://mmistakes.github.io/so-simple-theme/) hosted on GitHub.
25 20
 
26 21
 ---
27 22
 
28
-## Basic Setup for new Jekyll site
23
+## Getting Started
29 24
 
30
-1. [Install Bundler](http://bundler.io) `gem install bundler` and then install [Jekyll](http://jekyllrb.com) and all dependencies `bundle install`.
31
-2. Fork the [So Simple Theme repo](https://github.com/mmistakes/so-simple-theme/fork).
32
-3. Clone the repo you just forked and rename it.
33
-4. Edit `_config.yml` to personalize your site.
34
-5. Check out the sample posts in `_posts` to see examples for pulling in large feature images, assigning categories and tags, and other YAML data.
35
-6. Read the documentation below for further customization pointers and documentation.
36
-
37
-[Demo the Theme](http://mmistakes.github.io/so-simple-theme/)
38
-
39
-**Pro-tip:** Remove the sample posts in `_posts` and the `gh-pages` branch after cloning. There is a bunch of garbage in the `gh-pages` branch used for the theme's demo site.
40
-
41
----
42
-
43
-## Setup for Existing Jekyll site
44
-
45
-1. Clone the following folders: `_includes`, `_layouts`, `assets`, and `images`.
46
-2. Clone the following files and personalize content as need: `about.md`, `articles.html`, `index.html`, `tags.html`, `feed.xml`, and `sitemap.xml`.
47
-3. Set the following variables in your `config.yml` file:
48
-
49
-``` yaml
50
-title:            
51
-description:      
52
-logo:             
53
-disqus_shortname: 
54
-search:           true
55
-# Your site's domain goes here. When working locally use localhost server
56
-# PS. If you set this wrong stylesheets and scripts won't load and most links will break.
57
-# PPS. If you leave it blank for local testing home links won't work, they'll be fine for live domains though.
58
-url:              http://localhost:4000
59
-
60
-# Owner/author information
61
-owner:
62
-  name:           
63
-  avatar:         
64
-  email:          
65
-  # Social networking links used in footer. Update and remove as you like.
66
-  twitter:
67
-  facebook:
68
-  github:
69
-  linkedin:
70
-  instagram:
71
-  tumblr:
72
-  # For Google Authorship https://plus.google.com/authorship
73
-  google_plus:    "http://plus.google.com/123123123123132123"
74
-
75
-# Analytics and webmaster tools stuff goes here
76
-google_analytics:
77
-google_verify:
78
-# https://ssl.bing.com/webmaster/configure/verify/ownership Option 2 content= goes here
79
-bing_verify:
80
-
81
-# Links to include in top navigation
82
-# For external links add external: true
83
-links:
84
-  - title: About
85
-    url: /about
86
-  - title: Articles
87
-    url: /articles
88
-  - title: Google
89
-    url: http://google.com
90
-    external: true
91
-
92
-highlighter:  pygments
93
-markdown:     kramdown
94
-
95
-gems:
96
-  - jekyll-sitemap
97
-
98
-# https://github.com/mojombo/jekyll/wiki/Permalinks
99
-permalink:   /:categories/:title/
100
-```
101
-
102
----
103
-
104
-## Folder Structure
105
-
106
-``` bash
107
-so-simple-theme/
108
-├── _includes/
109
-|    ├── browser-upgrade.html  #prompt to upgrade browser on < IE8
110
-|    ├── footer.html  #site footer
111
-|    ├── head.html  #site head
112
-|    ├── navigation.html #site navigation and masthead
113
-|    └── scripts.html  #jQuery, plugins, GA, etc.
114
-├── _layouts/
115
-|    ├── page.html  #page layout
116
-|    └── post.html  #post layout
117
-├── _posts/
118
-├── assets/
119
-|    ├── css/  #preprocessed less styles
120
-|    ├── fonts/  #icon webfonts
121
-|    ├── js/
122
-|    |   ├── _main.js  #main JavaScript file, plugin settings, etc
123
-|    |   ├── plugins  #jQuery plugins
124
-|    |   └── vendor/  #jQuery and Modernizr
125
-|    └── less/
126
-├── images  #images for posts and pages
127
-├── _config.yml  #Jekyll site options
128
-├── about.md  #about page
129
-├── articles.html  #lists all posts from latest to oldest
130
-├── index.html  #homepage. lists 10 latest posts
131
-└── tags.html  #lists all posts sorted by tag
132
-```
133
-
134
----
135
-
136
-## Customization
137
-
138
-For full customization details and more information on the theme check out the [So Simple theme setup guide](http://mmistakes.github.io/so-simple-theme/theme-setup/).
139
-
140
----
141
-
142
-## Questions?
143
-
144
-Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter [@mmistakes](http://twitter.com/mmistakes) or [file a GitHub Issue](https://github.com/mmistakes/so-simple-theme/issues/new).
145
-
146
----
147
-
148
-## License
149
-
150
-This theme is free and open source software, distributed under the MIT License. So feel free to to modify this theme to suit your needs.
151
-
152
-If you'd like to give me credit somewhere on your blog or tweet a shout out to [@mmistakes](https://twitter.com/mmistakes), that would be pretty sweet.
25
+So Simple takes advantage of Sass and data files to make customizing easier. These features require Jekyll 2.x and will not work with older versions of Jekyll.
153 26
 
27
+To learn how to install and use this theme check out the [Setup Guide](http://mmistakes.github.io/so-simple-theme/theme-setup/) for more information.
154 28
 
155 29
 [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/mmistakes/so-simple-theme/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
156 30
 

+ 0
- 88
Rakefile.rb View File

@@ -1,88 +0,0 @@
1
-require "rubygems"
2
-require "bundler/setup"
3
-require "stringex"
4
-
5
-## -- Config -- ##
6
-
7
-posts_dir       = "_posts"    # directory for blog files
8
-new_post_ext    = "md"  # default new post file extension when using the new_post task
9
-new_page_ext    = "md"  # default new page file extension when using the new_page task
10
-
11
-
12
-#############################
13
-# Create a new Post or Page #
14
-#############################
15
-
16
-# usage rake new_post
17
-desc "Create a new post in #{posts_dir}"
18
-task :new_post, :title do |t, args|
19
-  if args.title
20
-    title = args.title
21
-  else
22
-    title = get_stdin("Enter a title for your post: ")
23
-  end
24
-  filename = "#{posts_dir}/#{Time.now.strftime('%Y-%m-%d')}-#{title.to_url}.#{new_post_ext}"
25
-  if File.exist?(filename)
26
-    abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
27
-  end
28
-  tags = get_stdin("Enter tags to classify your post (comma separated): ")
29
-  puts "Creating new post: #{filename}"
30
-  open(filename, 'w') do |post|
31
-    post.puts "---"
32
-    post.puts "layout: post"
33
-    post.puts "title: \"#{title.gsub(/&/,'&amp;')}\""
34
-    post.puts "modified: #{Time.now.strftime('%Y-%m-%d %H:%M:%S %z')}"
35
-    post.puts "tags: [#{tags}]"
36
-    post.puts "image:"
37
-    post.puts "  feature: "
38
-    post.puts "  credit: "
39
-    post.puts "  creditlink: "
40
-    post.puts "comments: "
41
-    post.puts "share: "
42
-    post.puts "---"
43
-  end
44
-end
45
-
46
-# usage rake new_page
47
-desc "Create a new page"
48
-task :new_page, :title do |t, args|
49
-  if args.title
50
-    title = args.title
51
-  else
52
-    title = get_stdin("Enter a title for your page: ")
53
-  end
54
-  filename = "#{title.to_url}.#{new_page_ext}"
55
-  if File.exist?(filename)
56
-    abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
57
-  end
58
-  tags = get_stdin("Enter tags to classify your page (comma separated): ")
59
-  puts "Creating new page: #{filename}"
60
-  open(filename, 'w') do |page|
61
-    page.puts "---"
62
-    page.puts "layout: page"
63
-    page.puts "permalink: /#{title.to_url}/"
64
-    page.puts "title: \"#{title}\""
65
-    page.puts "modified: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
66
-    page.puts "tags: [#{tags}]"
67
-    page.puts "image:"
68
-    page.puts "  feature: "
69
-    page.puts "  credit: "
70
-    page.puts "  creditlink: "
71
-    page.puts "share: "
72
-    page.puts "---"
73
-  end
74
-end
75
-
76
-def get_stdin(message)
77
-  print message
78
-  STDIN.gets.chomp
79
-end
80
-
81
-def ask(message, valid_options)
82
-  if valid_options
83
-    answer = get_stdin("#{message} #{valid_options.to_s.gsub(/"/, '').gsub(/, /,'/')} ") while !valid_options.include?(answer)
84
-  else
85
-    answer = get_stdin(message)
86
-  end
87
-  answer
88
-end

+ 37
- 55
_config.yml View File

@@ -1,58 +1,24 @@
1
-title:            Site Title
2
-description:      Describe your website here.
3
-logo:             site-logo.png
4
-disqus_shortname:
5
-search:           true
6
-# Change url to your domain. Leave localhost server or blank when working locally.
7
-# You don't need to specify the protocol if you want it available on http and https. Example: //localhost:4000
8
-# url:              http://localhost:4000
1
+# Site wide configuration
9 2
 
10
-# Owner/author information
11
-owner:
12
-  name:           Your Name
13
-  avatar:         bio-photo.jpg
14
-  email:          you@email.com
15
-  # Social networking links used in footer. Update and remove as you like.
16
-  twitter:
17
-  facebook:
18
-  github:
19
-  stackexchange:
20
-  linkedin:
21
-  instagram:
22
-  flickr:
23
-  tumblr:
24
-  # For Google Authorship https://plus.google.com/authorship
25
-  google_plus:
3
+title: Site Title
4
+locale: en_US
5
+description: Describe your website here.
6
+logo: site-logo.png
7
+search: true
8
+url: http://localhost:4000
26 9
 
27
-# Analytics and webmaster tools stuff goes here
28
-google_analytics:
29
-google_verify:
30
-# https://ssl.bing.com/webmaster/configure/verify/ownership Option 2 content= goes here
31
-bing_verify:
32 10
 
33
-# Links to include in top navigation
34
-# For external links add external: true
35
-links:
36
-  - title: About
37
-    url: /about/
38
-  - title: Articles
39
-    url: /articles/
40
-  - title: Theme Setup
41
-    url: /theme-setup/
42
-  - title: Made Mistakes
43
-    url: http://mademistakes.com
44
-    external: true
11
+# Jekyll configuration
45 12
 
46
-future:      true
47
-highlighter: pygments
13
+permalink:   /:categories/:title/
48 14
 markdown:    kramdown
49
-
15
+highlighter: pygments
16
+sass:
17
+  sass_dir: _sass
18
+  style: compressed
50 19
 gems:
51 20
   - jekyll-sitemap
52 21
 
53
-# https://github.com/mojombo/jekyll/wiki/Permalinks
54
-permalink:   /:categories/:title/
55
-
56 22
 kramdown:
57 23
   auto_ids: true
58 24
   footnote_nr: 1
@@ -60,12 +26,28 @@ kramdown:
60 26
   toc_levels: 1..6
61 27
   use_coderay: false
62 28
 
63
-  coderay:
64
-    coderay_line_numbers:
65
-    coderay_line_numbers_start: 1
66
-    coderay_tab_width: 4
67
-    coderay_bold_every: 10
68
-    coderay_css: class
69
-
70 29
 include: [".htaccess"]
71
-exclude: ["lib", "config.rb", "Gemfile", "Capfile", "README.md", "LICENSE", "Gemfile.lock", "config", "log", "Rakefile", "Rakefile.rb", "tmp", "less", "*.sublime-project", "*.sublime-workspace", "test", "spec", "Gruntfile.js", "package.json", "node_modules", "vendor"]
30
+exclude: ["lib", "config.rb", "Capfile", "config", "log", "Rakefile", "Rakefile.rb", "tmp", "less", "*.sublime-project", "*.sublime-workspace", "test", "spec", "Gruntfile.js", "package.json", "node_modules", "Gemfile", "Gemfile.lock", "LICENSE", "README.md"]
31
+
32
+
33
+# Site owner
34
+owner:
35
+  name: Your Name
36
+  avatar: bio-photo.jpg
37
+  email: you@email.com
38
+  disqus-shortname:
39
+  twitter:
40
+  facebook:
41
+  github:
42
+  stackexchange:
43
+  linkedin:
44
+  instagram:
45
+  flickr:
46
+  tumblr:
47
+  google:
48
+    plus:
49
+    analytics:
50
+    verify:
51
+    ad-client: 
52
+    ad-slot:
53
+  bing-verify:

+ 20
- 0
_data/authors.yml View File

@@ -0,0 +1,20 @@
1
+# Authors
2
+
3
+billy_rick:
4
+  name: Billy Rick
5
+  web: http://thewhip.com
6
+  email: billy@rick.com
7
+  bio: "What do you want, jewels? I am a very extravagant man."
8
+  avatar: bio-photo-2.jpg
9
+  twitter: extravagantman
10
+  google:
11
+    plus: +BillyRick
12
+
13
+cornelius_fiddlebone:
14
+  name: Cornelius Fiddlebone
15
+  email: cornelius@thewhip.com
16
+  bio: "I ordered what?"
17
+  avatar: bio-photo.jpg
18
+  twitter: rhymeswithsackit
19
+  google:
20
+    plus: +CorneliusFiddlebone

+ 16
- 0
_data/navigation.yml View File

@@ -0,0 +1,16 @@
1
+# Site navigation links
2
+
3
+- title: About
4
+  url: /about/
5
+
6
+- title: Articles
7
+  url: /articles/
8
+
9
+- title: Blog
10
+  url: /blog/
11
+
12
+- title: Theme Setup
13
+  url: /theme-setup/
14
+
15
+- title: Made Mistakes
16
+  url: http://mademistakes.com

+ 4
- 2
_includes/disqus_comments.html View File

@@ -1,6 +1,7 @@
1
+{% if site.owner.disqus-shortname %}
1 2
 <script type="text/javascript">
2 3
     /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
3
-    var disqus_shortname = '{{ site.disqus_shortname }}'; // required: replace example with your forum shortname
4
+    var disqus_shortname = '{{ site.owner.disqus-shortname }}'; // required: replace example with your forum shortname
4 5
 
5 6
     /* * * DON'T EDIT BELOW THIS LINE * * */
6 7
     (function() {
@@ -18,4 +19,5 @@
18 19
     }());
19 20
 </script>
20 21
 <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
21
-<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
22
+<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
23
+{% endif %}

+ 10
- 9
_includes/footer.html View File

@@ -1,12 +1,13 @@
1 1
 <span>&copy; {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com">Jekyll</a> using the <a href="http://mademistakes.com/so-simple/">So Simple Theme</a>.</span>
2 2
 <div class="social-icons">
3
-	{% if site.owner.twitter %}<a href="http://twitter.com/{{ site.owner.twitter }}" title="{{ site.owner.name}} on Twitter" target="_blank"><i class="icon-twitter icon-2x"></i></a>{% endif %}
4
-	{% if site.owner.facebook %}<a href="http://facebook.com/{{ site.owner.facebook }}" title="{{ site.owner.name}} on Facebook" target="_blank"><i class="icon-facebook icon-2x"></i></a>{% endif %}
5
-	{% if site.owner.google_plus %}<a href="{{ site.owner.google_plus }}" title="{{ site.owner.name}} on Google+" target="_blank"><i class="icon-google-plus icon-2x"></i></a>{% endif %}
6
-	{% if site.owner.linkedin %}<a href="http://linkedin.com/in/{{ site.owner.linkedin }}" title="{{ site.owner.name}} on LinkedIn" target="_blank"><i class="icon-linkedin icon-2x"></i></a>{% endif %}
7
-	{% if site.owner.stackexchange %}<a href="{{ site.owner.stackexchange }}" title="{{ site.owner.name}} on StackExchange" target="_blank"><i class="icon-stackexchange icon-2x"></i></a>{% endif %}
8
-	{% if site.owner.instagram %}<a href="http://instagram.com/{{ site.owner.instagram }}" title="{{ site.owner.name}} on Instagram" target="_blank"><i class="icon-instagram icon-2x"></i></a>{% endif %}
9
-	{% if site.owner.flickr %}<a href="http://www.flickr.com/photos/{{ site.owner.flickr }}" title="{{ site.owner.name}} on Flickr" target="_blank"><i class="icon-flickr icon-2x"></i></a>{% endif %}
10
-	{% if site.owner.github %}<a href="http://github.com/{{ site.owner.github }}" title="{{ site.owner.name}} on Github" target="_blank"><i class="icon-github icon-2x"></i></a>{% endif %}
11
-	{% if site.owner.tumblr %}<a href="http://{{ site.owner.tumblr }}.tumblr.com" title="{{ site.owner.name}} on Tumblr" target="_blank"><i class="icon-tumblr icon-2x"></i></a>{% endif %}
3
+	{% if site.owner.twitter %}<a href="http://twitter.com/{{ site.owner.twitter }}" title="{{ site.owner.name}} on Twitter" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a>{% endif %}
4
+	{% if site.owner.facebook %}<a href="http://facebook.com/{{ site.owner.facebook }}" title="{{ site.owner.name}} on Facebook" target="_blank"><i class="fa fa-facebook-square fa-2x"></i></a>{% endif %}
5
+	{% if site.owner.google.plus %}<a href="{{ site.owner.google.plus }}" title="{{ site.owner.name}} on Google+" target="_blank"><i class="fa fa-google-plus-square fa-2x"></i></a>{% endif %}
6
+	{% if site.owner.linkedin %}<a href="http://linkedin.com/in/{{ site.owner.linkedin }}" title="{{ site.owner.name}} on LinkedIn" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>{% endif %}
7
+	{% if site.owner.stackexchange %}<a href="{{ site.owner.stackexchange }}" title="{{ site.owner.name}} on StackExchange" target="_blank"><i class="fa fa-stack-exchange fa-2x"></i></a>{% endif %}
8
+	{% if site.owner.instagram %}<a href="http://instagram.com/{{ site.owner.instagram }}" title="{{ site.owner.name}} on Instagram" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>{% endif %}
9
+	{% if site.owner.flickr %}<a href="http://www.flickr.com/photos/{{ site.owner.flickr }}" title="{{ site.owner.name}} on Flickr" target="_blank"><i class="fa fa-flickr fa-2x"></i></a>{% endif %}
10
+	{% if site.owner.github %}<a href="http://github.com/{{ site.owner.github }}" title="{{ site.owner.name}} on Github" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>{% endif %}
11
+	{% if site.owner.tumblr %}<a href="http://{{ site.owner.tumblr }}.tumblr.com" title="{{ site.owner.name}} on Tumblr" target="_blank"><i class="fa fa-tumblr-square fa-2x"></i></a>{% endif %}
12
+  <a href="{{ site.url }}/feed.xml" title="Atom/RSS feed"><i class="fa fa-rss-square fa-2x"></i></a>
12 13
 </div><!-- /.social-icons -->

+ 17
- 24
_includes/head.html View File

@@ -1,34 +1,21 @@
1 1
 <meta charset="utf-8">
2 2
 <title>{% if page.title %}{{ page.title }} &#8211; {% endif %}{{ site.title }}</title>
3
-<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
3
+{% if page.excerpt %}<meta name="description" content="{{ page.excerpt | strip_html }}">{% endif %}
4 4
 {% if page.tags %}<meta name="keywords" content="{{ page.tags | join: ', ' }}">{% endif %}
5
-
6
-{% if site.owner.twitter %}<!-- Twitter Cards -->
7
-{% if page.image.feature %}<meta name="twitter:card" content="summary_large_image">
8
-<meta name="twitter:image" content="{{ site.url }}/images/{{ page.image.feature }}">
9
-{% else %}<meta name="twitter:card" content="summary">
10
-<meta name="twitter:image" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/{{ site.logo }}{% endif %}">{% endif %}
11
-<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
12
-<meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
13
-<meta name="twitter:site" content="@{{ site.owner.twitter }}">
14
-{% if page.author.twitter %}<meta name="twitter:creator" content="@{{ page.author.twitter }}">{% endif %}
5
+{% if page.author %}
6
+  {% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.owner %}
15 7
 {% endif %}
16 8
 
17
-<!-- Open Graph -->
18
-<meta property="og:locale" content="en_US">
19
-<meta property="og:type" content="article">
20
-<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
21
-<meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
22
-<meta property="og:url" content="{{ site.url }}{{ page.url }}">
23
-<meta property="og:site_name" content="{{ site.title }}">
9
+{% include open-graph.html %}
24 10
 
25
-{% if site.google_verify %}<meta name="google-site-verification" content="{{ site.google_verify }}">{% endif %}
26
-{% if site.bing_verify %}<meta name="msvalidate.01" content="{{ site.bing_verify }}">{% endif %}
11
+{% if site.owner.google.verify %}<!-- Webmaster Tools verfication -->
12
+<meta name="google-site-verification" content="{{ site.owner.google.verify }}">{% endif %}
13
+{% if site.owner.bing-verify %}<meta name="msvalidate.01" content="{{ site.owner.bing-verify }}">{% endif %}
27 14
 
28 15
 {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %}
29 16
 <link rel="canonical" href="{{ canonical }}">
30 17
 <link href="{{ site.url }}/feed.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
31
-{% if site.owner.google_plus %}<link rel="author" href="{{ site.owner.google_plus }}?rel=author">{% endif %}
18
+{% if site.owner.google.plus %}<link rel="author" href="http://plus.google.com/+{{ site.owner.google.plus }}?rel=author">{% endif %}
32 19
 
33 20
 <!-- http://t.co/dKP3o1e -->
34 21
 <meta name="HandheldFriendly" content="True">
@@ -36,14 +23,20 @@
36 23
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
37 24
 
38 25
 <!-- For all browsers -->
39
-<link rel="stylesheet" href="{{ site.url }}/assets/css/main.min.css">
26
+<link rel="stylesheet" href="{{ site.url }}/assets/css/main.css">
40 27
 <!-- Webfonts -->
41 28
 <script src="//use.edgefonts.net/source-sans-pro:n2,i2,n3,i3,n4,i4,n6,i6,n7,i7,n9,i9;source-code-pro:n4,n7;volkhov.js"></script>
42 29
 
43 30
 <meta http-equiv="cleartype" content="on">
44 31
 
45
-<!-- Load Modernizr -->
46
-<script src="{{ site.url }}/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>
32
+<!-- HTML5 Shiv and Media Query Support -->
33
+<!--[if lt IE 9]>
34
+  <script src="{{ site.url }}/assets/js/vendor/html5shiv.min.js"></script>
35
+  <script src="{{ site.url }}/assets/js/vendor/respond.min.js"></script>
36
+<![endif]-->
37
+
38
+<!-- Modernizr -->
39
+<script src="{{ site.url }}/assets/js/vendor/modernizr-2.7.1.custom.min.js"></script>
47 40
 
48 41
 <!-- Icons -->
49 42
 <!-- 16x16 -->

+ 12
- 20
_includes/navigation.html View File

@@ -1,42 +1,34 @@
1 1
 <div class="navigation-wrapper">
2 2
 	<nav role="navigation" id="site-nav" class="animated drop">
3 3
 	    <ul>
4
-	        {% for link in site.links %}
5
-			<li>
6
-				{% if link.external %}
7
-					<a href="{{ link.url }}">{{ link.title }}</a>
8
-				{% else %}
9
-					<a href="{{ site.url }}{{ link.url }}">{{ link.title }}</a>
10
-				{% endif %} 
11
-			</li>
12
-	        {% endfor %}
13
-	        <li><a href="{{ site.url }}/feed.xml" title="Atom/RSS feed"><i class="icon-rss"></i> Feed</a></li>
14
-	        {% if site.search %}<li class="dosearch"><i class="icon-search"></i> Search</li>{% endif %}
4
+      {% for link in site.data.navigation %}
5
+		    {% if link.url contains 'http' %}
6
+		        {% assign domain = '' %}
7
+		        {% else %}
8
+		        {% assign domain = site.url %}
9
+		    {% endif %}
10
+		    <li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
11
+		  {% endfor %}
12
+        {% if site.search %}<li class="dosearch"><i class="fa fa-search"></i> Search</li>{% endif %}
15 13
 	    </ul>
16 14
 	</nav>
17 15
 </div><!-- /.navigation-wrapper -->
18 16
 
19 17
 {% include browser-upgrade.html %}
20 18
 
21
-{% if site.search %}<div class="search-wrapper">
22
-	<div class="search-form">
23
-		<input type="text" class="search-field" placeholder="Search...">
24
-		<i class="icon-remove-sign icon-2x"></i>
25
-		<ul class="search-results post-list"></ul><!-- /.search-results -->
26
-	</div><!-- /.search-form -->
27
-</div><!-- ./search-wrapper -->{% endif %}
19
+{% if site.search %}{% include site-search.html %}{% endif %}
28 20
 
29 21
 {% if page.image.feature %}<header class="masthead">
30 22
 	{% if site.logo != null %}
31 23
 		<div class="wrap">
32
-			<a href="{{ site.url }}/" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated bounceInDown"></a>
24
+			<a href="{{ site.url }}" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated bounceInDown"></a>
33 25
 		</div>
34 26
 	{% endif %}
35 27
 </header><!-- /.masthead -->
36 28
 {% else %}<header class="masthead">
37 29
 	<div class="wrap">
38 30
         {% if site.logo != null %}
39
-    		<a href="{{ site.url }}/" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInUp"></a>
31
+    		<a href="{{ site.url }}" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInUp"></a>
40 32
         {% endif %}
41 33
         <h1 class="site-title animated fadeIn"><a href="{{ site.url }}/">{{ site.title }}</a></h1>
42 34
 		<h2 class="site-description animated fadeIn" itemprop="description">{{ site.description }}</h2>

+ 19
- 0
_includes/open-graph.html View File

@@ -0,0 +1,19 @@
1
+<!-- Twitter Cards -->
2
+<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
3
+{% if page.excerpt %}<meta name="twitter:description" content="{{ page.excerpt | strip_html }}">{% endif %}
4
+{% if site.owner.twitter %}<meta name="twitter:site" content="@{{ site.owner.twitter }}">{% endif %}
5
+{% if author.twitter %}<meta name="twitter:creator" content="@{{ author.twitter }}">{% endif %}
6
+{% if page.image.feature %}
7
+<meta name="twitter:card" content="summary_large_image">
8
+<meta name="twitter:image" content="{{ site.url }}/images/{{ page.image.feature }}">
9
+{% else %}
10
+<meta name="twitter:card" content="summary">
11
+<meta name="twitter:image" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/{{ site.logo }}{% endif %}">
12
+{% endif %}
13
+<!-- Open Graph -->
14
+<meta property="og:locale" content="{{ site.locale }}">
15
+<meta property="og:type" content="article">
16
+<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
17
+{% if page.excerpt %}<meta property="og:description" content="{{ page.excerpt | strip_html }}">{% endif %}
18
+<meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.url }}">
19
+<meta property="og:site_name" content="{{ site.title }}">

+ 7
- 4
_includes/scripts.html View File

@@ -16,7 +16,7 @@
16 16
   (function( $, window, undefined ) {
17 17
     
18 18
      var bs = {
19
-          close: $(".icon-remove-sign"),
19
+          close: $(".close-btn"),
20 20
           searchform: $(".search-form"),
21 21
           canvas: $("body"),
22 22
           dothis: $('.dosearch')
@@ -37,14 +37,14 @@
37 37
   })( jQuery, window );
38 38
 </script>
39 39
 {% endif %}
40
-{% if site.google_analytics %}
40
+{% if site.owner.google.analytics %}
41 41
 <!-- Asynchronous Google Analytics snippet -->
42 42
 <script>
43 43
   var _gaq = _gaq || [];
44 44
   var pluginUrl = 
45 45
  '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
46 46
   _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
47
-  _gaq.push(['_setAccount', '{{ site.google_analytics }}']);
47
+  _gaq.push(['_setAccount', '{{ site.owner.google.analytics }}']);
48 48
   _gaq.push(['_trackPageview']);
49 49
 
50 50
   (function() {
@@ -54,4 +54,7 @@
54 54
   })();
55 55
 </script>
56 56
 {% endif %}
57
-{% if site.disqus_shortname and page.comments %}{% include disqus_comments.html %}{% endif %}
57
+
58
+{% if page.comments %}
59
+  {% include disqus_comments.html %}
60
+{% endif %}

+ 7
- 0
_includes/site-search.html View File

@@ -0,0 +1,7 @@
1
+<div class="search-wrapper">
2
+  <div class="search-form">
3
+    <input type="text" class="search-field" placeholder="Search...">
4
+    <button class="close-btn"><i class="fa fa-times-circle fa-2x"></i></button>
5
+    <ul class="search-results post-list"></ul><!-- /.search-results -->
6
+  </div><!-- /.search-form -->
7
+</div><!-- ./search-wrapper -->

+ 24
- 28
_layouts/post.html View File

@@ -24,47 +24,43 @@
24 24
         {% endif %}
25 25
       </header>
26 26
       <footer class="entry-meta">
27
-        {% if page.author.name %}
28
-        {% if page.author.avatar %}
29
-        <img src="{{ site.url }}/images/{{ page.author.avatar }}" alt="{{ page.author.name }} photo" class="author-photo">
30
-        {% else %}
31
-        <img src="{{ site.url }}/images/bio-photo-alt.jpg" alt="{{ page.author.name }} photo" class="author-photo">
27
+        {% if page.author %}
28
+          {% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.owner %}
32 29
         {% endif %}
33
-        <span class="author vcard">By <span class="fn">{{ page.author.name }}</span></span>
34
-        {% else %}
35
-        {% if site.owner.avatar %}
36
-        <img src="{{ site.url }}/images/{{ site.owner.avatar }}" alt="{{ site.owner.name }} photo" class="author-photo">
30
+        {% if author.avatar contains 'http' %}
31
+          <img src="{{ author.avatar }}" class="bio-photo" alt="{{ author.name }} bio photo"></a>
37 32
         {% else %}
38
-        <img src="{{ site.url }}/images/bio-photo-alt.jpg" alt="{{ site.owner.name }} photo" class="author-photo">
39
-        {% endif %}
40
-        <span class="author vcard">By <span class="fn"><a href="{{ site.url }}/about/" title="About {{ site.owner.name }}">{{ site.owner.name }}</a></span></span>
33
+          <img src="{{ site.url }}/images/{{ author.avatar }}" class="bio-photo" alt="{{ author.name }} bio photo"></a>
41 34
         {% endif %}
35
+        <span class="author vcard">By <span class="fn">{{ author.name }}</span></span>
42 36
         <span class="entry-date date published"><time datetime="{{ page.date | date_to_xmlschema }}"><i class="icon-calendar-empty"></i> {{ page.date | date: "%B %d, %Y" }}</time></span>
43 37
         {% if page.modified %}<span class="entry-date date modified"><time datetime="{{ page.modified }}"><i class="icon-pencil"></i> {{ page.modified | date: "%B %d, %Y" }}</time></span>{% endif %}
44
-        {% if site.disqus_shortname and page.comments %}<span class="entry-comments"><i class="icon-comment-alt"></i> <a href="#disqus_thread">Comment</a></span>{% endif %}
45
-        <span><a href="{{ site.url }}{{ page.url }}" rel="bookmark" title="{{ page.title }}"><i class="icon-link"></i> Permalink</a></span>
38
+        {% if site.owner.disqus-shortname and page.comments == true %}<span class="entry-comments"><i class="fa fa-comment-o"></i> <a href="#disqus_thread">Comment</a></span>{% endif %}
46 39
         {% if page.share %}
47
-        <span class="social-share-facebook">
48
-            <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" title="Share on Facebook" itemprop="Facebook"><i class="icon-facebook-sign"></i> Like</a></span>
49 40
         <span class="social-share-twitter">
50
-            <a href="https://twitter.com/intent/tweet?hashtags={{ page.tags | join: ',' | remove: ' ' }}&text={{ page.title | escape | replace:' ','%20' }}&url={{ site.url }}{{ page.url }}&via={{site.owner.twitter}}" title="Share on Twitter" itemprop="Twitter"><i class="icon-twitter-sign"></i> Tweet</a></span>
41
+          <a href="https://twitter.com/intent/tweet?hashtags={{ page.tags | join: ',' | remove: ' ' }}&text={{ page.title | escape | replace:' ','%20' }}&url={{ site.url }}{{ page.url }}{% if author.twitter %}&via={{ author.twitter }}{% endif %}" title="Share on Twitter" itemprop="Twitter"><i class="fa fa-twitter-square"></i> Tweet</a>
42
+        </span>
43
+        <span class="social-share-facebook">
44
+          <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" title="Share on Facebook" itemprop="Facebook"><i class="fa fa-facebook-square"></i> Like</a>
45
+        </span>
51 46
         <span class="social-share-googleplus">
52
-            <a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" title="Share on Google Plus" itemprop="GooglePlus"><i class="icon-google-plus-sign"></i> +1</a></span>
53
-            <!-- /.social-share -->{% endif %}
47
+          <a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" title="Share on Google Plus" itemprop="GooglePlus"><i class="fa fa-google-plus-square"></i> +1</a>
48
+        </span>
49
+        <!-- /.social-share -->{% endif %}
54 50
       </footer>
55 51
       <div class="entry-content">
56 52
         {{ content }}
57
-        {% if site.disqus_shortname and page.comments %}<div id="disqus_thread"></div><!-- /#disqus_thread -->{% endif %}
53
+        <nav class="pagination" role="navigation">
54
+          {% if page.previous %}
55
+            <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
56
+          {% endif %}
57
+          {% if page.next %}
58
+            <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
59
+          {% endif %}
60
+        </nav><!-- /.pagination -->
61
+        {% if site.owner.disqus-shortname and page.comments == true %}<div id="disqus_thread"></div><!-- /#disqus_thread -->{% endif %}
58 62
       </div><!-- /.entry-content -->
59 63
     </div><!-- /.entry-wrapper -->
60
-    <nav class="pagination" role="navigation">
61
-      {% if page.previous %}
62
-        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
63
-      {% endif %}
64
-      {% if page.next %}
65
-        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
66
-      {% endif %}
67
-    </nav><!-- /.pagination -->
68 64
   </article>
69 65
 </div><!-- /#main -->
70 66
 

+ 10
- 0
_octopress.yml View File

@@ -0,0 +1,10 @@
1
+# Default extensions
2
+post_ext: md
3
+page_ext: md
4
+
5
+# Found in _templates/
6
+post_layout: post
7
+page_layout: page
8
+
9
+# Format titles with titlecase?
10
+titlecase: true

+ 0
- 25
_posts/2014-06-19-author-override.md View File

@@ -1,25 +0,0 @@
1
----
2
-layout: post
3
-title: "Override Author Byline Test Post"
4
-description: "An article to test overriding the default site author."
5
-category: articles
6
-tags: [sample-post, readability, test]
7
-author:
8
-  name: Billy Rick
9
-  avatar: bio-photo-alt.jpg
10
-comments: true
11
-share: true
12
----
13
-
14
-For those of you who may have content written by multiple authors on your site, here's a new feature I added to So Simple.
15
-
16
-Traditionally you would assign a global author for the entire site and those attributes would be used in all post bylines, social networking links in the footer, Twitter Cards, and Google Authorship. These `owner` variables still work the same way when set in your `config.yml`, but now if you add an author variable to a post's YAML front matter, you can override a post's author byline.
17
-
18
-Let's say we have an author Billy Rick --- he wrote this post and we want his name and photo to appear on the page instead of whoever the default site author is. To do so we'd add the following YAML front matter.
19
-
20
-{% highlight yaml %}
21
-author:
22
-  name: Billy Rick
23
-  avatar: billy-photo.jpg    #place in /images
24
-  twitter: billyrick         #marked as a creator for Twitter Card links
25
-{% endhighlight %}

_posts/2011-03-10-sample-post.md → _posts/articles/2011-03-10-sample-post.md View File

@@ -1,9 +1,9 @@
1 1
 ---
2 2
 layout: post
3 3
 title: Sample Post
4
-description: "Just about everything you'll need to style in the theme: headings, paragraphs, blockquotes, tables, code blocks, and more."
4
+excerpt: "Just about everything you'll need to style in the theme: headings, paragraphs, blockquotes, tables, code blocks, and more."
5 5
 modified: 2013-05-31
6
-category: articles
6
+categories: articles
7 7
 tags: [sample-post]
8 8
 image:
9 9
   feature: so-simple-sample-image-1.jpg

_posts/2012-05-22-readability-post.md → _posts/articles/2012-05-22-readability-post.md View File

@@ -1,8 +1,8 @@
1 1
 ---
2 2
 layout: post
3 3
 title: "Testing Readability with a Bunch of Text"
4
-description: "A ton of text to test readability."
5
-category: articles
4
+excerpt: "A ton of text to test readability."
5
+categories: articles
6 6
 tags: [sample-post, readability, test, intro]
7 7
 image:
8 8
   feature: so-simple-sample-image-2.jpg

_posts/2013-05-22-sample-post-images.md → _posts/articles/2013-05-22-sample-post-images.md View File

@@ -1,8 +1,8 @@
1 1
 ---
2 2
 layout: post
3 3
 title: "A Post with Images"
4
-description: "Examples and code for displaying images in posts."
5
-category: articles
4
+excerpt: "Examples and code for displaying images in posts."
5
+categories: articles
6 6
 tags: [sample-post, images, test]
7 7
 comments: true
8 8
 share: true

_posts/2013-05-23-readability-feature-post.md → _posts/articles/2013-05-23-readability-feature-post.md View File

@@ -1,8 +1,8 @@
1 1
 ---
2 2
 layout: post
3 3
 title: "Post with Large Feature Image and Text"
4
-description: "Custom written post descriptions are the way to go... if you're not lazy."
5
-category: articles
4
+excerpt: "Custom written post descriptions are the way to go... if you're not lazy."
5
+categories: articles
6 6
 tags: [sample-post, readability]
7 7
 modified: 2013-06-30
8 8
 image:

_posts/2013-06-25-video-post.md → _posts/articles/2013-06-25-video-post.md View File

@@ -1,8 +1,8 @@
1 1
 ---
2 2
 layout: post
3 3
 title: "A Post with a Video"
4
-description: "Custom written post descriptions are the way to go... if you're not lazy."
5
-category: articles
4
+excerpt: "Custom written post descriptions are the way to go... if you're not lazy."
5
+categories: articles
6 6
 tags: [sample-post, video]
7 7
 comments: true
8 8
 share: true

_posts/2013-08-12-sample-link-post.md → _posts/articles/2013-08-12-sample-link-post.md View File

@@ -1,10 +1,9 @@
1 1
 ---
2 2
 layout: post
3 3
 title: "Sample Link Post"
4
-description: "Example and code for using link posts."
5
-category: articles
4
+excerpt: "Example and code for using link posts."
5
+categories: articles
6 6
 tags: [sample-post, link-post]
7
-comments: true
8 7
 link: http://mademistakes.com  
9 8
 ---
10 9
 

_posts/2013-08-16-code-highlighting-post.md → _posts/articles/2013-08-16-code-highlighting-post.md View File

@@ -1,8 +1,8 @@
1 1
 ---
2 2
 layout: post
3 3
 title: Syntax Highlighting Post
4
-description: "Demo post displaying the various ways of highlighting code in Markdown."
5
-category: articles
4
+excerpt: "Demo post displaying the various ways of highlighting code in Markdown."
5
+categories: articles
6 6
 tags: [sample-post, code, highlighting]
7 7
 image:
8 8
   feature: so-simple-sample-image-5.jpg

+ 45
- 0
_posts/articles/2014-06-19-author-override.md View File

@@ -0,0 +1,45 @@
1
+---
2
+layout: post
3
+title: "Override Author Byline Test Post"
4
+excerpt: "An article to test overriding the default site author."
5
+categories: articles
6
+tags: [sample-post, readability, test]
7
+author: billy_rick
8
+comments: true
9
+share: true
10
+---
11
+
12
+For those of you who may have content written by multiple authors on your site you can now assign different authors to each post if desired.
13
+
14
+Previously the theme used a global author for the entire site and those attributes would be used in all bylines, social networking links, Twitter Card attribution, and Google Authorship. These `owner` variables were defined in `config.yml`
15
+
16
+Start by modifying or creating a new `authors.yml` file in the `_data` folder and add your authors using the following format.
17
+
18
+{% highlight yaml %}
19
+# Authors
20
+
21
+billy_rick:
22
+  name: Billy Rick
23
+  web: http://thewhip.com
24
+  email: billy@rick.com
25
+  bio: "What do you want, jewels? I am a very extravagant man."
26
+  avatar: bio-photo-2.jpg
27
+  twitter: extravagantman
28
+  google:
29
+    plus: +BillyRick
30
+
31
+cornelius_fiddlebone:
32
+  name: Cornelius Fiddlebone
33
+  email: cornelius@thewhip.com
34
+  bio: "I ordered what?"
35
+  avatar: bio-photo.jpg
36
+  twitter: rhymeswithsackit
37
+  google:
38
+    plus: +CorneliusFiddlebone
39
+{% endhighlight %}
40
+
41
+To assign Billy Rick as an author for our post. You'd add the following YAML front matter to a post:
42
+
43
+{% highlight yaml %}
44
+author: billy_rick
45
+{% endhighlight %}

+ 33
- 0
_posts/blog/2014-08-08-hello-world.md View File

@@ -0,0 +1,33 @@
1
+---
2
+layout: post
3
+title: "Hello World"
4
+modified:
5
+categories: blog
6
+excerpt:
7
+tags: []
8
+image:
9
+  feature:
10
+date: 2014-08-08T15:39:55-04:00
11
+---
12
+
13
+You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!
14
+To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.
15
+
16
+## Sample Heading
17
+
18
+### Sample Heading 2
19
+
20
+Jekyll also offers powerful support for code snippets:
21
+
22
+{% highlight ruby %}
23
+def print_hi(name)
24
+  puts "Hi, #{name}"
25
+end
26
+print_hi('Tom')
27
+#=> prints 'Hi, Tom' to STDOUT.
28
+{% endhighlight %}
29
+
30
+Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh].
31
+
32
+[jekyll-gh]: https://github.com/jekyll/jekyll
33
+[jekyll]:    http://jekyllrb.com

assets/less/coderay.less → _sass/coderay.scss View File

@@ -1,14 +1,14 @@
1 1
 .CodeRay {
2
-  font-family: @code-font;
3
-  .font(12);
2
+  background-color: #efefef;
3
+  font-family: $code-font;
4
+  @include font(12);
4 5
   color: #333332;
5 6
   margin-bottom: 1.5em;
6
-  border: 1px solid darken(@body-color, 5);
7
-}
8
-
9
-.CodeRay code {
10
-  margin: 0;
11
-  padding: 1em;
7
+  @include rounded(4px);
8
+  pre {
9
+    margin: 0px;
10
+    padding: 1em;
11
+  }
12 12
 }
13 13
 
14 14
 div.CodeRay { }
@@ -21,6 +21,7 @@ table.CodeRay td {
21 21
 }
22 22
 
23 23
 .CodeRay .line-numbers, .CodeRay .no {
24
+  background-color: #ECECEC;
24 25
   color: #AAA;
25 26
   text-align: right;
26 27
 }

assets/less/elements.less → _sass/elements.scss View File

@@ -14,26 +14,26 @@ figure {
14 14
   margin: 0;
15 15
   padding-top: 10px;
16 16
   padding-bottom: 10px;
17
-  .clearfix();
17
+  @include clearfix;
18 18
   img {
19 19
     margin-bottom: 10px;
20 20
   }
21 21
   a { 
22 22
     img {
23
-      .translate(0, 0);
23
+      @include translate(0, 0);
24 24
       -webkit-transition-duration: 0.25s;
25 25
       -moz-transition-duration: 0.25s;
26 26
       -o-transition-duration: 0.25s;
27
-      .opacity(0.7);
27
+      @include opacity(0.7);
28 28
       &:hover {
29
-        .translate(0, -5px);
30
-        .box-shadow(0 0 10px fade(@black, 20));
31
-        .opacity(1);
29
+        @include translate(0, -5px);
30
+        @include box-shadow(0 0 10px rgba($black, .20));
31
+        @include opacity(1);
32 32
       }
33 33
     }
34 34
   }
35 35
   &.half {
36
-    @media @large {
36
+    @media #{$large} {
37 37
       img {
38 38
         width: 310px;
39 39
         float: left;
@@ -45,7 +45,7 @@ figure {
45 45
     }
46 46
   }
47 47
   &.third {
48
-    @media @large {
48
+    @media #{$large} {
49 49
       img {
50 50
         width: 200px;
51 51
         float: left;
@@ -61,32 +61,49 @@ svg:not(:root) {
61 61
   overflow: hidden; 
62 62
 }
63 63
 
64
+
65
+// Tables
66
+// --------------------------------------------------
67
+table { 
68
+  width: 100%;
69
+}
70
+
64 71
 // Buttons
65 72
 // --------------------------------------------------
66 73
 .btn {
67 74
   display: inline-block;
68 75
   margin-bottom: 20px;
69 76
   padding: 8px 20px;
70
-  .font-rem(14);
71
-  background-color: @black;
72
-  color: @white;
73
-  border: 2px solid @black !important;
74
-  .rounded(20px);
77
+  @include font-rem(14);
78
+  background-color: $black;
79
+  color: $white;
80
+  border: 2px solid $black !important;
81
+  @include rounded(20px);
75 82
   &:visited {
76
-    color: @white;
83
+    color: $white;
77 84
   }
78 85
   &:hover {
79
-    background-color: @white;
80
-    color: @black;
86
+    background-color: $white;
87
+    color: $black;
81 88
   }
82 89
 }
83 90
 
91
+.close-btn {
92
+  position: absolute;
93
+  top: 0;
94
+  right: 0;
95
+  z-index: 1;
96
+  background-color: transparent;
97
+  border: 0 solid transparent;
98
+  color: $white;
99
+}
100
+
84 101
 // Well
85 102
 // --------------------------------------------------
86 103
 .well {
87 104
   padding: 20px;
88
-  border: 1px solid @comp-color;
89
-  .rounded(4px);
105
+  border: 1px solid $comp-color;
106
+  @include rounded(4px);
90 107
 }
91 108
 
92 109
 // Animations

assets/less/forms.less → _sass/forms.scss View File

@@ -11,9 +11,9 @@ form {
11 11
 		margin-bottom: 5px * 2;
12 12
 		*margin-left: -7px; 
13 13
 		padding: 0;
14
-		color: @text-color;
14
+		color: $text-color;
15 15
 		border: 0;
16
-		border-bottom: 1px solid lighten(@black, 80);
16
+		border-bottom: 1px solid lighten($black, 80);
17 17
 		white-space: normal; 
18 18
 	}
19 19
 	p {
@@ -40,14 +40,14 @@ input,
40 40
 button,
41 41
 select,
42 42
 textarea {
43
-	font-family: @base-font; 
44
-	.box-sizing(border-box); 
43
+	font-family: $base-font; 
44
+	@include box-sizing(border-box); 
45 45
 }
46 46
 label {
47 47
 	display: block;
48 48
 	margin-bottom: 10px / 8;
49 49
 	font-weight: bold;
50
-	color: @text-color;
50
+	color: $text-color;
51 51
 	cursor: pointer; 
52 52
 	input,
53 53
 	textarea,
@@ -62,11 +62,11 @@ select {
62 62
 	width: 100%;
63 63
 	padding: 4px;
64 64
 	margin-bottom: 5px / 4;
65
-	background-color: @white;
66
-	border: 1px solid lighten(@black, 80);
67
-	color: @text-color; 
65
+	background-color: $white;
66
+	border: 1px solid lighten($black, 80);
67
+	color: $text-color; 
68 68
 	&:hover {
69
-		border-color: lighten(@accent-color, 50); 
69
+		border-color: lighten($accent-color, 50); 
70 70
 	}
71 71
 }
72 72
 .input-mini { 
@@ -85,19 +85,19 @@ input[type="radio"] {
85 85
 	*margin-top: 0;
86 86
 	line-height: normal;
87 87
 	cursor: pointer;
88
-	.rounded(0);
88
+	@include rounded(0);
89 89
 	border: 0 \9; 
90 90
 }
91 91
 input[type="checkbox"], 
92 92
 input[type="radio"] {  
93
-	.box-sizing(border-box);
93
+	@include box-sizing(border-box);
94 94
 	padding: 0; 
95 95
 	*width: 13px; 
96 96
 	*height: 13px; 
97 97
 }
98 98
 input[type="image"] {
99 99
 	border: 0; 
100
-	.box-shadow(none); 
100
+	@include box-shadow(none); 
101 101
 }
102 102
 input[type="file"] {
103 103
 	width: auto;
@@ -106,7 +106,7 @@ input[type="file"] {
106 106
 	border: initial;
107 107
 	background-color: transparent;
108 108
 	background-color: initial;
109
-	.box-shadow(none); 
109
+	@include box-shadow(none); 
110 110
 }
111 111
 input[type="button"],
112 112
 input[type="reset"],
@@ -122,14 +122,14 @@ input[type="file"] {
122 122
 }
123 123
 select {
124 124
 	width : auto;
125
-	background-color : @white;
125
+	background-color : $white;
126 126
 }
127 127
 select[multiple],
128 128
 select[size] {
129 129
 	height : auto; 
130 130
 }
131 131
 textarea {
132
-	.resize(vertical);
132
+	@include resize(vertical);
133 133
 	height : auto;
134 134
 	overflow : auto; 
135 135
 	vertical-align : top; 
@@ -168,7 +168,7 @@ textarea[disabled],
168 168
 input[readonly],
169 169
 select[readonly],
170 170
 textarea[readonly] {
171
-	.opacity(.5);
171
+	@include opacity(.5);
172 172
 	cursor : not-allowed; 
173 173
 }
174 174
 
@@ -177,7 +177,7 @@ textarea[readonly] {
177 177
 
178 178
 input:focus,
179 179
 textarea:focus {
180
-	border-color : @accent-color;
180
+	border-color : $accent-color;
181 181
 	outline : 0;
182 182
 	outline : thin dotted \9; 
183 183
 }
@@ -185,7 +185,7 @@ input[type="file"]:focus,
185 185
 input[type="radio"]:focus,
186 186
 input[type="checkbox"]:focus,
187 187
 select:focus {
188
-	.box-shadow(none); 
188
+	@include box-shadow(none); 
189 189
 }
190 190
 
191 191
 // help text
@@ -193,7 +193,7 @@ select:focus {
193 193
 
194 194
 .help-block,
195 195
 .help-inline {
196
-	color : lighten(@black, 50); 
196
+	color : lighten($black, 50); 
197 197
 }
198 198
 .help-block {
199 199
 	display : block; 
@@ -237,11 +237,11 @@ select:focus {
237 237
   padding: 6px 10px;
238 238
   cursor: pointer;
239 239
   display: block;
240
-  color: @white;
241
-  .rounded(4px);
240
+  color: $white;
241
+  @include rounded(4px);
242 242
   &:hover {
243
-	.box-shadow(@shadow: inset 0 0 1px @white);
244
-  	background-color: lighten(@black, 10);
243
+	@include box-shadow($shadow: inset 0 0 1px $white);
244
+  	background-color: lighten($black, 10);
245 245
   }
246 246
 }
247 247
 .search-form {
@@ -256,14 +256,14 @@ select:focus {
256 256
 		-webkit-appearance: none;
257 257
 		border: none;
258 258
 		width: 100%;
259
-		color: @white;
259
+		color: $white;
260 260
 		border: none;
261
-		border-bottom: 1px solid lighten(@white, 20);
261
+		border-bottom: 1px solid lighten($white, 20);
262 262
 		background-color: transparent;
263 263
 		box-shadow: none;
264 264
 		border-radius: 0;
265 265
 		background-clip: padding-box;
266
-		.font-rem(32);
266
+		@include font-rem(32);
267 267
 		&:focus {
268 268
 			box-shadow: none;
269 269
 			outline: none;
@@ -278,18 +278,7 @@ select:focus {
278 278
 		display: none;
279 279
 	}
280 280
 	::-webkit-input-placeholder {
281
-		.font-rem(32);
282
-	}
283
-	.icon-remove-sign {
284
-		position: absolute;
285
-		top: .6rem;
286
-		right: 1rem;
287
-		display: block;
288
-		cursor: pointer;
289
-		text-align: center;
290
-		color: @white;
291
-		z-index: 1;
292
-		cursor: pointer;
281
+		@include font-rem(32);
293 282
 	}
294 283
 	.search-field::-webkit-search-decoration,
295 284
 	.search-field::-webkit-search-cancel-button,
@@ -301,10 +290,10 @@ select:focus {
301 290
 		position: absolute;
302 291
 		width: 100%;
303 292
 		h4, li, p, a {
304
-			color: @white;
293
+			color: $white;
305 294
 		}
306 295
 		li {
307
-			border-bottom: 1px solid lighten(@white,20);
296
+			border-bottom: 1px solid lighten($white,20);
308 297
 		}
309 298
 	}
310 299
 }
@@ -313,8 +302,8 @@ body.search-overlay {
313 302
 }
314 303
 body.search-overlay:after {
315 304
 	content: '';
316
-	background-color: lighten(@black,5);
317
-	background-color: fade(@black,95);
305
+	background-color: lighten($black,5);
306
+	background-color: rgba($black,.95);
318 307
 	width: 100%;
319 308
 	min-height: 100%;
320 309
 	height: 100%;

+ 47
- 0
_sass/grid.scss View File

@@ -0,0 +1,47 @@
1
+// Defining number of columns in the grid.
2
+// Common Values would be 12, 16 or 24
3
+$width: 100%;
4
+$def_grid: 12;
5
+$margin: 0;
6
+
7
+@mixin container(){
8
+  margin:0 auto;
9
+  width:$width;
10
+}
11
+                                      
12
+// Works out the width of elements based
13
+// on total number of columns and width
14
+// number of columns being displayed.
15
+// Removes 20px for margins
16
+@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){
17
+  display:$display;
18
+  float:$float;
19
+  width:(100%/$grid * $cols) - ($margin * 2);
20
+}  
21
+
22
+// Allows for padding before element
23
+@mixin prefix($grid:$def_grid,$cols:''){
24
+  margin-left:(100%/$grid * $cols);
25
+}
26
+// Allows for padding after element
27
+@mixin suffix($grid:$def_grid,$cols:''){  
28
+  margin-right:(100%/$grid * $cols);    
29
+}
30
+// Removes left margin
31
+@mixin first(){
32
+  margin-left:0;
33
+}
34
+// Removes right margin
35
+@mixin last(){
36
+  margin-right:0;
37
+}
38
+
39
+@mixin push($grid:$def_grid,$move:'') {
40
+  position:relative;
41
+  left:(100%/$grid * $move);
42
+} 
43
+
44
+@mixin pull($grid:$def_grid,$move:''){
45
+  position:relative;
46
+  left:(100%/$grid * $move) * -1;
47
+}

+ 269
- 0
_sass/mixins.scss View File

@@ -0,0 +1,269 @@
1
+// UTILITY MIXINS
2
+// --------------------------------------------------
3
+
4
+// Clearfix
5
+// --------------------
6
+// For clearing floats like a boss h5bp.com/q
7
+@mixin clearfix {
8
+  *zoom: 1;
9
+  &:before,
10
+  &:after {
11
+    display: table;
12
+    content: "";
13
+    // Fixes Opera/contenteditable bug:
14
+    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
15
+    line-height: 0;
16
+  }
17
+  &:after {
18
+    clear: both;
19
+  }
20
+}
21
+
22
+// Webkit-style focus
23
+// --------------------
24
+@mixin tab-focus() {
25
+  // Default
26
+  outline: thin dotted #333;
27
+  // Webkit
28
+  outline: 5px auto -webkit-focus-ring-color;
29
+  outline-offset: -2px;
30
+}
31
+
32
+// Center-align a block level element
33
+// ----------------------------------
34
+@mixin center-block() {
35
+  display: block;
36
+  margin-left: auto;
37
+  margin-right: auto;
38
+}
39
+
40
+// TYPOGRAPHY
41
+// --------------------------------------------------
42
+
43
+// Full-fat vertical rhythm
44
+// ------------------------
45
+@mixin font-size($size) {
46
+  font-size: 0px + $size;
47
+  font-size: 0rem + $size / $doc-font-size;
48
+  line-height: 0 + round($doc-line-height / $size*10000) / 10000;
49
+  margin-bottom: 0px + $doc-line-height;
50
+  margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
51
+}
52
+
53
+// Just the REMs
54
+// -------------
55
+@mixin font-rem($size) {
56
+  font-size: 0px + $size;
57
+  font-size: 0rem + $size / $doc-font-size;
58
+}
59
+
60
+// Just font-size and line-height
61
+// ------------------------------
62
+@mixin font($size) {
63
+  font-size: 0px + $size;
64
+  font-size: 0rem + $size / $doc-font-size;
65
+  line-height: 0 + round($doc-line-height / $size*10000) / 10000;
66
+}
67
+
68
+@mixin text-overflow() {
69
+overflow: hidden;
70
+text-overflow: ellipsis;
71
+white-space: nowrap; }
72
+
73
+// GRADIENTS
74
+// --------------------------------------------------
75
+
76
+@mixin horizontal($startColor : $white, $endColor : $lightergrey) {
77
+background-color: $endColor;
78
+background-image  : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
79
+background-image  : -webkit-linear-gradient(left, $startColor, $endColor); 					 // Safari 5.1+, Chrome 10+
80
+background-image  : -moz-linear-gradient(left, $startColor, $endColor); 					 // FF 3.6+
81
+background-image  : -ms-linear-gradient(left, $startColor, $endColor); 						 // IE10
82
+background-image  : -o-linear-gradient(left, $startColor, $endColor); 						 // Opera 11.10
83
+background-image  : linear-gradient(left, $startColor, $endColor); 							 // W3C
84
+background-repeat : repeat-x; }
85
+
86
+@mixin vertical($startColor : $white, $endColor:  $lightergrey) {
87
+background-image  : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
88
+background-image  : -webkit-linear-gradient(top, $startColor, $endColor); 					 // Safari 5.1+, Chrome 10+
89
+background-color  : $endColor;
90
+background-image  : -moz-linear-gradient(top, $startColor, $endColor);   					 // FF 3.6+
91
+background-image  : -ms-linear-gradient(top, $startColor, $endColor); 						 // IE10
92
+background-image  : -o-linear-gradient(top, $startColor, $endColor); 						 // Opera 11.10
93
+background-image  : linear-gradient(top, $startColor, $endColor); 							 // W3C
94
+background-repeat : repeat-x; }
95
+
96
+@mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
97
+background-color  : $endColor;
98
+background-image  : -moz-linear-gradient($deg, $startColor, $endColor); 					// FF 3.6+
99
+background-image  : -ms-linear-gradient($deg, $startColor, $endColor); 						// IE10
100
+background-image  : -webkit-linear-gradient($deg, $startColor, $endColor); 					// Safari 5.1+, Chrome 10+
101
+background-image  : -o-linear-gradient($deg, $startColor, $endColor); 						// Opera 11.10
102
+background-image  : linear-gradient($deg, $startColor, $endColor); 							// W3C
103
+background-repeat : repeat-x; }
104
+
105
+// .bordered(COLOR, COLOR, COLOR, COLOR);
106
+@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
107
+border-top : solid 1px $top-color;
108
+border-left : solid 1px $left-color;
109
+border-right : solid 1px $right-color;
110
+border-bottom : solid 1px $bottom-color; }
111
+
112
+// ROUND CORNERS
113
+// --------------------------------------------------
114
+
115
+// @include rounded(VALUE);
116
+@mixin rounded($radius:4px) {
117
+border-radius : $radius; }
118
+
119
+// @include border-radius(VALUE,VALUE,VALUE,VALUE);
120
+@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
121
+border-top-right-radius : $topright;
122
+border-bottom-right-radius : $bottomright;
123
+border-bottom-left-radius : $bottomleft;
124
+border-top-left-radius : $topleft;
125
+background-clip : padding-box; }
126
+
127
+// @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
128
+@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
129
+-webkit-box-shadow : $shadow;
130
+-moz-box-shadow : $shadow;
131
+box-shadow : $shadow; }
132
+
133
+// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
134
+@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
135
+-webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
136
+-moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
137
+box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); }
138
+
139
+// @include text-shadow();
140
+@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
141
+text-shadow : $shadow; }
142
+
143
+// @include opacity(VALUE);
144
+@mixin opacity($opacity : .5) {
145
+opacity : $opacity; }
146
+
147
+// TRANSFORMATIONS
148
+// --------------------------------------------------
149
+
150
+// @include rotate(VALUEdeg);
151
+@mixin rotate($deg) {
152
+-webkit-transform : rotate($deg);
153
+-moz-transform : rotate($deg);
154
+-ms-transform : rotate($deg);
155
+-o-transform : rotate($deg);
156
+transform : rotate($deg); }
157
+
158
+// @include scale(VALUE);
159
+@mixin scale($ratio) {
160
+-webkit-transform : scale($ratio);
161
+-moz-transform : scale($ratio);
162
+-ms-transform : scale($ratio);
163
+-o-transform : scale($ratio);
164
+transform : scale($ratio); }
165
+
166
+// @include skew(VALUE, VALUE);
167
+@mixin skew($x: 0, $y: 0) {
168
+-webkit-transform : skew($x, $y);
169
+-moz-transform : skew($x, $y);
170
+-ms-transform : skew($x, $y);
171
+-o-transform : skew($x, $y);
172
+transform : skew($x, $y); }
173
+
174
+// @include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
175
+@mixin transition($transition) {
176
+-webkit-transition : $transition;
177
+-moz-transition : $transition;
178
+-ms-transition : $transition;
179
+-o-transition : $transition;
180
+transition : $transition; }
181
+
182
+// @include translate(VALUE, VALUE)
183
+@mixin translate($x: 0, $y: 0) {
184
+-webkit-transform : translate($x, $y);
185
+-moz-transform : translate($x, $y);
186
+-ms-transform : translate($x, $y);
187
+-o-transform : translate($x, $y);
188
+transform : translate($x, $y); }
189
+
190
+@mixin translate3d($x: 0, $y: 0, $z: 0) {
191
+-webkit-transform : translate($x, $y, $z);
192
+-moz-transform : translate($x, $y, $z);
193
+-ms-transform : translate($x, $y, $z);
194
+-o-transform : translate($x, $y, $z);
195
+transform : translate($x, $y, $z); }
196
+
197
+@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
198
+  -webkit-animation: $name $duration $delay $ease;
199
+  -moz-animation:    $name $duration $delay $ease;
200
+  -ms-animation:     $name $duration $delay $ease;}
201
+
202
+// BACKGROUND
203
+// --------------------------------------------------
204
+
205
+// @include background-alpha(VALUE VALUE);
206
+@mixin background-alpha($color: $white, $alpha: 1) {
207
+background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); }
208
+
209
+// @include background-size(VALUE VALUE);
210
+@mixin background-size($size){
211
+-webkit-background-size : $size;
212
+-moz-background-size : $size;
213
+-o-background-size : $size;
214
+background-size : $size; }
215
+
216
+// @include background-clip(VALUE); (border-box, padding-box, content-box)
217
+@mixin background-clip($clip) {
218
+-webkit-background-clip : $clip;
219
+-moz-background-clip : $clip;
220
+background-clip : $clip; }
221
+
222
+// @include box-sizing(VALUE); (border-box, padding-box, content-box)
223
+@mixin box-sizing($boxsize: border-box) {
224
+-webkit-box-sizing : $boxsize;
225
+-moz-box-sizing : $boxsize;
226
+-ms-box-sizing : $boxsize;
227
+box-sizing : $boxsize; }
228
+
229
+// For image replacement
230
+@mixin hide-text() {
231
+text-indent : 100%;
232
+white-space : nowrap;
233
+overflow : hidden; }
234
+
235
+// Hide from visual and speaking browsers
236
+@mixin hidden() {
237
+display : none !important; 
238
+visibility : hidden; }
239
+.hidden {
240
+  display: none;
241
+  visibility: hidden;
242
+}
243
+
244
+// Hide but maintain layout
245
+@mixin invisible() { 
246
+visibility : hidden; }
247
+
248
+// @include resize(VALUE) (none, both, horizontal, vertical, inherit)
249
+@mixin resize($direction: both) {
250
+resize : $direction;
251
+overflow : auto; }
252
+
253
+// @include userselect(VALUE) (all, element, none, text)
254
+@mixin user-select($select) {
255
+-webkit-user-select : $select;
256
+-moz-user-select : $select;
257
+-o-user-select : $select;
258
+user-select : $select; }
259
+
260
+// Hidden but available to speaking browsers
261
+@mixin visuallyhidden() { 
262
+overflow : hidden; 
263
+position : absolute;
264
+clip : rect(0 0 0 0); 
265
+height : 1px; 
266
+width : 1px;
267
+margin : -1px; 
268
+padding : 0; 
269
+border : 0; }

assets/less/page.less → _sass/page.scss View File

@@ -2,10 +2,10 @@ body {
2 2
 	margin: 0;
3 3
 	padding: 0;
4 4
 	width: 100%;
5
-	background-color: @white;
6
-	border-top: 5px solid @black;
7
-	@media @medium {
8
-		.font-rem(20);
5
+	background-color: $body-color;
6
+	border-top: 5px solid $black;
7
+	@media #{$medium} {
8
+		@include font-rem(20);
9 9
 	}
10 10
 }
11 11
 
@@ -13,35 +13,35 @@ body {
13 13
 // --------------------------------------------------
14 14
 .navigation-wrapper {
15 15
 	text-align: center;
16
-	.clearfix();
16
+	@include clearfix;
17 17
 	ul {
18 18
 		display: inline-block;
19 19
 		vertical-align: top;
20 20
 		margin: 0 0 50px;
21 21
 		padding: 4px 20px;
22
-		background-color: @black;
23
-		.rounded(0 0 10px 10px);
24
-		.clearfix();
22
+		background-color: $black;
23
+		@include rounded(0 0 10px 10px);
24
+		@include clearfix;
25 25
 	}
26 26
 	li {
27 27
 		display: block;
28 28
 		float: left;
29 29
 		list-style: none;
30 30
 		text-align: center;
31
-		.font-rem(14);
31
+		@include font-rem(14);
32 32
 		text-transform: uppercase;
33
-		color: @white;
33
+		color: $white;
34 34
 		a:hover {
35
-			.box-shadow(@shadow: inset 0 0 1px @white);
35
+			@include box-shadow($shadow: inset 0 0 1px $white);
36 36
 		}
37 37
 	}
38 38
 	a {
39 39
 		display: block;
40 40
 		padding: 6px 10px;
41
-		color: @white;
42
-		.rounded(4px);
41
+		color: $white;
42
+		@include rounded(4px);
43 43
 		&:hover {
44
-			background-color: lighten(@black, 10);
44
+			background-color: lighten($black, 10);
45 45
 		}
46 46
 	}
47 47
 }
@@ -49,14 +49,14 @@ body {
49 49
 #site-nav {
50 50
 	z-index: 9000;
51 51
 	display: none;
52
-	@media @medium {
52
+	@media #{$medium} {
53 53
 		-webkit-animation-duration: 1s;
54 54
 		-moz-animation-duration: 1s;
55 55
 		-o-animation-duration: 1s;
56 56
 		animation-duration: 1s;
57 57
 	}
58 58
 	&.closed {
59
-		@media @medium {
59
+		@media #{$medium} {
60 60
 			display: block;
61 61
 		}
62 62
 	}
@@ -65,7 +65,7 @@ body {
65 65
 		max-height: 100%;
66 66
 		li {
67 67
 			float: none;
68
-			@media @medium {
68
+			@media #{$medium} {
69 69
 				float: left;
70 70
 			}
71 71
 		}
@@ -80,9 +80,9 @@ body {
80 80
 	vertical-align: top;
81 81
 	margin: 0;
82 82
 	padding: 4px 20px;
83
-	background-color: @black;
84
-	.rounded(0);
85
-	@media @medium {
83
+	background-color: $black;
84
+	@include rounded(0);
85
+	@media #{$medium} {
86 86
 		display: none;
87 87
 	}
88 88
 }
@@ -91,8 +91,8 @@ body {
91 91
 // --------------------------------------------------
92 92
 .masthead {
93 93
 	margin-top: 40px;
94
-	.clearfix();
95
-	@media @medium {
94
+	@include clearfix;
95
+	@media #{$medium} {
96 96
 		margin-top: 0;
97 97
 	}
98 98
 	.wrap {
@@ -100,12 +100,12 @@ body {
100 100
 		max-width: 27.5em;
101 101
 		padding-right: 20px;
102 102
 		padding-left: 20px;
103
-		@media @medium {
103
+		@media #{$medium} {
104 104
 			max-width: 45.5em;
105 105
 			padding-right: 60px;
106 106
 			padding-left: 60px;
107 107
 		}
108
-		@media @large {
108
+		@media #{$large} {
109 109
 			max-width: 60em;
110 110
 		}
111 111
 	}
@@ -122,17 +122,17 @@ body {
122 122
 	    -moz-animation-delay: .05s;
123 123
 	    -o-animation-delay: .05s;
124 124
 	    animation-delay: .05s;
125
-	    border: 4px solid @white;
126
-	    .rounded(100px);
127
-		@media @medium {
125
+	    border: 4px solid $white;
126
+	    @include rounded(100px);
127
+		@media #{$medium} {
128 128
 			width: 150px;
129 129
 			height: 150px;
130
-			.rounded(150px);
130
+			@include rounded(150px);
131 131
 		}
132
-		@media @large {
132
+		@media #{$large} {
133 133
 			width: 200px;
134 134
 			height: 200px;
135
-			.rounded(200px);
135
+			@include rounded(200px);
136 136
 		}
137 137
 	}
138 138
 }
@@ -146,12 +146,12 @@ body {
146 146
     -moz-animation-delay: .75s;
147 147
     -o-animation-delay: .75s;
148 148
     animation-delay: .75s;	
149
-	a { color: @black; }
149
+	a { color: $black; }
150 150
 }
151 151
 .site-description {
152 152
 	margin-top: 0;
153
-	font-family: @alt-font;
154
-	.font-rem(16);
153
+	font-family: $alt-font;
154
+	@include font-rem(16);
155 155
 	font-weight: 400;
156 156
 	font-style: italic;
157 157
 	-webkit-animation-duration: 1s;
@@ -162,29 +162,29 @@ body {
162 162
     -moz-animation-delay: 1s;
163 163
     -o-animation-delay: 1s;
164 164
     animation-delay: 1s;
165
-	@media @medium {
166
-		.font-rem(20);
165
+	@media #{$medium} {
166
+		@include font-rem(20);
167 167
 	}
168 168
 }
169 169
 
170 170
 // Main
171 171
 // --------------------------------------------------
172 172
 #main {
173
-	.clearfix();
173
+	@include clearfix;
174 174
 }
175 175
 .entry,
176 176
 .hentry {
177
-	.clearfix();
178
-	border-bottom: 1px solid lighten(@black,80);
179
-	border-bottom: 1px solid fade(@black,10);
177
+	@include clearfix;
178
+	border-bottom: 1px solid lighten($black,80);
179
+	border-bottom: 1px solid rgba($black,.10);
180 180
 }
181 181
 .entry-feature-image {
182 182
 	margin: 20px 0 0;
183 183
 	width: 100%;
184
-	@media @medium {
184
+	@media #{$medium} {
185 185
 		margin-top: -75px;
186 186
 	}
187
-	@media @large {
187
+	@media #{$large} {
188 188
 		margin-top: -145px;
189 189
 	}
190 190
 }
@@ -193,7 +193,7 @@ body {
193 193
 	width: 100%;
194 194
 	margin-right: auto;
195 195
 	margin-left: auto;
196
-	@media @large {
196
+	@media #{$large} {
197 197
 		max-width: 100%;
198 198
 		margin-right: 0;
199 199
 		margin-left: 0;
@@ -203,31 +203,31 @@ body {
203 203
 	display: block;
204 204
 	margin-top: 2em;
205 205
 	text-transform: uppercase;
206
-	.font-rem(16);
206
+	@include font-rem(16);
207 207
 	font-weight: 600;
208
-	a { color: @text-color; }
208
+	a { color: $text-color; }
209 209
 }
210 210
 span + .entry-title {
211 211
 	margin-top: 0;
212 212
 }
213 213
 .entry-title {
214
-	font-family: @alt-font;
214
+	font-family: $alt-font;
215 215
 	font-style: italic;
216
-	.font-rem(36);
216
+	@include font-rem(36);
217 217
 	font-weight: 400;
218 218
 	line-height: 1;
219 219
 	letter-spacing: -3px;
220 220
 	a {
221
-		color: @black;
221
+		color: $black;
222 222
 		text-decoration: underline;
223 223
 	}
224
-	@media @medium {
224
+	@media #{$medium} {
225 225
 		max-width: 600px;
226
-		.font-rem(52);
226
+		@include font-rem(52);
227 227
 	}
228
-	@media @large {
228
+	@media #{$large} {
229 229
 		max-width: 800px;
230
-		.font-rem(68);
230
+		@include font-rem(68);
231 231
 	}
232 232
 }
233 233
 .entry-wrapper {
@@ -235,13 +235,13 @@ span + .entry-title {
235 235
 	max-width: 440px;
236 236
 	padding-right: 20px;
237 237
 	padding-left: 20px;
238
-	.clearfix();
239
-	@media @medium {
238
+	@include clearfix();
239
+	@media #{$medium} {
240 240
 		max-width: 760px;
241 241
 		padding-right: 60px;
242 242
 		padding-left: 60px;
243 243
 	}
244
-	@media @large {
244
+	@media #{$large} {
245 245
 		max-width: 960px;
246 246
 	}
247 247
 }
@@ -253,9 +253,9 @@ span + .entry-title {
253 253
 	margin-left: auto;
254 254
 	display: block;
255 255
 	text-transform: uppercase;
256
-	.font-rem(14);
257
-	a { color: @text-color; }
258
-	@media @large {
256
+	@include font-rem(14);
257
+	a { color: $text-color; }
258
+	@media #{$large} {
259 259
 		float: left;
260 260
 		width: 150px;
261 261
 		margin: 0 40px 40px 0;
@@ -264,23 +264,23 @@ span + .entry-title {
264 264
 	& > span {
265 265
 		padding: 0 20px 10px 0;
266 266
 		display: inline-block;
267
-		@media @large {
267
+		@media #{$large} {
268 268
 			display: block;
269 269
 			padding: 8px 0;
270
-			border-bottom: 1px solid lighten(@black,80);
271
-			border-bottom: 1px solid fade(@black,10);
270
+			border-bottom: 1px solid lighten($black,80);
271
+			border-bottom: 1px solid rgba($black,.10);
272 272
 		}
273 273
 	}
274 274
 }
275
-.author-photo {
275
+.bio-photo {
276 276
 	display: none;
277
-	@media @large {
277
+	@media #{$large} {
278 278
 		display: block;
279 279
 		width: 150px;
280 280
 		height: 150px;
281 281
 		margin-bottom: 10px;
282
-		.rounded(150px);
283
-		.clearfix();
282
+		@include rounded(150px);
283
+		@include clearfix;
284 284
 	}
285 285
 }
286 286
 .entry-content {
@@ -291,12 +291,12 @@ span + .entry-title {
291 291
 	p:first-child {
292 292
 		margin-top: 0;
293 293
 	}
294
-	@media @large {
294
+	@media #{$large} {
295 295
 		float: left;
296 296
 	}
297 297
 	p > a,
298 298
 	li > a {
299
-		border-bottom: 1px dotted lighten(@link-color, 50);
299
+		border-bottom: 1px dotted lighten($link-color, 50);
300 300
 		&:hover {
301 301
 			border-bottom-style: solid;
302 302
 		}
@@ -313,6 +313,7 @@ span + .entry-title {
313 313
 }
314 314
 // Pagination
315 315
 .pagination {
316
+	margin-top: 2em;
316 317
 	text-align: center;
317 318
 }
318 319
 // Page layout
@@ -323,7 +324,7 @@ span + .entry-title {
323 324
 		max-width: 100%;
324 325
 	}
325 326
 	.entry-content {
326
-		@media @large {
327
+		@media #{$large} {
327 328
 			float: none;
328 329
 		}
329 330
 	}
@@ -335,18 +336,18 @@ span + .entry-title {
335 336
 	list-style-type: none;
336 337
 	li {
337 338
 		padding: 8px 0;
338
-		border-bottom: 1px solid lighten(@black,80);
339
-		border-bottom: 1px solid fade(@black,10);
340
-		.clearfix();
339
+		border-bottom: 1px solid lighten($black,80);
340
+		border-bottom: 1px solid rgba($black,.10);
341
+		@include clearfix;
341 342
 	}
342 343
 	a > span {
343 344
 		float: right;
344 345
 	}
345 346
 	.entry-date {
346
-		.font-rem(14);
347
+		@include font-rem(14);
347 348
 		text-transform: uppercase;
348 349
 		display: none;
349
-		@media @medium {
350
+		@media #{$medium} {
350 351
 			display: inline;
351 352
 		}
352 353
 	}
@@ -357,21 +358,21 @@ span + .entry-title {
357 358
 	margin: 0;
358 359
 	padding: 4px 0;
359 360
 	overflow: hidden;
360
-	.clearfix();
361
+	@include clearfix;
361 362
 	&.inline li {
362 363
 		float: left;
363
-		.font-rem(14);
364
+		@include font-rem(14);
364 365
 		line-height: 2.5;
365 366
 	}
366 367
 	a { 
367 368
 		padding: 4px 6px;
368 369
 		margin: 2px;
369
-		background-color: lighten(@black, 90);
370
-		.rounded(4px);
370
+		background-color: lighten($black, 90);
371
+		@include rounded(4px);
371 372
 		text-decoration: none;
372 373
 		span { 
373 374
 			vertical-align: super;
374
-			.font-rem(10);
375
+			@include font-rem(10);
375 376
 		}
376 377
 	}
377 378
 }
@@ -384,23 +385,23 @@ span + .entry-title {
384 385
 	width: 90%;
385 386
 	padding-right: 5%;
386 387
 	padding-left: 5%;
387
-	.clearfix();
388
-	@media @medium {
388
+	@include clearfix;
389
+	@media #{$medium} {
389 390
 		top: 100px;
390 391
 	}
391 392
 }
392 393
 // Footer
393 394
 // --------------------------------------------------
394 395
 .footer-wrapper {
395
-	.clearfix();
396
+	@include clearfix;
396 397
 	margin: 2em auto;
397 398
 	text-align: center;
398
-	font-family: @alt-font;
399
-	.font-rem(14);
399
+	font-family: $alt-font;
400
+	@include font-rem(14);
400 401
 	font-style: italic;
401
-	color: lighten(@text-color,20);
402
+	color: lighten($text-color,20);
402 403
 	a {
403
-		color: lighten(@text-color,20);
404
+		color: lighten($text-color,20);
404 405
 	}
405 406
 }
406 407
 
@@ -410,7 +411,7 @@ span + .entry-title {
410 411
 	margin: 1em 0 2em;
411 412
 	a {
412 413
 		padding: 4px 8px;
413
-		&:hover { color:@black; }
414
+		&:hover { color:$black; }
414 415
 	}
415 416
 }
416 417
 
@@ -440,15 +441,15 @@ span + .entry-title {
440 441
 #goog-wm-sb {
441 442
 	display: inline-block;
442 443
 	padding: 8px 20px;
443
-	background-color: @black;
444
-	color: @white;
445
-	border: 2px solid @black !important;
446
-	.rounded(20px);
444
+	background-color: $black;
445
+	color: $white;
446
+	border: 2px solid $black !important;
447
+	@include rounded(20px);
447 448
 	&:visited {
448
-		color: @white;
449
+		color: $white;
449 450
 	}
450 451
 	&:hover {
451
-		background-color: @white;
452
-		color: @black;
452
+		background-color: $white;
453
+		color: $black;
453 454
 	}
454 455
 }

assets/less/pygments.less → _sass/pygments.scss View File

@@ -1,12 +1,16 @@
1 1
 .highlight {
2
+	background-color: #efefef;
3
+	font-family: $code-font;
4
+	@include font(12);
5
+	color: #333332;
2 6
 	margin-bottom: 1.5em;
3
-	.font(12);
4
-	border: 1px solid darken(@body-color, 5);
7
+	@include rounded(4px);
5 8
 	pre {
6 9
 		position: relative;
7 10
 		margin: 0;
8 11
 		padding: 1em;
9 12
 	}
13
+	.lineno { padding-right: 24px; color: lighten(#333332,50);}
10 14
 	.hll { background-color: #ffffcc }
11 15
 	.c { color: #999988; font-style: italic } /* Comment */
12 16
 	.err { color: #a61717; background-color: #e3d2d2 } /* Error */

assets/less/reset.less → _sass/reset.scss View File

@@ -48,7 +48,7 @@ html {
48 48
 }
49 49
 // Focus states
50 50
 a:focus {
51
-  .tab-focus();
51
+  @include tab-focus;
52 52
 }
53 53
 // Hover & Active
54 54
 a:hover,
@@ -140,7 +140,7 @@ input[type="checkbox"] {
140 140
     cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
141 141
 }
142 142
 input[type="search"] { // Appearance in Safari/Chrome
143
-  .box-sizing(content-box);
143
+  @include box-sizing(content-box);
144 144
   -webkit-appearance: textfield;
145 145
 }
146 146
 input[type="search"]::-webkit-search-decoration,

+ 46
- 0
_sass/site.scss View File

@@ -0,0 +1,46 @@
1
+// Selection
2
+// --------------------------------------------------
3
+
4
+::-moz-selection { 
5
+	background-color: lighten($base-color, 65%); 
6
+	color: $base-color; 
7
+	text-shadow: none; 
8
+}  	
9
+::selection { 
10
+	background-color: lighten($base-color, 65%); 
11
+	color: $base-color; 
12
+	text-shadow: none; 
13
+}
14
+
15
+
16
+// Utility Classes
17
+// --------------------------------------------------
18
+
19
+.wrap {
20
+	margin: 0 auto;
21
+}
22
+.all-caps {
23
+	text-transform: uppercase;
24
+}
25
+.pull-left {
26
+	float: left;
27
+}
28
+.pull-right {
29
+	float:right;
30
+}
31
+.unstyled-list {
32
+	list-style: none;
33
+	margin-left: 0;
34
+	padding-left: 0;
35
+	li {
36
+		list-style-type: none;
37
+	}
38
+}
39
+
40
+
41
+// Global Transition
42
+// ---------------------------------------------------
43
+
44
+b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
45
+	@include transition(all .2s ease);
46
+}

assets/less/typography.less → _sass/typography.scss View File

@@ -1,30 +1,30 @@
1 1
 // Body
2 2
 // --------------------------------------------------
3 3
 body {
4
-	font-family: @base-font;
5
-	color: @text-color;
4
+	font-family: $base-font;
5
+	color: $text-color;
6 6
 }
7 7
 
8 8
 // Headings
9 9
 // --------------------------------------------------
10 10
 h1, h2, h3, h4, h5, h6 {
11
-	font-family: @heading-font;
11
+	font-family: $heading-font;
12 12
 }
13 13
 
14 14
 // Links
15 15
 // --------------------------------------------------
16 16
 a { 
17 17
 	text-decoration: none;
18
-	color: @link-color; 
18
+	color: $link-color; 
19 19
 	&:visited { 
20
-		color: lighten(@link-color, 20); 
20
+		color: lighten($link-color, 20); 
21 21
 	}
22 22
 	&:hover { 
23
-		color: darken(@link-color, 20); 
23
+		color: darken($link-color, 20); 
24 24
 	}
25 25
 	&:focus { 
26 26
 		outline: thin dotted; 
27
-		color: darken(@link-color, 20);
27
+		color: darken($link-color, 20);
28 28
 	}
29 29
 	&:hover, 
30 30
 	&:active { 
@@ -42,9 +42,9 @@ a {
42 42
 // --------------------------------------------------
43 43
 figcaption {
44 44
 	padding-top: 10px;
45
-	.font(14);
45
+	@include font(14);
46 46
 	line-height: 1.3;
47
-	color: lighten(@text-color, 10);
47
+	color: lighten($text-color, 10);
48 48
 }
49 49
 
50 50
 // Feature Image Caption
@@ -56,20 +56,20 @@ figcaption {
56 56
 	padding-right: 20px;
57 57
 	padding-left: 20px;
58 58
 	text-align: right;
59
-	.font(14);
59
+	@include font(14);
60 60
 	line-height: 1.3;
61
-	color: lighten(@text-color, 30);
62
-	.clearfix();
63
-	@media @medium {
61
+	color: lighten($text-color, 30);
62
+	@include clearfix();
63
+	@media #{$medium} {
64 64
 		max-width: 760px;
65 65
 		padding-right: 60px;
66 66
 		padding-left: 60px;
67 67
 	}
68
-	@media @large {
68
+	@media #{$large} {
69 69
 		max-width: 960px;
70 70
 	}
71 71
 	a {
72
-		color: lighten(@text-color, 30);
72
+		color: lighten($text-color, 30);
73 73
 	}
74 74
 }
75 75
 
@@ -79,46 +79,47 @@ figcaption {
79 79
 	margin-top: 1.5em;
80 80
 	padding: .5em 1em;
81 81
 	text-indent: 0;
82
-	.font-rem(16);
83
-	background-color: lighten(@black, 95);
84
-	border: 1px solid lighten(@black, 90);
85
-	.rounded(4px);
82
+	@include font-rem(16);
83
+	background-color: lighten($black, 95);
84
+	border: 1px solid lighten($black, 90);
85
+	@include rounded(4px);
86 86
 }
87
+
87 88
 // Blockquotes
88 89
 // --------------------------------------------------
89 90
 blockquote {
90
-	font-family: @alt-font;
91
+	font-family: $alt-font;
91 92
 	font-style: italic;
92
-	.font-size(24);
93
+	@include font-size(16);
93 94
 	padding-left: 20px;
94
-	border-left: 8px solid @black;
95
+	border-left: 8px solid $black;
95 96
 }
96 97
 
97 98
 // Footnotes
98 99
 // --------------------------------------------------
99 100
 .footnotes {
100
-	.font(14);
101
-	font-family: @base-font;
101
+	@include font(14);
102
+	font-family: $base-font;
102 103
 }
103 104
 
104 105
 // Code
105 106
 // --------------------------------------------------
106 107
 tt, code, kbd, samp, pre {
107
-	font-family: @code-font;
108
+	font-family: $code-font;
108 109
 }
109 110
 p,
110 111
 li { 
111 112
 	code {
112
-		.font(12);
113
+		@include font(12);
113 114
 		white-space: nowrap;
114 115
 		margin: 0 2px;
115 116
 		padding: 0 5px;
116
-		border: 1px solid lighten(@black, 90);
117
-		background-color: lighten(@black, 95);
118
-		.rounded(3px);
117
+		border: 1px solid lighten($black, 90);
118
+		background-color: lighten($black, 95);
119
+		@include rounded(3px);
119 120
 	}
120 121
 }
121 122
 pre {
122
-	.font(12);
123
+	@include font(12);
123 124
 	overflow-x: auto;
124 125
 }

+ 36
- 0
_sass/variables.scss View File

@@ -0,0 +1,36 @@
1
+// TYPOGRAPHY ================================================
2
+$base-font: 'source-sans-pro', sans-serif;
3
+$heading-font: $base-font;
4
+$caption-font: $base-font;
5
+$code-font: 'source-code-pro', monospace;
6
+$alt-font: 'volkhov', serif;
7
+
8
+$doc-font-size: 16;
9
+$doc-line-height: 24;
10
+
11
+
12
+// set-up the body font-size / line-height
13
+body {
14
+	margin-top: 0px + $doc-line-height;
15
+	font-size: 0px + $doc-font-size;	
16
+}
17
+
18
+
19
+// COLORS =====================================================
20
+$body-color      		: #fff;
21
+$text-color      		: #222;
22
+$base-color 	 		  : #343434;	  
23
+$comp-color 	 		  : spin($base-color, 180); 
24
+$border-color    		: $base-color;
25
+$white           		: #fff;
26
+$black           		: #000;
27
+$accent-color    		: $black;
28
+$link-color 		    : #222;
29
+
30
+
31
+// MEDIA QUERIES ==============================================
32
+$micro            : "only screen and (min-width: 30em)";
33
+$small            : "only screen and (min-width: 37.5em)";
34
+$medium           : "only screen and (min-width: 48em)";
35
+$large            : "only screen and (min-width: 62em)";
36
+$x-large          : "only screen and (min-width: 86.375em)";

+ 16
- 0
_sass/vendor/font-awesome/_bordered-pulled.scss View File

@@ -0,0 +1,16 @@
1
+// Bordered & Pulled
2
+// -------------------------
3
+
4
+.#{$fa-css-prefix}-border {
5
+  padding: .2em .25em .15em;
6
+  border: solid .08em $fa-border-color;
7
+  border-radius: .1em;
8
+}
9
+
10
+.pull-right { float: right; }
11
+.pull-left { float: left; }
12
+
13
+.#{$fa-css-prefix} {
14