white-rabbit 0.1.0

data/_sass/_general.scss

@@ -0,0 +1,11 @@
+body {
+	background-color: var(--meka-body);
+	color: var(--meka-accent);
+	font-family: var(--monospace);
+	font-size: var(--font-size-base);
+	height: 100%;
+	line-height: 1.6;
+	margin: 0 auto;
+	max-width: 1280px;
+	padding: var(--spacing-4);
+}

data/_sass/_grid.scss

@@ -0,0 +1,14 @@
+.grid {
+	display: grid;
+	grid-gap: var(--spacing-5) var(--spacing-3);
+	grid-template-columns: auto;
+	grid-template-rows: auto;
+}
+
+.grid-12 .grid-item {
+	grid-column: span 12;
+}
+
+.grid-8 .grid-item {
+	grid-column: span 8;
+}

data/_sass/_navigation.scss

@@ -0,0 +1,45 @@
+.site-header,
+.site-footer {
+	padding: var(--spacing-4);
+}
+
+.site-footer {
+	color: var(--dva-secondary-base);
+	text-align: center;
+}
+
+// navigation
+.site-header .navigation {
+	display: flex;
+	align-items: center;
+}
+
+.site-header .logo .header,
+.site-header .logo .subheader {
+	display: block;
+}
+
+.site-header .logo .header {
+	font-size: var(--font-size-5);
+	font-weight: 700;
+}
+
+.site-header .logo .subheader {
+	font-size: var(--font-size-2);
+	font-weight: 400;
+	margin-top: calc(-1*var(--spacing-1));
+	position: relative;
+}
+
+.site-header .links {
+	flex-grow: 1;
+	text-align: right;
+}
+
+.site-header .link {
+	display: inline-block;
+}
+
+.site-header .link:not(:last-child) {
+	margin-right: var(--spacing-3);
+}

data/_sass/_resets.scss

