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/*.less'
-          'assets/less/bootstrap/*.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.
+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/)
+2. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/fork).
-3. Clone the repo you just forked to your computer.
+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

@@ -32,8 +32,8 @@ bing_verify:
 links:
   - title: About
     url: /about/
-  - title: Articles
+  - title: Posts
-    url: /articles/
+    url: /posts/
   - title: Theme Setup
     url: /theme-setup/
   - title: Made Mistakes
@@ -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 -->
+<!-- HTML5 Shiv and Media Query Support -->
-<script src="{{ site.url }}/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>
+<!--[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

@@ -7,14 +7,14 @@
 {% include _head.html %}
 </head>
 
-<body class="home" itemscope itemtype="http://schema.org/WebPage">
+<body class="home">
 
 {% include _browser-upgrade.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 %}
 
@@ -22,12 +22,12 @@
   {% include _author-bio.html %}
 </div>
 
-<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
+<div id="index">
   <h3><a href="{{ site.url}}/articles/">Articles</a></h3>
   {% for post in site.posts limit:5 %}    
-  <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
+  <article>
-    <h2 itemprop="headline"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2>
+    <h2><a href="{{ site.url }}{{ post.url }}" 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>
+    <p>{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
   </article>
   {% endfor %}
 </div><!-- /#index -->

_layouts/page.html

@@ -7,24 +7,24 @@
 {% include _head.html %}
 </head>
 
-<body class="page" itemscope itemtype="http://schema.org/WebPage">
+<body class="page">
 
 {% include _browser-upgrade.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 id="main" role="main">
   <div class="article-author-side">
     {% include _author-bio.html %}
   </div>
-  <article itemscope itemtype="http://schema.org/CreativeWork">
+  <article>
-    <h1 itemprop="name">{{ page.title }}</h1>
+    <h1>{{ page.title }}</h1>
-    <div class="article-wrap" itemprop="text">
+    <div class="article-wrap">
       {{ content }}
     </div><!-- /.article-wrap -->
   </article>

_layouts/post-index.html

@@ -7,7 +7,7 @@
 {% include _head.html %}
 </head>
 
-<body class="articles" itemscope itemtype="http://schema.org/WebPage">
+<body class="post-index">
 
 {% include _browser-upgrade.html %}
 
@@ -22,8 +22,8 @@
   {% include _author-bio.html %}
 </div>
 
-<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
+<div id="index">
-  <h1 itemprop="name">{{ page.title }}</h1>
+  <h1>{{ page.title }}</h1>
   {% for post in site.posts %}  
   {% unless post.next %}
     <h3>{{ post.date | date: '%Y' }}</h3>
@@ -34,9 +34,9 @@
         <h3>{{ post.date | date: '%Y' }}</h3>
       {% endif %}
     {% endunless %}
-    <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
+    <article>
-      <h2 itemprop="headline"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2>
+      <h2><a href="{{ site.url }}{{ post.url }}" 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>
+      <p>{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
     </article>
   {% endfor %}
 </div><!-- /#index -->

_layouts/post.html

@@ -7,34 +7,34 @@
 {% include _head.html %}
 </head>
 
-<body class="article" itemscope itemtype="http://schema.org/WebPage">
+<body class="post">
 
 {% include _browser-upgrade.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 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 %}
         </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 %}
@@ -66,4 +66,4 @@
 {% 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]

articles.md

@@ -1,7 +0,0 @@
----
-layout: post-index
-permalink: /articles/
-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-side {
-	.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-side {
-	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-side,
-.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; 
+	display: block; 
-    margin: 1em 0; 
+	margin: 1em 0; 
-    padding: 0;
+	padding: 0;
-    height: 1px; 
+	height: 1px; 
-    border: 0; 
+	border: 0; 
-    border-top: 1px solid #ccc;
+	border-top: 1px solid #ccc;
-    border-bottom: 1px solid #fff; 
+	border-bottom: 1px solid #fff; 
 }
 /* Figures and images ==================================== */
 article img {
-  max-width: 100%;
+	max-width: 100%;
-  height: auto;
+	height: auto;
-  border-width: 0; 
+	border-width: 0; 
-  vertical-align: middle; 
+	vertical-align: middle; 
-  -ms-interpolation-mode: bicubic; 
+	-ms-interpolation-mode: bicubic; 
 }
 svg:not(:root) {
-    overflow: hidden; 
+		overflow: hidden; 
 }
 .half {
-  .container();
+	.container();
-  .clearfix();
+	.clearfix();
-  img {
+	@media @480px {
-    .grid(12,6);
+		img {
-  }
+			.grid(12,6);
-  figcaption {
+		}
-    .grid(12,12);
+		figcaption {
-  }
+			.grid(12,12);
+		}
+	}
 }
 .third {
-  .container();
+	.container();
-  .clearfix();
+	.clearfix();
-  img {
+	@media @480px {
-    .grid(12,4);
+		img {
-  }
+			.grid(12,4);
-  figcaption {
+		}
-    .grid(12,12);
+		figcaption {
-  }
+			.grid(12,12);
+		}
+	}
 }
 /* Buttons ============================================== */
 .btn {
-  display: inline-block;
+	display: inline-block;
-  margin-bottom: 20px;
+	margin-bottom: 20px;
-  padding: 8px 20px;
+	padding: 8px 20px;
-  .font-rem(14);
+	.font-rem(14);
-  background-color: @black;
+	background-color: @black;
-  color: @white;
+	color: @white;
-  border: 2px solid @black !important;
+	border: 2px solid @black !important;
-  .rounded(4px);
+	.rounded(4px);
-  &:visited {
+	&:visited {
-    color: @white;
+		color: @white;
-  }
+	}
-  &:hover {
+	&:hover {
-    background-color: @white;
+		background-color: @white;
-    color: @black;
+		color: @black;
-  }
+	}
-  &:active {
+	&:active {
-    .translate(0, 2px);
+		.translate(0, 2px);
-  }
+	}
 }
 /* Well ================================================= */
 .well {
-  min-height: 20px;
+	min-height: 20px;
-  padding: 19px;
+	padding: 19px;
-  margin-bottom: 20px;
+	margin-bottom: 20px;
-  background-color: #f5f5f5;
+	background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
+	border: 1px solid #e3e3e3;
-  .rounded(4px);
+	.rounded(4px);
-  .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
+	.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/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;
-}
+	@media @600px {
-.top-navigation {
+		.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;
+		border-bottom: 1px solid lighten(@black,80);
-		margin-right: 25px;
+		border-bottom: 1px solid fade(@black,10);
-		white-space: nowrap;
+		.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;
@@ -97,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%;
@@ -107,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));
@@ -152,9 +337,52 @@ body {
 }
 .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;
