Initial

html/vendor/checkboxes.css

@@ -0,0 +1,120 @@
+.iPhoneCheckContainer {
+    -webkit-transform:translate3d(0,0,0);
+    position: relative;
+    height: 30px;
+    cursor: pointer;
+    overflow: hidden;
+    margin: 5px 0 10px 0;
+}
+
+.iPhoneCheckContainer input {
+    position: absolute;
+    top: 5px;
+    left: 30px;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+}
+
+.iPhoneCheckContainer label {
+    white-space: nowrap;
+    font-size: 17px;
+    line-height: 17px;
+    font-weight: bold;
+    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+    cursor: pointer;
+    display: block;
+    height: 27px;
+    position: absolute;
+    width: auto;
+    top: 0;
+    padding-top: 5px;
+    overflow: hidden;
+}
+
+.iPhoneCheckContainer, .iPhoneCheckContainer label {
+    user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+}
+
+.iPhoneCheckDisabled {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+    opacity: 0.5;
+}
+
+div.iPhoneCheckBorderOn {
+    position: absolute;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background-image: url('images/border-on.png');
+    background-repeat: no-repeat;
+}
+
+label.iPhoneCheckLabelOn {
+    color: white;
+    background-image: url('images/label-on.png');
+    background-repeat: repeat-x;
+    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
+    left: 0;
+    padding-top: 5px;
+    margin-left: 4px;
+    margin-top: 0px;
+}
+
+label.iPhoneCheckLabelOn span {
+    padding-left: 4px;
+}
+
+label.iPhoneCheckLabelOff {
+    color: #8b8b8b;
+    background-image: url('images/label-off.png');
+    background-repeat: repeat-x;
+    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
+    text-align: right;
+    margin-right: 4px;
+    margin-top: 0px;
+    right: 0;
+}
+
+label.iPhoneCheckLabelOff span {
+    padding-right: 4px;
+}
+
+div.iPhoneCheckBorderOff {
+    position: absolute;
+    width: 4px;
+    height: 100%;
+    background-image: url('images/border-off.png');
+    background-repeat: no-repeat;
+}
+
+.iPhoneCheckHandle {
+    display: block;
+    height: 27px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    background-image: url('images/handle-left.png');
+    background-repeat: no-repeat;
+    padding-left: 4px;
+}
+
+.iPhoneCheckHandleCenter {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: url('images/handle-center.png');
+    background-repeat: repeat-x;
+}
+
+.iPhoneCheckHandleRight {
+    position: absolute;
+    height: 100%;
+    width: 4px;
+    right: 0px;
+    background-image: url('images/handle-right.png');
+    background-repeat: no-repeat;
+}

html/vendor/checkboxes.js

