update runal events doc

Author: Xavier Godart

content/runal.md

@@ -102,6 +102,12 @@ function setup(c) {}
 function draw(c) {}
 ```
 
+You can add extra methods `onKey` and `onMouse` to catch keyboard and mouse events:
+```js
+function onKey(c, e) {}
+function onMouse(c, e) {}
+````
+
 And you can then execute the file with:
 ```sh
 ./runal -f sketch.js
@@ -133,8 +139,17 @@ func main() {
 func setup(c *runal.Canvas) {}
 
 func draw(c *runal.Canvas) {}
+```
+
+You can add extra methods `onKey` and `onMouse` to catch keyboard and mouse events:
+```go
+func onKey(c *runal.Canvas, e runal.KeyEvent) {}
+func onMouse(c *runal.Canvas, e runal.MouseEvent) {}
+````
 
-func onKey(c *runal.Canvas, key string) {}
+And you can then execute the file with:
+```sh
+go run sketch.go
 ```
 
 ## Examples
@@ -222,6 +237,12 @@ Number of frames rendered since the beginning.
 #### c.isLooping
 Boolean indicating whether the render loop is active.
 
+#### c.mouseX <sub>since v0.5.0</sub>
+Returns the horizontal mouse position relative to the terminal window.
+
+#### c.mouseY <sub>since v0.5.0</sub>
+Returns the vertical mouse position relative to the terminal window.
+
 <hr class="separator"/>
 
 ### Canvas
@@ -474,13 +495,9 @@ The **console.log** file is deleted upon exit.
 
 ### Events
 
-#### onKey(c, event)
+#### onKey(c, event) <sub>since v0.5.0</sub>
 Listen to keyboard events.
 
-Event is an object with 2 attributes:
- - **key**: the string representation of the key pressed (`a`, `b`, `c`, `1`, `2`, `3` etc...)
- - **code**: the numerical value of the key pressed (97, 98, 99, 49, 50, 51 etc...)
-
 It's a root function, which means it should be placed at the same level as **setup()** and **draw()**.
 ```js
 // mySketch.js
@@ -494,7 +511,44 @@ onKey(c, event) {
   if (event.key == "space") {
     saveCanvasToPNG("canvas.png");
   }
+
+  // same using the key code.
+  if (event.code == 32) {
+    saveCanvasToPNG("canvas.png");
+  }
+}
+```
+
+Event is an object with the following attributes:
+ - **key**: the string representation of the key pressed (`a`, `b`, `c`, `1`, `2`, `3` etc...)
+ - **code**: the numerical value of the key pressed (97, 98, 99, 49, 50, 51 etc...)
+
+Key string representations for keys other than alphanumerical works as well. You can use the following strings to handle all your keyboard keys:
+`enter`, `tab`, `backspace`, `esc`, `space`, `up`, `down`, `left`, `right`, `begin`, `find`, `insert`, `delete`, `select`, `pgup`, `pgdown`, `home`, `end`, `kpenter`, `kpequal`, `kpmul`, `kpplus`, `kpcomma`, `kpminus`, `kpperiod`, `kpdiv`, `kp0`, `kp1`, `kp2`, `kp3`, `kp4`, `kp5`, `kp6`, `kp7`, `kp8`, `kp9`.
+
+You can also use `ctrl+a`, `alt+b` etc...
+
+#### onMouse(c, event) <sub>since v0.5.0</sub>
+Listen to mouse click events.
+
+It's a root function, which means it should be placed at the same level as **setup()** and **draw()**.
+```js
+// mySketch.js
+setup(c) { ... }
+
+draw(c) { ... }
+
+onMouse(c, event) {
+  // draw a circle at mouse position when
+  // the mouse left button is clicked.
+  if (event.button == "left") {
+    c.circle(event.x, event.y, 5);
+  }
 }
 ```
+Event is an object with the following attributes:
+ - **x**: the horizontal mouse position relative to the terminal window
+ - **y**: the vertical mouse position relative to the terminal window
+ - **button**: the mouse button that has been clicked. Possible values: **left**, **middle**, **right**
 
 </section>

sass/main.scss

@@ -86,7 +86,7 @@ h4 {
 article code {
     border: 1px solid #000;
     border-radius: 4px;
-    padding: 1px 4px;
+    padding: 0px 4px;
 }
 
 table td,
@@ -341,8 +341,10 @@ article {
         h4 sub {
             color: #333333;
             margin-left: 12px;
-            vertical-align: baseline;
+            vertical-align: text-bottom;
+            font-size: 10px;
             font-style: italic;
+            font-weight: lighter;
         }
 
         h4 + p,