@@ -163,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
@@ -181,10 +421,15 @@ body {
 .toc {
 	display: none;
 	font-size: 95%;
-	.opacity(0.7);
+	@media @600px {
-	.transition(opacity 0.2s ease-in-out);
+		display: block;
-	&:hover {
+		.grid(12,2);
-		.opacity(1);
+		.prefix(12,0.5);
+		.suffix(12,0.5);
+		position: absolute;
+		top: 5.5em;
+		right: 0;
+		background-color: @white;
 	}
 	header {
 		background: lighten(@black, 10);
@@ -193,6 +438,8 @@ body {
 		margin: 0;
 		padding: 5px 10px;
 		color: @white;
+		.font-rem(16);
+		text-transform: uppercase;
 		&:hover {
 			cursor: pointer;
 		}
@@ -200,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;
 		}
@@ -217,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;
+				.opacity(1);
-				:before {
-					content: "\00bb";
-					padding-right: 5px;
-				}
 			}
 		}
 		ul {
-			margin: 0;
+			margin: 1px 0 0;
-			border-top: 1px solid darken(@white, 50);
 		}
 	}
 }
@@ -238,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 {
@@ -308,6 +564,16 @@ body {
 		.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 {
@@ -315,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;

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);
 	}

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,13 +22,23 @@ 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.
+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/)
+2. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/fork).
-3. Make it your own and customize, customize, customize.
+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/
@@ -42,7 +52,7 @@ minimal-mistakes/
 ├── _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
+    url: /about/
-  - title: Articles
+  - title: Posts
-    url: /articles
+    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,6 +142,19 @@ 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.