@@ -0,0 +1,366 @@
+// Generated by CoffeeScript 1.6.2
+/*eslint quotes: ["error", "double"]*/
+/*eslint-env es6*/
+
+(function() {
+  var iOSCheckbox, matched, userAgent,
+    __slice = [].slice;
+
+  if ($.browser == null) {
+    userAgent = navigator.userAgent || "";
+    jQuery.uaMatch = function(ua) {
+      var match;
+
+      ua = ua.toLowerCase();
+      match = /(chrome)[ \/]([\w.]+)/.exec(ua) || /(webkit)[ \/]([\w.]+)/.exec(ua) || /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(ua) || [];
+      return {
+        browser: match[1] || "",
+        version: match[2] || "0"
+      };
+    };
+    matched = jQuery.uaMatch(userAgent);
+    jQuery.browser = {};
+    if (matched.browser) {
+      jQuery.browser[matched.browser] = true;
+      jQuery.browser.version = matched.version;
+    }
+    if (jQuery.browser.webkit) {
+      jQuery.browser.safari = true;
+    }
+  }
+
+  iOSCheckbox = (function() {
+    function iOSCheckbox(elem, options) {
+      var key, opts, value;
+
+      this.elem = $(elem);
+      opts = $.extend({}, iOSCheckbox.defaults, options);
+      for (key in opts) {
+        if ({}.hasOwnProperty.call(opts, key)) {
+          value = opts[key];
+          this[key] = value;
+        }
+      }
+      this.elem.data(this.dataName, this);
+      this.wrapCheckboxWithDivs();
+      this.attachEvents();
+      this.disableTextSelection();
+      this.calculateDimensions();
+    }
+
+    iOSCheckbox.prototype.calculateDimensions = function() {
+      if (this.resizeHandle) {
+        this.optionallyResize("handle");
+      }
+      if (this.resizeContainer) {
+        this.optionallyResize("container");
+      }
+      return this.initialPosition();
+    };
+
+    iOSCheckbox.prototype.isDisabled = function() {
+      return this.elem.is(":disabled");
+    };
+
+    iOSCheckbox.prototype.wrapCheckboxWithDivs = function() {
+      this.elem.wrap("<div class='" + this.containerClass + "' />");
+      this.container = this.elem.parent();
+      this.offLabel = $("<label class='" + this.labelOffClass + "'>\n  <span>" + this.uncheckedLabel + "</span>\n</label>").appendTo(this.container);
+      this.offSpan = this.offLabel.children("span");
+      this.onLabel = $("<label class='" + this.labelOnClass + "'>\n  <span>" + this.checkedLabel + "</span>\n</label>").appendTo(this.container);
+      this.onBorder = $("<div class='iPhoneCheckBorderOn'</div>").appendTo(this.container);
+      this.offBorder = $("<div class='iPhoneCheckBorderOff'</div>").appendTo(this.container);
+      this.onSpan = this.onLabel.children("span");
+      this.handle = $("<div class='" + this.handleClass + "'></div>").appendTo(this.container);
+      this.handleCenter = $("<div class='" + this.handleCenterClass + "'></div>").appendTo(this.handle);
+      this.handleRight = $("<div class='" + this.handleRightClass + "'></div>").appendTo(this.handle);
+      return true;
+    };
+
+    iOSCheckbox.prototype.disableTextSelection = function() {
+      if ($.browser.msie) {
+        return $([this.handle, this.offLabel, this.onLabel, this.container]).attr("unselectable", "on");
+      }
+    };
+
+    iOSCheckbox.prototype._getDimension = function(elem, dimension) {
+      if ($.fn.actual != null) {
+        return elem.actual(dimension);
+      } else {
+        return elem[dimension]();
+      }
+    };
+
+    iOSCheckbox.prototype.optionallyResize = function(mode) {
+      var newWidth, offLabelWidth, offSpan, onLabelWidth, onSpan;
+
+      onSpan = this.onLabel.find("span");
+      onLabelWidth = this._getDimension(onSpan, "width");
+      onLabelWidth += parseInt(onSpan.css("padding-left"), 10);
+      offSpan = this.offLabel.find("span");
+      offLabelWidth = this._getDimension(offSpan, "width");
+      offLabelWidth += parseInt(offSpan.css("padding-right"), 10);
+      if (mode === "container") {
+        newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth;
+        newWidth += this._getDimension(this.handle, "width") + this.handleMargin;
+        return this.container.css({
+          width: newWidth
+        });
+      } else {
+        newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth;
+        this.handleCenter.css({
+            width: newWidth + 4
+        });
+        return this.handle.css({
+          width: newWidth + 7
+        });
+      }
+    };
+
+    iOSCheckbox.prototype.onMouseDown = function(event) {
+      var x;
+
+      event.preventDefault();
+      if (this.isDisabled()) {
+        return;
+      }
+      x = event.pageX || event.originalEvent.changedTouches[0].pageX;
+      iOSCheckbox.currentlyClicking = this.handle;
+      iOSCheckbox.dragStartPosition = x;
+      return iOSCheckbox.handleLeftOffset = parseInt(this.handle.css("left"), 10) || 0;
+    };
+
+    iOSCheckbox.prototype.onDragMove = function(event, x) {
+      var newWidth, p;
+
+      if (iOSCheckbox.currentlyClicking !== this.handle) {
+        return;
+      }
+      p = (x + iOSCheckbox.handleLeftOffset - iOSCheckbox.dragStartPosition) / this.rightSide;
+      if (p < 0) {
+        p = 0;
+      }
+      if (p > 1) {
+        p = 1;
+      }
+      newWidth = p * this.rightSide;
+      this.handle.css({
+        left: newWidth
+      });
+      this.onLabel.css({
+        width: newWidth + this.handleRadius
+      });
+      this.offSpan.css({
+        marginRight: -newWidth
+      });
+      return this.onSpan.css({
+        marginLeft: -(1 - p) * this.rightSide
+      });
+    };
+
+    iOSCheckbox.prototype.onDragEnd = function(event, x) {
+      var p;
+
+      if (iOSCheckbox.currentlyClicking !== this.handle) {
+        return;
+      }
+      if (this.isDisabled()) {
+        return;
+      }
+      if (iOSCheckbox.dragging) {
+        p = (x - iOSCheckbox.dragStartPosition) / this.rightSide;
+        this.elem.prop("checked", p >= 0.5).change();
+      } else {
+        this.elem.prop("checked", !this.elem.prop("checked")).change();
+      }
+      iOSCheckbox.currentlyClicking = null;
+      iOSCheckbox.dragging = null;
+      if (typeof this.onChange === "function") {
+        this.onChange(this.elem, this.elem.prop("checked"));
+      }
+      return this.didChange();
+    };
+
+    iOSCheckbox.prototype.refresh = function() {
+      return this.didChange();
+    };
+
+    iOSCheckbox.prototype.didChange = function() {
+      var newLeft;
+
+      if (this.isDisabled()) {
+        this.container.addClass(this.disabledClass);
+        return false;
+      } else {
+        this.container.removeClass(this.disabledClass);
+      }
+      newLeft = this.elem.prop("checked") ? this.rightSide + 2 : 0;
+      this.handle.animate({
+        left: newLeft
+      }, this.duration);
+      this.onLabel.animate({
+        width: newLeft + this.handleRadius
+      }, this.duration);
+      this.offSpan.animate({
+        marginRight: - newLeft
+      }, this.duration);
+      return this.onSpan.animate({
+        marginLeft: newLeft - this.rightSide
+      }, this.duration);
+    };
+
+    iOSCheckbox.prototype.attachEvents = function() {
+      var localMouseMove, localMouseUp, self;
+
+      self = this;
+      localMouseMove = function(event) {
+        return self.onGlobalMove.apply(self, arguments);
+      };
+      localMouseUp = function(event) {
+        self.onGlobalUp.apply(self, arguments);
+        $(document).unbind("mousemove touchmove", localMouseMove);
+        return $(document).unbind("mouseup touchend", localMouseUp);
+      };
+      this.elem.change(function() {
+        return self.refresh();
+      });
+      return this.container.bind("mousedown touchstart", function(event) {
+        self.onMouseDown.apply(self, arguments);
+        $(document).bind("mousemove touchmove", localMouseMove);
+        return $(document).bind("mouseup touchend", localMouseUp);
+      });
+    };
+
+    iOSCheckbox.prototype.initialPosition = function() {
+      var containerWidth, offset;
+
+      containerWidth = this._getDimension(this.container, "width");
+      this.offLabel.css({
+        width: containerWidth - this.containerRadius - 4
+      });
+      this.offBorder.css({
+          left: containerWidth - 4
+      });
+      offset = this.containerRadius + 1;
+      if ($.browser.msie && $.browser.version < 7) {
+        offset -= 3;
+      }
+      this.rightSide = containerWidth - this._getDimension(this.handle, "width") - offset;
+      if (this.elem.is(":checked")) {
+        this.handle.css({
+          left: this.rightSide
+        });
+        this.onLabel.css({
+          width: this.rightSide + this.handleRadius
+        });
+        this.offSpan.css({
+          marginRight: -this.rightSide,
+        });
+      } else {
+        this.onLabel.css({
+          width: 0
+        });
+        this.onSpan.css({
+          marginLeft: -this.rightSide
+        });
+      }
+      if (this.isDisabled()) {
+        return this.container.addClass(this.disabledClass);
+      }
+    };
+
+    iOSCheckbox.prototype.onGlobalMove = function(event) {
+      var x;
+
+      if (!(!this.isDisabled() && iOSCheckbox.currentlyClicking)) {
+        return;
+      }
+      event.preventDefault();
+      x = event.pageX || event.originalEvent.changedTouches[0].pageX;
+      if (!iOSCheckbox.dragging && (Math.abs(iOSCheckbox.dragStartPosition - x) > this.dragThreshold)) {
+        iOSCheckbox.dragging = true;
+      }
+      return this.onDragMove(event, x);
+    };
+
+    iOSCheckbox.prototype.onGlobalUp = function(event) {
+      var x;
+
+      if (!iOSCheckbox.currentlyClicking) {
+        return;
+      }
+      event.preventDefault();
+      x = event.pageX || event.originalEvent.changedTouches[0].pageX;
+      this.onDragEnd(event, x);
+      return false;
+    };
+
+    iOSCheckbox.defaults = {
+      duration: 200,
+      checkedLabel: "ON",
+      uncheckedLabel: "OFF",
+      resizeHandle: true,
+      resizeContainer: true,
+      disabledClass: "iPhoneCheckDisabled",
+      containerClass: "iPhoneCheckContainer",
+      labelOnClass: "iPhoneCheckLabelOn",
+      labelOffClass: "iPhoneCheckLabelOff",
+      handleClass: "iPhoneCheckHandle",
+      handleCenterClass: "iPhoneCheckHandleCenter",
+      handleRightClass: "iPhoneCheckHandleRight",
+      dragThreshold: 5,
+      handleMargin: 15,
+      handleRadius: 4,
+      containerRadius: 5,
+      dataName: "iphoneStyle",
+      onChange: function() {}
+    };
+
+    return iOSCheckbox;
+
+  })();
+
+  $.iphoneStyle = this.iOSCheckbox = iOSCheckbox;
+
+  $.fn.iphoneStyle = function() {
+    var args, checkbox, dataName, existingControl, method, params, _i, _len, _ref, _ref1, _ref2, _ref3;
+
+    args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+    dataName = (_ref = (_ref1 = args[0]) != null ? _ref1.dataName : void 0) != null ? _ref : iOSCheckbox.defaults.dataName;
+    _ref2 = this.filter(":checkbox");
+    for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
+      checkbox = _ref2[_i];
+      existingControl = $(checkbox).data(dataName);
+      if (existingControl != null) {
+        method = args[0], params = 2 <= args.length ? __slice.call(args, 1) : [];
+        if ((_ref3 = existingControl[method]) != null) {
+          _ref3.apply(existingControl, params);
+        }
+      } else {
+        new iOSCheckbox(checkbox, args[0]);
+      }
+    }
+    return this;
+  };
+
+  $.fn.iOSCheckbox = function(options) {
+    var opts;
+
+    if (options == null) {
+      options = {};
+    }
+    opts = $.extend({}, options, {
+      resizeHandle: false,
+      disabledClass: "iOSCheckDisabled",
+      containerClass: "iOSCheckContainer",
+      labelOnClass: "iOSCheckLabelOn",
+      labelOffClass: "iOSCheckLabelOff",
+      handleClass: "iOSCheckHandle",
+      handleCenterClass: "iOSCheckHandleCenter",
+      handleRightClass: "iOSCheckHandleRight",
+      dataName: "iOSCheckbox"
+    });
+    return this.iphoneStyle(opts);
+  };
+
+}).call(this);

