# HG changeset patch
# Node ID 6931c10e5f9e
# Parent  6040f73eedfc
diff --git a/Dockerfile b/Dockerfile
--- a/Dockerfile
+++ b/Dockerfile
@@ -22,7 +22,7 @@
 FROM    docker.io/debian:bullseye as hugo-build
 RUN     set -ex && \
         apt-get update && \
-        apt-get install -y hugo && \
+        apt-get install -y golang hugo && \
         apt-get clean && \
         rm -rf /var/lib/apt/lists
 
diff --git a/hugo/.hugo_build.lock b/hugo/.hugo_build.lock
new file mode 100644
diff --git a/hugo/config.toml b/hugo/config.toml
--- a/hugo/config.toml
+++ b/hugo/config.toml
@@ -1,9 +1,13 @@
 baseURL = "https://pidgin.im/"
 languageCode = "en-us"
 title = "Pidgin, the universal chat client"
-theme = "learn"
 dataDir = "data"
 
+[[module.imports]]
+    # the following is the theme that we use, it gets automatically placed
+    # in the themes directory
+    path = "github.com/matcornic/hugo-theme-learn"
+
 [params]
 currentVersion = "2.14.8"
 
diff --git a/hugo/go.mod b/hugo/go.mod
new file mode 100644
--- /dev/null
+++ b/hugo/go.mod
@@ -0,0 +1,5 @@
+module keep.imfreedom.org/pidgin/nest
+
+go 1.18
+
+require github.com/matcornic/hugo-theme-learn v0.0.0-20190128010848-7f5e927f0c5c // indirect
diff --git a/hugo/go.sum b/hugo/go.sum
new file mode 100644
--- /dev/null
+++ b/hugo/go.sum
@@ -0,0 +1,4 @@
+github.com/matcornic/hugo-theme-learn v0.0.0-20190128010848-7f5e927f0c5c h1:MbSvYqjUn2roCsqGN0p4qjG2lFoO8WCIuDa1qbajSEk=
+github.com/matcornic/hugo-theme-learn v0.0.0-20190128010848-7f5e927f0c5c/go.mod h1:YoToDcvQxmAFhpEuapKUysBDEBckqDEssqTrmeZ2+uY=
+github.com/matcornic/hugo-theme-learn v0.0.0-20211028190410-e817f53d690d h1:p7ktiW/GnHccjB9oO5YGY7us5v/oHmkyF0C7EDZFM3s=
+github.com/matcornic/hugo-theme-learn v0.0.0-20211028190410-e817f53d690d/go.mod h1:YoToDcvQxmAFhpEuapKUysBDEBckqDEssqTrmeZ2+uY=
diff --git a/hugo/layouts/404.html b/hugo/layouts/404.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/404.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="{{ .Page.Language | default "en" }}" class="js csstransforms3d">
+<head>
+  <meta charset="utf-8">
+  {{ partial "meta.html" . }}
+  {{ partial "favicon.html" . }}
+  
+  {{ .Scratch.Add "title" "" }}
+  {{ if eq .Site.Data.titles .Title }}
+    {{ .Scratch.Set "title" (index .Site.Data.titles .Title).title }}
+  {{ else }}
+    {{ .Scratch.Set "title" .Title }}
+  {{ end }}
+
+  <title>{{ .Scratch.Get "title" }}</title>
+
+  {{ $assetBusting := cond (hugo.IsProduction) "" (print "?" now.Unix) }}
+  <link href="{{ "css/nucleus.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/fontawesome-all.min.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/hybrid.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/perfect-scrollbar.min.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/horsey.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/theme.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/hugo-theme.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  {{ with .Site.Params.themeVariant }}
+    <link href="{{ (printf "css/theme-%s.css" .) | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  {{ end }}
+
+  <style type="text/css">
+    :root #header+#content>#left>#rlblock_left {
+      display: none !important;
+    }
+  
+    p, li, ul { text-align: center
+    }
+  
+    ul {
+      list-style-type: none;
+    }
+  </style>
+
+  {{ partial "custom-header.html" . }}
+</head>
+<body class="" data-url="/">
+  <section id="body" style="margin-left:0px;">
+    <div id="overlay"></div>
+
+    <div id="chapter">
+      <div id="body-inner">
+        <h1>
+          {{ T "title-404" }}
+        </h1>
+        
+        <p></p>
+        
+        <p>
+          {{ T "message-404" }}
+        </p>
+        
+        <p></p>
+        
+        <p>
+          <a href='{{ "" | relLangURL }}'>{{ T "Go-to-homepage" }}</a>
+        </p>
+        
+        <p>
+          <img src='{{ "/images/gopher-404.jpg" | relURL }}' style="width:50%" alt="Page not found!" />
+        </p>
+      </div>
+    </div>
+  </section>
+</body>
+</html>
diff --git a/hugo/layouts/_default/list.html b/hugo/layouts/_default/list.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/_default/list.html
@@ -0,0 +1,7 @@
+{{ partial "header.html" . }}
+
+{{ .Content }}
+
+{{ partial "footline.html" . }}
+
+{{ partial "footer.html" . }}
\ No newline at end of file
diff --git a/hugo/layouts/_default/single.html b/hugo/layouts/_default/single.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/_default/single.html
@@ -0,0 +1,7 @@
+{{ partial "header.html" . }}
+
+{{ .Content }}
+
+{{ partial "footline.html" . }}
+
+{{ partial "footer.html" . }}
diff --git a/hugo/layouts/index.html b/hugo/layouts/index.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/index.html
@@ -0,0 +1,38 @@
+{{ partial "header.html" . }}
+<span id="sidebar-toggle-span">
+	<a href="#" id="sidebar-toggle" data-sidebar-toggle="">
+		<i class="fas fa-bars"></i> navigation
+	</a>
+</span>
+
+{{ if .Site.Home.Content }} 
+	{{ .Site.Home.Content }}	
+{{ else }}           
+	{{ if eq .Site.Language.Lang "fr" }}
+		<h1>Personaliser la page d'accueil</h1>
+
+		<p>
+		  Le site fonctionne. Ne pas oublier de personaliser cette page avec votre propre contenu. 3 manières de faire :
+		</p>
+
+		<ul>
+			<li><b>1. </b> Créer un fichier _index.md dans le dossier <b>content</b> et le remplir de Markdown</li>
+			<li><b>2. </b> Créer un fichier index.html dans le dossier <b>static</b> et le remplir de code HTML</li>
+		  <li><b>3. </b> Configurer le serveur http pour rediriger automatiquement la homepage vers la page de votre choix dans le site</li>
+		</ul>
+	{{ else }}
+		<h1>Customize your own home page</h1>
+		
+		<p>
+		  The site is working. Don't forget to customize this homepage with your own. You typically have 3 choices :
+		</p>
+
+		<ul>
+			<li><b>1. </b> Create an _index.md document in <b>content</b> folder and fill it with Markdown content</li>
+			<li><b>2. </b> Create an <b>index.html</b> file in the <b>static</b> folder and fill the file with HTML content</li>
+		  <li><b>3. </b> Configure your server to automatically redirect home page to one your documentation page</li>
+		</ul>
+	{{ end }}
+{{ end }}  
+{{ partial "footline.html" . }}
+{{ partial "footer.html" . }}
diff --git a/hugo/layouts/partials/favicon.html b/hugo/layouts/partials/favicon.html
--- a/hugo/layouts/partials/favicon.html
+++ b/hugo/layouts/partials/favicon.html
@@ -1,3 +1,1 @@
-<link rel="icon" type="image/png" href="/images/pidgin-circle-16.png" sizes="16x16">  
-<link rel="icon" type="image/png" href="/images/pidgin-circle-32.png" sizes="32x32">  
-<link rel="icon" type="image/png" href="/images/pidgin-circle-96.png" sizes="96x96"> 
\ No newline at end of file
+<link rel="icon" href="{{"images/favicon.png" | relURL}}" type="image/png">
diff --git a/hugo/layouts/partials/footer.html b/hugo/layouts/partials/footer.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/partials/footer.html
@@ -0,0 +1,73 @@
+                {{/* TODO: Remove disgusting conditional tag spanning file */}}
+                {{ if .Params.chapter }}
+                    </div> <!-- end chapter-->
+                {{ end }}
+            </div>
+        {{ partial "custom-comments.html" . }}
+    </div>
+
+    <div id="navigation">
+        <!-- Next prev page -->
+        {{ $currentNode := . }}
+
+        {{ template "menu-nextprev" dict "menu" .Site.Home "currentnode" $currentNode }}
+
+        {{ define "menu-nextprev" }}
+            {{ $currentNode := .currentnode }}
+            {{ if ne .menu.Params.hidden true }}
+                {{ if hasPrefix $currentNode.RelPermalink .menu.RelPermalink }}
+                    {{ $currentNode.Scratch.Set "NextPageOK" "OK" }}
+                    {{ $currentNode.Scratch.Set "prevPage" ($currentNode.Scratch.Get "prevPageTmp") }}
+                {{ else }}
+                    {{ if eq ($currentNode.Scratch.Get "NextPageOK") "OK" }}
+                        {{ $currentNode.Scratch.Set "NextPageOK" nil }}
+                        {{ $currentNode.Scratch.Set "nextPage" .menu }}
+                    {{ end }}
+                {{ end }}
+                {{ $currentNode.Scratch.Set "prevPageTmp" .menu }}
+
+                {{ $currentNode.Scratch.Set "pages" .menu.Pages }}
+                {{ if .menu.IsHome }}
+                    {{ $currentNode.Scratch.Set "pages" .menu.Sections }}
+                {{ else if .menu.Sections }}
+                    {{ $currentNode.Scratch.Set "pages" (.menu.Pages | union .menu.Sections) }}
+                {{ end }}
+                {{ $pages := ($currentNode.Scratch.Get "pages") }}
+
+                {{ range $pages.ByWeight  }}
+                    {{ template "menu-nextprev" dict "menu" . "currentnode" $currentNode }}
+                {{ end }}
+            {{ end }}
+        {{ end }}
+
+
+        {{ $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
+        {{ if $showPrevNext }}
+            {{ with ($.Scratch.Get "prevPage") }}
+                <a class="nav nav-prev" href="{{ .RelPermalink }}" title="{{ .Title }}"> <i class="fa fa-chevron-left"></i></a>
+            {{ end }}
+            {{ with ($.Scratch.Get "nextPage") }}
+                <a class="nav nav-next" href="{{ .RelPermalink }}" title="{{ .Title }}" style="margin-right: 0px;"><i class="fa fa-chevron-right"></i></a>
+            {{ end }}
+        {{ end }}
+    </div>
+
+    </section>
+
+    <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
+      <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
+    </div>
+    <script src="{{ "js/clipboard.min.js" | relURL }}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+    <script src="{{ "js/perfect-scrollbar.min.js" | relURL }}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+    <script src="{{ "js/perfect-scrollbar.jquery.min.js" | relURL }}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+    <script src="{{ "js/jquery.sticky.js" | relURL }}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+    <script src="{{ "js/html5shiv-printshiv.min.js" | relURL }}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+    <script src="{{ "js/highlight.pack.js" | relURL }}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+    <script src="{{ "js/modernizr.custom.71422.js" | relURL }}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+    <script src="{{ "js/learn.js" | relURL }}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+    <script src="{{ "js/hugo-learn.js" | relURL }}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
+
+    {{ partial "custom-footer.html" . }}
+  </body>
+</html>
diff --git a/hugo/layouts/partials/header.html b/hugo/layouts/partials/header.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/partials/header.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="{{ .Page.Language | default "en" }}" class="js csstransforms3d">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  {{ hugo.Generator }}
+  {{ partial "meta.html" . }}
+  {{ partial "favicon.html" . }}
+  <title>{{ .Title }} :: {{ .Site.Title }}</title>
+
+  {{ $assetBusting := cond (hugo.IsProduction) "" (print "?" now.Unix) }}
+  <link href="{{ "css/nucleus.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/fontawesome-all.min.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/hybrid.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/perfect-scrollbar.min.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/auto-complete.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/theme.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  <link href="{{ "css/hugo-theme.css" | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  {{ with .Site.Params.themeVariant }}
+    <link href="{{ (printf "css/theme-%s.css" .) | relURL }}{{ $assetBusting }}" rel="stylesheet">
+  {{ end }}
+
+  <script src="{{ "js/jquery-2.x.min.js"| relURL }}{{ $assetBusting }}"></script>
+
+  <style type="text/css">
+    :root #header + #content > #left > #rlblock_left{
+      display:none !important;
+    }
+  </style>
+
+  <script>
+    {{ if or .Params.disableInlineCopyToClipBoard .Site.Params.disableInlineCopyToClipBoard }}
+      var isCodeToClipboardEnabled = false
+    {{ else }}
+      var isCodeToClipboardEnabled = true
+    {{ end }}
+  </script>
+
+  {{ partial "custom-header.html" . }}
+</head>
+
+<body class="" data-url="{{ .RelPermalink }}">
+  {{ partial "menu.html" . }}
+  <section id="body">
+    <div id="overlay"></div>
+    <div class="padding highlightable">
+      {{ if not .IsHome }}
+        <div>
+          <div id="top-bar">
+            {{ if and (or .IsPage .IsSection) .Site.Params.editURL }}
+              {{ $File := .File }}
+              {{ $Site := .Site }}
+
+              {{ if .File }}
+                {{ if .File.Path }}
+                  <div id="top-github-link">
+                    <a
+                      class="github-link"
+                      title='{{ T "Edit-this-page" }}'
+                      href="{{ $Site.Params.editURL }}{{ replace $File.Dir "\\" "/" }}{{ $File.LogicalName }}"
+                      target="blank"
+                    >
+                      <i class="fas fa-code-branch"></i>
+                      <span id="top-github-link-text">{{ T "Edit-this-page" }}</span>
+                    </a>
+                  </div>
+                {{ end }}
+              {{ end }}
+            {{ end }}
+
+            {{ $toc := (and (not .Params.disableToc) (not .Params.chapter)) }}
+            <div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
+              <span id="sidebar-toggle-span">
+                <a href="#" id="sidebar-toggle" data-sidebar-toggle="">
+                  <i class="fas fa-bars"></i>
+                </a>
+              </span>
+              {{ if $toc }}
+                <span id="toc-menu"><i class="fas fa-list-alt"></i></span>
+              {{ end }}
+              <span class="links">
+                {{ $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
+                {{ if $showBreadcrumb }}
+                  {{ template "breadcrumb" dict "page" . "value" .Title }}
+                {{ else }}
+                  {{ .Title }}
+                {{ end }}
+              </span>
+            </div>
+
+            {{ if $toc }}
+              <div class="progress">
+                <div class="wrapper">
+                    {{ .TableOfContents }}
+                </div>
+              </div>
+            {{ end }}
+          </div>
+        </div>
+      {{ end }}
+
+      {{ if .Params.chapter }}
+        <div id="chapter">
+      {{ end }}
+
+      {{ if and (not .IsHome) (not .Params.chapter) }}
+        <h1>{{ .Title }}</h1>
+      {{ end }}
+
+      {{ if gt .WordCount 400 }}
+        {{ .TableOfContents }}
+      {{ end }}
+
+      <div id="body-inner">
+
+{{/***  Templates  ***/}}
+{{ define "breadcrumb" }}
+  {{ $parent := .page.Parent }}
+  {{ if $parent }}
+    {{ $value := (printf "<a href='%s'>%s</a> > %s" $parent.RelPermalink $parent.Title .value) }}
+    {{ template "breadcrumb" dict "page" $parent "value" $value }}
+  {{ else }}
+    {{ .value | safeHTML }}
+  {{ end }}
+{{ end }}
diff --git a/hugo/layouts/partials/menu.html b/hugo/layouts/partials/menu.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/partials/menu.html
@@ -0,0 +1,152 @@
+<nav id="sidebar" class="{{ if $.Site.Params.showVisitedLinks }}showVisitedLinks{{ end }}">
+
+  {{ $currentNode := . }}
+  {{ $showvisitedlinks := .Site.Params.showVisitedLinks }}
+  <div id="header-wrapper">
+    <div id="header">
+      {{ partial "logo.html" . }}
+    </div>
+    {{ if not .Site.Params.disableSearch }}
+      {{ partial "search.html" . }}
+    {{ end }}
+  </div>
+
+  <div class="highlightable">
+    <ul class="topics">
+      {{ $orderByTitle := (eq .Site.Params.ordersectionsby "title") }}
+      {{ $sections := cond $orderByTitle .Site.Home.Sections.ByTitle .Site.Home.Sections.ByWeight }}
+
+      {{ range $sections }}
+        {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }}
+      {{ end }}
+    </ul>
+
+    {{ $disableShortcutsTitle := .Site.Params.DisableShortcutsTitle }}
+    {{ with .Site.Menus.shortcuts }}
+      <section id="shortcuts">
+        {{ if not $disableShortcutsTitle }}<h3>{{ T "Shortcuts-Title" }}</h3>{{ else }}<br />{{ end }}
+        <ul>
+          {{ range sort . "Weight" }}
+            <li>
+              {{ .Pre }}<a class="padding" {{ printf "href=%q" .URL | safeHTMLAttr }}>{{ safeHTML .Name }}</a>{{ .Post }}
+            </li>
+          {{ end }}
+        </ul>
+      </section>
+    {{ end }}
+
+      {{ if or .Site.IsMultiLingual $showvisitedlinks }}
+        <section id="prefooter">
+          <hr/>
+          <ul>
+            {{ if and .Site.IsMultiLingual (not .Site.Params.DisableLanguageSwitchingButton) }}
+              <li>
+                <a class="padding">
+                  <i class="fas fa-language fa-fw"></i>
+                  <div class="select-style">
+                    <select id="select-language" onchange="location = this.value;">
+                      {{ $siteLanguages := .Site.Languages }}
+                      {{ $pageLang := .Page.Lang }}
+                      {{ range .Page.AllTranslations }}
+                        {{ $translation := . }}
+                        {{ range $siteLanguages }}
+                          {{ if eq $translation.Lang .Lang }}
+                            {{ $selected := false }}
+                              <option 
+                                id="{{ $translation.Language }}"
+                                value="{{ $translation.RelPermalink }}"
+                                {{ if eq $pageLang .Lang }}selected{{ end }}
+                              >{{ .LanguageName }}</option>
+                          {{ end }}
+                        {{ end }}
+                      {{ end }}
+                    </select>
+                    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                    width="255px" height="255px" viewBox="0 0 255 255" style="enable-background:new 0 0 255 255;" xml:space="preserve">
+                      <g>
+                        <g id="arrow-drop-down">
+                          <polygon points="0,63.75 127.5,191.25 255,63.75 		" />
+                        </g>
+                      </g>
+                    </svg>
+                  </div>
+                </a>
+              </li>
+            {{ end }}
+
+            {{ if $showvisitedlinks }}
+              <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> {{ T "Clear-History" }}</a></li>
+            {{ end }}
+          </ul>
+        </section>
+      {{ end }}
+    <section id="footer">
+      {{ partial "menu-footer.html" . }}
+    </section>
+  </div>
+</nav>
+
+{{/*-- templates --*/}}
+{{ define "section-tree-nav" }}
+  {{ $showvisitedlinks := .showvisitedlinks }}
+  {{ $currentNode := .currentnode }}
+  {{ with .sect }}
+    {{ if .IsSection }}
+      {{ safeHTML .Params.head }}
+      <li data-nav-id="{{ .RelPermalink }}" title="{{ .Title }}" class="dd-item
+          {{- if .IsAncestor $currentNode }} parent{{ end -}}
+          {{- if and (eq .File.UniqueID $currentNode.File.UniqueID) }} active{{ end -}}
+          {{- if .Params.alwaysopen }} parent{{ end }}">
+        <a href="{{ .RelPermalink }}">
+          {{ safeHTML .Params.Pre }}{{ or .Params.menuTitle .LinkTitle .Title }}{{ safeHTML .Params.Post }}
+          {{ if $showvisitedlinks }}
+            <i class="fas read-icon"></i>
+          {{ end }}
+        </a>
+        {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
+        {{ if ne $numberOfPages 0 }}
+          <ul>
+            {{ $currentNode.Scratch.Set "pages" .Pages }}
+            {{ if .Sections }}
+              {{ $currentNode.Scratch.Set "pages" (.Pages | union .Sections) }}
+            {{ end }}
+            {{ $pages := ($currentNode.Scratch.Get "pages") }}
+
+            {{ if eq .Site.Params.ordersectionsby "title" }}  
+              {{ range $pages.ByTitle }}
+                {{ if and .Params.hidden (not $.showhidden) }} 
+                {{ else }}
+                  {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }}
+                {{ end }}
+              {{ end }}
+            {{ else }}
+              {{ range $pages.ByWeight }}
+                {{ if and .Params.hidden (not $.showhidden) }} 
+                {{ else }}
+                  {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }}
+                {{ end }}
+              {{ end }}
+            {{ end }}
+          </ul>
+        {{ end }}        
+      </li>
+    {{ else }}
+      {{ if not .Params.Hidden }}
+        <li
+          data-nav-id="{{ .RelPermalink }}"
+          title="{{ .Title }}"
+          class="dd-item {{ if eq .File.UniqueID $currentNode.File.UniqueID }}active{{ end }}"
+        >
+          <a href="{{ .RelPermalink }}">
+            {{ safeHTML .Params.Pre }}
+            {{ or .Params.menuTitle .LinkTitle .Title }}
+            {{ safeHTML .Params.Post }}
+            {{ if $showvisitedlinks }}
+              <i class="fas fa-check read-icon"></i>
+            {{ end }}
+          </a>
+        </li>
+      {{ end }}
+    {{ end }}
+  {{ end }}
+{{ end }}
diff --git a/hugo/layouts/partials/search.html b/hugo/layouts/partials/search.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/partials/search.html
@@ -0,0 +1,16 @@
+<div class="searchbox">
+    <label for="search-by"><i class="fas fa-search"></i></label>
+    <input data-search-input id="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
+    <span data-search-clear=""><i class="fas fa-times"></i></span>
+</div>
+{{ $assetBusting := cond (hugo.IsProduction) "" (print "?" now.Unix) }}
+<script type="text/javascript" src="{{ "js/lunr.min.js" | relURL }}{{ $assetBusting }}"></script>
+<script type="text/javascript" src="{{ "js/auto-complete.js" | relURL }}{{ $assetBusting }}"></script>
+<script type="text/javascript">
+    {{ if .Site.IsMultiLingual }}
+        var baseurl = "{{ .Site.BaseURL }}{{ .Site.LanguagePrefix }}";
+    {{ else }}
+        var baseurl = "{{ .Site.BaseURL }}";
+    {{ end }}
+</script>
+<script type="text/javascript" src="{{ "js/search.js" | relURL }}{{ $assetBusting }}"></script>
diff --git a/hugo/layouts/shortcodes/attachments.html b/hugo/layouts/shortcodes/attachments.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/shortcodes/attachments.html
@@ -0,0 +1,41 @@
+<section class="attachments {{ with .Get "style" }}{{ . }}{{ end }}">
+	<label>
+		<i class="fas fa-paperclip" aria-hidden="true"></i>
+		{{ with .Get "title" }}
+			{{ . }}
+		{{ else }}
+			{{ T "Attachments-label" }}
+		{{ end }}
+	</label>
+
+	{{ if eq .Page.File.BaseFileName "index" }}
+		{{ $.Scratch.Add "filesName" "files" }}
+	{{ else }}
+		{{ $.Scratch.Add "filesName" (printf "%s.files" .Page.File.BaseFileName) }}
+	{{ end }}
+
+	<div class="attachments-files">
+		{{ range (readDir (printf "./content/%s%s" .Page.File.Dir ($.Scratch.Get "filesName")) ) }}
+			{{ $fileDir := replace $.Page.File.Dir "\\" "/" }}
+			{{ if ($.Get "pattern") }}
+				{{ if (findRE ($.Get "pattern") .Name) }}
+					<li>
+						<a href="{{ (printf "%s%s/%s" $fileDir ($.Scratch.Get "filesName") .Name) | relURL }}" >
+							{{ .Name }}
+						</a>
+						({{ div .Size 1024 }} ko)
+					</li>
+				{{ end }}
+			{{ else }}
+				<li>
+					<a href="{{ (printf "%s%s/%s" $fileDir ($.Scratch.Get "filesName") .Name) | relURL }}" >
+						{{ .Name }}
+					</a>
+					({{ div .Size 1024 }} ko)
+				</li>
+			{{ end }}
+		{{ end }}
+	</div>
+	{{ .Inner }}
+</section>
+
diff --git a/hugo/layouts/shortcodes/button.html b/hugo/layouts/shortcodes/button.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/shortcodes/button.html
@@ -0,0 +1,13 @@
+<a {{ with .Get "href" }} href="{{ . }}" target="_blank" {{ end }} class="btn btn-default">
+  {{ $icon := .Get "icon" }}
+  {{ $iconposition := .Get "icon-position" }}
+  {{ if ($icon) }}
+    {{ if or (not ($iconposition)) (eq $iconposition "left") }}
+      <i class="{{ $icon }}"></i>
+    {{ end }}
+  {{ end }}
+  {{ .Inner }}
+  {{ if and ($icon) (eq $iconposition "right") }}
+    <i class="{{ $icon }}"></i>
+  {{ end }}
+</a>
diff --git a/hugo/layouts/shortcodes/children.html b/hugo/layouts/shortcodes/children.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/shortcodes/children.html
@@ -0,0 +1,88 @@
+{{ $showhidden := .Get "showhidden" }}
+{{ $style :=  .Get "style" | default "li" }}
+{{ $depth :=  .Get "depth" | default 1 }}
+{{ $withDescription :=  .Get "description" | default false }}
+{{ $sortTerm :=  .Get "sort" | default "Weight" }}
+
+
+<ul class="children children-{{ $style }}">
+	{{ .Scratch.Set "pages" .Page.Pages }}
+	{{ if .Page.Sections }}
+		{{ .Scratch.Set "pages" (.Page.Pages | union .Page.Sections) }}
+	{{ end }}
+	{{ $pages := (.Scratch.Get "pages") }}
+
+	{{ if eq $sortTerm "Weight" }}
+		{{ template "childs" dict "menu" $pages.ByWeight "style" $style "showhidden" $showhidden "count" 1 "depth" $depth "pages" .Site.Pages "description" $withDescription "sortTerm" $sortTerm }}
+	{{ else if eq $sortTerm "Name" }}
+		{{ template "childs" dict "menu" $pages.ByTitle "style" $style "showhidden" $showhidden "count" 1 "depth" $depth "pages" .Site.Pages "description" $withDescription "sortTerm" $sortTerm }}
+	{{ else if eq $sortTerm "PublishDate" }}
+		{{ template "childs" dict "menu" $pages.ByPublishDate "style" $style "showhidden" $showhidden "count" 1 "depth" $depth "pages" .Site.Pages "description" $withDescription "sortTerm" $sortTerm }}
+	{{ else if eq $sortTerm "Date" }}
+		{{ template "childs" dict "menu" $pages.ByDate "style" $style "showhidden" $showhidden "count" 1 "depth" $depth "pages" .Site.Pages "description" $withDescription "sortTerm" $sortTerm }}
+	{{ else if eq $sortTerm "Length" }}
+		{{ template "childs" dict "menu" $pages.ByLength "style" $style "showhidden" $showhidden "count" 1 "depth" $depth "pages" .Site.Pages "description" $withDescription "sortTerm" $sortTerm }}
+	{{ else }}
+		{{ template "childs" dict "menu" $pages "style" $style "showhidden" $showhidden "count" 1 "depth" $depth "pages" .Site.Pages "description" $withDescription "sortTerm" $sortTerm }}
+	{{ end }}
+</ul>
+
+{{ .Inner|safeHTML }}
+
+{{ define "childs" }}
+	{{ range .menu }}
+		{{ if and .Params.hidden (not $.showhidden) }} 
+		{{ else }}
+			{{ if hasPrefix $.style "h" }}
+				{{ $num := sub ( int (trim $.style "h") ) 1 }}
+				{{ $numn := add $num $.count }}
+
+				{{ (printf "<h%d>" $numn)|safeHTML }}
+				<a href="{{ .URL }}" >{{ .Title }}</a>
+				{{ (printf "</h%d>" $numn)|safeHTML }}
+
+			{{ else }}
+				{{ (printf "<%s>" $.style)|safeHTML }}
+				<a href="{{ .URL }}" >{{ .Title }}</a>
+				{{ (printf "</%s>" $.style)|safeHTML }}
+			{{ end }}
+
+			{{ if $.description }}
+				{{ if .Description }}
+					<p>{{ .Description }}</p>
+				{{ else }}
+					<p>{{ .Summary }}</p>
+				{{ end }}
+			{{ end }}
+
+			{{ if lt $.count $.depth }}
+				{{ if eq $.style "li" }}
+					<ul>
+				{{ end }}
+				{{ $.Page.Scratch.Set "pages" .Pages }}
+				{{ if .Sections }}
+					{{ $.Page.Scratch.Set "pages" (.Pages | union .Sections) }}
+				{{ end }}
+
+				{{ $pages := ($.Page.Scratch.Get "pages") }}
+				{{ if eq $.sortTerm "Weight" }}
+					{{ template "childs" dict "menu" $pages.ByWeight  "style" $.style "showhidden" $.showhidden "count" (add $.count 1) "depth" $.depth "pages" $.pages "description" $.description "sortTerm" $.sortTerm }}
+				{{ else if eq $.sortTerm "Name" }}
+					{{ template "childs" dict "menu" $pages.ByTitle  "style" $.style "showhidden" $.showhidden "count" (add $.count 1) "depth" $.depth "pages" $.pages "description" $.description "sortTerm" $.sortTerm }}
+				{{ else if eq $.sortTerm "PublishDate" }}
+					{{ template "childs" dict "menu" $pages.ByPublishDate  "style" $.style "showhidden" $.showhidden "count" (add $.count 1) "depth" $.depth "pages" $.pages "description" $.description "sortTerm" $.sortTerm }}
+				{{ else if eq $.sortTerm "Date" }}
+					{{ template "childs" dict "menu" $pages.ByDate  "style" $.style "showhidden" $.showhidden "count" (add $.count 1) "depth" $.depth "pages" $.pages "description" $.description "sortTerm" $.sortTerm }}
+				{{ else if eq $.sortTerm "Length" }}
+					{{ template "childs" dict "menu" $pages.ByLength  "style" $.style "showhidden" $.showhidden "count" (add $.count 1) "depth" $.depth "pages" $.pages "description" $.description "sortTerm" $.sortTerm }}
+				{{ else }}
+					{{ template "childs" dict "menu" $pages  "style" $.style "showhidden" $.showhidden "count" (add $.count 1) "depth" $.depth "pages" $.pages "description" $.description "sortTerm" $.sortTerm }}
+				{{ end }}
+
+				{{ if eq $.style "li" }}
+					</ul>
+				{{ end }}
+			{{ end }}
+		{{ end }}
+	{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/hugo/layouts/shortcodes/expand.html b/hugo/layouts/shortcodes/expand.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/shortcodes/expand.html
@@ -0,0 +1,16 @@
+<div class="expand">
+    <div class="expand-label" style="cursor: pointer;" onclick="$h = $(this);$h.next('div').slideToggle(100,function () {$h.children('i').attr('class',function () {return $h.next('div').is(':visible') ? 'fas fa-chevron-down' : 'fas fa-chevron-right';});});">
+        <i style="font-size:x-small;" class="fas fa-chevron-right"></i>
+        <span>
+        {{ $expandMessage := T "Expand-title" }}
+    	{{ if .IsNamedParams }}
+            {{ .Get "default" | default $expandMessage }}
+    	{{ else }}
+            {{ .Get 0 | default $expandMessage }}
+    	{{ end }}
+    	</span>
+    </div>
+    <div class="expand-content" style="display: none;">
+        {{ .Inner | safeHTML }}
+    </div>
+</div>
\ No newline at end of file
diff --git a/hugo/layouts/shortcodes/mermaid.html b/hugo/layouts/shortcodes/mermaid.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/shortcodes/mermaid.html
@@ -0,0 +1,3 @@
+<div class="mermaid" align='{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}'>
+    {{ safeHTML .Inner }}
+</div>
diff --git a/hugo/layouts/shortcodes/ref.html b/hugo/layouts/shortcodes/ref.html
new file mode 100644
--- /dev/null
+++ b/hugo/layouts/shortcodes/ref.html
@@ -0,0 +1,14 @@
+{{- if in (.Get 0) "/_index.md" -}}
+	{{- $paths := (split (.Get 0) "_index.md") -}}
+	{{- $pagepath := index $paths 0 -}}
+	{{- $anchor := index $paths 1 -}}
+	{{- with .Site.GetPage "section" (trim $pagepath "/") -}}
+		{{- ( printf "%s%s" $pagepath $anchor ) | relLangURL -}}
+	{{- end -}}
+{{- else -}}
+	{{- with .Site.GetPage "section" (.Get 0) }}
+		{{- .Permalink -}}
+	{{- else -}}
+		{{- .Get 0 | relref .Page -}}
+	{{- end -}}
+{{- end -}}
diff --git a/hugo/static/css/hugo-theme.css b/hugo/static/css/hugo-theme.css
new file mode 100644
--- /dev/null
+++ b/hugo/static/css/hugo-theme.css
@@ -0,0 +1,254 @@
+/* Insert here special css for hugo theme, on top of any other imported css */
+
+
+/* Table of contents */
+
+.progress ul {
+  list-style: none;
+  margin: 0;
+  padding: 0 5px;
+}
+
+#TableOfContents {
+    font-size: 13px !important;
+    max-height: 85vh;
+    overflow: auto;
+    padding: 15px !important;
+}
+
+
+#TableOfContents > ul > li > ul > li > ul li {
+  margin-right: 8px;
+}
+
+#TableOfContents > ul > li > a   {
+  font-weight: bold; padding: 0 18px; margin: 0 2px;
+}
+
+#TableOfContents > ul > li > ul > li > a {
+  font-weight: bold;
+}
+
+#TableOfContents > ul > li > ul > li > ul > li > ul > li > ul > li  {
+    display: none;
+}
+
+body {
+    font-size: 16px !important;
+    color: #323232 !important;
+}
+
+#body a.highlight, #body a.highlight:hover, #body a.highlight:focus {
+    text-decoration: none;
+    outline: none;
+    outline: 0;
+}
+#body a.highlight {
+    line-height: 1.1;
+    display: inline-block;
+}
+#body a.highlight:after {
+    display: block;
+    content: "";
+    height: 1px;
+    width: 0%;
+    background-color: #0082a7; /*#CE3B2F*/
+    -webkit-transition: width 0.5s ease;
+    -moz-transition: width 0.5s ease;
+    -ms-transition: width 0.5s ease;
+    transition: width 0.5s ease;
+}
+#body a.highlight:hover:after, #body a.highlight:focus:after {
+    width: 100%;
+}
+.progress {
+    position:absolute;
+    background-color: rgba(246, 246, 246, 0.97);
+    width: auto;
+    border: thin solid #ECECEC;
+    display:none;
+    z-index:200;
+}
+
+#toc-menu {
+  border-right: thin solid #DAD8D8 !important;
+  padding-right: 1rem !important;
+  margin-right: 0.5rem !important;
+}
+
+#sidebar-toggle-span {
+  border-right: thin solid #DAD8D8 !important;
+  padding-right: 0.5rem !important;
+  margin-right: 1rem !important;
+}
+
+.btn {
+  display: inline-block !important;
+  padding: 6px 12px !important;
+  margin-bottom: 0 !important;
+  font-size: 14px !important;
+  font-weight: normal !important;
+  line-height: 1.42857143 !important;
+  text-align: center !important;
+  white-space: nowrap !important;
+  vertical-align: middle !important;
+  -ms-touch-action: manipulation !important;
+      touch-action: manipulation !important;
+  cursor: pointer !important;
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+      -ms-user-select: none !important;
+          user-select: none !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  border-radius: 4px !important;
+  -webkit-transition: all 0.15s !important;
+     -moz-transition: all 0.15s !important;
+          transition: all 0.15s !important;
+}
+.btn:focus {
+  /*outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;*/
+  outline: none !important;
+}
+.btn:hover,
+.btn:focus {
+  color: #2b2b2b !important;
+  text-decoration: none !important;
+}
+
+.btn-default {
+  color: #333 !important;
+  background-color: #fff !important;
+  border-color: #ccc !important;
+}
+.btn-default:hover,
+.btn-default:focus,
+.btn-default:active {
+  color: #fff !important;
+  background-color: #9e9e9e !important;
+  border-color: #9e9e9e !important;
+}
+.btn-default:active {
+  background-image: none !important;
+}
+
+/* anchors */
+.anchor {
+  color: #0069f3;
+  font-size: 0.5em;
+  cursor:pointer;
+  visibility:hidden;
+  margin-left: 0.5em;
+    position: absolute;
+    margin-top:0.1em;
+}
+
+h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor {
+  visibility:visible;
+}
+
+/* Redfines headers style */
+
+h2, h3, h4, h5, h6 {
+  font-weight: 400;
+  line-height: 1.1;
+}
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+  font-weight: inherit;
+}
+
+h2 {
+  font-size: 2.5rem;
+  line-height: 110% !important;
+  margin: 2.5rem 0 1.5rem 0;
+}
+
+h3 {
+  font-size: 2rem;
+  line-height: 110% !important;
+  margin: 2rem 0 1rem 0;
+}
+
+h4 {
+  font-size: 1.5rem;
+  line-height: 110% !important;
+  margin: 1.5rem 0 0.75rem 0;
+}
+
+h5 {
+  font-size: 1rem;
+  line-height: 110% !important;
+  margin: 1rem 0 0.2rem 0;
+}
+
+h6 {
+  font-size: 0.5rem;
+  line-height: 110% !important;
+  margin: 0.5rem 0 0.2rem 0;
+}
+
+p {
+    margin: 1rem 0;
+}
+
+figcaption h4 {
+    font-weight: 300 !important;
+    opacity: .85;
+    font-size: 1em;
+    text-align: center;
+    margin-top: -1.5em;
+}
+
+.select-style {
+    border: 0;
+    width: 150px;
+    border-radius: 0px;
+    overflow: hidden;
+    display: inline-flex;
+}
+
+.select-style svg {
+    fill: #ccc;
+    width: 14px;
+    height: 14px;
+    pointer-events: none;
+    margin: auto;
+}
+
+.select-style svg:hover {
+  fill: #e6e6e6;
+}
+
+.select-style select {
+    padding: 0;
+    width: 130%;
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    background-image: none;
+    -webkit-appearance: none;
+    margin: auto;
+    margin-left: 0px;
+    margin-right: -20px;
+}
+
+.select-style select:focus {
+    outline: none;
+}
+
+.select-style :hover {
+    cursor:  pointer;
+}
+
+@media only all and (max-width: 47.938em) {
+  #breadcrumbs .links, #top-github-link-text {
+      display: none;
+  }
+}
+
+.is-sticky #top-bar {
+  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1); 
+}
\ No newline at end of file
diff --git a/hugo/static/css/theme.css b/hugo/static/css/theme.css
new file mode 100644
--- /dev/null
+++ b/hugo/static/css/theme.css
@@ -0,0 +1,1116 @@
+@charset "UTF-8";
+#top-github-link, #body #breadcrumbs {
+    position: relative;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+.button, .button-secondary {
+    display: inline-block;
+    padding: 7px 12px;
+}
+.button:active, .button-secondary:active {
+    margin: 2px 0 -2px 0;
+}
+@font-face {
+    font-family: 'Novacento Sans Wide';
+    src: url("../fonts/Novecentosanswide-UltraLight-webfont.eot");
+    src: url("../fonts/Novecentosanswide-UltraLight-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Novecentosanswide-UltraLight-webfont.woff2") format("woff2"), url("../fonts/Novecentosanswide-UltraLight-webfont.woff") format("woff"), url("../fonts/Novecentosanswide-UltraLight-webfont.ttf") format("truetype"), url("../fonts/Novecentosanswide-UltraLight-webfont.svg#novecento_sans_wideultralight") format("svg");
+    font-style: normal;
+    font-weight: 200;
+}
+@font-face {
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: url("../fonts/Work_Sans_300.eot?#iefix") format("embedded-opentype"), url("../fonts/Work_Sans_300.woff") format("woff"), url("../fonts/Work_Sans_300.woff2") format("woff2"), url("../fonts/Work_Sans_300.svg#WorkSans") format("svg"), url("../fonts/Work_Sans_300.ttf") format("truetype");
+}
+@font-face {
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url("../fonts/Work_Sans_500.eot?#iefix") format("embedded-opentype"), url("../fonts/Work_Sans_500.woff") format("woff"), url("../fonts/Work_Sans_500.woff2") format("woff2"), url("../fonts/Work_Sans_500.svg#WorkSans") format("svg"), url("../fonts/Work_Sans_500.ttf") format("truetype");
+}
+body {
+    background: #fff;
+    color: #777;
+}
+body #chapter h1 {
+    font-size: 3.5rem;
+}
+@media only all and (min-width: 48em) and (max-width: 59.938em) {
+    body #chapter h1 {
+        font-size: 3rem;
+    }
+}
+@media only all and (max-width: 47.938em) {
+    body #chapter h1 {
+        font-size: 2rem;
+    }
+}
+a {
+    color: #0069f3;
+}
+a:hover {
+    color: #0082a7;
+}
+pre {
+    position: relative;
+    color: #ffffff;
+}
+.bg {
+    background: #fff;
+    border: 1px solid #eaeaea;
+}
+b, strong, label, th {
+    font-weight: 600;
+}
+.default-animation, #header #logo-svg, #header #logo-svg path, #sidebar, #sidebar ul, #body, #body .padding, #body .nav {
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+}
+#grav-logo {
+    max-width: 60%;
+}
+#grav-logo path {
+    fill: #fff !important;
+}
+#sidebar {
+    font-weight: 300 !important;
+}
+fieldset {
+    border: 1px solid #ddd;
+}
+textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] {
+    background-color: white;
+    border: 1px solid #ddd;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover {
+    border-color: #c4c4c4;
+}
+textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
+    border-color: #00bdf3;
+    box-shadow: inset 0 1px 3px rgba(0,0,0,.06),0 0 5px rgba(0,169,218,.7)
+}
+#header-wrapper {
+    background: #8451a1;
+    color: #fff;
+    text-align: center;
+    border-bottom: 4px solid #9c6fb6;
+    padding: 1rem;
+}
+#header a {
+    display: inline-block;
+}
+#header #logo-svg {
+    width: 8rem;
+    height: 2rem;
+}
+#header #logo-svg path {
+    fill: #fff;
+}
+.searchbox {
+    margin-top: 1rem;
+    position: relative;
+    border: 1px solid #915eae;
+    background: #764890;
+    border-radius: 4px;
+}
+.searchbox label {
+    color: rgba(255, 255, 255, 0.8);
+    position: absolute;
+    left: 10px;
+    top: 3px;
+}
+.searchbox span {
+    color: rgba(255, 255, 255, 0.6);
+    position: absolute;
+    right: 10px;
+    top: 3px;
+    cursor: pointer;
+}
+.searchbox span:hover {
+    color: rgba(255, 255, 255, 0.9);
+}
+.searchbox input {
+    display: inline-block;
+    color: #fff;
+    width: 100%;
+    height: 30px;
+    background: transparent;
+    border: 0;
+    padding: 0 25px 0 30px;
+    margin: 0;
+    font-weight: 300;
+}
+.searchbox input::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+}
+.searchbox input::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+}
+.searchbox input:-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+}
+.searchbox input:-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+}
+#sidebar-toggle-span {
+    display: none;
+}
+@media only all and (max-width: 47.938em) {
+    #sidebar-toggle-span {
+        display: inline;
+    }
+}
+#sidebar {
+    background-color: #322A38;
+    position: fixed;
+    top: 0;
+    width: 300px;
+    bottom: 0;
+    left: 0;
+    font-weight: 400;
+    font-size: 15px;
+}
+#sidebar a {
+    color: #ccc;
+}
+#sidebar a:hover {
+    color: #e6e6e6;
+}
+#sidebar a.subtitle {
+    color: rgba(204, 204, 204, 0.6);
+}
+#sidebar hr {
+    border-bottom: 1px solid #2a232f;
+}
+#sidebar a.padding {
+    padding: 0 1rem;
+}
+#sidebar h5 {
+    margin: 2rem 0 0;
+    position: relative;
+    line-height: 2;
+}
+#sidebar h5 a {
+    display: block;
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+#sidebar h5 i {
+    color: rgba(204, 204, 204, 0.6);
+    position: absolute;
+    right: 0.6rem;
+    top: 0.7rem;
+    font-size: 80%;
+}
+#sidebar h5.parent a {
+    background: #201b24;
+    color: #d9d9d9 !important;
+}
+#sidebar h5.active a {
+    background: #fff;
+    color: #767676 !important;
+}
+#sidebar h5.active i {
+    color: #767676 !important;
+}
+#sidebar h5 + ul.topics {
+    display: none;
+    margin-top: 0;
+}
+#sidebar h5.parent + ul.topics, #sidebar h5.active + ul.topics {
+    display: block;
+}
+#sidebar ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+#sidebar ul.searched a {
+    color: #999999;
+}
+#sidebar ul.searched .search-match a {
+    color: #e6e6e6;
+}
+#sidebar ul.searched .search-match a:hover {
+    color: white;
+}
+#sidebar ul.topics {
+    margin: 0 1rem;
+}
+#sidebar ul.topics.searched ul {
+    display: block;
+}
+#sidebar ul.topics ul {
+    display: none;
+    padding-bottom: 1rem;
+}
+#sidebar ul.topics ul ul {
+    padding-bottom: 0;
+}
+#sidebar ul.topics li.parent ul, #sidebar ul.topics > li.active ul {
+    display: block;
+}
+#sidebar ul.topics > li > a {
+    line-height: 2rem;
+    font-size: 1.1rem;
+}
+#sidebar ul.topics > li > a b {
+    opacity: 0.5;
+    font-weight: normal;
+}
+#sidebar ul.topics > li > a .fa {
+    margin-top: 9px;
+}
+#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
+    background: #251f29;
+    margin-left: -1rem;
+    margin-right: -1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+#sidebar ul li.active > a {
+    background: #fff;
+    color: #767676 !important;
+    margin-left: -1rem;
+    margin-right: -1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+#sidebar ul li {
+    padding: 0;
+}
+#sidebar ul li.visited + span {
+    margin-right: 16px;
+}
+#sidebar ul li a {
+    display: block;
+    padding: 2px 0;
+}
+#sidebar ul li a span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: block;
+}
+#sidebar ul li > a {
+    padding: 4px 0;
+}
+#sidebar ul li.visited > a .read-icon {
+    color: #9c6fb6;
+    display: inline;
+}
+#sidebar ul li li {
+    padding-left: 1rem;
+    text-indent: 0.2rem;
+}
+#main {
+    background: #f7f7f7;
+    margin: 0 0 1.563rem 0;
+}
+#body {
+    position: relative;
+    margin-left: 300px;
+    min-height: 100%;
+}
+#body img, #body .video-container {
+    margin: 3rem auto;
+    display: block;
+    text-align: center;
+}
+#body img.border, #body .video-container.border {
+    border: 2px solid #e6e6e6 !important;
+    padding: 2px;
+}
+#body img.shadow, #body .video-container.shadow {
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+#body img.inline {
+    display: inline !important;
+    margin: 0 !important;
+    vertical-align: bottom;
+}
+#body .bordered {
+    border: 1px solid #ccc;
+}
+#body .padding {
+    padding: 1rem 1rem;
+    max-width: 900px;
+    margin: auto;
+}
+@media only all and (max-width: 59.938em) {
+    #body .padding {
+        position: static;
+    }
+}
+#body h1 + hr {
+    margin-top: -1.7rem;
+    margin-bottom: 3rem;
+}
+@media only all and (max-width: 59.938em) {
+    #body #navigation {
+        position: static;
+        margin-right: 0 !important;
+        width: 100%;
+        display: table;
+    }
+}
+#body .nav {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    width: 4rem;
+    font-size: 50px;
+    height: 100%;
+    cursor: pointer;
+    display: table;
+    text-align: center;
+}
+#body .nav > i {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+}
+@media only all and (max-width: 59.938em) {
+    #body .nav {
+        display: table-cell;
+        position: static;
+        top: auto;
+        width: 50%;
+        text-align: center;
+        height: 100px;
+        line-height: 100px;
+        padding-top: 0;
+    }
+    #body .nav > i {
+        display: inline-block;
+    }
+}
+#body .nav:hover {
+    background: #F6F6F6;
+}
+#body .nav.nav-pref {
+    left: 0;
+}
+#body .nav.nav-next {
+    right: 0;
+}
+#body-inner {
+    margin-bottom: 5rem;
+}
+#chapter {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 2rem 0;
+}
+#chapter #body-inner {
+    padding-bottom: 3rem;
+    max-width: 80%;
+}
+#chapter h3 {
+    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    font-weight: 300;
+    text-align: center;
+}
+#chapter h1 {
+    font-size: 5rem;
+    border-bottom: 4px solid #F0F2F4;
+}
+#chapter p {
+    text-align: center;
+    font-size: 1.2rem;
+}
+#footer {
+    padding: 3rem 1rem;
+    color: #b3b3b3;
+    font-size: 13px;
+}
+#footer p {
+    margin: 0;
+}
+body {
+    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    font-weight: 300;
+    line-height: 1.6;
+    font-size: 18px !important;
+}
+h2, h3, h4, h5, h6 {
+    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    text-rendering: optimizeLegibility;
+    color: #5e5e5e;
+    font-weight: 400;
+    letter-spacing: -1px;
+}
+h1 {
+    font-family: "Novacento Sans Wide", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    text-align: center;
+    text-transform: uppercase;
+    color: #222;
+    font-weight: 200;
+}
+blockquote {
+    border-left: 10px solid #F0F2F4;
+}
+blockquote p {
+    font-size: 1.1rem;
+    color: #999;
+}
+blockquote cite {
+    display: block;
+    text-align: right;
+    color: #666;
+    font-size: 1.2rem;
+}
+div.notices {
+    margin: 2rem 0;
+    position: relative;
+}
+div.notices p {
+    padding: 15px;
+    display: block;
+    font-size: 1rem;
+    margin-top: 0rem;
+    margin-bottom: 0rem;
+    color: #666;
+}
+div.notices p:first-child:before {
+    position: absolute;
+    top: 2px;
+    color: #fff;
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    content: "\f06a";
+    left: 10px;
+}
+div.notices p:first-child:after {
+    position: absolute;
+    top: 2px;
+    color: #fff;
+    left: 2rem;
+}
+div.notices.info p {
+    border-top: 30px solid #F0B37E;
+    background: #FFF2DB;
+}
+div.notices.info p:first-child:after {
+    content: 'Info';
+}
+div.notices.warning p {
+    border-top: 30px solid rgba(217, 83, 79, 0.8);
+    background: #FAE2E2;
+}
+div.notices.warning p:first-child:after {
+    content: 'Warning';
+}
+div.notices.note p {
+    border-top: 30px solid #6AB0DE;
+    background: #E7F2FA;
+}
+div.notices.note p:first-child:after {
+    content: 'Note';
+}
+div.notices.tip p {
+    border-top: 30px solid rgba(92, 184, 92, 0.8);
+    background: #E6F9E6;
+}
+div.notices.tip p:first-child:after {
+    content: 'Tip';
+}
+
+/* attachments shortcode */
+
+section.attachments {
+    margin: 2rem 0;
+    position: relative;
+}
+
+section.attachments label {
+    font-weight: 400;
+    padding-left: 0.5em;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    margin: 0;
+}
+
+section.attachments .attachments-files {
+    padding: 15px;
+    display: block;
+    font-size: 1rem;
+    margin-top: 0rem;
+    margin-bottom: 0rem;
+    color: #666;
+}
+
+section.attachments.orange label {
+    color: #fff;
+    background: #F0B37E;
+}
+
+section.attachments.orange .attachments-files {
+    background: #FFF2DB;
+}
+
+section.attachments.green label {
+    color: #fff;
+    background: rgba(92, 184, 92, 0.8);
+}
+
+section.attachments.green .attachments-files {
+    background: #E6F9E6;
+}
+
+section.attachments.blue label {
+    color: #fff;
+    background: #6AB0DE;
+}
+
+section.attachments.blue .attachments-files {
+    background: #E7F2FA;
+}
+
+section.attachments.grey label {
+    color: #fff;
+    background: #505d65;
+}
+
+section.attachments.grey .attachments-files {
+    background: #f4f4f4;
+}
+
+/* Children shortcode */
+
+/* Children shortcode */
+.children p {
+    font-size: small;
+    margin-top: 0px;
+    padding-top: 0px;
+    margin-bottom:  0px;
+    padding-bottom: 0px;
+}
+.children-li p {
+    font-size: small;
+    font-style: italic;
+
+}
+.children-h2 p, .children-h3 p {
+    font-size: small;
+    margin-top: 0px;
+    padding-top: 0px;
+    margin-bottom:  0px;
+    padding-bottom: 0px;
+}
+.children h3,.children h2 {
+    margin-bottom: 0px;
+    margin-top: 5px;
+}
+
+code, kbd, pre, samp {
+    font-family: "Consolas", menlo, monospace;
+    font-size: 92%;
+}
+code {
+    border-radius: 2px;
+    white-space: nowrap;
+    color: #8451a1;
+    background: #e2e2fd;
+    padding: 1px 3px;
+}
+code.with-copy {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+h1 code, h2 code, h3 code, h4 code, h5 code, h6 code, h7 code {
+    border-radius: 6px;
+    white-space: nowrap;
+    color: #8451a1;
+    background: #e2e2fd;
+    padding: 0px 2px;
+}
+pre {
+    padding: 1rem;
+    margin: 2rem 0;
+    background: #1d1f21;
+    border: 0;
+    border-radius: 2px;
+    line-height: 1.15;
+}
+pre code {
+    color: whitesmoke;
+    background: inherit;
+    white-space: inherit;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    font-size: 15px;
+}
+hr {
+    border-bottom: 4px solid #F0F2F4;
+}
+.page-title {
+    margin-top: -25px;
+    padding: 25px;
+    float: left;
+    clear: both;
+    background: #9c6fb6;
+    color: #fff;
+}
+#body a.anchor-link {
+    color: #ccc;
+}
+#body a.anchor-link:hover {
+    color: #9c6fb6;
+}
+#body-inner .tabs-wrapper.ui-theme-badges {
+    background: #1d1f21;
+}
+#body-inner .tabs-wrapper.ui-theme-badges .tabs-nav li {
+    font-size: 0.9rem;
+    text-transform: uppercase;
+}
+#body-inner .tabs-wrapper.ui-theme-badges .tabs-nav li a {
+    background: #35393c;
+}
+#body-inner .tabs-wrapper.ui-theme-badges .tabs-nav li.current a {
+    background: #4d5257;
+}
+#body-inner pre {
+    white-space: pre-wrap;
+}
+.tabs-wrapper pre {
+    margin: 1rem 0;
+    border: 0;
+    padding: 0;
+    background: inherit;
+}
+table {
+    border: 1px solid #eaeaea;
+    table-layout: auto;
+}
+th {
+    background: #f7f7f7;
+    padding: 0.5rem;
+}
+td {
+    padding: 0.5rem;
+    border: 1px solid #eaeaea;
+}
+.button {
+    background: #9c6fb6;
+    color: #fff;
+    box-shadow: 0 3px 0 #00a5d4;
+}
+.button:hover {
+    background: #00a5d4;
+    box-shadow: 0 3px 0 #008db6;
+    color: #fff;
+}
+.button:active {
+    box-shadow: 0 1px 0 #008db6;
+}
+.button-secondary {
+    background: #F8B450;
+    color: #fff;
+    box-shadow: 0 3px 0 #f7a733;
+}
+.button-secondary:hover {
+    background: #f7a733;
+    box-shadow: 0 3px 0 #f69b15;
+    color: #fff;
+}
+.button-secondary:active {
+    box-shadow: 0 1px 0 #f69b15;
+}
+.bullets {
+    margin: 1.7rem 0;
+    margin-left: -0.85rem;
+    margin-right: -0.85rem;
+    overflow: auto;
+}
+.bullet {
+    float: left;
+    padding: 0 0.85rem;
+}
+.two-column-bullet {
+    width: 50%;
+}
+@media only all and (max-width: 47.938em) {
+    .two-column-bullet {
+        width: 100%;
+    }
+}
+.three-column-bullet {
+    width: 33.33333%;
+}
+@media only all and (max-width: 47.938em) {
+    .three-column-bullet {
+        width: 100%;
+    }
+}
+.four-column-bullet {
+    width: 25%;
+}
+@media only all and (max-width: 47.938em) {
+    .four-column-bullet {
+        width: 100%;
+    }
+}
+.bullet-icon {
+    float: left;
+    background: #9c6fb6;
+    padding: 0.875rem;
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 1.75rem;
+    text-align: center;
+}
+.bullet-icon-1 {
+    background: #9c6fb6;
+}
+.bullet-icon-2 {
+    background: #00f3d8;
+}
+.bullet-icon-3 {
+    background: #e6f300;
+}
+.bullet-content {
+    margin-left: 4.55rem;
+}
+.tooltipped {
+    position: relative;
+}
+.tooltipped:after {
+    position: absolute;
+    z-index: 1000000;
+    display: none;
+    padding: 5px 8px;
+    font: normal normal 11px/1.5 "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: break-word;
+    white-space: pre;
+    pointer-events: none;
+    content: attr(aria-label);
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 3px;
+    -webkit-font-smoothing: subpixel-antialiased;
+}
+.tooltipped:before {
+    position: absolute;
+    z-index: 1000001;
+    display: none;
+    width: 0;
+    height: 0;
+    color: rgba(0, 0, 0, 0.8);
+    pointer-events: none;
+    content: "";
+    border: 5px solid transparent;
+}
+.tooltipped:hover:before, .tooltipped:hover:after, .tooltipped:active:before, .tooltipped:active:after, .tooltipped:focus:before, .tooltipped:focus:after {
+    display: inline-block;
+    text-decoration: none;
+}
+.tooltipped-s:after, .tooltipped-se:after, .tooltipped-sw:after {
+    top: 100%;
+    right: 50%;
+    margin-top: 5px;
+}
+.tooltipped-s:before, .tooltipped-se:before, .tooltipped-sw:before {
+    top: auto;
+    right: 50%;
+    bottom: -5px;
+    margin-right: -5px;
+    border-bottom-color: rgba(0, 0, 0, 0.8);
+}
+.tooltipped-se:after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px;
+}
+.tooltipped-sw:after {
+    margin-right: -15px;
+}
+.tooltipped-n:after, .tooltipped-ne:after, .tooltipped-nw:after {
+    right: 50%;
+    bottom: 100%;
+    margin-bottom: 5px;
+}
+.tooltipped-n:before, .tooltipped-ne:before, .tooltipped-nw:before {
+    top: -5px;
+    right: 50%;
+    bottom: auto;
+    margin-right: -5px;
+    border-top-color: rgba(0, 0, 0, 0.8);
+}
+.tooltipped-ne:after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px;
+}
+.tooltipped-nw:after {
+    margin-right: -15px;
+}
+.tooltipped-s:after, .tooltipped-n:after {
+    transform: translateX(50%);
+}
+.tooltipped-w:after {
+    right: 100%;
+    bottom: 50%;
+    margin-right: 5px;
+    transform: translateY(50%);
+}
+.tooltipped-w:before {
+    top: 50%;
+    bottom: 50%;
+    left: -5px;
+    margin-top: -5px;
+    border-left-color: rgba(0, 0, 0, 0.8);
+}
+.tooltipped-e:after {
+    bottom: 50%;
+    left: 100%;
+    margin-left: 5px;
+    transform: translateY(50%);
+}
+.tooltipped-e:before {
+    top: 50%;
+    right: -5px;
+    bottom: 50%;
+    margin-top: -5px;
+    border-right-color: rgba(0, 0, 0, 0.8);
+}
+.highlightable {
+    padding: 1rem 0 1rem;
+    overflow: auto;
+    position: relative;
+}
+.hljs {
+    padding:0;
+}
+.hljs::selection, .hljs span::selection {
+    background: #b7b7b7;
+}
+.lightbox-active #body {
+    overflow: visible;
+}
+.lightbox-active #body .padding {
+    overflow: visible;
+}
+#github-contrib i {
+    vertical-align: middle;
+}
+.lifecycle #body-inner ul {
+    list-style: none;
+    margin: 0;
+    padding: 2rem 0 0;
+    position: relative;
+}
+.lifecycle #body-inner ol {
+    margin: 1rem 0 1rem 0;
+    padding: 2rem;
+    position: relative;
+}
+.lifecycle #body-inner ol li {
+    margin-left: 1rem;
+}
+.lifecycle #body-inner ol strong, .lifecycle #body-inner ol label, .lifecycle #body-inner ol th {
+    text-decoration: underline;
+}
+.lifecycle #body-inner ol ol {
+    margin-left: -1rem;
+}
+.lifecycle #body-inner h3[class*='level'] {
+    font-size: 20px;
+    position: absolute;
+    margin: 0;
+    padding: 4px 10px;
+    right: 0;
+    z-index: 1000;
+    color: #fff;
+    background: #1ABC9C;
+}
+.lifecycle #body-inner ol h3 {
+    margin-top: 1rem !important;
+    right: 2rem !important;
+}
+.lifecycle #body-inner .level-1 + ol {
+    background: #f6fefc;
+    border: 4px solid #1ABC9C;
+    color: #16A085;
+}
+.lifecycle #body-inner .level-1 + ol h3 {
+    background: #2ECC71;
+}
+.lifecycle #body-inner .level-2 + ol {
+    background: #f7fdf9;
+    border: 4px solid #2ECC71;
+    color: #27AE60;
+}
+.lifecycle #body-inner .level-2 + ol h3 {
+    background: #3498DB;
+}
+.lifecycle #body-inner .level-3 + ol {
+    background: #f3f9fd;
+    border: 4px solid #3498DB;
+    color: #2980B9;
+}
+.lifecycle #body-inner .level-3 + ol h3 {
+    background: #34495E;
+}
+.lifecycle #body-inner .level-4 + ol {
+    background: #e4eaf0;
+    border: 4px solid #34495E;
+    color: #2C3E50;
+}
+.lifecycle #body-inner .level-4 + ol h3 {
+    background: #34495E;
+}
+#top-bar {
+    background: #F6F6F6;
+    border-radius: 2px;
+    padding: 0 1rem;
+    height: 0;
+    min-height: 3rem;
+}
+#top-github-link {
+    position: relative;
+    z-index: 1;
+    float: right;
+    display: block;
+}
+#body #breadcrumbs {
+    height: auto;
+    margin-bottom: 0;
+    padding-left: 0;
+    line-height: 1.4;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 70%;
+    display: inline-block;
+    float: left;
+}
+#body #breadcrumbs span {
+    padding: 0 0.1rem;
+}
+@media only all and (max-width: 59.938em) {
+    #sidebar {
+        width: 230px;
+    }
+    #body {
+        margin-left: 230px;
+    }
+}
+@media only all and (max-width: 47.938em) {
+    #sidebar {
+        width: 230px;
+        left: -230px;
+    }
+    #body {
+        margin-left: 0;
+        width: 100%;
+    }
+    .sidebar-hidden {
+        overflow: hidden;
+    }
+    .sidebar-hidden #sidebar {
+        left: 0;
+    }
+    .sidebar-hidden #body {
+        margin-left: 230px;
+        overflow: hidden;
+    }
+    .sidebar-hidden #overlay {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 10;
+        background: rgba(255, 255, 255, 0.5);
+        cursor: pointer;
+    }
+}
+.copy-to-clipboard {
+    display: inline-block;
+    color: #8451a1;
+    background-color: #e2e2fd;
+    cursor: pointer;
+    border-radius: 2px 2px 2px 0;
+    padding: 2px;
+}
+.copy-to-clipboard:hover {
+    background-color: #E8E2CD;
+}
+pre .copy-to-clipboard {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    background-color: #4d5257;
+    color: #ccc;
+    border-radius: 2px;
+}
+pre .copy-to-clipboard:hover {
+    background-color: #656c72;
+    color: #fff;
+}
+.parent-element {
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+}
+
+#sidebar ul.topics > li > a .read-icon {
+    margin-top: 9px;
+}
+
+#sidebar ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#sidebar #shortcuts li {
+    padding: 2px 0;
+    list-style: none;
+}
+
+#sidebar ul li .read-icon {
+    display: none;
+    float: right;
+    font-size: 13px;
+    min-width: 16px;
+    margin: 4px 0 0 0;
+    text-align: right;
+}
+#sidebar ul li.visited > a .read-icon {
+    color: #00bdf3;
+    display: inline;
+}
+
+#sidebar #shortcuts h3 {
+    font-family: "Novacento Sans Wide", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    color: white ;
+    margin-top:1rem;
+    padding-left: 1rem;
+}
+
+#searchResults {
+    text-align: left;
+}
diff --git a/hugo/static/js/hugo-learn.js b/hugo/static/js/hugo-learn.js
new file mode 100644
--- /dev/null
+++ b/hugo/static/js/hugo-learn.js
@@ -0,0 +1,29 @@
+// Stick the top to the top of the screen when  scrolling
+$(document).ready(function(){
+  $("#top-bar").sticky({topSpacing:0, zIndex: 1000});
+});
+
+
+jQuery(document).ready(function() {
+  // Add link button for every
+  var text, clip = new Clipboard('.anchor');
+  $("h1~h2,h1~h3,h1~h4,h1~h5,h1~h6").append(function(index, html){
+    var element = $(this);
+    var url = encodeURI(document.location.origin + document.location.pathname);
+    var link = url + "#"+element[0].id;
+    return " <span class='anchor' data-clipboard-text='"+link+"'>" +
+      "<i class='fas fa-link fa-lg'></i>" +
+      "</span>"
+    ;
+  });
+
+  $(".anchor").on('mouseleave', function(e) {
+    $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
+  });
+
+  clip.on('success', function(e) {
+      e.clearSelection();
+      $(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
+  });
+
+});
diff --git a/hugo/static/js/learn.js b/hugo/static/js/learn.js
new file mode 100644
--- /dev/null
+++ b/hugo/static/js/learn.js
@@ -0,0 +1,458 @@
+// Scrollbar Width function
+function getScrollBarWidth() {
+    var inner = document.createElement('p');
+    inner.style.width = "100%";
+    inner.style.height = "200px";
+
+    var outer = document.createElement('div');
+    outer.style.position = "absolute";
+    outer.style.top = "0px";
+    outer.style.left = "0px";
+    outer.style.visibility = "hidden";
+    outer.style.width = "200px";
+    outer.style.height = "150px";
+    outer.style.overflow = "hidden";
+    outer.appendChild(inner);
+
+    document.body.appendChild(outer);
+    var w1 = inner.offsetWidth;
+    outer.style.overflow = 'scroll';
+    var w2 = inner.offsetWidth;
+    if (w1 == w2) w2 = outer.clientWidth;
+
+    document.body.removeChild(outer);
+
+    return (w1 - w2);
+};
+
+function setMenuHeight() {
+    $('#sidebar .highlightable').height($('#sidebar').innerHeight() - $('#header-wrapper').height() - 40);
+    $('#sidebar .highlightable').perfectScrollbar('update');
+}
+
+function fallbackMessage(action) {
+    var actionMsg = '';
+    var actionKey = (action === 'cut' ? 'X' : 'C');
+
+    if (/iPhone|iPad/i.test(navigator.userAgent)) {
+        actionMsg = 'No support :(';
+    }
+    else if (/Mac/i.test(navigator.userAgent)) {
+        actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
+    }
+    else {
+        actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
+    }
+
+    return actionMsg;
+}
+
+// for the window resize
+$(window).resize(function() {
+    setMenuHeight();
+});
+
+// debouncing function from John Hann
+// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+(function($, sr) {
+
+    var debounce = function(func, threshold, execAsap) {
+        var timeout;
+
+        return function debounced() {
+            var obj = this, args = arguments;
+
+            function delayed() {
+                if (!execAsap)
+                    func.apply(obj, args);
+                timeout = null;
+            };
+
+            if (timeout)
+                clearTimeout(timeout);
+            else if (execAsap)
+                func.apply(obj, args);
+
+            timeout = setTimeout(delayed, threshold || 100);
+        };
+    }
+    // smartresize
+    jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
+
+})(jQuery, 'smartresize');
+
+
+jQuery(document).ready(function() {
+    jQuery('#sidebar .category-icon').on('click', function() {
+        $( this ).toggleClass("fa-angle-down fa-angle-right") ;
+        $( this ).parent().parent().children('ul').toggle() ;
+        return false;
+    });
+
+    var sidebarStatus = searchStatus = 'open';
+    $('#sidebar .highlightable').perfectScrollbar();
+    setMenuHeight();
+
+    jQuery('#overlay').on('click', function() {
+        jQuery(document.body).toggleClass('sidebar-hidden');
+        sidebarStatus = (jQuery(document.body).hasClass('sidebar-hidden') ? 'closed' : 'open');
+
+        return false;
+    });
+
+    jQuery('[data-sidebar-toggle]').on('click', function() {
+        jQuery(document.body).toggleClass('sidebar-hidden');
+        sidebarStatus = (jQuery(document.body).hasClass('sidebar-hidden') ? 'closed' : 'open');
+
+        return false;
+    });
+    jQuery('[data-clear-history-toggle]').on('click', function() {
+        sessionStorage.clear();
+        location.reload();
+        return false;
+    });
+    jQuery('[data-search-toggle]').on('click', function() {
+        if (sidebarStatus == 'closed') {
+            jQuery('[data-sidebar-toggle]').trigger('click');
+            jQuery(document.body).removeClass('searchbox-hidden');
+            searchStatus = 'open';
+
+            return false;
+        }
+
+        jQuery(document.body).toggleClass('searchbox-hidden');
+        searchStatus = (jQuery(document.body).hasClass('searchbox-hidden') ? 'closed' : 'open');
+
+        return false;
+    });
+
+    var ajax;
+    jQuery('[data-search-input]').on('input', function() {
+        var input = jQuery(this),
+            value = input.val(),
+            items = jQuery('[data-nav-id]');
+        items.removeClass('search-match');
+        if (!value.length) {
+            $('ul.topics').removeClass('searched');
+            items.css('display', 'block');
+            sessionStorage.removeItem('search-value');
+            $(".highlightable").unhighlight({ element: 'mark' })
+            return;
+        }
+
+        sessionStorage.setItem('search-value', value);
+        $(".highlightable").unhighlight({ element: 'mark' }).highlight(value, { element: 'mark' });
+
+        if (ajax && ajax.abort) ajax.abort();
+
+        jQuery('[data-search-clear]').on('click', function() {
+            jQuery('[data-search-input]').val('').trigger('input');
+            sessionStorage.removeItem('search-input');
+            $(".highlightable").unhighlight({ element: 'mark' })
+        });
+    });
+
+    $.expr[":"].contains = $.expr.createPseudo(function(arg) {
+        return function( elem ) {
+            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
+        };
+    });
+
+    if (sessionStorage.getItem('search-value')) {
+        var searchValue = sessionStorage.getItem('search-value')
+        $(document.body).removeClass('searchbox-hidden');
+        $('[data-search-input]').val(searchValue);
+        $('[data-search-input]').trigger('input');
+        var searchedElem = $('#body-inner').find(':contains(' + searchValue + ')').get(0);
+        if (searchedElem) {
+            searchedElem.scrollIntoView(true);
+            var scrolledY = window.scrollY;
+            if(scrolledY){
+                window.scroll(0, scrolledY - 125);
+            }
+        }
+    }
+
+    // clipboard
+    if (isCodeToClipboardEnabled) {
+        const elems = $('code')
+
+        if (elems.length) {
+            const clipboard = new Clipboard('.copy-to-clipboard', {
+                text: (trigger) =>
+                    $(trigger).prev('code').text().replace(/^\$\s/gm, '')
+            });
+
+            clipboard.on('success', (e) => {
+                e.clearSelection();
+                addToolTip(e, 'Copied to clipboard!')
+            });
+            clipboard.on('error', (e) => {
+                addToolTip(e, fallbackMessage(e.action))
+                $(document).one('copy', () => addToolTip(e, 'Copied to clipboard!'));
+            });
+
+            elems.each(function () {
+                const code = $(this);
+                const isInHeading = code.parent().is('h1,h2,h3,h4,h5,h6,h7');
+                const isInToc = code.parents('nav#TableOfContents').length > 0;
+                const isTooShort = code.text().length < 5
+
+                if (!isInHeading && !isInToc && !isTooShort) {
+                    code.addClass('with-copy');
+                    code.after('<i class="copy-to-clipboard far fa-copy" title="Copy to clipboard"></i>');
+                    code.next('.copy-to-clipboard').on('mouseleave', removeTooltip);
+                }
+            });
+
+            function removeTooltip() {
+                $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
+            }
+
+            function addToolTip(e, message) {
+                var inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
+                $(e.trigger)
+                    .attr('aria-label', message)
+                    .addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
+            }
+        }
+    }
+
+    // allow keyboard control for prev/next links
+    jQuery(function() {
+        jQuery('.nav-prev').click(function(){
+            location.href = jQuery(this).attr('href');
+        });
+        jQuery('.nav-next').click(function() {
+            location.href = jQuery(this).attr('href');
+        });
+    });
+
+    jQuery('input').keydown(function (e) {
+         //  left and right arrow keys
+         if (e.which == '37' || e.which == '39') {
+             e.stopPropagation();
+         }
+     });
+    
+    jQuery(document).keydown(function(e) {
+      // prev links - left arrow key
+      if(e.which == '37') {
+        jQuery('.nav.nav-prev').click();
+      }
+
+      // next links - right arrow key
+      if(e.which == '39') {
+        jQuery('.nav.nav-next').click();
+      }
+    });
+
+    $('#top-bar a:not(:has(img)):not(.btn)').addClass('highlight');
+    $('#body-inner a:not(:has(img)):not(.btn):not(a[rel="footnote"])').addClass('highlight');
+
+    var touchsupport = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
+    if (!touchsupport){ // browser doesn't support touch
+        $('#toc-menu').hover(function() {
+            $('.progress').stop(true, false, true).fadeToggle(100);
+        });
+
+        $('.progress').hover(function() {
+            $('.progress').stop(true, false, true).fadeToggle(100);
+        });
+    }
+    if (touchsupport){ // browser does support touch
+        $('#toc-menu').click(function() {
+            $('.progress').stop(true, false, true).fadeToggle(100);
+        });
+        $('.progress').click(function() {
+            $('.progress').stop(true, false, true).fadeToggle(100);
+        });
+    }
+
+    /** 
+    * Fix anchor scrolling that hides behind top nav bar
+    * Courtesy of https://stackoverflow.com/a/13067009/28106
+    *
+    * We could use pure css for this if only heading anchors were
+    * involved, but this works for any anchor, including footnotes
+    **/
+    (function (document, history, location) {
+        var HISTORY_SUPPORT = !!(history && history.pushState);
+
+        var anchorScrolls = {
+            ANCHOR_REGEX: /^#[^ ]+$/,
+            OFFSET_HEIGHT_PX: 50,
+
+            /**
+             * Establish events, and fix initial scroll position if a hash is provided.
+             */
+            init: function () {
+                this.scrollToCurrent();
+                $(window).on('hashchange', $.proxy(this, 'scrollToCurrent'));
+                $('body').on('click', 'a', $.proxy(this, 'delegateAnchors'));
+            },
+
+            /**
+             * Return the offset amount to deduct from the normal scroll position.
+             * Modify as appropriate to allow for dynamic calculations
+             */
+            getFixedOffset: function () {
+                return this.OFFSET_HEIGHT_PX;
+            },
+
+            /**
+             * If the provided href is an anchor which resolves to an element on the
+             * page, scroll to it.
+             * @param  {String} href
+             * @return {Boolean} - Was the href an anchor.
+             */
+            scrollIfAnchor: function (href, pushToHistory) {
+                var match, anchorOffset;
+
+                if (!this.ANCHOR_REGEX.test(href)) {
+                    return false;
+                }
+
+                match = document.getElementById(href.slice(1));
+
+                if (match) {
+                    anchorOffset = $(match).offset().top - this.getFixedOffset();
+                    $('html, body').animate({ scrollTop: anchorOffset });
+
+                    // Add the state to history as-per normal anchor links
+                    if (HISTORY_SUPPORT && pushToHistory) {
+                        history.pushState({}, document.title, location.pathname + href);
+                    }
+                }
+
+                return !!match;
+            },
+
+            /**
+             * Attempt to scroll to the current location's hash.
+             */
+            scrollToCurrent: function (e) {
+                if (this.scrollIfAnchor(window.location.hash) && e) {
+                    e.preventDefault();
+                }
+            },
+
+            /**
+             * If the click event's target was an anchor, fix the scroll position.
+             */
+            delegateAnchors: function (e) {
+                var elem = e.target;
+
+                if (this.scrollIfAnchor(elem.getAttribute('href'), true)) {
+                    e.preventDefault();
+                }
+            }
+        };
+
+        $(document).ready($.proxy(anchorScrolls, 'init'));
+    })(window.document, window.history, window.location);
+    
+});
+
+jQuery(window).on('load', function() {
+
+    function adjustForScrollbar() {
+        if ((parseInt(jQuery('#body-inner').height()) + 83) >= jQuery('#body').height()) {
+            jQuery('.nav.nav-next').css({ 'margin-right': getScrollBarWidth() });
+        } else {
+            jQuery('.nav.nav-next').css({ 'margin-right': 0 });
+        }
+    }
+
+    // adjust sidebar for scrollbar
+    adjustForScrollbar();
+
+    jQuery(window).smartresize(function() {
+        adjustForScrollbar();
+    });
+
+    // store this page in session
+    sessionStorage.setItem(jQuery('body').data('url'), 1);
+
+    // loop through the sessionStorage and see if something should be marked as visited
+    for (var url in sessionStorage) {
+        if (sessionStorage.getItem(url) == 1) jQuery('[data-nav-id="' + url + '"]').addClass('visited');
+    }
+
+
+    $(".highlightable").highlight(sessionStorage.getItem('search-value'), { element: 'mark' });
+});
+
+jQuery.extend({
+    highlight: function(node, re, nodeName, className) {
+        if (node.nodeType === 3) {
+            var match = node.data.match(re);
+            if (match) {
+                var highlight = document.createElement(nodeName || 'span');
+                highlight.className = className || 'highlight';
+                var wordNode = node.splitText(match.index);
+                wordNode.splitText(match[0].length);
+                var wordClone = wordNode.cloneNode(true);
+                highlight.appendChild(wordClone);
+                wordNode.parentNode.replaceChild(highlight, wordNode);
+                return 1; //skip added node in parent
+            }
+        } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
+            !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
+            !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
+            for (var i = 0; i < node.childNodes.length; i++) {
+                i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
+            }
+        }
+        return 0;
+    }
+});
+
+jQuery.fn.unhighlight = function(options) {
+    var settings = {
+        className: 'highlight',
+        element: 'span'
+    };
+    jQuery.extend(settings, options);
+
+    return this.find(settings.element + "." + settings.className).each(function() {
+        var parent = this.parentNode;
+        parent.replaceChild(this.firstChild, this);
+        parent.normalize();
+    }).end();
+};
+
+jQuery.fn.highlight = function(words, options) {
+    var settings = {
+        className: 'highlight',
+        element: 'span',
+        caseSensitive: false,
+        wordsOnly: false
+    };
+    jQuery.extend(settings, options);
+
+    if (!words) { return; }
+
+    if (words.constructor === String) {
+        words = [words];
+    }
+    words = jQuery.grep(words, function(word, i) {
+        return word != '';
+    });
+    words = jQuery.map(words, function(word, i) {
+        return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+    });
+    if (words.length == 0) { return this; }
+    ;
+
+    var flag = settings.caseSensitive ? "" : "i";
+    var pattern = "(" + words.join("|") + ")";
+    if (settings.wordsOnly) {
+        pattern = "\\b" + pattern + "\\b";
+    }
+    var re = new RegExp(pattern, flag);
+
+    return this.each(function() {
+        jQuery.highlight(this, re, settings.element, settings.className);
+    });
+};
diff --git a/hugo/themes/learn/layouts/partials/menu.html b/hugo/themes/learn/layouts/partials/menu.html
--- a/hugo/themes/learn/layouts/partials/menu.html
+++ b/hugo/themes/learn/layouts/partials/menu.html
@@ -24,7 +24,7 @@
     {{ $disableShortcutsTitle := .Site.Params.DisableShortcutsTitle }}
     {{ with .Site.Menus.shortcuts }}
       <section id="shortcuts">
