Update color paletter and change header buttons

Author: baransu

_sass/libs/_vars.scss

@@ -47,43 +47,43 @@
 		border2-bg:			rgba(144,144,144,0.5),
 
 		accent1: (
-			bg:				#21b2a6,
+			bg:				#1F79B7,
 			fg-bold:		#ffffff,
-			fg:				mix(#21b2a6, #ffffff, 25%),
-			fg-light:		mix(#21b2a6, #ffffff, 40%),
+			fg:				mix(#1F79B7, #ffffff, 25%),
+			fg-light:		mix(#1F79B7, #ffffff, 40%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
 			border2-bg:		rgba(255,255,255,0.2)
 		),
 
 		accent2: (
-			bg:				#00ffcc,
+			bg:				#c7deed,
 			fg-bold:		#ffffff,
-			fg:				mix(#00ffcc, #ffffff, 25%),
-			fg-light:		mix(#00ffcc, #ffffff, 40%),
+			fg:				mix(#c7deed, #ffffff, 25%),
+			fg-light:		mix(#c7deed, #ffffff, 40%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
 			border2-bg:		rgba(255,255,255,0.2)
 		),
 
 		accent3: (
-			bg:				#00f0ff,
+			bg:				#c7deed,
 			fg-bold:		#ffffff,
-			fg:				mix(#00f0ff, #ffffff, 25%),
-			fg-light:		mix(#00f0ff, #ffffff, 40%),
+			fg:				mix(#c7deed, #ffffff, 25%),
+			fg-light:		mix(#c7deed, #ffffff, 40%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
 			border2-bg:		rgba(255,255,255,0.2)
 		),
 
 		accent4: (
-			bg:				#76ddff,
+			bg:				#c7deed,
 			fg-bold:		#ffffff,
-			fg:				mix(#76ddff, #ffffff, 25%),
-			fg-light:		mix(#76ddff, #ffffff, 40%),
+			fg:				mix(#c7deed, #ffffff, 25%),
+			fg-light:		mix(#c7deed, #ffffff, 40%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
@@ -102,10 +102,10 @@
 		),
 
 		accent6: (
-			bg:				#ed4933,
+			bg:				#bfbfbf,
 			fg-bold:		#ffffff,
-			fg:				mix(#ed4933, #ffffff, 25%),
-			fg-light:		mix(#ed4933, #ffffff, 40%),
+			fg:				mix(#bfbfbf, #ffffff, 25%),
+			fg-light:		mix(#bfbfbf, #ffffff, 40%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
@@ -122,4 +122,4 @@
 			border2:		#bfbfbf,
 			border2-bg:		rgba(0,0,0,0.1)
 		)
-	);
+	);

getting_started.html

@@ -0,0 +1,107 @@
+---
+layout: page
+title: Getting started
+subtitle: How to build and use the erlangpl script
+---
+
+### Download prebuilt script
+
+The easiest way to get started is to download a prebuilt `erlangpl` script
+([download link](https://erlang.pl/erlangpl.gz)).
+
+### Build it manually
+
+#### Prerequisites
+
+For building UI you need to have following dependencies installed:
+* [node](https://nodejs.org/en/)
+* [yarn](https://yarnpkg.com/lang/en/)
+* [elm-lang](https://guide.elm-lang.org/install.html)
+
+Be aware that building UI can take some time. It takes around 1 minute on stock MacBook 2015 plus dependencies
+download for the first time. Second time dependencies will be cached.
+
+```
+$ git clone --recursive git@github.com:erlanglab/erlangpl.git
+$ cd erlangpl
+$ make rebar
+$ make build-ui
+$ make
+$ ./bootstrap
+```
+
+## Running erlangpl script
+
+The erlangpl shell script is a self-contained escript, which can be started from a command line as long as you have Erlang/OTP installed.
+
+```
+$ ./erlangpl -h
+
+Usage: erlangpl [-n <node>] [-c <cookie>] [-p <plugin>] [-h]
+                [-v <verbose>] [-P <port>] [-V] [-s <sname>] [-l <name>]
+
+  -n, --node     Monitored node name
+  -c, --cookie   Overwrite ~/.erlang.cookie
+  -p, --plugin   Path to plugins
+  -h, --help     Show the program options
+  -v, --verbose  Verbosity level (-v, -vv, -vvv)
+  -P, --port     HTTP and WS port number
+  -V, --version  Show version information
+  -s, --sname    Start with a shortname
+  -l, --name     Start with a longname, default erlangpl@127.0.0.1
+
+$ ./erlangpl -n testnode@127.0.0.1 -c YOURCOOKIE
+```
+
+Once started, try visiting http://localhost:8000/
+
+## Examples
+
+### Connecting to an Elixir iex session
+
+```
+$ iex --name foo@127.0.0.1 -S mix
+```
+
+```
+$ ./erlangpl --node foo@127.0.0.1
+```
+
+### Mnesia cluster
+You can generate messages between nodes by querying a distributed database Mnesia.
+
+To setup a Mnesia cluster, start several Erlang nodes with unique names e.g. `a@`, `b@`, `c@`, etc. and start the database on all of them:
+```
+erl -name a@127.0.0.1
+(a@127.0.0.1)1> mnesia:start().
+```
+Then create a `test_table` and configure it to be replicated on all nodes:
+```
+(a@127.0.0.1)2> mnesia:change_config(extra_db_nodes, ['b@127.0.0.1']).
+(a@127.0.0.1)3> mnesia:change_config(extra_db_nodes, ['c@127.0.0.1']).
+(a@127.0.0.1)4> mnesia:change_config(extra_db_nodes, ['d@127.0.0.1']).
+(a@127.0.0.1)5> mnesia:create_table(test_table, []).
+(a@127.0.0.1)6> [mnesia:add_table_copy(test_table, Node, ram_copies) || Node <- nodes()].
+```
+
+Here are some behaviours you can test:
+```
+[begin mnesia:transaction(fun() -> mnesia:write({test_table, Key, "value"}) end), timer:sleep(10) end || Key <- lists:seq(1,2000)].
+[begin mnesia:sync_dirty(fun() -> mnesia:write({test_table, Key, "value"}) end), timer:sleep(10) end || Key <- lists:seq(1,2000)].
+[begin mnesia:dirty_write({test_table, Key, "value"}), timer:sleep(10) end || Key <- lists:seq(1,2000)].
+```
+
+Videos from those experiments were posted on [YouTube](https://www.youtube.com/channel/UCGkcbu799cC1rtMaQtAajpg)
+
+
+## Running development release
+
+You can also start the tool as a regular Erlang release and connect to its console to debug the tool itself.
+
+```
+$ make
+$ rebar -f generate
+$ ./rel/erlangpl/bin/erlangpl console node=testnode@127.0.0.1 cookie=YOURCOOKIE
+```
+
+Have fun!

getting_started.md

@@ -7,7 +7,9 @@
 							<h2>{{ site.title }}</h2>
 							<p>{{ site.description | markdownify }}</p>
 							<ul class="actions">
-                  <li><a href="https://erlang.pl/erlangpl.gz" class="button special icon fa-download">Download</a></li>
+                <li><a href="https://github.com/erlanglab/erlangpl" class="button special icon fa-github" style="background-color: #1F79B7;">Our GitHub</a></li>
+                <li><a href="/getting_started.html" class="button special icon fa-download" style="background-color: #8FBF47;">Getting Started</a></li>
+                <li><a href="https://erlang.pl/erlangpl.gz" class="button special icon fa-download" style="background-color: #227A50;">Download</a></li>
 							</ul>
 						</div>
 						<a href="#one" class="more scrolly">Learn More</a>
@@ -17,9 +19,9 @@ <h2>{{ site.title }}</h2>
 					<section id="one" class="wrapper style1 special">
 						<div class="inner">
 							<header class="major">
-								  <h2>What is Erlang Performance Lab ?</h2>
-								  <p>It is a tool for developers working with the Erlang VM (BEAM).<br />
-                      It helps with observing a system and its performance analysis.</p>
+								  <h2>What is Erlang Performance Lab?</h2>
+								  <p>Tool for developers working with the Erlang VM (BEAM).<br />
+                    It helps with observing a system and its performance analysis.</p>
 							</header>
 							<ul class="icons major">
 								<li><a href="https://github.com/erlanglab/erlangpl" class="icon fa-github major style1"><span class="label">GitHub</span></a></li>
@@ -94,7 +96,7 @@ <h2>Interested in erlang.pl?</h2>
                    Don't forget to send us feedback!</p>
 							</header>
 							<ul class="actions vertical">
-								  <li><a href="https://erlang.pl/erlangpl.gz" class="button fit special">Download</a></li>
+								<li><a href="https://erlang.pl/erlangpl.gz" class="button fit special icon fa-download" style="background-color: #8FBF47;">Download</a></li>
 								<li><a href="mailto:info@erlang.pl" class="button fit">Feedback</a></li>
 							</ul>
 						</div>