jekyll-theme-primer 0.3.1 → 0.4.0

data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="anchorjs-extras" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
+<glyph unicode="&#xf0c1;" d="M832 182.858q0 22.857-16 38.857l-118.857 118.857q-16 16-38.857 16-24 0-41.143-18.286 1.714-1.714 10.857-10.571t12.286-12.286 8.571-10.857 7.429-14.571 2-15.714q0-22.857-16-38.857t-38.857-16q-8.571 0-15.714 2t-14.571 7.429-10.857 8.571-12.286 12.286-10.571 10.857q-18.857-17.714-18.857-41.714 0-22.857 16-38.857l117.714-118.286q15.429-15.429 38.857-15.429 22.857 0 38.857 14.857l84 83.429q16 16 16 38.286zM430.286 585.715q0 22.857-16 38.857l-117.714 118.286q-16 16-38.857 16-22.286 0-38.857-15.429l-84-83.429q-16-16-16-38.286 0-22.857 16-38.857l118.857-118.857q15.429-15.429 38.857-15.429 24 0 41.143 17.714-1.714 1.714-10.857 10.571t-12.286 12.286-8.571 10.857-7.429 14.571-2 15.714q0 22.857 16 38.857t38.857 16q8.571 0 15.714-2t14.571-7.429 10.857-8.571 12.286-12.286 10.571-10.857q18.857 17.714 18.857 41.714zM941.714 182.858q0-68.571-48.571-116l-84-83.429q-47.429-47.429-116-47.429-69.143 0-116.571 48.571l-117.714 118.286q-47.429 47.429-47.429 116 0 70.286 50.286 119.429l-50.286 50.286q-49.143-50.286-118.857-50.286-68.571 0-116.571 48l-118.857 118.857q-48 48-48 116.571t48.571 116l84 83.429q47.429 47.429 116 47.429 69.143 0 116.571-48.571l117.714-118.286q47.429-47.429 47.429-116 0-70.286-50.286-119.429l50.286-50.286q49.143 50.286 118.857 50.286 68.571 0 116.571-48l118.857-118.857q48-48 48-116.571z" horiz-adv-x="951" />
+</font></defs></svg>

data/assets/javascript/anchor-js/docs/fonts/fonts.css

@@ -0,0 +1,24 @@
+@font-face {
+	font-family: 'anchorjs-extras';
+	src:url('anchorjs-extras.eot?-qcq09q');
+	src:url('anchorjs-extras.eot?#iefix-qcq09q') format('embedded-opentype'),
+		url('anchorjs-extras.woff?-qcq09q') format('woff'),
+		url('anchorjs-extras.ttf?-qcq09q') format('truetype'),
+		url('anchorjs-extras.svg?-qcq09q#anchorjs-extras') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="ajs-"], [class*=" ajs-"] {
+	font-family: 'anchorjs-extras';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}

data/assets/javascript/anchor-js/docs/grunticon/grunticon.loader.js

