Improve readability of docs site

ember-cli-build.js

@@ -18,7 +18,7 @@ module.exports = function(defaults) {
     }
   });
 
-  app.import('node_modules/highlightjs/styles/monokai-sublime.css');
+  app.import('node_modules/highlightjs/styles/github-gist.css');
 
   /*
     This build file specifies the options for the dummy test app of this

package.json

@@ -64,7 +64,7 @@
     "eslint-plugin-node": "^11.0.0",
     "highlightjs": "^9.10.0",
     "loader.js": "^4.7.0",
-    "markdown-code-highlighting": "^0.2.0",
+    "markdown-code-highlighting": "^0.2.1",
     "marked": "^1.1.0",
     "npm-run-all": "^4.1.5",
     "qunit-dom": "^1.1.0",

tests/dummy/app/styles/dummy.css

@@ -1,8 +1,11 @@
+html {
+  font-size: 120%;
+}
+
 body, input {
   background-color: #FFF;
   color: #00585F;
-  font-size: 22px;
-  line-height: 40px;
+  font-family: 'Open Sans', sans-serif;
 }
 
 html, body, body > .ember-view {
@@ -25,6 +28,12 @@ input {
   overflow: hidden;
 }
 
+pre {
+  background-color: #eee;
+  padding: 1em 1.4em;
+  overflow-x: auto;
+}
+
 .menu {
   display: -webkit-flex;
   display: flex;
@@ -34,6 +43,8 @@ input {
   border-right-width: thick;
   padding: 30px 30px 0 50px;
   text-align: right;
+  font-size: 120%;
+  line-height: 150%;
 }
 
 .menu a {
@@ -47,6 +58,7 @@ input {
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0 30px;
+  max-width: 38em;
 }
 
 .header {
@@ -96,7 +108,8 @@ input {
   display: inline-block;
   overflow: hidden;
   text-align: center;
-  width: 33%;
+  width: 32.5%;
+  font-size: 90%;
 }
 
 .counter-container .input-field {
@@ -125,14 +138,15 @@ input {
     align-content: space-around;
     -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
-    padding: 30px;
+    padding: 30px 10px;
     border-right-width: 0;
     border-bottom-width: thick;
     background: #fff;
+    font-size: 1rem;
   }
 
   .menu a {
-    min-width: 33%;
     text-align: center;
+    padding: 0 0.5em;
   }
 }

tests/dummy/app/templates/index.hbs

@@ -1,7 +1,9 @@
 {{format-markdown "
 ## Installation
 
-`ember install ember-keyboard`
+```sh
+ember install ember-keyboard
+```
 
 ## Overview
 

tests/dummy/app/templates/mixins.hbs

@@ -7,25 +7,33 @@ To reduce boilerplate, `ember-keyboard` includes several mixins with common patt
 
 ### EKOnInsertMixin
 
-`import { EKOnInsertMixin } from 'ember-keyboard';`
+```js
+import { EKOnInsertMixin } from 'ember-keyboard';
+```
 
 This mixin will activate the component on `didInsertElement`, and as per normal, it will deactivate on `willDestroyElement`.
 
 ### EKOnInitMixin
 
-`import { EKOnInitMixin } from 'ember-keyboard';`
+```js
+import { EKOnInitMixin } from 'ember-keyboard';
+```
 
 This mixin will activate the controller on `init`.
 
 ### EKOnFocusMixin
 
-`import { EKOnFocusMixin } from 'ember-keyboard';`
+```js
+import { EKOnFocusMixin } from 'ember-keyboard';
+```
 
 This mixin will activate the component whenever it receives focus and deactivate it when it loses focus.
 
 ### EKFirstResponderOnFocusMixin
 
-`import { EKFirstResponderOnFocusMixin } from 'ember-keyboard';`
+```js
+import { EKFirstResponderOnFocusMixin } from 'ember-keyboard';
+```
 
 This mixin grants the component first responder status while it is focused. When it loses focus, it resigns its status.
 

tests/dummy/app/templates/usage.hbs

@@ -5,7 +5,7 @@
 
 To declaratively attach an action to a keyboard event while a particular template is rendered, use the `keyboard-press` component. In this example, when a user presses the '/' key, the onSlash action is triggered.
 
-```hbs
+```htmlbars
 {{keyboard-press
   key='Slash'
   onPress=(action 'onSlash')
@@ -16,7 +16,7 @@ Note that the listener is active for the lifecycle of the template. When the tem
 
 Another option (supported in Ember 3.12+) for templates is the `on-keyboard` element modifier. This allows a keydown event to trigger an action. In the following example, we trigger an action when the input field is focused and the user presses enter:
 
-```hbs
+```htmlbars
 <input type='text'
   oninput={{action (mut this.textFieldValue) value='target.value'}}
   {{on-keyboard 'Enter' (action 'onEnterPressedInInput')}}
@@ -25,7 +25,7 @@ Another option (supported in Ember 3.12+) for templates is the `on-keyboard` ele
 
 If you want a shortcut for triggering a click on an element when a key is pressed, look no further than the `keyboard-shortcut` element modifier  (also Ember 3.12+). This allows a keyboard event to simulate clicking the element the modifier is attached to. In the following example, we trigger a click on the button when the B key is pressed together with the Alt key:
 
-```hbs
+```htmlbars
 <button {{action 'onButtonClick'}} {{keyboard-shortcut 'alt+KeyB'}}>
   Press me or press 'Alt-B'
 </button>
@@ -47,14 +47,14 @@ export default Ember.Component.extend(EKMixin, {
 Now this component observes several new properties that'll help it determine when and if it should respond to key events. These properties are outlined in greater detail below, but to simply get things started, you'll need to set `keyboardActivated` to true:
 
 ```js
-  activateKeyboard: Ember.on('init', function() {
-    this.set('keyboardActivated', true);
-  })
+activateKeyboard: Ember.on('init', function() {
+  this.set('keyboardActivated', true);
+})
 ```
 
 Or simply activate the component from your template:
 
-```hbs
+```htmlbars
 {{my-component keyboardActivated=true}}
 ```
 
@@ -190,7 +190,7 @@ To prevent `ember-keyboard` from responding to key strokes while an input/textar
 
 This applies to `input` and `textarea` helpers:
 
-```hbs
+```htmlbars
 {{input}}
 {{textarea}}
 ```

yarn.lock

@@ -8731,7 +8731,7 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-markdown-code-highlighting@^0.2.0:
+markdown-code-highlighting@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/markdown-code-highlighting/-/markdown-code-highlighting-0.2.1.tgz#3a239c581de5a6cfbcfc531cb3ddf1059f47e209"
   integrity sha512-Z32VBPAdgd9xOBWoqn0BuVeW1sQF50LSFPGsOYwtpxwSrK2aO/RJBvHToB4CMsUt5VUIm45uhfuvQ3gGXVHFVw==