Improve responsive nav experience

Correct url to Last.fm profile

Gemfile

@@ -1,6 +1,8 @@
 source 'https://rubygems.org'
 
 gem 'jekyll'
-gem 'jekyll-minibundle'
+gem 'kramdown'
 gem 'coderay'
-gem 'rake'
+gem 'rake'
+gem 'activesupport'
+gem 'stringex'

Gruntfile.js

@@ -22,9 +22,6 @@ module.exports = function(grunt) {
         files: {
           'assets/css/main.min.css': [
             'assets/less/main.less'
-          ],
-          'assets/css/ie.min.css': [
-            'assets/less/ie.less'
           ]
         }
       }
@@ -66,8 +63,7 @@ module.exports = function(grunt) {
     watch: {
       less: {
         files: [
-          'assets/less/*.less',
-          'assets/less/bootstrap/*.less'
+          'assets/less/*.less'
         ],
         tasks: ['recess']
       },

README.md

@@ -16,13 +16,13 @@
 
 General notes and suggestions for customizing Minimal Mistakes.
 
-## Basic Setup
+## Basic Setup for a new Jekyll site
 
-1. [Install Jekyll](http://jekyllrb.com) if you haven't already.
-2. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/)
-3. Clone the repo you just forked to your computer.
+1. [Install Bundler](http://bundler.io) `gem install bundler` and then install [Jekyll](http://jekyllrb.com) and all dependencies `bundle install`.
+2. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/fork).
+3. Clone the repo you just forked and rename it.
 4. Edit `_config.yml` to personalize your site.
-5. Check out the sample posts in `_posts` to see examples for pulling in large feature images, tags, and other YAML data.
+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.
 6. Read the documentation below for further customization pointers and documentation.
 
 [Demo the Theme](http://mmistakes.github.io/minimal-mistakes)
@@ -34,7 +34,7 @@ General notes and suggestions for customizing Minimal Mistakes.
 ## Setup for an Existing Jekyll site
 
 1. Clone the following folders: `_includes`, `_layouts`, `assets`, and `images`.
-2. Clone the following files and personalize content as need: `about.md`, `articles.html`, `index.md`, `feed.xml`, `sitemap.xml`
+2. Clone the following files and personalize content as need: `about.md`, `posts.md`, `index.md`, `feed.xml`, `sitemap.xml`
 3. Set the following variables in your `config.yml` file:
 
 ``` yaml
@@ -71,7 +71,7 @@ bing_verify:
 # For external links add external: true
 links:
   - title: Theme Setup
-    url: /theme-setup
+    url: /theme-setup/
   - title: External Link
     url: http://mademistakes.com
     external: true

Rakefile.rb

@@ -0,0 +1,88 @@
+require "rubygems"
+require "bundler/setup"
+require "stringex"
+
+## -- Config -- ##
+
+posts_dir       = "_posts"    # directory for blog files
+new_post_ext    = "md"  # default new post file extension when using the new_post task
+new_page_ext    = "md"  # default new page file extension when using the new_page task
+
+
+#############################
+# Create a new Post or Page #
+#############################
+
+# usage rake new_post
+desc "Create a new post in #{posts_dir}"
+task :new_post, :title do |t, args|
+  if args.title
+    title = args.title
+  else
+    title = get_stdin("Enter a title for your post: ")
+  end
+  filename = "#{posts_dir}/#{Time.now.strftime('%Y-%m-%d')}-#{title.to_url}.#{new_post_ext}"
+  if File.exist?(filename)
+    abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
+  end
+  tags = get_stdin("Enter tags to classify your post (comma separated): ")
+  puts "Creating new post: #{filename}"
+  open(filename, 'w') do |post|
+    post.puts "---"
+    post.puts "layout: post"
+    post.puts "title: \"#{title.gsub(/&/,'&')}\""
+    post.puts "modified: #{Time.now.strftime('%Y-%m-%d %H:%M:%S %z')}"
+    post.puts "tags: [#{tags}]"
+    post.puts "image:"
+    post.puts "  feature: "
+    post.puts "  credit: "
+    post.puts "  creditlink: "
+    post.puts "comments: "
+    post.puts "share: "
+    post.puts "---"
+  end
+end
+
+# usage rake new_page
+desc "Create a new page"
+task :new_page, :title do |t, args|
+  if args.title
+    title = args.title
+  else
+    title = get_stdin("Enter a title for your page: ")
+  end
+  filename = "#{title.to_url}.#{new_page_ext}"
+  if File.exist?(filename)
+    abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
+  end
+  tags = get_stdin("Enter tags to classify your page (comma separated): ")
+  puts "Creating new page: #{filename}"
+  open(filename, 'w') do |page|
+    page.puts "---"
+    page.puts "layout: page"
+    page.puts "permalink: /#{title.to_url}/"
+    page.puts "title: \"#{title}\""
+    page.puts "modified: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
+    page.puts "tags: [#{tags}]"
+    page.puts "image:"
+    page.puts "  feature: "
+    page.puts "  credit: "
+    page.puts "  creditlink: "
+    page.puts "share: "
+    page.puts "---"
+  end
+end
+
+def get_stdin(message)
+  print message
+  STDIN.gets.chomp
+end
+
+def ask(message, valid_options)
+  if valid_options
+    answer = get_stdin("#{message} #{valid_options.to_s.gsub(/"/, '').gsub(/, /,'/')} ") while !valid_options.include?(answer)
+  else
+    answer = get_stdin(message)
+  end
+  answer
+end

_config.yml

@@ -1,8 +1,8 @@
 title:            Site Title
 tagline:          A short tagline
 description:      Describe your website.
-#Comment out url when working locally to resolve base urls correctly
-url:              http://your-site.com
+# Your site's domain goes here. Leave localhost server or blank when working locally.
+url:              http://localhost:4000
 
 # Owner/author information
 owner:
@@ -31,11 +31,11 @@ bing_verify:
 # For external links add external: true
 links:
   - title: About
-    url: /about
-  - title: Articles
-    url: /articles
+    url: /about/
+  - title: Posts
+    url: /posts/
   - title: Theme Setup
-    url: /theme-setup
+    url: /theme-setup/
   - title: Made Mistakes
     url: http://mademistakes.com
     external: true
@@ -47,7 +47,7 @@ pygments:    true
 markdown:    kramdown
 
 # https://github.com/mojombo/jekyll/wiki/Permalinks
-permalink:   /:categories/:title
+permalink:   /:categories/:title/
 
 kramdown:
   auto_ids: true

_includes/_author-bio.html

@@ -7,5 +7,5 @@
 {% if site.owner.linkedin %}<a href="http://linkedin.com/in/{{ site.owner.linkedin }}" class="author-social" target="_blank"><i class="icon-linkedin"></i> LinkedIn</a>{% endif %}
 {% if site.owner.instagram %}<a href="http://instagram.com/{{ site.owner.instagram }}" class="author-social" target="_blank"><i class="icon-instagram"></i> Instagram</a>{% endif %}
 {% if site.owner.github %}<a href="http://github.com/{{ site.owner.github }}" class="author-social" target="_blank"><i class="icon-github"></i> Github</a>{% endif %}
-{% if site.owner.lastfm %}<a href="http://lastfm.com/{{ site.owner.lastfm }}" class="author-social" target="_blank"><i class="icon-lastfm"></i> Last.fm</a>{% endif %}
+{% if site.owner.lastfm %}<a href="http://lastfm.com/user/{{ site.owner.lastfm }}" class="author-social" target="_blank"><i class="icon-lastfm"></i> Last.fm</a>{% endif %}
 {% if site.owner.tumblr %}<a href="http://{{ site.owner.tumblr }}.tumblr.com" class="author-social" target="_blank"><i class="icon-tumblr"></i> Tumblr</a>{% endif %}

_includes/_head.html

@@ -38,14 +38,16 @@
 <!-- For all browsers -->
 <link rel="stylesheet" href="{{ site.url }}/assets/css/main.min.css">
 
-<!--[if (lt IE 9) & (!IEMobile)]>
-<link rel="stylesheet" href="{{ site.url }}/assets/css/ie.min.css">
-<![endif]-->
-
 <meta http-equiv="cleartype" content="on">
 
-<!-- Load Modernizr -->
-<script src="{{ site.url }}/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>
+<!-- HTML5 Shiv and Media Query Support -->
+<!--[if lt IE 9]>
+	<script src="{{ site.url }}/assets/js/vendor/html5shiv.min.js"></script>
+	<script src="{{ site.url }}/assets/js/vendor/respond.min.js"></script>
+<![endif]-->
+
+<!-- Modernizr -->
+<script src="{{ site.url }}/assets/js/vendor/modernizr-2.7.1.custom.min.js"></script>
 
 <!-- Icons -->
 <!-- 16x16 -->

_includes/_navigation.html

@@ -3,12 +3,11 @@
 		<a href="{{ site.url }}">{{ site.title }}</a>
 	</div><!-- /.site-name -->
 	<div class="top-navigation">
-		<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
+		<nav role="navigation" id="site-nav" class="nav">
 		    <ul>
 		        {% for link in site.links %}
 				<li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li>
 		        {% endfor %}
-		        <li><i class="icon-feed"></i> <a href="{{ site.url }}/feed.xml" title="Atom/RSS feed">Feed</a>
 		    </ul>
 		</nav>
 	</div><!-- /.top-navigation -->

_layouts/home.html

@@ -4,41 +4,41 @@
 <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
 <head>
-{% include head.html %}
+{% include _head.html %}
 </head>
 
-<body class="home" itemscope itemtype="http://schema.org/WebPage">
+<body class="home">
 
-{% include browser-upgrade.html %}
+{% include _browser-upgrade.html %}
 
-{% include navigation.html %}
+{% include _navigation.html %}
 
 {% if page.image.feature %}<div class="image-wrap">
-  <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
+  <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
   {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
 </div><!-- /.image-wrap -->{% endif %}
 
-<div class="article-author-top">
-  {% include author-bio.html %}
+<div class="article-author-side">
+  {% include _author-bio.html %}
 </div>
 
-<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
-  <h3><a href="{{ site.url}}/articles">Articles</a></h3>
-  {% for post in site.categories.articles limit:5 %}    
-  <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
-    <h2 itemprop="headline"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2>
-    <p itemprop="text">{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
+<div id="index">
+  <h3><a href="{{ site.url}}/articles/">Articles</a></h3>
+  {% for post in site.posts limit:5 %}    
+  <article>
+    <h2><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h2>
+    <p>{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
   </article>
   {% endfor %}
 </div><!-- /#index -->
 
 <div class="footer-wrap">
   <footer>
-    {% include footer.html %}
+    {% include _footer.html %}
   </footer>
 </div><!-- /.footer-wrap -->
 
-{% include scripts.html %}
+{% include _scripts.html %}
   
 </body>
 </html>

_layouts/page.html

@@ -4,27 +4,27 @@
 <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
 <head>
-{% include head.html %}
+{% include _head.html %}
 </head>
 
-<body class="page" itemscope itemtype="http://schema.org/WebPage">
+<body class="page">
 
-{% include browser-upgrade.html %}
+{% include _browser-upgrade.html %}
 
-{% include navigation.html %}
+{% include _navigation.html %}
 
 {% if page.image.feature %}<div class="image-wrap">
-  <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
+  <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
   {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
 </div><!-- /.image-wrap -->{% endif %}
 
-<div id="main" role="main"  itemprop="mainContentOfPage">
-  <div class="article-author-top">
-    {% include author-bio.html %}
+<div id="main" role="main">
+  <div class="article-author-side">
+    {% include _author-bio.html %}
   </div>
-  <article itemscope itemtype="http://schema.org/CreativeWork">
-    <h1 itemprop="name">{{ page.title }}</h1>
-    <div class="article-wrap" itemprop="text">
+  <article>
+    <h1>{{ page.title }}</h1>
+    <div class="article-wrap">
       {{ content }}
     </div><!-- /.article-wrap -->
   </article>
@@ -32,11 +32,11 @@
 
 <div class="footer-wrap">
   <footer>
-    {% include footer.html %}
+    {% include _footer.html %}
   </footer>
 </div><!-- /.footer-wrap -->
 
-{% include scripts.html %}          
+{% include _scripts.html %}          
 
 </body>
 </html>

_layouts/post-index.html

@@ -4,26 +4,26 @@
 <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
 <head>
-{% include head.html %}
+{% include _head.html %}
 </head>
 
-<body class="articles" itemscope itemtype="http://schema.org/WebPage">
+<body class="post-index">
 
-{% include browser-upgrade.html %}
+{% include _browser-upgrade.html %}
 
-{% include navigation.html %}
+{% include _navigation.html %}
 
 {% if page.image.feature %}<div class="image-wrap">
   <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
   {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
 </div><!-- /.image-wrap -->{% endif %}
 
-<div class="article-author-top">
-  {% include author-bio.html %}
+<div class="article-author-side">
+  {% include _author-bio.html %}
 </div>
 
-<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
-  <h1 itemprop="name">{{ page.title }}</h1>
+<div id="index">
+  <h1>{{ page.title }}</h1>
   {% for post in site.posts %}  
   {% unless post.next %}
     <h3>{{ post.date | date: '%Y' }}</h3>
@@ -34,20 +34,20 @@
         <h3>{{ post.date | date: '%Y' }}</h3>
       {% endif %}
     {% endunless %}
-    <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
-      <h2 itemprop="headline"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2>
-      <p itemprop="text">{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
+    <article>
+      <h2><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h2>
+      <p>{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
     </article>
   {% endfor %}
 </div><!-- /#index -->
 
 <div class="footer-wrap">
   <footer>
-    {% include footer.html %}
+    {% include _footer.html %}
   </footer>
 </div><!-- /.footer-wrap -->
 
-{% include scripts.html %}
+{% include _scripts.html %}
   
 </body>
 </html>

_layouts/post.html

@@ -4,37 +4,37 @@
 <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
 <head>
-{% include head.html %}
+{% include _head.html %}
 </head>
 
-<body class="article" itemscope itemtype="http://schema.org/WebPage">
+<body class="post">
 
-{% include browser-upgrade.html %}
+{% include _browser-upgrade.html %}
 
-{% include navigation.html %}
+{% include _navigation.html %}
 
 {% if page.image.feature %}<div class="image-wrap">
-  <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
+  <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image">
   {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
 </div><!-- /.image-wrap -->{% endif %}
 
-<div id="main" role="main" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
-  <div class="article-author-top">
-    {% include author-bio.html %}
+<div id="main" role="main">
+  <div class="article-author-side">
+    {% include _author-bio.html %}
   </div>
-  <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
+  <article>
     <div class="headline-wrap">
-      <h1 itemprop="name">{{ page.title }}</h1>
+      <h1>{{ page.title }}</h1>
       <h2>{{ page.tagline }}</h2>
     </div><!--/ .headline-wrap -->
-    <div class="article-wrap" itemprop="text">
+    <div class="article-wrap">
       {{ content }}
       <hr />
       <footer role="contentinfo">
         <div class="article-author-bottom">
-          {% include author-bio.html %}
+          {% include _author-bio.html %}
         </div>
-        <p class="byline"><strong>{{ page.title }}</strong> was published on <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</time>{% if page.modified %} and last modified on <time datetime="{{ page.modified | date: "%Y-%m-%d" }}" itemprop="dateModified">{{ page.modified | date: "%B %d, %Y" }}</time>{% endif %} by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><a href="{{ site.url }}/about" title="About {{ site.owner.name }}" itemprop="url">{{ site.owner.name }}</a></span></span>.</p>
+        <p class="byline"><strong>{{ page.title }}</strong> was published on <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time>{% if page.modified %} and last modified on <time datetime="{{ page.modified | date: "%Y-%m-%d" }}">{{ page.modified | date: "%B %d, %Y" }}</time>{% endif %} by <a href="{{ site.url }}/about" title="About {{ site.owner.name }}">{{ site.owner.name }}</a>.</p>
       </footer>
     </div><!-- /.article-wrap -->
   </article>
@@ -42,7 +42,7 @@
 
 <div class="footer-wrap">
   {% if site.related_posts.size > 0 %}<div class="related-articles">
-  <h4>You might also enjoy <small class="pull-right">(<a href="{{ site.url }}/articles">View all articles</a>)</small></h4>
+  <h4>You might also enjoy <small class="pull-right">(<a href="{{ site.url }}/posts/">View all posts</a>)</small></h4>
     <ul>
     {% for post in site.related_posts limit:3 %}
       {% assign match = false %}
@@ -59,11 +59,11 @@
     <hr />
   </div><!-- /.related-articles -->{% endif %}
   <footer>
-    {% include footer.html %}
+    {% include _footer.html %}
   </footer>
 </div><!-- /.footer-wrap -->
 
-{% include scripts.html %}	        
+{% include _scripts.html %}	        
 
 </body>
-</html>
+</html>

_posts/2011-03-10-sample-post.md

@@ -3,7 +3,6 @@ layout: post
 title: Sample Post
 description: "Just about everything you'll need to style in the theme: headings, paragraphs, blockquotes, tables, code blocks, and more."
 modified: 2013-05-31
-category: articles
 tags: [intro, beginner, jekyll, tutorial]
 image:
   feature: texture-feature-05.jpg

_posts/2012-05-22-readability-post.md

@@ -3,7 +3,6 @@ layout: post
 title: "Testing Readability with a Bunch of Text"
 tagline: "A bunch of hipster ipsum for ya head."
 description: "A ton of text to test readability."
-category: articles
 tags: [sample post, readability, test]
 ---
 

_posts/2013-05-22-sample-post-images.md

@@ -2,7 +2,6 @@
 layout: post
 title: "A Post with Images"
 description: "Examples and code for displaying images in posts."
-category: articles
 tags: [sample post, images, test]
 ---
 

_posts/2013-05-23-readability-feature-post.md

@@ -3,7 +3,6 @@ layout: post
 title: "Post with Large Feature Image and Text"
 tagline: "A bunch of hipster ipsum for ya head."
 description: "Custom written post descriptions are the way to go... if you're not lazy."
-category: articles
 tags: [sample post, readability, test]
 image:
   feature: texture-feature-04.jpg

_posts/2013-08-16-code-highlighting-post.md

@@ -2,7 +2,6 @@
 layout: post
 title: Syntax Highlighting Post
 description: "Demo post displaying the various ways of highlighting code in Markdown."
-category: articles
 tags: [sample post, code, highlighting]
 ---
 

about.md

@@ -1,6 +1,6 @@
 ---
 layout: page
-permalink: /about/index.html
+permalink: /about/
 title: About the Theme
 tagline: Minimal Mistakes, a Jekyll Theme
 tags: [about, Jekyll, theme, responsive]
@@ -17,10 +17,13 @@ Jekyll is pretty rad and figured releasing a cleaned up version of [my site](htt
 
 * Responsive templates. Looking good on mobile, tablet, and desktop.
 * Gracefully degrading in older browsers. Compatible with Internet Explorer 8+ and all modern browsers. 
-* Minimal embellishments. Content first --- other widget nonsense never.
+* Minimal embellishments --- content first.
 * Large feature images for posts and pages.
+* Author sidebar to pimp your bio, photo[^2], and social media links.
 * Simple and clear permalink structure *(ie: domain.com/category/post-title)*
 
 <a markdown="0" href="{{ site.url }}/theme-setup" class="btn">Install Minimal Mistakes Theme</a>
 
-[^1]: Since open sourcing this theme I have released a couple other Jekyll themes. My website [Made Mistakes](http://mademistakes.com) is currently using a modified version of my [So Simple Theme](http://mmistakes.github.io/so-simple-theme/).
+[^1]: Since open sourcing this theme I have released a couple other Jekyll themes. My website [Made Mistakes](http://mademistakes.com) is currently using a modified version of my [So Simple Theme](http://mmistakes.github.io/so-simple-theme/).
+
+[^2]: Fancy avatars provided by [Brandon Mathis](http://brandonmathis.com/projects/fancy-avatars/demo/) under a [Creative Commons Attribution 3.0 License](http://creativecommons.org/licenses/by/3.0/).

articles.md

@@ -1,7 +0,0 @@
----
-layout: post-index
-permalink: /articles/index.html
-title: Articles
-tagline: A List of Posts
-tags: [blog, graphic design]
----

assets/js/_main.js

@@ -1,3 +1,34 @@
+/*! Responsive Menu */
+// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/
+//  The function to change the class
+var changeClass = function (r,className1,className2) {
+  var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
+  if( regex.test(r.className) ) {
+    r.className = r.className.replace(regex,' '+className2+' ');
+    }
+    else{
+    r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
+    }
+    return r.className;
+};  
+//  Creating our button in JS for smaller screens
+var menuElements = document.getElementById('site-nav');
+menuElements.insertAdjacentHTML('afterBegin','<button type="button" role="button" id="menutoggle" class="navtoogle lines-button x" aria-hidden="true"><span class="lines"></span>menu</button>');
+
+//  Toggle the class on click to show / hide the menu
+document.getElementById('menutoggle').onclick = function() {
+  changeClass(this, 'navtoogle active', 'navtoogle');
+};
+// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
+document.onclick = function(e) {
+  var mobileButton = document.getElementById('menutoggle'),
+    buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
+
+  if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
+    changeClass(mobileButton, 'navtoogle active', 'navtoogle');
+  }
+};
+
 /*! Plugin options and other jQuery stuff */
 
 // FitVids options

assets/js/vendor/html5shiv.min.js

@@ -0,0 +1,8 @@
+/*
+ HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
+*/
+(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
+a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
+c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
+"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
+if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

assets/js/vendor/respond.min.js

@@ -0,0 +1,3 @@
+/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
+/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
+window.matchMedia=window.matchMedia||function(e,t){"use strict";var n,r=e.documentElement,i=r.firstElementChild||r.firstChild,s=e.createElement("body"),o=e.createElement("div");o.id="mq-test-1";o.style.cssText="position:absolute;top:-100em";s.style.background="none";s.appendChild(o);return function(e){o.innerHTML='&shy;<style media="'+e+'"> #mq-test-1 { width: 42px; }</style>';r.insertBefore(s,i);n=o.offsetWidth===42;r.removeChild(s);return{matches:n,media:e}}}(document);(function(e){"use strict";function x(){w(true)}var t={};e.respond=t;t.update=function(){};t.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches;if(t.mediaQueriesSupported){return}var n=e.document,r=n.documentElement,i=[],s=[],o=[],u={},a=30,f=n.getElementsByTagName("head")[0]||r,l=n.getElementsByTagName("base")[0],c=f.getElementsByTagName("link"),h=[],p=function(){for(var t=0;t<c.length;t++){var n=c[t],r=n.href,i=n.media,s=n.rel&&n.rel.toLowerCase()==="stylesheet";if(!!r&&s&&!u[r]){if(n.styleSheet&&n.styleSheet.rawCssText){v(n.styleSheet.rawCssText,r,i);u[r]=true}else{if(!/^([a-zA-Z:]*\/\/)/.test(r)&&!l||r.replace(RegExp.$1,"").split("/")[0]===e.location.host){h.push({href:r,media:i})}}}}d()},d=function(){if(h.length){var t=h.shift();E(t.href,function(n){v(n,t.href,t.media);u[t.href]=true;e.setTimeout(function(){d()},0)})}},v=function(e,t,n){var r=e.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),o=r&&r.length||0;t=t.substring(0,t.lastIndexOf("/"));var u=function(e){return e.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+t+"$2$3")},a=!o&&n;if(t.length){t+="/"}if(a){o=1}for(var f=0;f<o;f++){var l,c,h,p;if(a){l=n;s.push(u(e))}else{l=r[f].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;s.push(RegExp.$2&&u(RegExp.$2))}h=l.split(",");p=h.length;for(var d=0;d<p;d++){c=h[d];i.push({media:c.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:s.length-1,hasquery:c.indexOf("(")>-1,minw:c.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:c.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}}w()},m,g,y=function(){var e,t=n.createElement("div"),i=n.body,s=false;t.style.cssText="position:absolute;font-size:1em;width:1em";if(!i){i=s=n.createElement("body");i.style.background="none"}i.appendChild(t);r.insertBefore(i,r.firstChild);e=t.offsetWidth;if(s){r.removeChild(i)}else{i.removeChild(t)}e=b=parseFloat(e);return e},b,w=function(t){var u="clientWidth",l=r[u],h=n.compatMode==="CSS1Compat"&&l||n.body[u]||l,p={},d=c[c.length-1],v=(new Date).getTime();if(t&&m&&v-m<a){e.clearTimeout(g);g=e.setTimeout(w,a);return}else{m=v}for(var E in i){if(i.hasOwnProperty(E)){var S=i[E],x=S.minw,T=S.maxw,N=x===null,C=T===null,k="em";if(!!x){x=parseFloat(x)*(x.indexOf(k)>-1?b||y():1)}if(!!T){T=parseFloat(T)*(T.indexOf(k)>-1?b||y():1)}if(!S.hasquery||(!N||!C)&&(N||h>=x)&&(C||h<=T)){if(!p[S.media]){p[S.media]=[]}p[S.media].push(s[S.rules])}}}for(var L in o){if(o.hasOwnProperty(L)){if(o[L]&&o[L].parentNode===f){f.removeChild(o[L])}}}for(var A in p){if(p.hasOwnProperty(A)){var O=n.createElement("style"),M=p[A].join("\n");O.type="text/css";O.media=A;f.insertBefore(O,d.nextSibling);if(O.styleSheet){O.styleSheet.cssText=M}else{O.appendChild(n.createTextNode(M))}o.push(O)}}},E=function(e,t){var n=S();if(!n){return}n.open("GET",e,true);n.onreadystatechange=function(){if(n.readyState!==4||n.status!==200&&n.status!==304){return}t(n.responseText)};if(n.readyState===4){return}n.send(null)},S=function(){var t=false;try{t=new e.XMLHttpRequest}catch(n){t=new e.ActiveXObject("Microsoft.XMLHTTP")}return function(){return t}}();p();t.update=p;if(e.addEventListener){e.addEventListener("resize",x,false)}else if(e.attachEvent){e.attachEvent("onresize",x)}})(this)

assets/less/1382.less

@@ -1,44 +0,0 @@
-// ROOT =======================================================
-// TYPOGRAPHY =================================================
-// TEXTURE ====================================================
-// ELEMENTS ===================================================
-// LAYOUT =====================================================
-.site-name {
-	.grid(12,1.5);
-	.prefix(12,2);
-}
-.top-navigation {
-	.grid(12,8);
-}
-.image-wrap {
-	&:after {
-		left: 33.333333333%;
-	}
-	.headline-wrap {
-		.prefix(12,1);
-	}
-}
-.image-credit {
-	.grid(12,8.5);
-}
-#main article {
-	.grid(12,4.5);
-}
-#index {
-	.grid(12,4.5);
-}
-.related-articles {
-	.grid(12,4.5);
-	.prefix(12,4);
-	.suffix(12,3.5);
-}
-.footer-wrap footer {
-	.grid(12,4.5);
-	.prefix(12,4);
-	.suffix(12,3.5);
-}
-.article-author-top {
-	.grid(12,1.5);
-	.prefix(12,2);
-}
-// VENDOR-SPECIFIC ============================================

assets/less/2x.less

@@ -1,6 +0,0 @@
-// ROOT =======================================================
-// TYPOGRAPHY =================================================
-// TEXTURE ====================================================
-// ELEMENTS ===================================================
-// LAYOUT =====================================================
-// VENDOR-SPECIFIC ============================================

assets/less/480.less

@@ -1,11 +0,0 @@
-// ROOT =======================================================
-// TYPOGRAPHY =================================================
-// TEXTURE ====================================================
-// ELEMENTS ===================================================
-// LAYOUT =====================================================
-.image-grid {
-	li {
-		width: 33.333333%;
-	}
-}
-// VENDOR-SPECIFIC ============================================

assets/less/600.less

@@ -1,90 +0,0 @@
-// ROOT =======================================================
-// TYPOGRAPHY =================================================
-// TEXTURE ====================================================
-// ELEMENTS ===================================================
-// LAYOUT =====================================================
-.site-name {
-	.grid(12,2);
-	.prefix(12,0.5);
-	.suffix(12,0.5);
-}
-.top-navigation {
-	.grid(12,9);
-	.prefix(12,0);
-	.suffix(12,0);
-}
-.image-wrap .headline-wrap,
-.image-wrap:after {
-	left: 25%;
-}
-.image-wrap .headline-wrap {
-	margin-left: 0;
-}
-.image-credit {
-	.grid(12,9);
-	.prefix(12,0);
-	.suffix(12,0);
-}
-#main article {
-	.grid(12,6);
-	.prefix(12,0);
-	.suffix(12,0);
-}
-#index {
-	.grid(12,6);
-	.prefix(12,0);
-	.suffix(12,0);
-}
-.footer-wrap footer {
-	.grid(12,6);
-	.prefix(12,3);
-	.suffix(12,3);
-}
-.article-author-top {
-	display: block;
-	.grid(12,2);
-	.prefix(12,0.5);
-	.suffix(12,0.5);
-	h3,
-	.bio-photo,
-	p,
-	.author-social {
-		display: block;
-		max-width: 125px;
-		margin: auto;
-	}
-	h3 {
-		margin-top: 10px;
-		margin-bottom: 10px;
-	}
-	p {
-		margin-bottom: 20px;
-	}
-	.author-social {
-		margin-bottom: 5px;
-	}
-}
-.article-author-bottom {
-	display: none;
-}
-.toc {
-	display: block;
-	.grid(12,2);
-	.prefix(12,0.5);
-	.suffix(12,0.5);
-	position: absolute;
-	top: 5.5em;
-	right: 0;
-	.box-shadow(0 0 5px rgba(0,0,0,.50));
-}
-.image-grid {
-	li {
-		width: 25%;
-	}
-}
-.related-articles {
-	.grid(12,6);
-	.prefix(12,3);
-	.suffix(12,3);
-}
-// VENDOR-SPECIFIC ============================================

assets/less/768.less

@@ -1,12 +0,0 @@
-// ROOT =======================================================
-// TYPOGRAPHY =================================================
-// TEXTURE ====================================================
-// ELEMENTS ===================================================
-// LAYOUT =====================================================
-/* Image Grid ============================================== */
-.image-grid {
-	li {
-		width: 20%;
-	}
-}
-// VENDOR-SPECIFIC ============================================

assets/less/992.less

@@ -1,26 +0,0 @@
-// ROOT =======================================================
-// TYPOGRAPHY =================================================
-// TEXTURE ====================================================
-// ELEMENTS ===================================================
-// LAYOUT =====================================================
-.article-author-top,
-.article-author-bottom {
-	h3,
-	.bio-photo,
-	p,
-	.author-social {
-		max-width: 150px;
-	}
-	img.bio-photo {
-		width: 150px;
-		height: 150px;
-		.rounded(150px);
-	}
-}
-/* Image Grid ============================================== */
-.image-grid {
-	li {
-		width: 16.666666666%;
-	}
-}
-// VENDOR-SPECIFIC ============================================

assets/less/elements.less

@@ -1,71 +1,75 @@
 hr { 
-    display: block; 
-    margin: 1em 0; 
-    padding: 0;
-    height: 1px; 
-    border: 0; 
-    border-top: 1px solid #ccc;
-    border-bottom: 1px solid #fff; 
+	display: block; 
+	margin: 1em 0; 
+	padding: 0;
+	height: 1px; 
+	border: 0; 
+	border-top: 1px solid #ccc;
+	border-bottom: 1px solid #fff; 
 }
 /* Figures and images ==================================== */
 article img {
-  max-width: 100%;
-  height: auto;
-  border-width: 0; 
-  vertical-align: middle; 
-  -ms-interpolation-mode: bicubic; 
+	max-width: 100%;
+	height: auto;
+	border-width: 0; 
+	vertical-align: middle; 
+	-ms-interpolation-mode: bicubic; 
 }
 svg:not(:root) {
-    overflow: hidden; 
+		overflow: hidden; 
 }
 .half {
-  .container();
-  .clearfix();
-  img {
-    .grid(12,6);
-  }
-  figcaption {
-    .grid(12,12);
-  }
+	.container();
+	.clearfix();
+	@media @480px {
+		img {
+			.grid(12,6);
+		}
+		figcaption {
+			.grid(12,12);
+		}
+	}
 }
 .third {
-  .container();
-  .clearfix();
-  img {
-    .grid(12,4);
-  }
-  figcaption {
-    .grid(12,12);
-  }
+	.container();
+	.clearfix();
+	@media @480px {
+		img {
+			.grid(12,4);
+		}
+		figcaption {
+			.grid(12,12);
+		}
+	}
 }
 /* Buttons ============================================== */
 .btn {
-  display: inline-block;
-  margin-bottom: 20px;
-  padding: 8px 20px;
-  .font-rem(14);
-  background-color: @black;
-  color: @white;
-  border: 2px solid @black !important;
-  .rounded(4px);
-  &:visited {
-    color: @white;
-  }
-  &:hover {
-    background-color: @white;
-    color: @black;
-  }
-  &:active {
-    .translate(0, 2px);
-  }
+	display: inline-block;
+	margin-bottom: 20px;
+	padding: 8px 20px;
+	.font-rem(14);
+	background-color: @black;
+	color: @white;
+	border: 2px solid @black !important;
+	.rounded(4px);
+	&:visited {
+		color: @white;
+	}
+	&:hover {
+		background-color: @white;
+		color: @black;
+	}
+	&:active {
+		.translate(0, 2px);
+	}
 }
 /* Well ================================================= */
 .well {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
-  .rounded(4px);
-  .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
+	min-height: 20px;
+	padding: 19px;
+	margin-bottom: 20px;
+	background-color: #f5f5f5;
+	border: 1px solid #e3e3e3;
+	.rounded(4px);
+	.box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
 }

assets/less/ie.less

@@ -1,37 +0,0 @@
-// ===========================================================
-// Minimal Mistakes
-// By: Michael Rose
-// ===========================================================/
-
-// ROOT =======================================================
-/* CSS Normalize =========================================== */
-@import "normalize.less";
-/* Variables and mixins ==================================== */
-@import "variables.less";
-/* Site wide styles (html, body, global classes) =========== */
-@import "site.less";
-// TYPOGRAPHY =================================================
-@import "typography.less";
-// MIXINS =====================================================
-@import "mixins.less";
-@import "grid.less";
-// ELEMENTS ===================================================
-/* Figures, images, social media, other elements =========== */
-@import "elements.less";
-/* Standard form controls ================================== */
-@import "forms.less";
-// LAYOUT =====================================================
-/* Page level layout styles */
-@import "page.less";
-// MODERNIZR ==================================================
-// MEDIA QUERIES ==============================================
-/* 480px wide ============================================== */
-@import "480.less";
-/* 600px wide ============================================== */
-@import "600.less";
-/* 768px wide ============================================== */
-@import "768.less";
-/* 992px wide ============================================== */
-@import "992.less";
-/* 1382px wide ============================================= */
-@import "1382.less";

assets/less/main.less

@@ -36,28 +36,4 @@
 /* Print =================================================== */
 @media print {
 	@import "print.less";
-}
-/* 480px wide ============================================== */
-@media only screen and (min-width: 30em) {
-	@import "480.less";
-}
-/* 600px wide ============================================== */
-@media only screen and (min-width: 37.5em) {
-	@import "600.less";
-}
-/* 768px wide ============================================== */
-@media only screen and (min-width: 48em) {
-	@import "768.less";
-}
-/* 992px wide ============================================== */
-@media only screen and (min-width: 62em) {
-	@import "992.less";
-}
-/* 1382px wide ============================================= */
-@media only screen and (min-width: 86.375em) {
-	@import "1382.less";
-}
-/* 2x for retina displays ================================== */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
-	@import "2x.less"; 
 }

assets/less/mixins.less

@@ -293,4 +293,18 @@ clip : auto;
 height : auto; 
 width : auto;
 margin : 0; 
-overflow: visible; }
+overflow: visible; }
+
+
+// MEDIA QUERIES
+// --------------------------------------------------
+
+@480px:       ~"only screen and (min-width: 30em)";
+@600px:       ~"only screen and (min-width: 37.5em)";
+@768px:       ~"only screen and (min-width: 48em)";
+@992px:       ~"only screen and (min-width: 62em)";
+@1382px:      ~"only screen and (min-width: 86.375em)";
+@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
+              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
+              ~"only screen and (min-resolution: 144dpi)",
+              ~"only screen and (min-resolution: 1.5dppx)";

assets/less/normalize.less

@@ -394,4 +394,5 @@ table {
     border-collapse: collapse;
     border-spacing: 0;
     margin-bottom: 1.5em;
+    width: 100%; /* make full width */
 }

assets/less/page.less

@@ -18,6 +18,17 @@ body {
 	margin-bottom: 1em;
 	float: none;
 	display: block;
+	.font-rem(24);
+	@media @600px {
+		.grid(12,2);
+		.prefix(12,0.5);
+		.suffix(12,0.5);
+		.font-rem(16);
+	}
+	@media @1382px {
+		.grid(12,1.5);
+		.prefix(12,2);
+	}
 }
 .top-navigation {
 	.grid(12,10);
@@ -26,25 +37,170 @@ body {
 	margin-bottom: 1em;
 	float: none;
 	display: block;
-}
-.top-navigation {
+	@media @600px {
+		.grid(12,9);
+		.prefix(12,0);
+		.suffix(12,0);
+	}
+	@media @1382px {
+		.grid(12,8);
+	}
 	ul {
-		list-style: none;
 		margin: 0;
 		padding: 0;
+		clear: both;
+		list-style-type: none;
 	}
 	li {
+		display: block;
 		list-style-type: none;
-		display: inline;
-		margin-right: 25px;
-		white-space: nowrap;
+		border-bottom: 1px solid lighten(@black,80);
+		border-bottom: 1px solid fade(@black,10);
+		.font-rem(16);
+		&:last-child {
+			border-bottom: 0 solid transparent;
+		}
+		@media @600px {
+			display: inline;
+			margin-right: 25px;
+			white-space: nowrap;
+			border-bottom: 0 solid transparent;
+		}
 		a { 
+			display: block;
+			padding: 10px 0;
 			decoration: none;
 			border-bottom: 0 solid transparent;
 			.transition(all .2s);
+			@media @600px {
+				display: inline;
+				padding: 0;
+			}
 		}
 	}
 }
+// Navicon lines
+@button-size: 1.5rem;
+.line() {
+	display: inline-block;
+	width: @button-size;
+	height: @button-size/7;
+	// line color
+	background: @white;
+	border-radius: @button-size/14;
+	transition: .3s;
+}
+.lines-button {
+	padding: @button-size/4 @button-size/2;
+	transition: .3s;
+	cursor: pointer;
+	user-select: none;
+	border-radius: @button-size/7;
+}
+.lines-button:hover {
+	opacity: 1;
+}
+.lines-button:active {
+	transition: 0;
+}
+.lines {
+	margin-right: 10px;
+	margin-bottom: @button-size/5;
+	// create middle line
+	.line();
+	position: relative;
+	// create the upper and lower lines as pseudo-elements of the middle line
+	&:before,
+	&:after {
+		.line();
+		position: absolute;
+		left: 0;
+		content: '';
+		-webkit-transform-origin: @button-size/14 center;
+		transform-origin: @button-size/14 center;
+	}
+	&:before { top: @button-size/4; }
+	&:after { top: -@button-size/4; }
+}
+.lines-button:hover {
+	opacity: 1;
+	.lines {
+		&:before { top: @button-size/3.5; }
+		&:after { top: -@button-size/3.5; }
+	}
+}
+.lines-button.x.active .lines {
+	// hide the middle line
+	background: transparent;
+	// overlap the lines by setting both their top values to 0
+	&:before,
+	&:after {
+		-webkit-transform-origin: 50% 50%;
+		transform-origin: 50% 50%;
+		top: 0;
+		width: @button-size;
+	}
+	// rotate the lines to form the x shape
+	&:before {
+		-webkit-transform: rotate3d(0,0,1,45deg);
+		transform: rotate3d(0,0,1,45deg);
+	}
+	&:after {
+		-webkit-transform: rotate3d(0,0,1,-45deg);
+		transform: rotate3d(0,0,1,-45deg);
+	}
+}
+// Style the toggle menu link and hide it
+.nav .navtoogle {	
+	.font-rem(18);
+	font-weight: normal;
+	background-color: @black;
+	color: @white;	
+	border: none;
+	cursor: pointer;
+	@media @600px {
+		display: none;
+	}
+}
+.nav button {
+	border: none;
+	background: none;
+}
+.navtoogle i {
+	z-index:-1;
+}
+.icon-menu {
+	position: relative;
+	top: 3px;
+	line-height: 0;
+}
+// When JavaScript is disabled, we hide the toggle button
+.no-js .nav .navtoggle {
+	display: none;
+}
+// When JavaScript is disabled, we show the menu
+.no-js .nav ul {
+	max-height: 30em;
+	overflow: hidden;
+}
+// When JavaScript is enabled, we hide the menu
+.js .nav ul {
+	max-height: 0;
+	overflow: hidden;
+	@media @600px {
+		max-height: 30em;
+	}
+}
+// Displaying the menu when the user has clicked on the button
+.js .nav .active + ul {		
+	max-height: 30em;
+	overflow: hidden;
+	-webkit-transition: max-height .4s;
+	-moz-transition: max-height .4s;
+	-o-transition: max-height .4s;
+	-ms-transition: max-height .4s;
+	transition: max-height .4s;
+}
 #main {
 	counter-reset: captions;
 	.container();
@@ -57,6 +213,14 @@ body {
 		.prefix(12,1);
 		.suffix(12,1);
 		margin-bottom: 2em;
+		@media @600px {
+			.grid(12,6);
+			.prefix(12,0);
+			.suffix(12,0);
+		}
+		@media @1382px {
+			.grid(12,4.5);
+		}
 	}
 }
 #index {
@@ -65,6 +229,14 @@ body {
 	.prefix(12,1);
 	.suffix(12,1);
 	margin-bottom: 2em;
+	@media @600px {
+		.grid(12,6);
+		.prefix(12,0);
+		.suffix(12,0);
+	}
+	@media @1382px {
+		.grid(12,4.5);
+	}
 	h3 {
 		margin: 0;
 		padding-bottom: .5em;
@@ -75,7 +247,6 @@ body {
 		h2 {
 			margin-bottom: 4px;
 			.font-rem(20);
-			text-transform: uppercase;
 		}
 		p {
 			.font-rem(14);
@@ -98,6 +269,12 @@ body {
 		height: 0;
 		border: 20px solid transparent;
 		border-bottom-color: @bodycolor;
+		@media @600px {
+			left: 25%;
+		}
+		@media @1382px {
+			left: 33.333333333%;
+		}
 	}
 	img {
 		width: 100%;
@@ -108,6 +285,13 @@ body {
 		position: absolute;
 		bottom: 25px;
 		.prefix(12,1);
+		@media @600px {
+			left: 25%;
+			margin-left: 0;
+		}
+		@media @1382px {
+			.prefix(12,1);
+		}
 		h1, h2 {
 			color: @white;
 			.text-shadow(0 1px 2px rgba(0,0,0,.25));
@@ -118,7 +302,7 @@ body {
 	clear: both;
 	font-size: 80%;
 }
-.article-author-top,
+.article-author-side,
 .article-author-bottom {
 	h3 {
 		margin-bottom: 0;
@@ -151,11 +335,54 @@ body {
     .translate(0, 2px);
   }
 }
-.article-author-top {
+.article-author-side {
 	display: none;
+	@media @600px {
+		display: block;
+		.grid(12,2);
+		.prefix(12,0.5);
+		.suffix(12,0.5);
+		h3,
+		.bio-photo,
+		p,
+		.author-social {
+			display: block;
+			max-width: 125px;
+			margin: auto;
+		}
+		h3 {
+			margin-top: 10px;
+			margin-bottom: 10px;
+		}
+		p {
+			margin-bottom: 20px;
+		}
+		.author-social {
+			margin-bottom: 5px;
+		}
+	}
+	@media @992px {
+		h3,
+		.bio-photo,
+		p,
+		.author-social {
+			max-width: 150px;
+		}
+		img.bio-photo {
+			margin-left: 25px;
+			margin-right: 25px;
+		}
+	}
+	@media @1382px {
+		.grid(12,1.5);
+		.prefix(12,2);
+	}
 }
 .article-author-bottom {
 	margin-bottom: 1em;
+	@media @600px {
+		display: none;
+	}
 	.bio-photo {
 		float: left;
 		margin-right: 25px;
@@ -164,6 +391,18 @@ body {
 		display: inline-block;
 		margin-right: 5px;
 	}
+	@media @992px {
+		h3,
+		.bio-photo,
+		p,
+		.author-social {
+			max-width: 150px;
+		}
+		img.bio-photo {
+			margin-left: 25px;
+			margin-right: 25px;
+		}
+	}
 }
 .article-wrap {
 	// Dotted line underlines for links
@@ -182,10 +421,15 @@ body {
 .toc {
 	display: none;
 	font-size: 95%;
-	.opacity(0.7);
-	.transition(opacity 0.2s ease-in-out);
-	&:hover {
-		.opacity(1);
+	@media @600px {
+		display: block;
+		.grid(12,2);
+		.prefix(12,0.5);
+		.suffix(12,0.5);
+		position: absolute;
+		top: 5.5em;
+		right: 0;
+		background-color: @white;
 	}
 	header {
 		background: lighten(@black, 10);
@@ -194,6 +438,8 @@ body {
 		margin: 0;
 		padding: 5px 10px;
 		color: @white;
+		.font-rem(16);
+		text-transform: uppercase;
 		&:hover {
 			cursor: pointer;
 		}
@@ -201,15 +447,14 @@ body {
 	ul {
 		margin: 2px 0 0;
 		padding: 0;
-		background: lighten(@black, 30);
 		line-height: 1;
 	}
 	li {
 		display: block;
-		margin: 0;
+		margin: 0 0 1px 0;
 		padding: 0;
 		font-family: @heading-font;
-		border-bottom: 1px solid darken(@white, 50);
+		list-style-type: none;
 		&:last-child {
 			border-bottom-width: 0;
 		}
@@ -218,17 +463,15 @@ body {
 			display: block;
 			color: @white;
 			border-bottom-width: 0;
+			background: lighten(@black, 30);
+			.opacity(0.7);
+			.transition(opacity 0.2s ease-in-out);
 			&:hover {
-				font-weight: 400;
-				:before {
-					content: "\00bb";
-					padding-right: 5px;
-				}
+				.opacity(1);
 			}
 		}
 		ul {
-			margin: 0;
-			border-top: 1px solid darken(@white, 50);
+			margin: 1px 0 0;
 		}
 	}
 }
@@ -239,6 +482,18 @@ body {
 	padding: 0;
 	li {
 		.grid(12,6);
+		@media @480px {
+			width: 33.333333%;
+		}
+		@media @600px {
+			width: 25%;
+		}
+		@media @768px {
+			width: 20%;
+		}
+		@media @992px {
+			width: 16.666666666%;
+		}
 	}
 }
 .recent-grid {
@@ -294,10 +549,7 @@ body {
 	.container();
 	.clearfix();
 	clear: both;
-	margin-top: 1em;
-	padding-top: 2em;
 	padding-bottom: 3em;
-	background-color: @black;
 	a,
 	a:active,
 	a:visited,
@@ -305,23 +557,23 @@ body {
 	h4,
 	h5,
 	h6,
-	span {
-		color: darken(@white, 25);
-	}
 	span { 
 		.font-rem(14);
 	}
-	a {
-		border-bottom: 0 solid transparent;
-		&:hover {
-			color: @white;
-			border-bottom: 0 solid transparent;
-		}
-	}
 	footer {
 		.grid(12,10);
 		.prefix(12,1);
 		.suffix(12,1);
+		@media @600px {
+			.grid(12,6);
+			.prefix(12,3);
+			.suffix(12,3);
+		}
+		@media @1382px {
+			.grid(12,4.5);
+			.prefix(12,4);
+			.suffix(12,3.5);
+		}
 	}
 }
 .related-articles {
@@ -329,6 +581,16 @@ body {
 	.prefix(12,1);
 	.suffix(12,1);
 	margin-bottom: 2em;
+	@media @600px {
+		.grid(12,6);
+		.prefix(12,3);
+		.suffix(12,3);
+	}
+	@media @1382px {
+		.grid(12,4.5);
+		.prefix(12,4);
+		.suffix(12,3.5);
+	}
 	h4 {
 		
 		text-transform: uppercase;
@@ -336,7 +598,6 @@ body {
 	}
 	li {
 		margin-bottom: 0;
-		color: @white;
 	}
 }
 .footer-icons {

assets/less/typography.less

@@ -71,6 +71,14 @@ figcaption {
 	line-height: 1.3;
 	font-style: italic;
 	color: lighten(@text-color, 30);
+	@media @600px {
+		.grid(12,9);
+		.prefix(12,0);
+		.suffix(12,0);
+	}
+	@media @1382px {
+		.grid(12,8.5);
+	}
 	a {
 		color: lighten(@text-color, 30);
 	}
@@ -103,7 +111,8 @@ blockquote {
 // --------------------------------------------------
 .footnotes {
 	ol, li, p {
-		.font-size(14);
+		margin-bottom: 0;
+		.font-rem(14);
 	}
 }
 

feed.xml

@@ -5,7 +5,7 @@ layout: none
 <feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
 <title type="text">{{ site.title }}</title>
 <subtitle type="text">{{ site.tagline }}</subtitle>
-<generator uri="https://github.com/mojombo/jekyll">Jekyll</generator>
+<generator uri="https://github.com/jekyll/jekyll">Jekyll</generator>
 <link rel="self" type="application/atom+xml" href="{{ site.url }}/feed.xml" />
 <link rel="alternate" type="text/html" href="{{ site.url }}" />
 <updated>{{ site.time | date_to_xmlschema }}</updated>
@@ -34,4 +34,4 @@ layout: none
   &lt;p&gt;&lt;a href=&quot;{{ site.url }}{{ post.url }}&quot;&gt;{{ post.title }}&lt;/a&gt; was originally published by {{ site.owner.name }} at &lt;a href=&quot;{{ site.url }}&quot;&gt;{{ site.title }}&lt;/a&gt; on {{ post.date | date: "%B %d, %Y" }}.&lt;/p&gt;</content>
 </entry>
 {% endfor %}
-</feed>
+</feed>

posts.md

@@ -0,0 +1,7 @@
+---
+layout: post-index
+permalink: /posts/
+title: All Posts
+tagline: A List of Posts
+tags: [blog]
+---

theme-setup.md

@@ -1,6 +1,6 @@
 ---
 layout: page
-permalink: /theme-setup/index.html
+permalink: /theme-setup/
 title: Theme Setup
 description: "Instructions on how to install and customize the Jekyll theme Minimal Mistakes."
 tags: [Jekyll, theme, responsive]
@@ -22,27 +22,37 @@ image:
 
 General notes and suggestions for customizing Minimal Mistakes.
 
-## Basic Setup
+## Basic Setup for a new Jekyll site
 
-1. [Install Jekyll](http://jekyllrb.com) if you haven't already.
-2. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/)
-3. Make it your own and customize, customize, customize.
+1. [Install Bundler](http://bundler.io) `gem install bundler` and then install [Jekyll](http://jekyllrb.com) and all dependencies `bundle install`.
+2. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/fork).
+3. Clone the repo you just forked and rename it.
+4. Edit `_config.yml` to personalize your site.
+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.
+6. Read the documentation below for further customization pointers and documentation.
 
-<a markdown="0" href="http://github.com/mmistakes/minimal-mistakes" class="btn">Minimal Mistakes on GitHub</a>
+<div markdown="0"><a href="https://github.com/mmistakes/minimal-mistakes/archive/master.zip" class="btn">Download the Theme</a></div>
+
+**Pro-tip:** Delete the `gh-pages` branch after cloning and start fresh by branching off `master`. There is a bunch of garbage in `gh-pages` used for the theme's demo site that I'm guessing you don't want on your site.
+{: .notice}
+
+---
+
+## Folder Structure
 
 {% highlight text %}
 minimal-mistakes/
 ├── _includes/
-|    ├── author-bio.html  #bio stuff goes here
-|    ├── browser-upgrade.html  #displays on IE8 and less
-|    ├── footer.html  #site footer
-|    ├── head.html  #site head
-|    ├── navigation.html #site top nav
-|    └── scripts.html  #jQuery, plugins, GA, etc.
+|    ├── _author-bio.html  #bio stuff goes here
+|    ├── _browser-upgrade.html  #displays on IE8 and less
+|    ├── _footer.html  #site footer
+|    ├── _head.html  #site head
+|    ├── _navigation.html #site top nav
+|    └── _scripts.html  #jQuery, plugins, GA, etc.
 ├── _layouts/
 |    ├── home.html  #homepage layout
 |    ├── page.html  #page layout
-|    ├── post-index.html  #post listing layout
+|    ├── post-index.html  #post index layout
 |    └── post.html  #post layout
 ├── _posts/
 ├── assets/
@@ -55,7 +65,7 @@ minimal-mistakes/
 |    └── less/
 ├── images/  # images for posts and pages
 ├── about.md  # about page
-├── articles.md  # lists all posts from latest to oldest
+├── posts.md  # lists all posts from latest to oldest
 └── index.md  # homepage. lists 5 most recent posts
 {% endhighlight %}
 
@@ -69,7 +79,7 @@ Most of the variables found here are used in the .html files found in `_includes
 
 #### Owner/Author Information
 
-Change your name, bio, and avatar photo (100x100 pixels or larger), Twitter url, email, and Google+ url. If you want to link to an external image on Gravatar or something similiar you'll need to edit the path in `author-bio.html` since it assumes it is located in `\images`.
+Change your name, bio, and avatar photo (100x100 pixels or larger), Twitter url, email, and Google+ url. If you want to link to an external image on Gravatar or something similiar you'll need to edit the path in `_author-bio.html` since it assumes it is located in `/images`.
 
 Including a link to your Google+ profile has the added benefit of displaying [Google Authorship](https://plus.google.com/authorship) in Google search results if you've went ahead and applied for it. Don't have a Google+ account? Just leave it blank.
 
@@ -85,11 +95,11 @@ Edit page/post titles and URLs to include in the site's navigation. For external
 # sample top navigation links
 links:
   - title: About Page
-    url: /about
-  - title: Articles
-    url: /articles
+    url: /about/
+  - title: Posts
+    url: /posts/
   - title: Other Page
-    url: /other-page
+    url: /other-page/
   - title: External Page
     url: http://mademistakes.com
     external: true
@@ -97,7 +107,19 @@ links:
 
 ### Adding Posts and Pages
 
-There are two main content layouts: *post.html* (for posts) and *page.html* (for pages). Both have large **feature images** that span the full-width of the screen, and both are meant for text heavy blog posts (or articles). 
+There are two main content layouts: *post.html* (for posts) and *page.html* (for pages). Both have large **feature images** that span the full-width of the screen, and both are meant for long form articles and blog posts.
+
+There are two rake tasks that can be used to create a new post or page with all YAML Front Matter. Using either `rake new_post` or `rake new_page` will prompt you for a title and tags to classify them. Example below:
+
+{% highlight bash %}
+rake new_post
+
+Enter a title for your post: My Awesome Post
+Enter tags to classify your post (comma separated): web development, code
+Creating new post: _posts/2014-02-10-my-awesome-post.md
+{% endhighlight %}
+
+There are a few configuration variables that can be changed in `Rakefile.rb`. By default posts and pages will be created in MarkDown using the `.md` extension.
 
 #### Feature Images
 
@@ -120,9 +142,22 @@ image:
   creditlink: http://mademistakes.com #url to their site or licensing
 {% endhighlight %}
 
+#### Post Index Page
+
+A [sample index page]({{ site.url }}/posts/) listing all posts grouped by the year they were published has been provided. The name can be customized to your liking by editing a few references. For example, to change **Posts** to **Writing** update the following:
+
+* In `_config.yml` under `links:` rename the title and URL to the following:
+{% highlight yaml %}
+  links:
+  - title: Writing
+    url: /writing/
+{% endhighlight %}
+* Rename `posts.md` to `writing.md` and update the YAML front matter to match the title and URL set in `_config.yml`
+* Update the **View all posts** link in `post.html` layout found in `_layouts` to match title and URL set previously.
+
 #### Thumbnails for OG and Twitter Cards
 
-Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in *head.html*. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options.
+Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in *_head.html*. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options.
 
 #### Table of Contents
 
@@ -180,6 +215,6 @@ Having a problem getting something to work or want to know why I setup something
 This theme is free and open source software, distributed under the [GNU General Public License]({{ site.url }}/LICENSE) version 2 or later. So feel free to use this Jekyll theme on your site without linking back to me or including a disclaimer. 
 
 
-[^1]: Used to generate absolute urls in `sitemap.xml`, `feed.xml`, and for canonical urls in `head.html`. Don't include a trailing `/` in your base url ie: `http://mademistakes.com`. When developing locally remove or comment out this line so local .css, .js, and images are used.
+[^1]: Used to generate absolute urls in `sitemap.xml`, `feed.xml`, and for canonical urls in `_head.html`. Don't include a trailing `/` in your base url ie: `http://mademistakes.com`. When developing locally remove or comment out this line so local .css, .js, and images are used.
 
 [^2]: If you're using GitHub Pages to host your site be aware that plugins are disabled. So you'll need to build your site locally and then manually deploy if you want to use this sweet plugin.