@@ -0,0 +1,3 @@
+/*! grunt-grunticon Stylesheet Loader - v2.1.2 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */
+
+(function(e){function t(t,n,r,o){"use strict";function a(){for(var e,n=0;u.length>n;n++)u[n].href&&u[n].href.indexOf(t)>-1&&(e=!0);e?i.media=r||"all":setTimeout(a)}var i=e.document.createElement("link"),l=n||e.document.getElementsByTagName("script")[0],u=e.document.styleSheets;return i.rel="stylesheet",i.href=t,i.media="only x",i.onload=o||null,l.parentNode.insertBefore(i,l),a(),i}var n=function(r,o){"use strict";if(r&&3===r.length){var a=e.navigator,i=e.Image,l=!(!document.createElementNS||!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||e.opera&&-1===a.userAgent.indexOf("Chrome")||-1!==a.userAgent.indexOf("Series40")),u=new i;u.onerror=function(){n.method="png",n.href=r[2],t(r[2])},u.onload=function(){var e=1===u.width&&1===u.height,a=r[e&&l?0:e?1:2];n.method=e&&l?"svg":e?"datapng":"png",n.href=a,t(a,null,null,o)},u.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",document.documentElement.className+=" grunticon"}};n.loadCSS=t,e.grunticon=n})(this);(function(e,t){"use strict";var n=t.document,r="grunticon:",o=function(e){if(n.attachEvent?"complete"===n.readyState:"loading"!==n.readyState)e();else{var t=!1;n.addEventListener("readystatechange",function(){t||(t=!0,e())},!1)}},a=function(e){return t.document.querySelector('link[href$="'+e+'"]')},c=function(e){var t,n,o,a,c,i,u={};if(t=e.sheet,!t)return u;n=t.cssRules?t.cssRules:t.rules;for(var l=0;n.length>l;l++)o=n[l].cssText,a=r+n[l].selectorText,c=o.split(");")[0].match(/US\-ASCII\,([^"']+)/),c&&c[1]&&(i=decodeURIComponent(c[1]),u[a]=i);return u},i=function(e){var t,o,a;o="data-grunticon-embed";for(var c in e)if(a=c.slice(r.length),t=n.querySelectorAll(a+"["+o+"]"),t.length)for(var i=0;t.length>i;i++)t[i].innerHTML=e[c],t[i].style.backgroundImage="none",t[i].removeAttribute(o);return t},u=function(t){"svg"===e.method&&o(function(){i(c(a(e.href))),"function"==typeof t&&t()})};e.embedIcons=i,e.getCSS=a,e.getIcons=c,e.ready=o,e.svgLoadedCallback=u,e.embedSVG=u})(grunticon,this);

data/assets/javascript/anchor-js/docs/grunticon/icons.data.png.css

@@ -0,0 +1,5 @@
+
+.icon-grunticon-link {
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABuklEQVQ4T52U4VnCMBiE71hAnECcgLCBblBYAJxANgAmEDfABWg3kA2IE6ATWBbo+XwplLaWguZnm765fncX4h9LkesC6DHxvv45/8JT5CIQLyB74TspBbFChgUTn9qjq4EauhXIMYA9pBWIFKId0IfkITwa9CpgARM+ID0c1QSRIzcHOIP0ythPLwLbYMdxaTjwgO4Y+9uLwKAicjaztKysPPtCZab7VqAi9wBSkPZNjp4UuiXIZ2RqVqiRm0KYgbR45Csf/FMdHCJE7EDuud72fiksufkFaIkMnyBM6QSSDm6G/B1g7yAdMg2Z+KQCbHUzcg4dbiwy5mYFJr0x9pNKDptgGrolgHFZ1S9lJVgBDA3oMEYtZzqpEogEQgLCQZiEttRgJ+Bo8Amgi0zWz1ChwguDktaMfunxHtCca29/UFkMs+jw+5j0c90Oau1Q62viN+f2GdCGvQW04NrPmzYebpcuE29/0rqCyxoNUkg7xn5Q333OzbMKA9DctKTnc1mU5mehzXPWYEATNFcY0s5NcRWZozav3M3utbBqDvMKzUMjgJvD6V/INLUGXJrd8X3j5XDpdmmD/wAyTxBSftthKwAAAABJRU5ErkJggg==');
+	background-repeat: no-repeat;
+}

data/assets/javascript/anchor-js/docs/grunticon/icons.data.svg.css

@@ -0,0 +1,5 @@
+
+.icon-grunticon-link {
+	background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%20768%20768%22%3E%0A%20%20%3Cg%20fill%3D%22%23FF5231%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M544%2032q37.75%200%2072.875%2014.25t62.875%2042%2042%2062.875%2014.25%2072.875q0%2037.5-14.375%2072.875t-41.875%2062.875l-96%2096q-2.75%202.75-8.25%207.75-26.75%2023.75-59.75%2036.125t-67.75%2012.375q-43.75%200-82.75-18.75-29.25-13.75-53-37.5t-37.5-53q18.75-18.75%2045.25-18.75%209.25%200%2018.75%202.75%2016.25%2026.25%2042.5%2042.5%2030.75%2018.75%2066.75%2018.75%2025%200%2048.5-9.5t42-28l96-96q18.5-18.5%2028-42t9.5-48.5-9.5-48.5-28-42-42-28-48.5-9.5-48.5%209.5-42%2028l-67.25%2067.25q-32-8.75-66.25-8.75-5.5%200-15.5%200.5%205-5.5%207.75-8.25l96-96q27.5-27.5%2062.875-41.875t72.875-14.375zM320%20256q43.75%200%2082.75%2018.75%2029.25%2013.75%2053%2037.5t37.5%2053q-18.75%2018.75-45.25%2018.75-9.25%200-18.75-2.75-16.25-26.25-42.5-42.5-30.75-18.75-66.75-18.75-25%200-48.5%209.5t-42%2028l-96%2096q-18.5%2018.5-28%2042t-9.5%2048.5%209.5%2048.5%2028%2042%2042%2028%2048.5%209.5%2048.5-9.5%2042-28l67.25-67.25q32%208.75%2066.25%208.75%205.5%200%2015.5-0.5-5%205.5-7.75%208.25l-96%2096q-27.75%2027.75-62.875%2042t-72.875%2014.25q-37.5%200-72.875-14.375t-62.875-41.875q-27.75-27.75-42-62.875t-14.25-72.875%2014.25-72.875%2042-62.875l96-96q2.75-2.75%208.25-7.75%2026.75-23.75%2059.75-36.125t67.75-12.375z%22%3E%3C/path%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A');
+	background-repeat: no-repeat;
+}

data/assets/javascript/anchor-js/docs/grunticon/icons.fallback.css

@@ -0,0 +1,5 @@
+
+.icon-grunticon-link {
+	background-image: url('png/grunticon-link.png');
+	background-repeat: no-repeat;
+}

data/assets/javascript/anchor-js/docs/grunticon/preview.html

@@ -0,0 +1,33 @@
+<!doctype HTML>
+<html>
+	<head>
+		<title>Icons Preview!</title>
+		<meta charset="utf-8">
+		<style>
+			body {
+				background-image: linear-gradient(#eee 25%, transparent 25%, transparent), linear-gradient(#eee 25%, transparent 25%, transparent), linear-gradient(transparent 75%, #eee 75%), linear-gradient(transparent 75%, #eee 75%);
+				width: auto;
+				background-size: 10px 10px;
+			}
+		</style>
+		<script>
+			
+			/*! grunt-grunticon Stylesheet Loader - v2.1.2 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */
+
+(function(e){function t(t,n,r,o){"use strict";function a(){for(var e,n=0;u.length>n;n++)u[n].href&&u[n].href.indexOf(t)>-1&&(e=!0);e?i.media=r||"all":setTimeout(a)}var i=e.document.createElement("link"),l=n||e.document.getElementsByTagName("script")[0],u=e.document.styleSheets;return i.rel="stylesheet",i.href=t,i.media="only x",i.onload=o||null,l.parentNode.insertBefore(i,l),a(),i}var n=function(r,o){"use strict";if(r&&3===r.length){var a=e.navigator,i=e.Image,l=!(!document.createElementNS||!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||e.opera&&-1===a.userAgent.indexOf("Chrome")||-1!==a.userAgent.indexOf("Series40")),u=new i;u.onerror=function(){n.method="png",n.href=r[2],t(r[2])},u.onload=function(){var e=1===u.width&&1===u.height,a=r[e&&l?0:e?1:2];n.method=e&&l?"svg":e?"datapng":"png",n.href=a,t(a,null,null,o)},u.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",document.documentElement.className+=" grunticon"}};n.loadCSS=t,e.grunticon=n})(this);(function(e,t){"use strict";var n=t.document,r="grunticon:",o=function(e){if(n.attachEvent?"complete"===n.readyState:"loading"!==n.readyState)e();else{var t=!1;n.addEventListener("readystatechange",function(){t||(t=!0,e())},!1)}},a=function(e){return t.document.querySelector('link[href$="'+e+'"]')},c=function(e){var t,n,o,a,c,i,u={};if(t=e.sheet,!t)return u;n=t.cssRules?t.cssRules:t.rules;for(var l=0;n.length>l;l++)o=n[l].cssText,a=r+n[l].selectorText,c=o.split(");")[0].match(/US\-ASCII\,([^"']+)/),c&&c[1]&&(i=decodeURIComponent(c[1]),u[a]=i);return u},i=function(e){var t,o,a;o="data-grunticon-embed";for(var c in e)if(a=c.slice(r.length),t=n.querySelectorAll(a+"["+o+"]"),t.length)for(var i=0;t.length>i;i++)t[i].innerHTML=e[c],t[i].style.backgroundImage="none",t[i].removeAttribute(o);return t},u=function(t){"svg"===e.method&&o(function(){i(c(a(e.href))),"function"==typeof t&&t()})};e.embedIcons=i,e.getCSS=a,e.getIcons=c,e.ready=o,e.svgLoadedCallback=u,e.embedSVG=u})(grunticon,this);
+			
+			grunticon(["icons.data.svg.css", "icons.data.png.css", "icons.fallback.css"]);
+		</script>
+		<noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>
+
+	</head>
+	<body>
+
+		<h1>PREVIEW - you can change this in the previewTemplate option</h1>
+		
+			
+			<pre><code>.icon-grunticon-link:</code></pre><div class="icon-grunticon-link" style="width: 20px; height: 20px;" ></div><hr/>
+			
+		
+</body>
+</html>

data/assets/javascript/anchor-js/docs/img/gh-link.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="12px" viewBox="0 0 24 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="link" fill="#FF5231">
+            <path d="M18,0 L14.765625,0 C15.890625,0.75 16.9453125,2.0859375 17.2734375,3 L17.9765625,3 C19.5,3 20.9765625,4.5 20.9765625,6 C20.9765625,7.5 19.453125,9 17.9765625,9 L13.4765625,9 C12,9 10.4765625,7.5 10.4765625,6 C10.4765625,5.4609375 10.640625,4.9453125 10.8984375,4.5 L7.6875,4.5 C7.5703125,4.9921875 7.5,5.484375 7.5,6 C7.5,9 10.4765625,12 13.4765625,12 L18,12 C21,12 24,9 24,6 C24,3 21,0 18,0 L18,0 Z M6.7265625,9 L6.0234375,9 C4.5,9 3.0234375,7.5 3.0234375,6 C3.0234375,4.5 4.546875,3 6.0234375,3 L10.5234375,3 C12,3 13.5234375,4.5 13.5234375,6 C13.5234375,6.5390625 13.359375,7.0546875 13.1015625,7.5 L16.3125,7.5 C16.4296875,7.0078125 16.5,6.515625 16.5,6 C16.5,3 13.5234375,0 10.5234375,0 L6,0 C3,0 0,3 0,6 C0,9 3,12 6,12 L9.234375,12 C8.109375,11.25 7.0546875,9.9140625 6.7265625,9 L6.7265625,9 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>

data/assets/javascript/anchor-js/docs/img/gh_link.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="10px" viewBox="0 0 20 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="link" fill="#FF5231">
+            <path d="M15,0 L12.3046875,0 C13.2421875,0.625 14.1210938,1.73828125 14.3945312,2.5 L14.9804688,2.5 C16.25,2.5 17.4804688,3.75 17.4804688,5 C17.4804688,6.25 16.2109375,7.5 14.9804688,7.5 L11.2304688,7.5 C10,7.5 8.73046875,6.25 8.73046875,5 C8.73046875,4.55078125 8.8671875,4.12109375 9.08203125,3.75 L6.40625,3.75 C6.30859375,4.16015625 6.25,4.5703125 6.25,5 C6.25,7.5 8.73046875,10 11.2304688,10 L15,10 C17.5,10 20,7.5 20,5 C20,2.5 17.5,0 15,0 L15,0 Z M5.60546875,7.5 L5.01953125,7.5 C3.75,7.5 2.51953125,6.25 2.51953125,5 C2.51953125,3.75 3.7890625,2.5 5.01953125,2.5 L8.76953125,2.5 C10,2.5 11.2695312,3.75 11.2695312,5 C11.2695312,5.44921875 11.1328125,5.87890625 10.9179688,6.25 L13.59375,6.25 C13.6914062,5.83984375 13.75,5.4296875 13.75,5 C13.75,2.5 11.2695312,0 8.76953125,0 L5,0 C2.5,0 0,2.5 0,5 C0,7.5 2.5,10 5,10 L7.6953125,10 C6.7578125,9.375 5.87890625,8.26171875 5.60546875,7.5 L5.60546875,7.5 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>

data/assets/javascript/anchor-js/docs/img/hyperlink.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="hyperlink" fill="#FF5231">
+            <path d="M23.5548327,6.22263035 L17.7774163,0.445167315 C17.2460545,-0.0861478599 16.3834086,-0.0861478599 15.8520934,0.445167315 L10.0747237,6.22263035 C9.5419144,6.75394553 9.5419144,7.61659144 10.0747237,8.14940078 L11.0366381,9.11131518 L16.8140545,3.33389883 L20.6661479,7.18599222 L14.8887315,12.9634086 L15.8520934,13.9267704 C16.3834086,14.4581323 17.2460545,14.4581323 17.7774163,13.9267704 L23.554786,8.14940078 C24.0861479,7.61659144 24.0861479,6.75389883 23.5548327,6.22263035 L23.5548327,6.22263035 Z M12.9634086,14.8886848 L7.18599222,20.6661479 L3.33389883,16.8140545 L9.11126848,11.0366381 L8.14790661,10.0732763 C7.61659144,9.5419144 6.75394553,9.5419144 6.22263035,10.0732763 L0.445167315,15.8506459 C-0.0861478599,16.3834086 -0.0861478599,17.2461012 0.445167315,17.7774163 L6.22258366,23.5548327 C6.75389883,24.0861479 7.61654475,24.0861479 8.14785992,23.5548327 L13.9252763,17.7774163 C14.4580389,17.2461012 14.4580389,16.3834553 13.9252763,15.8506459 L12.9634086,14.8886848 L12.9634086,14.8886848 Z M8.14790661,15.8506459 C8.68071595,16.3834086 9.5418677,16.3834086 10.0747237,15.8506459 L15.8520934,10.0732763 C16.3834086,9.5419144 16.3834086,8.68071595 15.8520934,8.14940078 C15.3193307,7.61663813 14.4581323,7.61663813 13.925323,8.14940078 L8.14790661,13.9267704 C7.61659144,14.4581323 7.61659144,15.3193307 8.14790661,15.8506459 L8.14790661,15.8506459 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>

data/assets/javascript/anchor-js/docs/img/link.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512"><g id="icomoon-ignore">
+</g>
+<path d="M384 128h-69c24 16 46.5 44.5 53.5 64h15c32.5 0 64 32 64 64s-32.5 64-64 64h-96c-31.5 0-64-32-64-64 0-11.5 3.5-22.5 9-32h-68.5c-2.5 10.5-4 21-4 32 0 64 63.5 128 127.5 128s32.5 0 96.5 0 128-64 128-128-64-128-128-128zM143.5 320h-15c-32.5 0-64-32-64-64s32.5-64 64-64h96c31.5 0 64 32 64 64 0 11.5-3.5 22.5-9 32h68.5c2.5-10.5 4-21 4-32 0-64-63.5-128-127.5-128s-32.5 0-96.5 0-128 64-128 128 64 128 128 128h69c-24-16-46.5-44.5-53.5-64z"></path>
+</svg>

data/assets/javascript/anchor-js/docs/index.html

@@ -0,0 +1,807 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>AnchorJS - Add deep anchor links to your docs</title>
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="fonts/fonts.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/prism/1.5.1/themes/prism-twilight.css">
+  <script src="grunticon/grunticon.loader.js"></script>
+  <script>
+    grunticon(["grunticon/icons.data.svg.css", "grunticon/icons.data.png.css", "grunticon/icons.fallback.css"]);
+  </script>
+  <noscript>
+    <link href="grunticon/icons.fallback.css" rel="stylesheet">
+  </noscript>
+</head>
+<body>
+  <header class="header">
+    <h1 class="page-title">AnchorJS</h1>
+    <img class="logo" src="img/anchorjs_logo.png" />
+    <div class="desc">
+      <p class="maindesc">Add deep anchor links to your docs.</p>
+      <p class="subdesc">What are "deep anchor links"? Here are a few examples:</p>
+    </div>
+    <div class="preview-examples">
+      <div class="example">
+        <div class="example-content">
+          <h3 id="basic-link-preview">Basic Link</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options.visible = 'always';
+anchors.add('h3');</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Paragraph Link</h3>
+          <p id="paragraph-link-preview">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  placement: 'left',
+  icon: '¶'
+};
+anchors.add('p');</code></pre>
+        </div>
+      </div>
+    </div>
+    <p class="more-examples"><a href="#examples">See more examples</a></p>
+    <div class="used-by">
+      <h2 class="used-by-label">Used by</h2>
+      <a href="http://primercss.io/about/"><img src="https://avatars.githubusercontent.com/u/7143434?v=3&s=120" alt="Primer CSS Logo" title="PrimerCSS"/></a>
+      <a href="http://getbootstrap.com/getting-started/"><img src="https://avatars.githubusercontent.com/u/2918581?v=3&s=120" alt="Bootstrap Logo" title="Bootstrap" /></a>
+      <a href="http://eslint.org/docs/rules/"><img src="https://avatars.githubusercontent.com/u/6019716?v=3&s=120" alt="ESLint logo" title="ESLint"/></a>
+      <a href="https://middlemanapp.com/basics/install/"><img src="https://avatars.githubusercontent.com/u/1280820?v=3&s=120" alt="Middleman logo" title="Middleman"/></a>
+      <a href="http://learn.getgrav.org/"><img src="https://avatars.githubusercontent.com/u/8237355?v=3&s=120" alt="Grav Logo" title="Grav" /></a>
+    </div>
+  </header>
+  <section class="main">
+    <h2>Overview</h2>
+    <img class="anchorlink-examples" src="img/anchorlinks2.png" alt="Examples of deep anchor links from across the web." />
+    <p>AnchorJS lets you drop deep anchor links (<a href="http://ux.stackexchange.com/q/36304/33248">like these</a>) onto any webpage, and be on your way.</p>
+    <p>You don't need to set up IDs or worry about urls. AnchorJS will respect your IDs if you have them, and generate them if you don't.</p>
+    <p>It uses an attractive link icon by default, but you can customize the display via <a href="#options">options</a> and CSS syling. The <a href="#examples">examples</a> demonstrate a few customization ideas.</p>
+    <p>Finally, AnchorJS is <strong>lightweight</strong>, <strong>accessible</strong>, and has <strong>no dependencies</strong>.</p>
+
+    <h2>Installation</h2>
+
+    <p>Download AnchorJS using npm,</p>
+    <pre><code>npm install anchor-js</code></pre>
+    <p>or bower:</p>
+    <pre><code>bower install anchor-js</code></pre>
+    <p>(or just <a href="https://github.com/bryanbraun/anchorjs/releases">download it from github</a>).</p>
+    <p>Then include the anchor.js file (or anchor.min.js) in your webpage.</p>
+    <pre><code class="language-markup">&lt;script src="anchor.js"&gt;&lt;/script&gt;</code></pre>
+    <p>You could also include it via a CDN like <a href="https://cdnjs.com/libraries/anchor-js">CDNJS</a> or <a href="http://www.jsdelivr.com/projects/anchorjs">jsDelivr</a>.</p>
+    <p>If you're using it from Node/CommonJS, include it via:</p>
+    <pre class="src-js"><code>var anchorJS = require('anchor-js');
+var anchors = new anchorJS();</code></pre>
+
+    <h2>Basic usage</h2>
+    <p>AnchorJS provides the <code>anchors.add()</code> method which takes a CSS selector (similar to jQuery) for targeting elements you want to deep-link. Here are some usage examples.</p>
+    <pre class="src-js"><code>/**
+ * Example 1
+ * Add anchors to all h1's on the page
+ */
+anchors.add('h1');
+
+/**
+ * Example 2
+ * Adds anchors to elements that have been assigned the class '.anchored'
+ */
+anchors.add('.anchored');
+
+/**
+ * Example 3
+ * If no selector is provided, it falls back to a default selector of:
+ * 'h2, h3, h4, h5, h6'
+ */
+anchors.add();</code></pre>
+
+    <h3>Don't run it too late!</h3>
+    <p>You need to add anchors to the page early in the page load process if you want browsers to jump to the ID properly.</p>
+    <p>We recommend you call <code>anchors.add()</code> before the DOM finishes loading...</p>
+
+    <pre><code class="language-markup">&lt;!-- Add anchors before the closing body tag. --&gt;
+  &lt;script&gt;
+    anchors.add();
+  &lt;/script&gt;
+&lt;/body&gt;</code></pre>
+<p>...or on DOMContentLoaded:</p>
+    <pre class="src-js"><code>// Add anchors on DOMContentLoaded
+document.addEventListener("DOMContentLoaded", function(event) {
+  anchors.add();
+});</code></pre>
+
+    <p>Don't add anchors on later events, like <code>$(document).ready()</code> or <code>window.onload</code> as some browsers will attempt to jump to your ID before AnchorJS can add it to the page. For more details, see <a href="https://github.com/bryanbraun/anchorjs/issues/69#issuecomment-255503575">github issue #69</a>).</p>
+
+    <h2>Options</h2>
+    <p>You can set a number of options to customize how your anchors look:</p>
+    <table class='options-table'>
+      <thead>
+        <tr>
+          <th>Option</th>
+          <th class="minicol">Accepted Values</th>
+          <th class="minicol">Default Value</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>placement</code></td>
+          <td><code>right</code> <br> <code>left</code></td>
+          <td><code>right</code></td>
+          <td><code>right</code> appends the anchor to the end of the element.<br> <code>left</code> places it to the left, in the margin.</td>
+        </tr>
+        <tr>
+          <td><code>visible</code></td>
+          <td><code>hover</code> <br> <code>always</code> <br> <code>touch</code></td></td>
+          <td><code>hover</code></td>
+          <td><code>hover</code> displays the anchor when hovering over the element.<br> <code>always</code> will always display the anchor link. <br> <code>touch</code> will <em>always</em> display anchors for devices that support touch events, and only display them via <em>hover</em> for devices that do not support touch events. This approximates touchscreen detection (but <a href="http://www.stucox.com/blog/you-cant-detect-a-touchscreen/">isn't 100% accurate</a>).</td>
+        </tr>
+        <tr>
+          <td><code>icon</code></td>
+          <td>(any unicode character)</td>
+          <td><code style="font-family: 'anchorjs-icons'; font-size: 24px; -webkit-font-smoothing: antialiased;"></code></td>
+          <td>Replace the default link icon with the character(s) provided. These are a few good options: <code>#</code>, <code>¶</code>, <code>❡</code>, and <code>§</code>.</td>
+        </tr>
+        <tr>
+          <td><code>class</code></td>
+          <td>(any string)</td>
+          <td>(none)</td>
+          <td>Adds the provided class(es) to the anchor html.</td>
+        </tr>
+        <tr>
+          <td><code>truncate</code></td>
+          <td>(any positive number)</td>
+          <td><code>64</code></td>
+          <td>Truncates the generated ID to the specified character length. <small>Note: the length may not be exactly the same, if there are dangling spaces or hyphens to be trimmed.</small></td>
+        </tr>
+      </tbody>
+    </table>
+    <p>For example:</p>
+    <pre class="src-js"><code>/**
+ * Example 1
+ * Add anchors to all h1s, h2s and h3s inside of #post.
+ * Anchors will be always visible.
+ */
+anchors.options.visible = 'always';
+anchors.add('#post h1, #post h2, #post h3');
+
+/**
+ * Example 2
+ * Provide options as an object before adding anchors to the page.
+ * Adds always-visible ¶ anchors in the left margin of each p tag inside .story
+ */
+anchors.options = {
+  placement: 'left',
+  visible: 'always',
+  icon: '¶'
+};
+anchors.add('.story > p');</code></pre>
+
+    <h2>Advanced usage</h2>
+
+    <section id="section-ids">
+      <h3 data-anchor-id="section-ids">Section IDs</h3>
+      <p>In some cases, you might want to link to existing section IDs instead of the heading element itself. You can instruct AnchorJS to do this with the <code>data-anchor-id</code> attribute:</p>
+      <pre><code class="language-markup">&lt;section id="section-1"&gt;
+  &lt;h3 data-anchor-id="section-1"&gt;Section 1&lt;/h3&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...&lt;/p&gt;
+&lt;/section&gt;</code></pre>
+      <p>This allows you to do things like <a href="https://css-tricks.com/on-target/#article-header-id-3">highlight sections when your users jump to them</a>.</p>
+    </section>
+
+    <h3>Removing anchors</h3>
+    <p>You can remove anchors with the <code>anchors.remove()</code> or <code>anchors.removeAll()</code> methods:</p>
+    <pre class="src-js"><code>/**
+ * Example 1
+ * Remove anchors from all h1s on the page.
+ */
+anchors.remove('h1');
+
+/**
+ * Example 2
+ * Remove all anchors from the page.
+ */
+anchors.removeAll();</pre></code>
+    <p>Removing anchors with <code>.remove()</code> should be uncommon. If you simply want anchors on a more selective group, consider using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not">the CSS <em>:not()</em> pseudo-class</a> when you add them, like so:</p>
+<pre class="src-js"><code>/**
+ * Example 2
+ * Add anchors to all h2s, except for those with a class of "no-anchor".
+ */
+anchors.add('h2:not(.no-anchor)');</pre></code>
+
+<h3>Chaining commands</h3>
+<p>You can chain commands of <code>add()</code> and <code>remove()</code> (since they return a copy of <code>anchors</code>), but it's usually more performant to lean on CSS when targeting elements:
+
+<pre class="src-js"><code>/**
+  * Example 1
+  * Adds anchors to `.my-anchors` and `.my-other-anchors` except for those
+  * with a class of `no-anchor`.
+  */
+ anchors.add('.my-anchors').add('.my-other-anchors').remove('.no-anchor');
+
+ /**
+  * Example 2
+  * A more performant way to add anchors to the same classes in Example 1 above.
+  */
+  anchors.add('.my-anchors:not(.no-anchor), .my-other-anchors:not(.no-anchor)');</code></pre>
+
+    <h3>Multiple sets of anchors</h3>
+    <p>You can have multiple sets of anchors on one page, each with their own design. To do so, just create your own instances of the AnchorJS object:</p>
+    <pre class="src-js"><code>var sidebarAnchors = new AnchorJS();
+anchors.add('.main h2'); // The default instance.
+sidebarAnchors.add('.sidebar h2'); // The new instance.</code></pre>
+    <p>You can preset your instance with whatever options you like:</p>
+    <pre class="src-js"><code>var sidebarAnchors = new AnchorJS({
+  placement: 'left',
+  icon: '¶'
+});
+sidebarAnchors.add('.sidebar h2');</code></pre>
+
+    <h3>Generating navigations</h3>
+    <p>AnchorJS doesn't include methods for dynamically generating navigations (like a table of contents or jump nav). This is to keep AnchorJS lightweight and simple for the most common usecases.</p>
+    <p>However, AnchorJS <em>does</em> expose a list of all anchored elements at <code>anchors.elements</code>. This way, external code can look up the elements and use them to generate navigations (as shown in <a href="https://jsfiddle.net/bryanbraun/nc6rL9hk/">this example</a>).</p>
+    <p>You can also use AnchorJS alongside a static navigation with pre-defined IDs (as is done in <a href="https://jsfiddle.net/bryanbraun/x85hfvbk/">this example</a>).</p>
+
+    <h2>Examples</h2>
+    <div class="examples">
+      <div class="example">
+        <div class="example-content">
+          <h3>Basic Link</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options.visible = 'always';
+anchors.add('h3');</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Basic Link - Left</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  placement: 'left'
+};
+anchors.add('h3');</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Paragraph Link</h3>
+          <p id="paragraph-link">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  placement: 'left',
+  icon: '¶'
+};
+anchors.add('p');</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Octothorp</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  icon: '#'
+};
+anchors.add('h3');</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Unicode Icon 1</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  placement: 'left',
+  icon: '§'
+};
+anchors.add('h3');</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Unicode Icon 2</h3>
+          <p id="unicode-icon-2">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  icon: '❡'
+};
+anchors.add('p');</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Custom Text</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  icon: '# LINK'
+};
+anchors.add('h3');</code></pre>
+          <pre class="css"><code>.anchorjs-link {
+  font-weight: 200;
+  margin-left: 1em;
+  padding-right: 0.375em;
+  font-size: 0.5em;
+  border: 1px dashed #FFBAAC;
+  vertical-align: middle;
+}</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Custom Image</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>// Use an empty string ('') for the icon when styling the background with CSS.
+anchors.options = {
+  visible: 'always',
+  placement: 'left',
+  icon: ''
+};
+anchors.add('h3');</code></pre>
+          <pre class="css"><code>.anchorjs-link {
+  width: 14px;
+  height: 32px;
+  margin-top: 6px;
+  margin-left: -1.25em !important;
+  background: url('img/mini-logo.png') no-repeat;
+}</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Link w/CSS Styling</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  placement: 'left'
+};
+anchors.add('h3');</code></pre>
+          <pre class="css"><code>.anchorjs-link {
+  display: inline-block;
+  height: 32px;
+  width: 18px;
+  border-radius: 50%;
+  background-color: #FF5231;
+  color: white;
+  margin-top: 4px;
+  margin-left: -1.4em !important;
+}
+.anchorjs-link:before {
+  margin-left: 7px;
+  margin-top: -4px;
+  display: block;
+}</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Icon Font</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>// Just pass in the octal code for your icon-font character.
+anchors.options = {
+  visible: 'always',
+  icon: '\uf0c1'
+};
+anchors.add('h3');</code></pre>
+          <pre class="css"><code>.anchorjs-link {
+  font-family: 'your-icon-font';
+}</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>SVG Icon</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  icon: ''
+};
+anchors.add('h3');</code></pre>
+          <pre class="css"><code>.anchorjs-link {
+  display: inline-block;
+  background: url('img/hyperlink.svg') no-repeat;
+  margin-left: 8px;
+  width: 14px;
+  height: 24px;
+}</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Base64 Icon</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  placement: 'left',
+  icon: ''
+};
+anchors.add('h3');</code></pre>
+          <pre class="css"><code>.anchorjs-link {
+  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDIwIDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImxpbmsiIGZpbGw9IiNGRjUyMzEiPgogICAgICAgICAgICA8cGF0aCBkPSJNMTUsMCBMMTIuMzA0Njg3NSwwIEMxMy4yNDIxODc1LDAuNjI1IDE0LjEyMTA5MzgsMS43MzgyODEyNSAxNC4zOTQ1MzEyLDIuNSBMMTQuOTgwNDY4OCwyLjUgQzE2LjI1LDIuNSAxNy40ODA0Njg4LDMuNzUgMTcuNDgwNDY4OCw1IEMxNy40ODA0Njg4LDYuMjUgMTYuMjEwOTM3NSw3LjUgMTQuOTgwNDY4OCw3LjUgTDExLjIzMDQ2ODgsNy41IEMxMCw3LjUgOC43MzA0Njg3NSw2LjI1IDguNzMwNDY4NzUsNSBDOC43MzA0Njg3NSw0LjU1MDc4MTI1IDguODY3MTg3NSw0LjEyMTA5Mzc1IDkuMDgyMDMxMjUsMy43NSBMNi40MDYyNSwzLjc1IEM2LjMwODU5Mzc1LDQuMTYwMTU2MjUgNi4yNSw0LjU3MDMxMjUgNi4yNSw1IEM2LjI1LDcuNSA4LjczMDQ2ODc1LDEwIDExLjIzMDQ2ODgsMTAgTDE1LDEwIEMxNy41LDEwIDIwLDcuNSAyMCw1IEMyMCwyLjUgMTcuNSwwIDE1LDAgTDE1LDAgWiBNNS42MDU0Njg3NSw3LjUgTDUuMDE5NTMxMjUsNy41IEMzLjc1LDcuNSAyLjUxOTUzMTI1LDYuMjUgMi41MTk1MzEyNSw1IEMyLjUxOTUzMTI1LDMuNzUgMy43ODkwNjI1LDIuNSA1LjAxOTUzMTI1LDIuNSBMOC43Njk1MzEyNSwyLjUgQzEwLDIuNSAxMS4yNjk1MzEyLDMuNzUgMTEuMjY5NTMxMiw1IEMxMS4yNjk1MzEyLDUuNDQ5MjE4NzUgMTEuMTMyODEyNSw1Ljg3ODkwNjI1IDEwLjkxNzk2ODgsNi4yNSBMMTMuNTkzNzUsNi4yNSBDMTMuNjkxNDA2Miw1LjgzOTg0Mzc1IDEzLjc1LDUuNDI5Njg3NSAxMy43NSw1IEMxMy43NSwyLjUgMTEuMjY5NTMxMiwwIDguNzY5NTMxMjUsMCBMNSwwIEMyLjUsMCAwLDIuNSAwLDUgQzAsNy41IDIuNSwxMCA1LDEwIEw3LjY5NTMxMjUsMTAgQzYuNzU3ODEyNSw5LjM3NSA1Ljg3ODkwNjI1LDguMjYxNzE4NzUgNS42MDU0Njg3NSw3LjUgTDUuNjA1NDY4NzUsNy41IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat;
+  margin-top: 15px;
+  height: 16px;
+  width: 20px;
+}</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>CSS Icon</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  placement: 'left',
+  icon: ''
+};
+anchors.add('h3');</code></pre>
+          <pre class="css"><code>/* See also: nicolasgallagher.com/pure-css-gui-icons */
+.anchorjs-link {
+  border-color: #FF5231 #FF5231 transparent;
+  border-width: 15px 7px 6px;
+  border-style: solid;
+  margin-top: 10px;
+  font-size: 22px;
+  padding-right: 0 !important;
+}</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Emoji</h3>
+          <p id="emoji">Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = {
+  visible: 'always',
+  placement: 'left',
+  icon: '⚓'
+};
+anchors.add('p');</code></pre>
+          <pre class="css"><code>.anchorjs-link {
+  margin-left: -1.8em !important;
+}</code></pre>
+        </div>
+      </div>
+
+      <div class="example">
+        <div class="example-content">
+          <h3>Grunticon</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>// Assuming you have set up
+// grunticon and you have a
+// grunticon class named
+// 'icon-grunticon-link'...
+anchors.options = {
+  visible: 'always',
+  class: 'icon-grunticon-link'
+  icon: ''
+};
+anchors.add('h3');</code></pre>
+          <pre class="css"><code>.anchorjs-link {
+  display: inline-block;
+  margin-left: 0.375em;
+  width: 0.375em;
+  height: 20px;
+}</code></pre>
+        </div>
+      </div>
+
+    </div>
+
+    <h2 id="hover-examples" class="title">Hover examples</h2>
+    <div class="hover-examples">
+      <div class="example">
+        <div class="example-content">
+          <h3>Basic Hover</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.add('h3');</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Color Transition</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.add('h3');</code></pre>
+          <pre class="css"><code>.anchorjs-link:hover {
+  color: #2500AD;
+}
+*:hover > .anchorjs-link {
+  transition: color .25s linear;
+}</code></pre>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-content">
+          <h3>Shift Out</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options.placement = 'left';
+anchors.add('h3');</code></pre>
+          <pre class="css"><code>.anchorjs-link {
+  transition: all .25s linear;
+}
+*:hover > .anchorjs-link {
+  margin-left: -1.125em !important;
+}</code></pre>
+        </div>
+      </div>
+
+      <div class="example">
+        <div class="example-content">
+          <h3>Arrow</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options.icon = '# LINK';
+anchors.add('h3');</code></pre>
+          <pre class="css"><code>/* Based on http://codepen.io/corysimmons/pen/NPBXbe */
+/* Vendor prefixes not included */
+.anchorjs-link {
+  position: relative;
+  top: 4px;
+  height: 36px;
+  flex: 1;
+  background: #FF5231;
+  color: white;
+  font-family: Helvetica, Arial, sans-serif;
+  font-weight: 200;
+  font-size: 1rem;
+  margin-right: -6%;
+  padding-right: 6%;
+  padding-left: 42px !important;
+  line-height: 38px;
+  transition: all 0.5s ease;
+  transform: translateX(100%);
+}
+.anchorjs-link::before {
+  position: absolute;
+  display: block;
+  left: 0;
+  width: 0;
+  height: 0;
+  content: '';
+  border: 18px solid #fdfdfd; /* Background color */
+  border-right-color: #FF5231;
+  transition: all 0.5s ease;
+}
+h2 {
+  display: flex;
+}
+*:hover > .anchorjs-link {
+  transform: translateX(0);
+}
+*:hover > .anchorjs-link:hover {
+  background: #FF806A;
+}
+*:hover > .anchorjs-link:hover::before {
+  border-right-color: #FF806A;
+}</code></pre>
+        </div>
+      </div>
+
+      <div class="example">
+        <div class="example-content">
+          <h3>Tooltip</h3>
+          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
+          <a href="#" class="example-code-link">{}</a>
+        </div>
+        <div class="example-code">
+          <pre class="js"><code>anchors.options = { icon: 'Permalink' };
+anchors.add('h3');</code></pre>
+          <pre class="css"><code>/* tooltip box */
+.anchorjs-link:after {
+  display: inline-block;
+  transition: opacity .25s linear;
+  font-family: Verdana, sans-serif;
+  font-size: 0.75ex;
+  font-weight: 100;
+  padding: 0.5ex 1.5ex;
+  background: #444;
+  color: #fff;
+  border-radius: 0.6ex;
+  vertical-align: 0.8ex;
+}
+/* tooltip arrow */
+.anchorjs-link:before {
+  content: '';
+  display: inline-block;
+  border-top: 0.3ex solid transparent;
+  border-right: 0.5ex solid #444;
+  border-bottom: 0.3ex solid transparent;
+  vertical-align: 0.35ex;
+}
+.anchorjs-link:hover:after {
+  background-color: #666;
+}
+.anchorjs-link:hover:before {
+  border-right-color: #666;
+}</code></pre>
+        </div>
+      </div>
+
+    </div>
+    <footer class="footer"><p><small>Made by <a href="http://www.bryanbraun.com">Bryan</a>. You should <a href="https://twitter.com/intent/tweet?text=Hi%20%40BryanEBraun%2C%20">say hi</a> sometime. 👋</small></p></footer>
+    <a href="https://github.com/bryanbraun/anchorjs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
+  </section>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+  <script src="anchor.js"></script>
+  <script src="scripts.js"></script>
+  <script>
+    anchors.add('.main > h2, .main > h3, .main > section > h2, .main > section > h3').remove('.used-by-label');
+
+    var ex1 = new AnchorJS({ visible: 'always' });
+    ex1.add('.examples .example:nth-child(1) h3, .preview-examples .example:nth-child(1) h3');
+
+    var ex2 = new AnchorJS({
+      placement: 'left',
+      visible: 'always'
+    });
+    ex2.add('.examples .example:nth-child(2) h3');
+
+    var ex3 = new AnchorJS({
+      icon: '¶',
+      visible: 'always',
+      placement: 'left'
+    });
+    ex3.add('.examples .example:nth-child(3) p, .preview-examples .example:nth-child(2) p');
+
+    var ex4 = new AnchorJS({
+      icon: '#',
+      visible: 'always'
+    });
+    ex4.add('.examples .example:nth-child(4) h3');
+
+    var ex5 = new AnchorJS({
+      icon: '§',
+      visible: 'always',
+      placement: 'left'
+    });
+    ex5.add('.examples .example:nth-child(5) h3');
+
+    var ex6 = new AnchorJS({
+      icon: '❡',
+      visible: 'always'
+    });
+    ex6.add('.examples .example:nth-child(6) p');
+
+    var ex7 = new AnchorJS({
+      icon: '# LINK',
+      visible: 'always'
+    });
+    ex7.add('.examples .example:nth-child(7) h3');
+
+    var ex8 = new AnchorJS({
+      icon: '',
+      visible: 'always',
+      placement: 'left'
+    });
+    ex8.add('.examples .example:nth-child(8) h3');
+
+    var ex9 = new AnchorJS({
+      visible: 'always',
+      placement: 'left'
+    });
+    ex9.add('.examples .example:nth-child(9) h3');
+
+    var ex10 = new AnchorJS({
+      visible: 'always',
+      class: 'ajs-10',
+      icon: '\uf0c1'
+    });
+    ex10.add('.examples .example:nth-child(10) h3');
+
+    var ex11 = new AnchorJS({
+      visible: 'always',
+      icon: ''
+    });
+    ex11.add('.examples .example:nth-child(11) h3');
+
+    var ex12 = new AnchorJS({
+      visible: 'always',
+      placement: 'left',
+      icon: ''
+    });
+    ex12.add('.examples .example:nth-child(12) h3');
+
+    var ex13 = new AnchorJS({
+      visible: 'always',
+      placement: 'left',
+      icon: ''
+    });
+    ex13.add('.examples .example:nth-child(13) h3');
+
+    var ex14 = new AnchorJS({
+      visible: 'always',
+      placement: 'left',
+      icon: '⚓'
+    });
+    ex14.add('.examples .example:nth-child(14) p');
+
+    var ex15 = new AnchorJS({
+      visible: 'always',
+      class: 'icon-grunticon-link',
+      icon: ''
+    });
+    ex15.add('.examples .example:nth-child(15) h3');
+
+    var hovEx1 = new AnchorJS();
+    hovEx1.add('.hover-examples .example:nth-child(1) h3');
+
+    var hovEx2 = new AnchorJS();
+    hovEx2.add('.hover-examples .example:nth-child(2) h3');
+
+    var hovEx3 = new AnchorJS({ placement: 'left' });
+    hovEx3.add('.hover-examples .example:nth-child(3) h3');
+
+    var hovEx4 = new AnchorJS({ icon: '# LINK' });
+    hovEx4.add('.hover-examples .example:nth-child(4) h3');
+
+    var hovEx5 = new AnchorJS({ icon: 'Permalink' });
+    hovEx5.add('.hover-examples .example:nth-child(5) h3');
+  </script>
+  <script src="//cdn.jsdelivr.net/prism/1.5.1/prism.js"></script>
+</body>
+</html>