@@ -0,0 +1,87 @@
+/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
+html {
+	background-color: var(--meka-accent);
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23ffffff' fill-opacity='0.025' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
+	box-sizing: border-box;
+}
+
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin: 0;
+	padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: normal;
+	font-size: 100%;
+}
+
+ul {
+	list-style: none;
+}
+
+button,
+input,
+select,
+textarea {
+	margin: 0;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+img,
+embed,
+iframe,
+object,
+audio,
+video {
+	height: auto;
+	max-width: 100%;
+	width: 100%;
+	vertical-align: middle;
+}
+
+iframe {
+	border: 0;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+td,
+th {
+	padding: 0;
+	text-align: left;
+}

data/_sass/_typography.scss

@@ -0,0 +1,10 @@
+a {
+	color: var(--meka-accent);
+	font-weight: 700;
+	text-decoration: none;
+	transition: 150ms ease-in;
+}
+
+a:hover {
+	color: var(--meka-matrix);
+}

data/_sass/app.scss

@@ -0,0 +1,13 @@
+@charset "utf-8";
+
+@import "custom-properties";
+@import "resets";
+
+@import "blocks";
+@import "content";
+@import "general";
+@import "grid";
+@import "navigation";
+@import "typography";
+
+@import "third-party/tabby";

data/_sass/third-party/_tabby.scss

@@ -0,0 +1,71 @@
+/*!
+ * Tabby v11.2.0: Simple, mobile-first toggle tabs.
+ * (c) 2016 Chris Ferdinandi
+ * MIT License
+ * http://github.com/cferdinandi/tabby
+ */
+
+/**
+ * Tab content
+ */
+
+/* line 4, /Users/cferdinandi/Sites/tabby/src/sass/components/_tabby.scss */
+.js-tabby .tabs-pane {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	opacity: 0;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	transform: translateY(40px);
+	transition: opacity 250ms ease-in, transform 300ms ease-in;
+}
+
+/* line 14, /Users/cferdinandi/Sites/tabby/src/sass/components/_tabby.scss */
+.js-tabby .tabs-pane.active {
+	clip: auto;
+	height: auto;
+	margin: 0;
+	opacity: 1;
+	overflow: visible;
+	position: static;
+	transform: translateY(0px);
+}
+
+/* line 23, /Users/cferdinandi/Sites/tabby/src/sass/components/_tabby.scss */
+.js-tabby .tabs-pane:focus {
+	outline: none;
+}
+
+// custom styling
+.tabs {
+	margin-bottom: var(--spacing-4);
+	text-align: center;
+}
+
+.tabs li {
+	display: inline-block;
+	font-size: var(--font-size-1);
+	margin-right: var(--spacing-3);
+}
+
+.tabs a {
+	background-color: var(--meka-body);
+	color: var(--meka-accent);
+	padding: var(--spacing-2) var(--spacing-3);
+}
+
+.tabs a:hover,
+.tabs .active a {
+	color: var(--meka-body);
+}
+
+.tabs a:hover {
+	background-color: var(--dva-secondary-dark);
+}
+
+.tabs .active a {
+	background-color: var(--meka-matrix);
+}

data/assets/scripts/app.js

@@ -0,0 +1,518 @@
+/*!
+ * Tabby v11.2.0: Simple, mobile-first toggle tabs.
+ * (c) 2016 Chris Ferdinandi
+ * MIT License
+ * http://github.com/cferdinandi/tabby
+ */
+
+(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		define([], factory(root));
+	} else if (typeof exports === 'object') {
+		module.exports = factory(root);
+	} else {
+		root.tabby = factory(root);
+	}
+})(typeof global !== 'undefined' ? global : this.window || this.global, (function (root) {
+
+	'use strict';
+
+	//
+	// Variables
+	//
+
+	var tabby = {}; // Object for public APIs
+	var supports = 'querySelector' in document && 'addEventListener' in root && 'classList' in document.createElement('_') && 'onhashchange' in root; // Feature test
+	var settings, tab;
+
+	// Default settings
+	var defaults = {
+		selectorToggle: '[data-tab]',
+		selectorToggleGroup: '[data-tabs]',
+		selectorContent: '[data-tabs-pane]',
+		selectorContentGroup: '[data-tabs-content]',
+		toggleActiveClass: 'active',
+		contentActiveClass: 'active',
+		initClass: 'js-tabby',
+		stopVideo: true,
+		callback: function () {}
+	};
+
+
+	//
+	// Methods
+	//
+
+	/**
+	 * A simple forEach() implementation for Arrays, Objects and NodeLists
+	 * @private
+	 * @param {Array|Object|NodeList} collection Collection of items to iterate
+	 * @param {Function} callback Callback function for each iteration
+	 * @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
+	 */
+	var forEach = function (collection, callback, scope) {
+		if (Object.prototype.toString.call(collection) === '[object Object]') {
+			for (var prop in collection) {
+				if (Object.prototype.hasOwnProperty.call(collection, prop)) {
+					callback.call(scope, collection[prop], prop, collection);
+				}
+			}
+		} else {
+			for (var i = 0, len = collection.length; i < len; i++) {
+				callback.call(scope, collection[i], i, collection);
+			}
+		}
+	};
+
+	/**
+	 * Merge defaults with user options
+	 * @private
+	 * @param {Object} defaults Default settings
+	 * @param {Object} options User options
+	 * @returns {Object} Merged values of defaults and options
+	 */
+	var extend = function () {
+
+		// Variables
+		var extended = {};
+		var deep = false;
+		var i = 0;
+		var length = arguments.length;
+
+		// Check if a deep merge
+		if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') {
+			deep = arguments[0];
+			i++;
+		}
+
+		// Merge the object into the extended object
+		var merge = function (obj) {
+			for (var prop in obj) {
+				if (Object.prototype.hasOwnProperty.call(obj, prop)) {
+					// If deep merge and property is an object, merge properties
+					if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
+						extended[prop] = extend(true, extended[prop], obj[prop]);
+					} else {
+						extended[prop] = obj[prop];
+					}
+				}
+			}
+		};
+
+		// Loop through each object and conduct a merge
+		for (; i < length; i++) {
+			var obj = arguments[i];
+			merge(obj);
+		}
+
+		return extended;
+
+	};
+
+	/**
+	 * Get the closest matching element up the DOM tree.
+	 * @private
+	 * @param  {Element} elem     Starting element
+	 * @param  {String}  selector Selector to match against
+	 * @return {Boolean|Element}  Returns null if not match found
+	 */
+	var getClosest = function (elem, selector) {
+
+		// Element.matches() polyfill
+		if (!Element.prototype.matches) {
+			Element.prototype.matches =
+				Element.prototype.matchesSelector ||
+				Element.prototype.mozMatchesSelector ||
+				Element.prototype.msMatchesSelector ||
+				Element.prototype.oMatchesSelector ||
+				Element.prototype.webkitMatchesSelector ||
+				function (s) {
+					var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+						i = matches.length;
+					while (--i >= 0 && matches.item(i) !== this) {}
+					return i > -1;
+				};
+		}
+
+		// Get closest match
+		for (; elem && elem !== document; elem = elem.parentNode) {
+			if (elem.matches(selector)) return elem;
+		}
+
+		return null;
+
+	};
+
+	/**
+	 * Escape special characters for use with querySelector
+	 * @public
+	 * @param {String} id The anchor ID to escape
+	 * @author Mathias Bynens
+	 * @link https://github.com/mathiasbynens/CSS.escape
+	 */
+	var escapeCharacters = function (id) {
+
+		// Remove leading hash
+		if (id.charAt(0) === '#') {
+			id = id.substr(1);
+		}
+
+		var string = String(id);
+		var length = string.length;
+		var index = -1;
+		var codeUnit;
+		var result = '';
+		var firstCodeUnit = string.charCodeAt(0);
+		while (++index < length) {
+			codeUnit = string.charCodeAt(index);
+			// Note: there’s no need to special-case astral symbols, surrogate
+			// pairs, or lone surrogates.
+
+			// If the character is NULL (U+0000), then throw an
+			// `InvalidCharacterError` exception and terminate these steps.
+			if (codeUnit === 0x0000) {
+				throw new InvalidCharacterError(
+					'Invalid character: the input contains U+0000.'
+				);
+			}
+
+			if (
+				// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+				// U+007F, […]
+				(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
+				// If the character is the first character and is in the range [0-9]
+				// (U+0030 to U+0039), […]
+				(index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+				// If the character is the second character and is in the range [0-9]
+				// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+				(
+					index === 1 &&
+					codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
+					firstCodeUnit === 0x002D
+				)
+			) {
+				// http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point
+				result += '\\' + codeUnit.toString(16) + ' ';
+				continue;
+			}
+
+			// If the character is not handled by one of the above rules and is
+			// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+			// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+			// U+005A), or [a-z] (U+0061 to U+007A), […]
+			if (
+				codeUnit >= 0x0080 ||
+				codeUnit === 0x002D ||
+				codeUnit === 0x005F ||
+				codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
+				codeUnit >= 0x0041 && codeUnit <= 0x005A ||
+				codeUnit >= 0x0061 && codeUnit <= 0x007A
+			) {
+				// the character itself
+				result += string.charAt(index);
+				continue;
+			}
+
+			// Otherwise, the escaped character.
+			// http://dev.w3.org/csswg/cssom/#escape-a-character
+			result += '\\' + string.charAt(index);
+
+		}
+
+		return '#' + result;
+
+	};
+
+	/**
+	 * Stop YouTube, Vimeo, and HTML5 videos from playing when leaving the slide
+	 * @private
+	 * @param  {Element} content The content container the video is in
+	 * @param  {String} activeClass The class asigned to expanded content areas
+	 */
+	var stopVideos = function (content, settings) {
+
+		// Check if stop video enabled
+		if (!settings.stopVideo) return;
+
+		// Only run if content container is closed
+		if (content.classList.contains(settings.contentActiveClass)) return;
+
+		// Check if the video is an iframe or HTML5 video
+		var iframe = content.querySelector('iframe');
+		var video = content.querySelector('video');
+
+		// Stop the video
+		if (iframe) {
+			var iframeSrc = iframe.src;
+			iframe.src = iframeSrc;
+		}
+		if (video) {
+			video.pause();
+		}
+
+	};
+
+	/**
+	 * Add focus to tab
+	 * @private
+	 * @param  {node}   tab      The content to bring into focus
+	 * @param  {object} settings Options
+	 */
+	var adjustFocus = function (tab, settings) {
+
+		if (tab.hasAttribute('data-tab-no-focus')) return;
+
+		// If tab is closed, remove tabindex
+		if (!tab.classList.contains(settings.contentActiveClass)) {
+			if (tab.hasAttribute('data-tab-focused')) {
+				tab.removeAttribute('tabindex');
+			}
+			return;
+		}
+
+		// Get current position on the page
+		var position = {
+			x: root.pageXOffset,
+			y: root.pageYOffset
+		};
+
+		// Set focus and reset position to account for page jump on focus
+		tab.focus();
+		if (document.activeElement.id !== tab.id) {
+			tab.setAttribute('tabindex', '-1');
+			tab.setAttribute('data-tab-focused', true);
+			tab.focus();
+		}
+		root.scrollTo(position.x, position.y);
+
+	};
+
+	/**
+	 * Toggle tab toggle active state
+	 * @private
+	 * @param  {Node}   toggle   The toggle element
+	 * @param  {Object} settings
+	 */
+	var toggleToggles = function (toggle, settings) {
+
+		// Variables
+		var toggleGroup = getClosest(toggle, settings.selectorToggleGroup); // The parent for the toggle group
+		if (!toggleGroup) return;
+		var toggles = toggleGroup.querySelectorAll(settings.selectorToggle); // The toggles in the group
+		var toggleList;
+
+		// Show or hide each toggle
+		// @todo Start here
+		forEach(toggles, (function (item) {
+
+			// If this is the selected toggle, activate it
+			if (item.hash === toggle.hash) {
+
+				// Add active class
+				item.classList.add(settings.toggleActiveClass);
+
+				// If toggle is a list item, activate <li> element, too
+				toggleList = getClosest(item, 'li');
+				if (toggleList) {
+					toggleList.classList.add(settings.toggleActiveClass);
+				}
+
+				return;
+
+			}
+
+			// Otherwise, deactivate it
+			item.classList.remove(settings.toggleActiveClass);
+			toggleList = getClosest(item, 'li');
+			if (toggleList) {
+				toggleList.classList.remove(settings.toggleActiveClass);
+			}
+
+		}));
+
+	};
+
+	/**
+	 * Toggle tab active state
+	 * @private
+	 * @param  {String} tabID    The ID of the tab to activate
+	 * @param  {Object} settings
+	 */
+	var toggleTabs = function (tabID, settings) {
+
+		// Variables
+		var tab = document.querySelector(escapeCharacters(tabID)); // The selected tab
+		if (!tab) return;
+		var tabGroup = getClosest(tab, settings.selectorContentGroup); // The parent for the tab group
+		if (!tabGroup) return;
+		var tabs = tabGroup.querySelectorAll(settings.selectorContent); // The tabs in the group
+
+		// Show or hide each tab
+		forEach(tabs, (function (tab) {
+
+			// If this is the selected tab, show it
+			if (tab.id === tabID.substring(1)) {
+				tab.classList.add(settings.contentActiveClass);
+				adjustFocus(tab, settings);
+				return;
+			}
+
+			// Otherwise, hide it
+			tab.classList.remove(settings.contentActiveClass);
+			stopVideos(tab, settings);
+			adjustFocus(tab, settings);
+
+		}));
+
+	};
+
+	/**
+	 * Show a tab and hide all others
+	 * @public
+	 * @param  {Element} toggle The element that toggled the show tab event
+	 * @param  {String}  tabID The ID of the tab to show
+	 * @param  {Object}  options
+	 */
+	tabby.toggleTab = function (tabID, toggle, options) {
+
+		// Selectors and variables
+		var localSettings = extend(settings || defaults, options || {}); // Merge user options with defaults
+		var tabs = document.querySelectorAll(escapeCharacters(tabID)); // Get tab content
+
+		// Toggle visibility of the toggles and tabs
+		toggleTabs(tabID, localSettings);
+		if (toggle) {
+			toggleToggles(toggle, localSettings);
+		}
+
+		// Run callbacks after toggling tab
+		localSettings.callback(tabs, toggle);
+
+	};
+
+	/**
+	 * Handle has change event
+	 * @private
+	 */
+	var hashChangeHandler = function (event) {
+
+		// Get hash from URL
+		var hash = root.location.hash;
+
+		// If clicked tab is cached, reset it's ID
+		if (tab) {
+			tab.id = tab.getAttribute('data-tab-id');
+			tab = null;
+		}
+
+		// If there's a URL hash, activate tab with matching ID
+		if (!hash) return;
+		var toggle = document.querySelector(settings.selectorToggle + '[href*="' + hash + '"]');
+		tabby.toggleTab(hash, toggle);
+
+	};
+
+	/**
+	 * Handle toggle click events
+	 * @private
+	 */
+	var clickHandler = function (event) {
+
+		// Don't run if right-click or command/control + click
+		if (event.button !== 0 || event.metaKey || event.ctrlKey) return;
+
+		// Check if event target is a tab toggle
+		var toggle = getClosest(event.target, settings.selectorToggle);
+		if (!toggle || !toggle.hash) return;
+
+		// Don't run if toggle points to currently open tab
+		if (toggle.hash === root.location.hash) {
+			event.preventDefault();
+			return;
+		}
+
+		// Get the tab content
+		tab = document.querySelector(toggle.hash);
+
+		// If tab content exists, save the ID as a data attribute and remove it (prevents scroll jump)
+		if (!tab) return;
+		tab.setAttribute('data-tab-id', tab.id);
+		tab.id = '';
+
+	};
+
+	/**
+	 * Handle content focus events
+	 * @private
+	 */
+	var focusHandler = function (event) {
+
+		// Only run if the focused content is in a tab
+		tab = getClosest(event.target, settings.selectorContent);
+		if (!tab) return;
+
+		// Don't run if the content area is already open
+		if (tab.classList.contains(settings.contentActiveClass)) return;
+
+		// Store tab ID to variable and remove it from the tab
+		var hash = tab.id;
+		tab.setAttribute('data-tab-id', hash);
+		tab.setAttribute('data-tab-no-focus', true);
+		tab.id = '';
+
+		// Change the hash
+		location.hash = hash;
+
+	};
+
+	/**
+	 * Destroy the current initialization.
+	 * @public
+	 */
+	tabby.destroy = function () {
+		if (!settings) return;
+		document.documentElement.classList.remove(settings.initClass);
+		document.removeEventListener('click', clickHandler, false);
+		document.removeEventListener('focus', focusHandler, true);
+		root.removeEventListener('hashchange', hashChangeHandler, false);
+		settings = null;
+		tab = null;
+	};
+
+	/**
+	 * Initialize Tabby
+	 * @public
+	 * @param {Object} options User settings
+	 */
+	tabby.init = function (options) {
+
+		// feature test
+		if (!supports) return;
+
+		// Destroy any existing initializations
+		tabby.destroy();
+
+		// Merge user options with defaults
+		settings = extend(defaults, options || {});
+
+		// Add class to HTML element to activate conditional CSS
+		document.documentElement.classList.add(settings.initClass);
+
+		// Listen for all click events
+		document.addEventListener('click', clickHandler, false);
+		document.addEventListener('focus', focusHandler, true);
+		root.addEventListener('hashchange', hashChangeHandler, false);
+
+		// If URL has a hash, activate hashed tab by default
+		hashChangeHandler();
+
+	};
+
+
+	//
+	// Public APIs
+	//
+
+	return tabby;
+
+}));