diff --git a/README.md b/README.md
index db36874..80e170c 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ When the user pushes the `?` key, QuestionMark.js triggers a modal window that d
 
 I think every app that has keyboard shortcuts should do this. This could also be a generic 'help' menu for the app, but that would require some tweaking to the code and the CSS. For now, this works primarily as a shortcut keys menu.
 
-[View a demo here](http://www.impressivewebs.com/demo-files/question-mark-js/)
+[View a demo here](https://www.impressivewebs.com/demo-files/question-mark-js/)
 
 ## Instructions
 To make it work, it's pretty simple. Link the CSS file in the `<head>` and run the script on page load (or at the bottom). Make sure all the mandatory files are included (`question.mark.html`, `question.mark.css`, and `question.mark.js`).
@@ -13,27 +13,26 @@ To customize, edit the `question.mark.html` file to include your own keyboard sh
 
 Within each `<ul>` a single key/definition combo is inside one `<li>`, within which there is more markup. Edit the text to include your own app's key combos. It should be pretty self-explanatory when you look at the example markup.
 
-If you have only one column of keyboard shortcuts, then you should remove the `onwindowresize` section of code.
+
 
 ## Technical Info
-The script is about 2KB minified and gzip'd and it has no dependencies. It's also more or less responsive (doing this via JavaScript).
+The script is less than 1KB minified and gzip'd and it has no dependencies.
+
+The content from `question.mark.html` (which also holds all the markup that builds the modal) is loaded via the Fetch API and inserted into the `<body>` element of the page. The modal starts out invisible and is displayed via CSS transitions.
 
-The content from `question.mark.html` (which also holds all the markup that builds the modal) is loaded via Ajax and inserted into the `<body>` element of the page. The modal starts out invisible and is displayed via CSS transitions. Browsers that don't support transitions will display it instantly with no transition.
 
-The script also uses `window.onresize` to manage width/height of the modal, which can have performance issues. If you find this is slowing down your app, just comment out the part of the code that looks for the window resize. The drawback to this is that it will display at full size on a small window. Of course, if you only have a small single column of keyboard shortcuts, you won't need the `window.onresize` part, so, as mentioned above, just remove it.
 
 ## Browser Support
-This should work in all the normal browsers and IE8+. No IE6/7 support. If you want IE8 support, include attachevent.js before question.mark.js.
+This should work in all browsers that support the Fetch API. If you want older browser support, you'll have to use version 1.0.0, which you can get in the GitHub history.
 
-## Bugs? Suggestion?
-The script is pretty new and I'm sure there will be reported issues and whatnot, so feel free to fork it and make it better. I don't know of any other scripts like this one, so you can help optimize the code and make this the go-to standard for including a shortcut key menu in web apps!
 
 ## Demo Page
-For a demo of QuestionMark.js, [go here](http://www.impressivewebs.com/demo-files/question-mark-js/).
+For a demo of QuestionMark.js, [go here](https://www.impressivewebs.com/demo-files/question-mark-js/) or you can fiddle around with the version [on CodePen](https://codepen.io/impressivewebs/pen/eJzsw?editors=0010).
+
 
 ## MIT License
 
-Copyright © 2013 by Louis Lazaris
+Copyright © 2013 – 2021 by Louis Lazaris
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -51,4 +50,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 6e834d8..5205bac 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "question-mark-js",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "homepage": "https://www.impressivewebs.com/demo-files/question-mark-js/",
   "authors": [
     "Louis Lazaris"
diff --git a/css/question.mark.css b/css/question.mark.css
deleted file mode 100644
index 37b5663..0000000
--- a/css/question.mark.css
+++ /dev/null
@@ -1,155 +0,0 @@
-.help-underlay * {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.help-underlay {
-  position: absolute;
-  background: #555;
-  background: rgba(0,0,0,0.5);
-  visibility: hidden;
-  opacity: 0;
-  -webkit-transition: opacity .2s linear;
-  -moz-transition: opacity .2s linear;
-  -o-transition: opacity .2s linear;
-  transition: opacity .2s linear;
-  left: 0; right: 0; top: 0; bottom: 0;
-}
-
-.ie8 .help-underlay {
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=95)"; /* for IE8 in IE7 mode */
-  filter: alpha(opacity=95); /* for IE8 */
-  visibility: hidden;
-}
-
-.help-modal {
-  position: fixed;
-  z-index: 99999;
-  left: 0; right: 0; top: 0; bottom: 0;
-  width: 80%;
-  margin: auto;
-  background: #fff;
-  color: #676767;
-  max-height: 80%;
-  overflow: auto;
-  font-family: Arial, sans-serif;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
-  box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
-  -webkit-transition: width .2s linear;
-  -moz-transition: width .2s linear;
-  -o-transition: width .2s linear;
-  transition: width .2s linear;
-}
-
-  .help-modal-content {
-    padding: 0 20px;
-  }
-
-  .help-close {
-    position: absolute;
-    top: .4em;
-    right: .5em;
-    font-size: 1.8em;
-    cursor: pointer;
-    -webkit-transition: color .2s linear;
-    -moz-transition: color .2s linear;
-    -o-transition: color .2s linear;
-    transition: color .2s linear;
-  }
-
-    .help-close:hover {
-      color: #000;
-    }
-
-.help-modal h1 {
-  text-align: center;
-  margin: .5em;
-  font-size: 1.5em;
-  padding-bottom: .4em;
-  border-bottom: solid 2px #ccc;
-  font-weight: normal;
-}
-
-  .help-modal h1 .help-key {
-    float: none;
-    line-height: 1.5;
-    position: relative;
-    bottom: 4px;
-  }
-
-.help-isVisible {
-  opacity: 1;
-  visibility: visible;
-  height: auto;
-  z-index: 8888;
-}
-
-.ie8 .help-underlay.help-isVisible {
-  visibility: visible;
-}
-
-.help-list-wrap {
-  overflow: hidden;
-  margin: 0 auto;
-  -webkit-transition: width .2s linear;
-  -moz-transition: width .2s linear;
-  -o-transition: width .2s linear;
-  transition: width .2s linear;
-}
-
-.help-list {
-  list-style: none;
-  margin: 0;
-  padding: 0 0 10px 0;
-  overflow: hidden;
-  float: left;
-  width: 280px;
-}
-
-  .help-list li {
-    margin-right: 40px;
-  }
-
-.help-key-unit {
-  line-height: 1.8;
-  margin-right: 2em;
-  padding: 5px 0;
-}
-
-.help-key {
-  min-width: 60px;
-  float: left;
-  clear: left;
-  position: relative;
-  bottom: 2px;
-}
-
-.help-key span {
-  font-size: 15px;
-  color: #555;
-  display: inline-block;
-  padding: 0 8px;
-  text-align: center;
-  background-color: #eee;
-  background-repeat: repeat-x;
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#eee));
-  background-image: -webkit-linear-gradient(#f5f5f5 0%, #eee 100%);
-  background-image: -moz-linear-gradient(#f5f5f5 0%, #eee 100%);
-  background-image: -o-linear-gradient(#f5f5f5 0%, #eee 100%);
-  background-image: linear-gradient(#f5f5f5 0%, #eee 100%);
-  border: 1px solid #ccc;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
-  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
-}
-
-.help-key-def {
-  display: inline-block;
-  margin-left: 1em;
-}
\ No newline at end of file
diff --git a/dist/css/question.mark.css b/dist/css/question.mark.css
new file mode 100644
index 0000000..be75b05
--- /dev/null
+++ b/dist/css/question.mark.css
@@ -0,0 +1,152 @@
+.help-underlay * {
+  box-sizing: border-box;
+}
+
+.help-underlay {
+  position: absolute;
+  background: #555;
+  background: rgba(0, 0, 0, 0.5);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s linear;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.help-modal {
+  position: absolute;
+  z-index: 99999;
+  left: 10%;
+  right: 10%;
+  top: 10%;
+  bottom: 20%;
+  margin: auto;
+  background: #fff;
+  color: #676767;
+  max-width: 1178px;
+  overflow: auto;
+  font-family: Arial, sans-serif;
+  border-radius: 3px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  transition: width 0.2s linear;
+}
+
+.help-modal-content {
+  padding: 0 20px;
+}
+
+.help-close {
+  position: absolute;
+  top: 0.4em;
+  right: 0.5em;
+  font-size: 1.8em;
+  cursor: pointer;
+  transition: color 0.2s linear;
+}
+
+.help-close:hover {
+  color: #000;
+}
+
+.help-modal h1 {
+  text-align: center;
+  margin: 0.5em;
+  font-size: 1.5em;
+  padding-bottom: 0.4em;
+  border-bottom: solid 2px #ccc;
+  font-weight: normal;
+}
+
+.help-modal h1 .help-key {
+  line-height: 1.5;
+  position: relative;
+  bottom: 4px;
+}
+
+.help-isVisible {
+  opacity: 1;
+  visibility: visible;
+  height: auto;
+  z-index: 8888;
+}
+
+.help-list-wrap {
+  transition: width 0.2s linear;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.help-list {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 10px 0;
+}
+
+.help-key-unit {
+  line-height: 1.8;
+  margin-right: 2em;
+  padding: 5px 0;
+}
+
+.help-key {
+  position: relative;
+  bottom: 2px;
+}
+
+.help-key span {
+  font-size: 14px;
+  color: #555;
+  display: inline-block;
+  padding: 0 8px;
+  text-align: center;
+  background-color: #eee;
+  background-repeat: repeat-x;
+  background-image: linear-gradient(#f5f5f5 0%, #eee 100%);
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
+}
+
+.help-key-def {
+  margin-left: 1em;
+}
+
+@media (max-width: 1460px) {
+  .help-modal {
+    left: 10%;
+    right: 10%;
+  }
+}
+
+@media (max-width: 1280px) {
+  .help-modal {
+    left: 25%;
+    right: 25%;
+  }
+
+  .help-list {
+    width: 50%;
+  }
+}
+
+@media (max-width: 1230px) {
+  .help-modal {
+    left: 30%;
+    right: 30%;
+  }
+  
+  .help-list {
+    width: 100%;
+  }
+}
+
+@media (max-width: 870px) {
+  .help-modal {
+    left: 10%;
+    right: 10%;
+  }
+}
\ No newline at end of file
diff --git a/index.html b/dist/index.html
similarity index 77%
rename from index.html
rename to dist/index.html
index 3b68cee..73b8cb9 100644
--- a/index.html
+++ b/dist/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="monetization" content="$ilp.uphold.com/K2Xp98WeRgUn">
   <title>QuestionMark.js</title>
-  <link rel="stylesheet" href="css/question.mark.css?v=1.0.5">
+  <link rel="stylesheet" href="css/question.mark.css?v=2.0.0">
 
   <style>
   .demo {
@@ -51,15 +51,15 @@
 
   <div class="demo">
     <h1>QuestionMark.js</h1>
-    <p>A lightweight, cross-browser, modal window that displays shortcut keys for your app, similar to what happens on Twitter, Gmail, GitHub, etc.</a></p>
+    <p>A tiny (&lt;1kb), cross-browser, modal window that displays shortcut keys for your app when the user presses the <code>?</code> key – similar to what happens on Twitter, Gmail, GitHub, etc.</a></p>
 
     <p>This is an example page.</p>
     <p>Press the <code>?</code> key to see the modal.</p>
-    <p>More info:<br><a href="https://github.com/impressivewebs/QuestionMark.js">https://github.com/impressivewebs/QuestionMark.js</a> and <a href="https://www.impressivewebs.com/questionmark-js-shortcut-keys-displayed/">the blog post</a>.</p>
+    <p>More info:<br><a href="https://github.com/impressivewebs/QuestionMark.js">GitHub repo</a> and <a href="https://www.impressivewebs.com/questionmark-js-shortcut-keys-displayed/">the blog post</a>.</p>
     <p>Made by <a href="https://twitter.com/ImpressiveWebs">Louis Lazaris</a>. Use it for whatever you want.</p>
   </div><!-- .demo -->
 
-  <script src="js/question.mark.js?v=1.0.1"></script>
+  <script src="js/question.mark.min.js?v=2.0.0"></script>
 
   <script>
     var _gaq = _gaq || [];
diff --git a/dist/js/question.mark.js b/dist/js/question.mark.js
new file mode 100644
index 0000000..1d44046
--- /dev/null
+++ b/dist/js/question.mark.js
@@ -0,0 +1 @@
+!function(e){"use strict";function t(e){e.classList.remove("help-isVisible")}function n(e){return e.keyCode}fetch("question.mark.html").then(e=>e.text()).then(i=>{e.body.innerHTML+=i,function(){let i=e.getElementById("helpUnderlay"),d=e.getElementById("helpModal"),s=e.getElementById("helpClose");e.addEventListener("keydown",function(e){191===n(e)&&!0===e.shiftKey&&i.classList.add("help-isVisible")},!1),e.addEventListener("keyup",function(e){27===n(e)&&t(i)},!1),i.addEventListener("click",function(){t(i)},!1),d.addEventListener("click",function(e){e.stopPropagation()},!1),s.addEventListener("click",function(){t(i)},!1)}()})}(document);
\ No newline at end of file
diff --git a/question.mark.html b/dist/question.mark.html
similarity index 100%
rename from question.mark.html
rename to dist/question.mark.html
diff --git a/js/question.mark.js b/js/question.mark.js
deleted file mode 100644
index f8adc2b..0000000
--- a/js/question.mark.js
+++ /dev/null
@@ -1,196 +0,0 @@
-/*
-  QuestionMark.js by Louis Lazaris
-  http://impressivewebs.github.io/QuestionMark.js/
-  Use it for whatever you want, no credit needed.
-  This script should work everywhere, including IE9+.
-*/
-
-(function () {
-
-  'use strict';
-
-  function removeModal(helpUnderlay) {
-    helpUnderlay.className = helpUnderlay.className.replace(/help-isVisible*/g, '');
-    helpUnderlay.className = helpUnderlay.className.trim();
-  }
-
-  function getWindowWidth() {
-    let w = window,
-        d = document,
-        e = d.documentElement,
-        g = d.getElementsByTagName('body')[0],
-        x = w.innerWidth || e.clientWidth || g.clientWidth;
-    return x;
-  }
-
-  function doUnderlayHeight() {
-    let D = document;
-    return Math.max(
-      D.body.scrollHeight, D.documentElement.scrollHeight,
-      D.body.offsetHeight, D.documentElement.offsetHeight,
-      D.body.clientHeight, D.documentElement.clientHeight
-    );
-  }
-
-  function doModalSize(o) {
-    // Find out how many columns there are, create array of heights
-    o.helpColsTotal = 0;
-    for (o.i = 0; o.i < o.helpLists.length; o.i += 1) {
-      if (o.helpLists[o.i].className.indexOf('help-list') !== -1) {
-        o.helpColsTotal += 1;
-      }
-      o.helpListsHeights[o.i] = o.helpLists[o.i].offsetHeight;
-    }
-
-    // get the tallest column from the array of heights
-    o.maxHeight = Math.max.apply(Math, o.helpListsHeights);
-
-    // Quasi-responsive
-    if (getWindowWidth() <= 1180 && getWindowWidth() > 630 && o.helpColsTotal > 2) {
-      o.helpColsTotal = 2;
-      o.maxHeight = o.maxHeight * o.helpColsTotal;
-    }
-
-    if (getWindowWidth() <= 630) {
-      o.maxHeight = o.maxHeight * o.helpColsTotal;
-      o.helpColsTotal = 1;
-    }
-
-    // Change the width/height of the modal and wrapper to fit the columns
-    // Sorry for the magic numbers. Whatevs.
-    o.helpListWrap.style.offsetWidth = (o.helpList.offsetWidth * o.helpColsTotal) + 'px';
-    o.helpListWrap.style.height = o.maxHeight + 'px';
-    o.helpModal.style.width = (o.helpList.offsetWidth * o.helpColsTotal) + 60 + 'px';
-    o.helpModal.style.height = o.maxHeight + 100 + 'px';
-  }
-
-  function doWhichKey(e) {
-    e = e || window.event;
-    let charCode = e.keyCode || e.which;
-    // The commented line below not needed, but you can read the key with it
-    // let charStr = String.fromCharCode(charCode);
-    return charCode;
-  }
-
-  // Primary function, called in checkServerResponse()
-  function doQuestionMark() {
-
-    let helpUnderlay = document.getElementById('helpUnderlay'),
-        helpModal = document.getElementById('helpModal'),
-        helpClose = document.getElementById('helpClose'),
-        timeOut = null,
-        objDoSize = {
-          i: null,
-          maxHeight: null,
-          helpListWrap: document.getElementById('helpListWrap'),
-          helpList: document.querySelector('.help-list'),
-          helpLists: document.querySelectorAll('.help-list'),
-          helpModal: helpModal,
-          helpColsTotal: null,
-          helpListsHeights: []
-        },
-        classCol;
-
-    doModalSize(objDoSize);
-
-    document.addEventListener('keydown', function (e) {
-      // 191 = '?' key
-      // '?' key toggles the modal
-      if (doWhichKey(e) === 191 && e.shiftKey === true) {
-        classCol = document.getElementById('helpUnderlay').className;
-        if (classCol.indexOf('help-isVisible') === -1) {
-          document.getElementById('helpUnderlay').className += ' help-isVisible';
-        }
-
-      }
-
-      helpUnderlay.style.height = doUnderlayHeight() + 'px';
-
-    }, false);
-
-    document.addEventListener('keyup', function (e) {
-      // 27 = ESC key
-      if (doWhichKey(e) === 27) {
-        removeModal(helpUnderlay);
-      }
-    }, false);
-
-    // Modal is removed if the background is clicked
-    helpUnderlay.addEventListener('click', function () {
-      removeModal(helpUnderlay);
-    }, false);
-
-    // this prevents click on modal from removing the modal
-    helpModal.addEventListener('click', function (e) {
-      e.stopPropagation();
-    }, false);
-
-    // the close button
-    helpClose.addEventListener('click', function () {
-      removeModal(helpUnderlay);
-    }, false);
-
-    // If the window is resized, the doModalSize() function is called again.
-    // If your menu includes only a single column of keyboard shortcuts,
-    // then you won't need this. Keep only if you have 2 columns or more.
-    window.onresize = function () {
-      if (timeOut !== null) {
-        clearTimeout(timeOut);
-      }
-      timeOut = setTimeout(function () {
-        doModalSize(objDoSize);
-      }, 100);
-    };
-
-  }
-
-  // All the Ajax stuff is here
-  function getXhrObject() {
-    let xhrObject = false;
-    if (window.XMLHttpRequest) {
-      xhrObject = new XMLHttpRequest();
-    }
-    return xhrObject;
-  }
-
-  function insertHelp(respText, callback) {
-    // Opera kept inserting the content multiple times
-    // so I added a check to insert it just once... bug??
-    if (!document.getElementById('helpUnderlay')) {
-      document.getElementsByTagName('body')[0].innerHTML += respText;
-      callback();
-    }
-  }
-
-  function checkServerResponse(ajaxCapable) {
-    if (ajaxCapable.readyState === 4) {
-      if (ajaxCapable.status === 200 || ajaxCapable.status === 304) {
-        let respText = ajaxCapable.responseText;
-        // here's where the help modal is inserted
-        insertHelp(respText, function () {
-          doQuestionMark();
-        });
-      }
-    }
-  }
-
-  function doAjax() {
-    let ajaxCapable = getXhrObject();
-    if (ajaxCapable) {
-      ajaxCapable.onreadystatechange = function () {
-        checkServerResponse(ajaxCapable);
-      };
-      ajaxCapable.open('POST', 'question.mark.html', true);
-      ajaxCapable.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-      ajaxCapable.send(null);
-    } else {
-      // Browser does not support ajax
-      document.getElementsByTagName('body')[0].innerHTML += 'Error: Your browser does not support Ajax';
-    }
-  }
-
-  // This fires all the Ajax stuff, and, in turn,
-  // the primary function for the modal.
-  doAjax();
-
-}());
\ No newline at end of file
diff --git a/js/question.mark.min.js b/js/question.mark.min.js
deleted file mode 100644
index f74e1b4..0000000
--- a/js/question.mark.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){"use strict";function e(e){e.className=e.className.replace(/help-isVisible*/g,""),e.className=e.className.trim()}function t(){let e=window,t=document,l=t.documentElement,n=t.getElementsByTagName("body")[0];return e.innerWidth||l.clientWidth||n.clientWidth}function l(e){for(e.helpColsTotal=0,e.i=0;e.i<e.helpLists.length;e.i+=1)-1!==e.helpLists[e.i].className.indexOf("help-list")&&(e.helpColsTotal+=1),e.helpListsHeights[e.i]=e.helpLists[e.i].offsetHeight;e.maxHeight=Math.max.apply(Math,e.helpListsHeights),t()<=1180&&t()>630&&e.helpColsTotal>2&&(e.helpColsTotal=2,e.maxHeight=e.maxHeight*e.helpColsTotal),t()<=630&&(e.maxHeight=e.maxHeight*e.helpColsTotal,e.helpColsTotal=1),e.helpListWrap.style.offsetWidth=e.helpList.offsetWidth*e.helpColsTotal+"px",e.helpListWrap.style.height=e.maxHeight+"px",e.helpModal.style.width=e.helpList.offsetWidth*e.helpColsTotal+60+"px",e.helpModal.style.height=e.maxHeight+100+"px"}function n(e){return(e=e||window.event).keyCode||e.which}function i(){let t,i=document.getElementById("helpUnderlay"),o=document.getElementById("helpModal"),s=document.getElementById("helpClose"),h=null,a={i:null,maxHeight:null,helpListWrap:document.getElementById("helpListWrap"),helpList:document.querySelector(".help-list"),helpLists:document.querySelectorAll(".help-list"),helpModal:o,helpColsTotal:null,helpListsHeights:[]};l(a),document.addEventListener("keydown",function(e){191===n(e)&&!0===e.shiftKey&&-1===(t=document.getElementById("helpUnderlay").className).indexOf("help-isVisible")&&(document.getElementById("helpUnderlay").className+=" help-isVisible"),i.style.height=function(){let e=document;return Math.max(e.body.scrollHeight,e.documentElement.scrollHeight,e.body.offsetHeight,e.documentElement.offsetHeight,e.body.clientHeight,e.documentElement.clientHeight)}()+"px"},!1),document.addEventListener("keyup",function(t){27===n(t)&&e(i)},!1),i.addEventListener("click",function(){e(i)},!1),o.addEventListener("click",function(e){e.stopPropagation()},!1),s.addEventListener("click",function(){e(i)},!1),window.onresize=function(){null!==h&&clearTimeout(h),h=setTimeout(function(){l(a)},100)}}function o(e){if(4===e.readyState&&(200===e.status||304===e.status)){!function(e,t){document.getElementById("helpUnderlay")||(document.getElementsByTagName("body")[0].innerHTML+=e,t())}(e.responseText,function(){i()})}}!function(){let e=function(){let e=!1;return window.XMLHttpRequest&&(e=new XMLHttpRequest),e}();e?(e.onreadystatechange=function(){o(e)},e.open("POST","question.mark.html",!0),e.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),e.send(null)):document.getElementsByTagName("body")[0].innerHTML+="Error: Your browser does not support Ajax"}()}();
\ No newline at end of file
diff --git a/package.json b/package.json
index 618cc9f..f0d025e 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "question-mark-js",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "When the user pushes the `?` key, QuestionMark.js triggers a modal window that displays keyboard shortcuts for your app &mdash; similar to what happens on Twitter, Gmail, GitHub, etc. The modal is removed when the `ESC` key is pushed or the user clicks behind the modal.",
-  "main": "index.js",
+  "main": "dist/question.mark.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/src/css/question.mark.css b/src/css/question.mark.css
new file mode 100644
index 0000000..be75b05
--- /dev/null
+++ b/src/css/question.mark.css
@@ -0,0 +1,152 @@
+.help-underlay * {
+  box-sizing: border-box;
+}
+
+.help-underlay {
+  position: absolute;
+  background: #555;
+  background: rgba(0, 0, 0, 0.5);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s linear;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.help-modal {
+  position: absolute;
+  z-index: 99999;
+  left: 10%;
+  right: 10%;
+  top: 10%;
+  bottom: 20%;
+  margin: auto;
+  background: #fff;
+  color: #676767;
+  max-width: 1178px;
+  overflow: auto;
+  font-family: Arial, sans-serif;
+  border-radius: 3px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  transition: width 0.2s linear;
+}
+
+.help-modal-content {
+  padding: 0 20px;
+}
+
+.help-close {
+  position: absolute;
+  top: 0.4em;
+  right: 0.5em;
+  font-size: 1.8em;
+  cursor: pointer;
+  transition: color 0.2s linear;
+}
+
+.help-close:hover {
+  color: #000;
+}
+
+.help-modal h1 {
+  text-align: center;
+  margin: 0.5em;
+  font-size: 1.5em;
+  padding-bottom: 0.4em;
+  border-bottom: solid 2px #ccc;
+  font-weight: normal;
+}
+
+.help-modal h1 .help-key {
+  line-height: 1.5;
+  position: relative;
+  bottom: 4px;
+}
+
+.help-isVisible {
+  opacity: 1;
+  visibility: visible;
+  height: auto;
+  z-index: 8888;
+}
+
+.help-list-wrap {
+  transition: width 0.2s linear;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.help-list {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 10px 0;
+}
+
+.help-key-unit {
+  line-height: 1.8;
+  margin-right: 2em;
+  padding: 5px 0;
+}
+
+.help-key {
+  position: relative;
+  bottom: 2px;
+}
+
+.help-key span {
+  font-size: 14px;
+  color: #555;
+  display: inline-block;
+  padding: 0 8px;
+  text-align: center;
+  background-color: #eee;
+  background-repeat: repeat-x;
+  background-image: linear-gradient(#f5f5f5 0%, #eee 100%);
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
+}
+
+.help-key-def {
+  margin-left: 1em;
+}
+
+@media (max-width: 1460px) {
+  .help-modal {
+    left: 10%;
+    right: 10%;
+  }
+}
+
+@media (max-width: 1280px) {
+  .help-modal {
+    left: 25%;
+    right: 25%;
+  }
+
+  .help-list {
+    width: 50%;
+  }
+}
+
+@media (max-width: 1230px) {
+  .help-modal {
+    left: 30%;
+    right: 30%;
+  }
+  
+  .help-list {
+    width: 100%;
+  }
+}
+
+@media (max-width: 870px) {
+  .help-modal {
+    left: 10%;
+    right: 10%;
+  }
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..73b8cb9
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <meta name="monetization" content="$ilp.uphold.com/K2Xp98WeRgUn">
+  <title>QuestionMark.js</title>
+  <link rel="stylesheet" href="css/question.mark.css?v=2.0.0">
+
+  <style>
+  .demo {
+    word-wrap: break-word;
+    text-align: center;
+    font-family: Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .demo h1 {
+    color: #aaa;
+    font-size: 3em;
+  }
+
+  .demo p {
+    font-family: Arial, sans-serif;
+    max-width: 880px;
+    color: #555;
+    margin: 0 auto 30px auto;
+    font-size: 30px;
+  }
+
+  .demo p:last-child {
+    font-size: 20px;
+  }
+
+  .demo a {
+    color: firebrick;
+  }
+
+  .demo a:hover {
+    color: blue;
+  }
+
+  .demo code {
+    background: #888;
+    color: white;
+    padding: 3px 8px;
+  }
+  </style>
+
+</head>
+<body>
+
+  <div class="demo">
+    <h1>QuestionMark.js</h1>
+    <p>A tiny (&lt;1kb), cross-browser, modal window that displays shortcut keys for your app when the user presses the <code>?</code> key – similar to what happens on Twitter, Gmail, GitHub, etc.</a></p>
+
+    <p>This is an example page.</p>
+    <p>Press the <code>?</code> key to see the modal.</p>
+    <p>More info:<br><a href="https://github.com/impressivewebs/QuestionMark.js">GitHub repo</a> and <a href="https://www.impressivewebs.com/questionmark-js-shortcut-keys-displayed/">the blog post</a>.</p>
+    <p>Made by <a href="https://twitter.com/ImpressiveWebs">Louis Lazaris</a>. Use it for whatever you want.</p>
+  </div><!-- .demo -->
+
+  <script src="js/question.mark.min.js?v=2.0.0"></script>
+
+  <script>
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-1965499-1']);
+    _gaq.push(['_trackPageview']);
+
+    (function() {
+      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/js/question.mark.js b/src/js/question.mark.js
new file mode 100644
index 0000000..b5c93ad
--- /dev/null
+++ b/src/js/question.mark.js
@@ -0,0 +1,73 @@
+/*
+  QuestionMark.js 2.0 by Louis Lazaris
+  http://impressivewebs.github.io/QuestionMark.js/
+  Use it for whatever you want, no credit needed.
+  This script should work everywhere, including IE9+.
+*/
+
+(function (d) {
+  'use strict';
+
+  function removeModal(helpUnderlay) {
+    helpUnderlay.classList.remove('help-isVisible');
+  }
+
+  function doWhichKey(e) {
+    let charCode = e.keyCode;
+    // String.fromCharCode(charCode) gets the keycode if you want
+    return charCode;
+  }
+
+  // Primary function, called in checkServerResponse()
+  function doQuestionMark() {
+    let helpUnderlay = d.getElementById('helpUnderlay'),
+        helpModal = d.getElementById('helpModal'),
+        helpClose = d.getElementById('helpClose'),
+        classCol;
+
+    d.addEventListener('keydown', function (e) {
+      // 191 = '?' key
+      // '?' key toggles the modal
+      if (doWhichKey(e) === 191 && e.shiftKey === true) {
+        helpUnderlay.classList.add('help-isVisible');
+      }
+    }, false);
+
+    d.addEventListener('keyup', function (e) {
+      // 27 = ESC key
+      if (doWhichKey(e) === 27) {
+        removeModal(helpUnderlay);
+      }
+    }, false);
+
+    // Modal is removed if the background is clicked
+    helpUnderlay.addEventListener('click', function () {
+      removeModal(helpUnderlay);
+    }, false);
+
+    // this prevents click on modal from removing the modal
+    helpModal.addEventListener('click', function (e) {
+      e.stopPropagation();
+    }, false);
+
+    // the close button
+    helpClose.addEventListener('click', function () {
+      removeModal(helpUnderlay);
+    }, false);
+  }
+
+  function doFetch() {
+    fetch('question.mark.html')
+      .then((response) => {
+        return response.text();
+      })
+      .then((data) => {
+        d.body.innerHTML += data;
+        doQuestionMark();
+      });
+  }
+
+  // This fires the Fetch request and, in turn,
+  // the primary function for the modal.
+  doFetch();
+}(document));
\ No newline at end of file
diff --git a/src/question.mark.html b/src/question.mark.html
new file mode 100644
index 0000000..a2092d9
--- /dev/null
+++ b/src/question.mark.html
@@ -0,0 +1,199 @@
+<div id="helpUnderlay" class="help-underlay">
+  <div id="helpModal" class="help-modal">
+  <h1>Keyboard Shortcuts <kbd class="help-key"><span>?</span></kbd></h1>
+    <div id="helpClose" class="help-close">&times;</div><!-- .help-close -->
+    
+    <div id="helpModalContent" class="help-modal-content">
+      
+      <div id="helpListWrap" class="help-list-wrap">
+
+        <!--
+             Each <ul> below creates a column, as long as each has a class of
+             "help-list". Each <li> is a single key/definition pair.
+             The extra nested <span> is to help keep the definitions lined up
+             vertically, for aesthetic reasons.
+             If you hate the extra <span>, just remove it from each key/def pair.
+        -->
+
+        <ul class="help-list">
+
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>space</span></kbd>
+            <span class="help-key-def">Page down</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>p</span></kbd>
+            <span class="help-key-def">Print</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>r</span></kbd>
+            <span class="help-key-def">Reload</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>o</span></kbd>
+            <span class="help-key-def">Open file</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>s</span></kbd>
+            <span class="help-key-def">Save</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>→</span></kbd>
+            <span class="help-key-def">Next message</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>←</span></kbd>
+            <span class="help-key-def">Previous message</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>n</span></kbd>
+            <span class="help-key-def">New message</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>Alt-e</span></kbd>
+            <span class="help-key-def">Empty bin</span></li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>Ctrl-b</span></kbd>
+            <span class="help-key-def">Block user</span>
+          </li>
+
+        </ul><!-- .help-list -->
+
+        <ul class="help-list">
+
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>q</span></kbd>
+            <span class="help-key-def">Quit</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>Ctrl-l</span></kbd>
+            <span class="help-key-def">Launch</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>5</span></kbd>
+            <span class="help-key-def">Enable</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>u</span></kbd>
+            <span class="help-key-def">Underline</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>w</span></kbd>
+            <span class="help-key-def">Write to disk</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>f</span></kbd>
+            <span class="help-key-def">Flotsam</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>j</span></kbd>
+            <span class="help-key-def">Jetsam</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>Fn-s</span></kbd>
+            <span class="help-key-def">Swim to shore</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>m</span></kbd>
+            <span class="help-key-def">Make on the floor</span></li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>k</span></kbd>
+            <span class="help-key-def">Kill process</span>
+          </li>
+
+        </ul><!-- .help-list -->
+
+        <ul class="help-list">
+
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>g</span></kbd>
+            <span class="help-key-def">Global warming</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>a</span></kbd>
+            <span class="help-key-def">Ask question</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>y</span></kbd>
+            <span class="help-key-def">Yonkers</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>b</span></kbd>
+            <span class="help-key-def">Bold</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>d</span></kbd>
+            <span class="help-key-def">Drive fast</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>Enter</span></kbd>
+            <span class="help-key-def">Commit</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>TAB</span></kbd>
+            <span class="help-key-def">Insert 4 spaces</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>i</span></kbd>
+            <span class="help-key-def">Italics</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>x</span></kbd>
+            <span class="help-key-def">Delete</span></li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>Ctrl-z</span></kbd>
+            <span class="help-key-def">Undo</span>
+          </li>
+
+        </ul><!-- .help-list -->
+
+        <ul class="help-list">
+
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>&</span></kbd>
+            <span class="help-key-def">Merge</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>Alt-w</span></kbd>
+            <span class="help-key-def">Wipe</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>$</span></kbd>
+            <span class="help-key-def">Command</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>8</span></kbd>
+            <span class="help-key-def">Race track</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>^</span></kbd>
+            <span class="help-key-def">Jump</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>+</span></kbd>
+            <span class="help-key-def">Increase</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>-</span></kbd>
+            <span class="help-key-def">Decrease</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>*</span></kbd>
+            <span class="help-key-def">Go wild</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>[</span></kbd>
+            <span class="help-key-def">Nudge left</span></li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>]</span></kbd>
+            <span class="help-key-def">Nudge right</span>
+          </li>
+
+        </ul><!-- .help-list -->
+
+
+      </div><!-- .help-list-wrap -->
+
+    </div><!-- .help-modal-content -->
+  </div><!-- .help-modal -->
+</div><!-- .help-underlay -->
\ No newline at end of file
