docs: make it pretty

Add custom Jekyll theme, logo, webfont and .gitignore

FIXME: the markdown files have some H1 headers which need to be replaced
with H2

1 files changed, 347 insertions, 0 deletions

diff --git a/docs/style.css b/docs/style.css
new file mode 100755
index 0000000000..8a2ae719da
--- /dev/null
+++ b/docs/style.css
@@ -0,0 +1,347 @@
+@font-face {
+    font-family: 'Heebo';
+    src: url('fonts/heebo-regular.woff');
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: 'Heebo';
+    src: url('fonts/heebo-bold.woff');
+    font-weight: 600;
+}
+
+/* Typography */
+* {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+html, body {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  font-family: "Heebo", sans-serif;
+  font-weight: 400;
+  line-height: 1.6;
+}
+body {
+  color: #241f31;
+  background-color: #f6f5f4;
+}
+h1, h2, h3, h4, h5, h6 {
+  margin: 1rem 0 10px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+h1 {
+  text-align: center;
+  font-size: 30px;
+  font-weight: 100;
+  font-style: normal;
+  margin-bottom: 2rem;
+}
+@media screen and (min-width: 650px) {
+  h1 {
+    margin-left: 10%;
+    margin-right: 10%;
+    font-size: 38px;
+  }
+}
+h2 {
+  margin-top: 3rem;
+  font-size: 1.2rem;
+}
+a {
+  font-weight: 600;
+  text-decoration: none;
+  color: #26b763;
+  cursor: pointer;
+}
+a:hover {
+  text-decoration: underline;
+}
+b {
+  font-weight: 600;
+}
+small {
+  color: #777;
+}
+hr {
+  margin: 3rem auto 4rem;
+  width: 40%;
+  opacity: 40%;
+}
+
+/* Layout */
+.container {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 720px;
+}
+
+/* Singletons */
+.page-logo {
+  display: block;
+  padding: 5rem 0 3rem;
+}
+.page-logo > img {
+  display: block;
+  margin: 0 auto;
+}
+
+.brand-white {
+  background-color: #fff;
+}
+
+.brand-green {
+  background-color: #30D475;
+}
+
+.brand-black {
+  background-color: #201A26;
+  color: white;
+}
+
+.page-link::after {
+  content: " ➜";
+}
+
+
+/* Footer */
+footer {
+  text-align: center;
+  padding: 3em 0 3em;
+  font-size: 1em;
+  margin-top: 4rem;
+}
+
+/* Github Code Highlighting */
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight .cm {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .cp {
+  color: #999999;
+  font-weight: bold;
+}
+.highlight .c1 {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .cs {
+  color: #999999;
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .err {
+  color: #a61717;
+  background-color: #e3d2d2;
+}
+.highlight .gd {
+  color: #000000;
+  background-color: #ffdddd;
+}
+.highlight .ge {
+  color: #000000;
+  font-style: italic;
+}
+.highlight .gr {
+  color: #aa0000;
+}
+.highlight .gh {
+  color: #999999;
+}
+.highlight .gi {
+  color: #000000;
+  background-color: #ddffdd;
+}
+.highlight .go {
+  color: #888888;
+}
+.highlight .gp {
+  color: #555555;
+}
+.highlight .gs {
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #aaaaaa;
+}
+.highlight .gt {
+  color: #aa0000;
+}
+.highlight .kc {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kd {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kn {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kp {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kr {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kt {
+  color: #445588;
+  font-weight: bold;
+}
+.highlight .k, .highlight .kv {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .mf {
+  color: #009999;
+}
+.highlight .mh {
+  color: #009999;
+}
+.highlight .il {
+  color: #009999;
+}
+.highlight .mi {
+  color: #009999;
+}
+.highlight .mo {
+  color: #009999;
+}
+.highlight .m, .highlight .mb, .highlight .mx {
+  color: #009999;
+}
+.highlight .sb {
+  color: #d14;
+}
+.highlight .sc {
+  color: #d14;
+}
+.highlight .sd {
+  color: #d14;
+}
+.highlight .s2 {
+  color: #d14;
+}
+.highlight .se {
+  color: #d14;
+}
+.highlight .sh {
+  color: #d14;
+}
+.highlight .si {
+  color: #d14;
+}
+.highlight .sx {
+  color: #d14;
+}
+.highlight .sr {
+  color: #009926;
+}
+.highlight .s1 {
+  color: #d14;
+}
+.highlight .ss {
+  color: #990073;
+}
+.highlight .s, .highlight .sa, .highlight .dl {
+  color: #d14;
+}
+.highlight .na {
+  color: #008080;
+}
+.highlight .bp {
+  color: #999999;
+}
+.highlight .nb {
+  color: #0086B3;
+}
+.highlight .nc {
+  color: #445588;
+  font-weight: bold;
+}
+.highlight .no {
+  color: #008080;
+}
+.highlight .nd {
+  color: #3c5d5d;
+  font-weight: bold;
+}
+.highlight .ni {
+  color: #800080;
+}
+.highlight .ne {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nf, .highlight .fm {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nl {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nn {
+  color: #555555;
+}
+.highlight .nt {
+  color: #000080;
+}
+.highlight .vc {
+  color: #008080;
+}
+.highlight .vg {
+  color: #008080;
+}
+.highlight .vi {
+  color: #008080;
+}
+.highlight .nv, .highlight .vm {
+  color: #008080;
+}
+.highlight .ow {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .o {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .w {
+  color: #bbbbbb;
+}
+.highlight {
+  background-color: #f8f8f8;
+}
+
+
+/* Code Blocks */
+.highlighter-rouge {
+  padding: 2px 1rem;
+  border-radius: 5px;
+  background-color: white;
+
+  overflow: auto;
+}
+.highlighter-rouge * {
+  background-color: white;
+}
+
+/* Inline Code */
+code.highlighter-rouge {
+  padding: 2px 6px;
+  background-color: rgba(0,0,0, 0.07);
+}