html/vendor/jquery.wheelcolorpicker-3.0.3.css

@@ -0,0 +1,160 @@
+/**
+ * jQuery Wheel Color Picker
+ * Base Stylesheet
+ * 
+ * http://www.jar2.net/projects/jquery-wheelcolorpicker
+ * 
+ * Copyright © 2011-2016 Fajar Chandra. All rights reserved.
+ * Released under MIT License.
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Note: Width, height, left, and top properties are handled by the 
+ * plugin. These values might change on the fly.
+ */
+
+.jQWCP-wWidget {
+	position: absolute;
+	width: 250px;
+	height: 180px;
+	background: #eee;
+	box-shadow: 1px 1px 4px rgba(0,0,0,.5);
+	border-radius: 4px;
+	border: solid 1px #aaa;
+	padding: 10px;
+	z-index: 1001;
+}
+
+.jQWCP-wWidget.jQWCP-block {
+	position: relative;
+	border-color: #aaa;
+	box-shadow: inset 1px 1px 1px #ccc;
+}
+
+.jQWCP-wWheel {
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: contain;
+	position: relative;
+	float: left;
+	width: 180px;
+	height: 180px;
+	-webkit-border-radius: 90px;
+	-moz-border-radius: 50%;
+	border-radius: 50%;
+	border: solid 1px #aaa;
+	margin: -1px;
+	margin-right: 10px;
+	transition: border .15s;
+	cursor: crosshair;
+}
+
+.jQWCP-wWheel:hover {
+	border-color: #666;
+}
+
+.jQWCP-wWheelOverlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #000;
+	opacity: 0;
+	-webkit-border-radius: 90px;
+	-moz-border-radius: 50%;
+	border-radius: 50%;
+}
+
+.jQWCP-wWheelCursor {
+	width: 8px;
+	height: 8px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -6px -6px;
+	cursor: crosshair;
+	border: solid 2px #fff;
+	box-shadow: 1px 1px 2px #000;
+	border-radius: 50%;
+}
+
+.jQWCP-slider-wrapper,
+.jQWCP-wPreview {
+	position: relative;
+	width: 20px;
+	height: 180px;
+	float: left;
+	margin-right: 10px;
+}
+
+.jQWCP-wWheel:last-child,
+.jQWCP-slider-wrapper:last-child,
+.jQWCP-wPreview:last-child {
+    margin-right: 0;
+}
+
+.jQWCP-slider,
+.jQWCP-wPreviewBox {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
+	box-sizing: border-box;
+	border: solid 1px #aaa;
+	margin: -1px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+	transition: border .15s;
+}
+
+.jQWCP-slider {
+	cursor: crosshair;
+}
+
+.jQWCP-slider-wrapper:hover .jQWCP-slider {
+	border-color: #666;
+}
+
+.jQWCP-scursor {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	height: 6px;
+	margin: -5px -1px -5px -3px;
+	cursor: crosshair;
+	border: solid 2px #fff;
+	box-shadow: 1px 1px 2px #000;
+	border-radius: 4px;
+}
+
+.jQWCP-wAlphaSlider,
+.jQWCP-wPreviewBox {
+	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEVAQEB/f39eaJUuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYRBDgK9dKdMgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAARSURBVAjXY/jPwIAVYRf9DwB+vw/x6vMT1wAAAABJRU5ErkJggg==') center center;
+}
+
+.jQWCP-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	z-index: 1000;
+}
+
+/*********************/
+
+/* Mobile layout */
+
+.jQWCP-mobile.jQWCP-wWidget {
+    position: fixed;
+    bottom: 0;
+    left: 0 !important;
+    top: auto !important;
+    width: 100%;
+    height: 75%;
+    max-height: 240px;
+    box-sizing: border-box;
+    border-radius: 0;
+}

