Improve responsive nav experience

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

@@ -25,7 +25,7 @@ General notes and suggestions for customizing Minimal Mistakes.
 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/archive/master.zip)
+[Demo the Theme](http://mmistakes.github.io/minimal-mistakes)
 
 **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.
 

_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">
+		<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 -->

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; 
-    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/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;
@@ -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);
-	.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);
@@ -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,10 +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 {
+				.opacity(1);
+			}
 		}
 		ul {
-			margin: 0;
-			border-top: 1px solid darken(@white, 50);
+			margin: 1px 0 0;
 		}
 	}
 }
@@ -231,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 {
@@ -301,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 {
@@ -308,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);
 	}