-        {{ if not $disableShortcutsTitle }}<h3>{{ T "Shortcuts-Title" }}</h3>{{ else }}<br />{{ end }}
+        <h3>{{ if not $disableShortcutsTitle }}{{ T "Shortcuts-Title" }}{{ end }}</h3>
         <ul>
           {{ range sort . "Weight" }}
             <li>
diff --git a/hugo/themes/learn/static/css/hugo-theme.css b/hugo/themes/learn/static/css/hugo-theme.css
--- a/hugo/themes/learn/static/css/hugo-theme.css
+++ b/hugo/themes/learn/static/css/hugo-theme.css
@@ -136,7 +136,7 @@
 
 /* anchors */
 .anchor {
-  color: #0069f3;
+  color: #00bdf3;
   font-size: 0.5em;
   cursor:pointer;
   visibility:hidden;
diff --git a/hugo/themes/learn/static/css/theme.css b/hugo/themes/learn/static/css/theme.css
--- a/hugo/themes/learn/static/css/theme.css
+++ b/hugo/themes/learn/static/css/theme.css
@@ -52,7 +52,7 @@
     }
 }
 a {
-    color: #0069f3;
+    color: #00bdf3;
 }
 a:hover {
     color: #0082a7;
@@ -218,10 +218,10 @@
 }
 #sidebar h5.active a {
     background: #fff;
-    color: #767676 !important;
+    color: #777 !important;
 }
 #sidebar h5.active i {
-    color: #767676 !important;
+    color: #777 !important;
 }
 #sidebar h5 + ul.topics {
     display: none;
@@ -280,7 +280,7 @@
 }
 #sidebar ul li.active > a {
     background: #fff;
-    color: #767676 !important;
+    color: #777 !important;
     margin-left: -1rem;
     margin-right: -1rem;
     padding-left: 1rem;