html/vendor/side-menu.css

@@ -0,0 +1,248 @@
+body {
+    color: #777;
+}
+
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout,
+#menu,
+.menu-link {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout {
+    position: relative;
+    left: 0;
+    padding-left: 0;
+}
+    #layout.active #menu {
+        left: 160px;
+        width: 160px;
+    }
+
+    #layout.active .menu-link {
+        left: 160px;
+    }
+/*
+The content `<div>` is where all your content goes.
+*/
+.content {
+    margin: 0 auto;
+    padding: 0 2em;
+    max-width: 800px;
+    margin-bottom: 50px;
+    line-height: 1.6em;
+}
+
+.header {
+     margin: 0;
+     color: #333;
+     text-align: center;
+     padding: 2.5em 2em 0;
+     border-bottom: 1px solid #eee;
+ }
+    .header h1 {
+        margin: 0.2em 0;
+        font-size: 3em;
+        font-weight: 300;
+    }
+     .header h2 {
+        font-weight: 300;
+        color: #ccc;
+        padding: 0;
+        margin-top: 0;
+    }
+
+.content-subhead {
+    margin: 50px 0 20px 0;
+    font-weight: 300;
+    color: #888;
+}
+
+
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+
+#menu {
+    margin-left: -160px; /* "#menu" width */
+    width: 160px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000; /* so the menu or its navicon stays above all content */
+    background: #191818;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+    /*
+    All anchors inside the menu should be styled like this.
+    */
+    #menu a {
+        color: #999;
+        border: none;
+        padding: 0.6em 0 0.6em 0.6em;
+    }
+
+    /*
+    Remove all background/borders, since we are applying them to #menu.
+    */
+     #menu .pure-menu,
+     #menu .pure-menu ul {
+        border: none;
+        background: transparent;
+    }
+
+    /*
+    Add that light border to separate items into groups.
+    */
+    #menu .pure-menu ul,
+    #menu .pure-menu .menu-item-divided {
+        border-top: 1px solid #333;
+    }
+        /*
+        Change color of the anchor links on hover/focus.
+        */
+        #menu .pure-menu li a:hover,
+        #menu .pure-menu li a:focus {
+            background: #333;
+        }
+
+    /*
+    This styles the selected menu item `<li>`.
+    */
+    #menu .pure-menu-selected,
+    #menu .pure-menu-heading {
+        background: #1f8dd6;
+    }
+        /*
+        This styles a link within a selected menu item `<li>`.
+        */
+        #menu .pure-menu-selected a {
+            color: #fff;
+        }
+
+    /*
+    This styles the menu heading.
+    */
+    #menu .pure-menu-heading {
+        font-size: 110%;
+        color: #fff;
+        margin: 0;
+    }
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
+/*
+The button to open/close the Menu is custom-made and not part of Pure. Here's
+how it works:
+*/
+
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link {
+    position: fixed;
+    display: block; /* show this only on small screens */
+    top: 0;
+    left: 0; /* "#menu width" */
+    background: #000;
+    background: rgba(0,0,0,0.7);
+    font-size: 10px; /* change this value to increase/decrease button size */
+    z-index: 10;
+    width: 2em;
+    height: auto;
+    padding: 2.1em 1.6em;
+}
+
+    .menu-link:hover,
+    .menu-link:focus {
+        background: #000;
+    }
+
+    .menu-link span {
+        position: relative;
+        display: block;
+    }
+
+    .menu-link span,
+    .menu-link span:before,
+    .menu-link span:after {
+        background-color: #fff;
+        width: 100%;
+        height: 0.2em;
+    }
+
+        .menu-link span:before,
+        .menu-link span:after {
+            position: absolute;
+            margin-top: -0.6em;
+            content: " ";
+        }
+
+        .menu-link span:after {
+            margin-top: 0.6em;
+        }
+
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+/*
+Hides the menu at `48em`, but modify this based on your app's needs.
+*/
+@media (min-width: 48em) {
+
+    .header,
+    .content {
+        padding-left: 2em;
+        padding-right: 2em;
+    }
+
+    #layout {
+        padding-left: 160px; /* left col width "#menu" */
+        left: 0;
+    }
+    #menu {
+        left: 160px;
+    }
+
+    .menu-link {
+        position: fixed;
+        left: 160px;
+        display: none;
+    }
+
+    #layout.active .menu-link {
+        left: 160px;
+    }
+}
+
+@media (max-width: 48em) {
+    /* Only apply this when the window is small. Otherwise, the following
+    case results in extra padding on the left:
+        * Make the window small.
+        * Tap the menu to trigger the active state.
+        * Make the window large again.
+    */
+    #layout.active {
+        position: relative;
+        left: 160px;
+    }
+}