Fix Learn theme addition to git

themes/learn/static/css/atom-one-dark-reasonable.css

@@ -0,0 +1,77 @@
+/*
+
+Atom One Dark With support for ReasonML by Gidi Morris, based off work by Daniel Gamage
+
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+*/
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  line-height: 1.3em;
+  color: #abb2bf;
+  background: #282c34;
+  border-radius: 5px;
+}
+.hljs-keyword, .hljs-operator {
+  color: #F92672;
+}
+.hljs-pattern-match {
+  color: #F92672;
+}
+.hljs-pattern-match .hljs-constructor {
+  color: #61aeee;
+}
+.hljs-function {
+  color: #61aeee;
+}
+.hljs-function .hljs-params {
+  color: #A6E22E;
+}
+.hljs-function .hljs-params .hljs-typing {
+  color: #FD971F;
+}
+.hljs-module-access .hljs-module {
+  color: #7e57c2;
+}
+.hljs-constructor {
+  color: #e2b93d;
+}
+.hljs-constructor .hljs-string {
+  color: #9CCC65;
+}
+.hljs-comment, .hljs-quote {
+  color: #b18eb1;
+  font-style: italic;
+}
+.hljs-doctag, .hljs-formula {
+  color: #c678dd;
+}
+.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
+  color: #e06c75;
+}
+.hljs-literal {
+  color: #56b6c2;
+}
+.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
+  color: #98c379;
+}
+.hljs-built_in, .hljs-class .hljs-title {
+  color: #e6c07b;
+}
+.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
+  color: #d19a66;
+}
+.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
+  color: #61aeee;
+}
+.hljs-emphasis {
+  font-style: italic;
+}
+.hljs-strong {
+  font-weight: bold;
+}
+.hljs-link {
+  text-decoration: underline;
+}

themes/learn/static/css/auto-complete.css

@@ -0,0 +1,47 @@
+.autocomplete-suggestions {
+    text-align: left;
+    cursor: default;
+    border: 1px solid #ccc;
+    border-top: 0;
+    background: #fff;
+    box-shadow: -1px 1px 3px rgba(0,0,0,.1);
+
+    /* core styles should not be changed */
+    position: absolute;
+    display: none;
+    z-index: 9999;
+    max-height: 254px;
+    overflow: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+    
+}
+.autocomplete-suggestion {
+    position: relative;
+    cursor: pointer;
+    padding: 7px;
+    line-height: 23px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #333;
+}
+
+.autocomplete-suggestion b {
+    font-weight: normal;
+    color: #1f8dd6;
+}
+
+.autocomplete-suggestion.selected {
+    background: #333;
+    color: #fff;
+}
+
+.autocomplete-suggestion:hover {
+    background: #444;
+    color: #fff;
+}
+
+.autocomplete-suggestion > .context {
+    font-size: 12px;
+}

themes/learn/static/css/featherlight.min.css

@@ -0,0 +1,8 @@
+/**
+ * Featherlight - ultra slim jQuery lightbox
+ * Version 1.7.13 - http://noelboss.github.io/featherlight/
+ *
+ * Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
+ * MIT Licensed.
+**/
+html.with-featherlight{overflow:hidden}.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight link.featherlight-inner,.featherlight script.featherlight-inner,.featherlight style.featherlight-inner{display:none}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font-family:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000;border:0;padding:0}.featherlight .featherlight-close-icon::-moz-focus-inner{border:0;padding:0}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0;-webkit-overflow-scrolling:touch}.featherlight iframe{border:0}.featherlight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:0;margin-right:0;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}@media print{html.with-featherlight>*>:not(.featherlight){display:none}}

themes/learn/static/css/hugo-theme.css

@@ -0,0 +1,241 @@
+/* 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 15px;
+}
+
+#TableOfContents {
+    font-size: 13px !important;
+    max-height: 85vh;
+    overflow: auto;
+    padding: 15px 5px !important;
+}
+
+#TableOfContents > ul > li > a {
+  font-weight: bold;
+}
+
+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: #00bdf3;
+  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); 
+}

themes/learn/static/css/hybrid.css

@@ -0,0 +1,102 @@
+/*
+
+vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
+
+*/
+
+/*background color*/
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #1d1f21;
+}
+
+/*selection color*/
+.hljs::selection,
+.hljs span::selection {
+  background: #373b41;
+}
+
+.hljs::-moz-selection,
+.hljs span::-moz-selection {
+  background: #373b41;
+}
+
+/*foreground color*/
+.hljs {
+  color: #c5c8c6;
+}
+
+/*color: fg_yellow*/
+.hljs-title,
+.hljs-name {
+  color: #f0c674;
+}
+
+/*color: fg_comment*/
+.hljs-comment,
+.hljs-meta,
+.hljs-meta .hljs-keyword {
+  color: #707880;
+}
+
+/*color: fg_red*/
+.hljs-number,
+.hljs-symbol,
+.hljs-literal,
+.hljs-deletion,
+.hljs-link {
+ color: #cc6666
+}
+
+/*color: fg_green*/
+.hljs-string,
+.hljs-doctag,
+.hljs-addition,
+.hljs-regexp,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #b5bd68;
+}
+
+/*color: fg_purple*/
+.hljs-attribute,
+.hljs-code,
+.hljs-selector-id {
+ color: #b294bb;
+}
+
+/*color: fg_blue*/
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-bullet,
+.hljs-tag {
+ color: #81a2be;
+}
+
+/*color: fg_aqua*/
+.hljs-subst,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #8abeb7;
+}
+
+/*color: fg_orange*/
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-quote,
+.hljs-section,
+.hljs-selector-class {
+  color: #de935f;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

themes/learn/static/css/nucleus.css

@@ -0,0 +1,615 @@
+*, *::before, *::after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+
+@-webkit-viewport {
+  width: device-width; }
+@-moz-viewport {
+  width: device-width; }
+@-ms-viewport {
+  width: device-width; }
+@-o-viewport {
+  width: device-width; }
+@viewport {
+  width: device-width; }
+html {
+  font-size: 100%;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0; }
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block; }
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline; }
+
+audio:not([controls]) {
+  display: none;
+  height: 0; }
+
+[hidden],
+template {
+  display: none; }
+
+a {
+  background: transparent;
+  text-decoration: none; }
+
+a:active,
+a:hover {
+  outline: 0; }
+
+abbr[title] {
+  border-bottom: 1px dotted; }
+
+b,
+strong {
+  font-weight: bold; }
+
+dfn {
+  font-style: italic; }
+
+mark {
+  background: #FFFF27;
+  color: #333; }
+
+sub,
+sup {
+  font-size: 0.8rem;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sup {
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+img {
+  border: 0;
+  max-width: 100%; }
+
+svg:not(:root) {
+  overflow: hidden; }
+
+figure {
+  margin: 1em 40px; }
+
+hr {
+  height: 0; }
+
+pre {
+  overflow: auto; }
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0; }
+
+button {
+  overflow: visible; }
+
+button,
+select {
+  text-transform: none; }
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer; }
+
+button[disabled],
+html input[disabled] {
+  cursor: default; }
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0; }
+
+input {
+  line-height: normal; }
+
+input[type="checkbox"],
+input[type="radio"] {
+  padding: 0; }
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto; }
+
+input[type="search"] {
+  -webkit-appearance: textfield; }
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+legend {
+  border: 0;
+  padding: 0; }
+
+textarea {
+  overflow: auto; }
+
+optgroup {
+  font-weight: bold; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+  width: 100%; }
+
+tr, td, th {
+  vertical-align: middle; }
+
+th, td {
+  padding: 0.425rem 0; }
+
+th {
+  text-align: left; }
+
+.container {
+  width: 75em;
+  margin: 0 auto;
+  padding: 0; }
+  @media only all and (min-width: 60em) and (max-width: 74.938em) {
+    .container {
+      width: 60em; } }
+  @media only all and (min-width: 48em) and (max-width: 59.938em) {
+    .container {
+      width: 48em; } }
+  @media only all and (min-width: 30.063em) and (max-width: 47.938em) {
+    .container {
+      width: 30em; } }
+  @media only all and (max-width: 30em) {
+    .container {
+      width: 100%; } }
+
+.grid {
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row;
+  -moz-flex-flow: row;
+  flex-flow: row;
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+  @media only all and (max-width: 47.938em) {
+    .grid {
+      -webkit-flex-flow: row wrap;
+      -moz-flex-flow: row wrap;
+      flex-flow: row wrap; } }
+
+.block {
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  box-flex: 1;
+  -webkit-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  min-width: 0;
+  min-height: 0; }
+  @media only all and (max-width: 47.938em) {
+    .block {
+      -webkit-box-flex: 0;
+      -moz-box-flex: 0;
+      box-flex: 0;
+      -webkit-flex: 0 100%;
+      -moz-flex: 0 100%;
+      -ms-flex: 0 100%;
+      flex: 0 100%; } }
+
+.content {
+  margin: 0.625rem;
+  padding: 0.938rem; }
+
+@media only all and (max-width: 47.938em) {
+  body [class*="size-"] {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 100%;
+    -moz-flex: 0 100%;
+    -ms-flex: 0 100%;
+    flex: 0 100%; } }
+
+.size-1-2 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0 50%;
+  -moz-flex: 0 50%;
+  -ms-flex: 0 50%;
+  flex: 0 50%; }
+
+.size-1-3 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0 33.33333%;
+  -moz-flex: 0 33.33333%;
+  -ms-flex: 0 33.33333%;
+  flex: 0 33.33333%; }
+
+.size-1-4 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0 25%;
+  -moz-flex: 0 25%;
+  -ms-flex: 0 25%;
+  flex: 0 25%; }
+
+.size-1-5 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0 20%;
+  -moz-flex: 0 20%;
+  -ms-flex: 0 20%;
+  flex: 0 20%; }
+
+.size-1-6 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0 16.66667%;
+  -moz-flex: 0 16.66667%;
+  -ms-flex: 0 16.66667%;
+  flex: 0 16.66667%; }
+
+.size-1-7 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0 14.28571%;
+  -moz-flex: 0 14.28571%;
+  -ms-flex: 0 14.28571%;
+  flex: 0 14.28571%; }
+
+.size-1-8 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0 12.5%;
+  -moz-flex: 0 12.5%;
+  -ms-flex: 0 12.5%;
+  flex: 0 12.5%; }
+
+.size-1-9 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0 11.11111%;
+  -moz-flex: 0 11.11111%;
+  -ms-flex: 0 11.11111%;
+  flex: 0 11.11111%; }
+
+.size-1-10 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0 10%;
+  -moz-flex: 0 10%;
+  -ms-flex: 0 10%;
+  flex: 0 10%; }
+
+.size-1-11 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0 9.09091%;
+  -moz-flex: 0 9.09091%;
+  -ms-flex: 0 9.09091%;
+  flex: 0 9.09091%; }
+
+.size-1-12 {
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  box-flex: 0;
+  -webkit-flex: 0 8.33333%;
+  -moz-flex: 0 8.33333%;
+  -ms-flex: 0 8.33333%;
+  flex: 0 8.33333%; }
+
+@media only all and (min-width: 48em) and (max-width: 59.938em) {
+  .size-tablet-1-2 {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 50%;
+    -moz-flex: 0 50%;
+    -ms-flex: 0 50%;
+    flex: 0 50%; }
+
+  .size-tablet-1-3 {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 33.33333%;
+    -moz-flex: 0 33.33333%;
+    -ms-flex: 0 33.33333%;
+    flex: 0 33.33333%; }
+
+  .size-tablet-1-4 {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 25%;
+    -moz-flex: 0 25%;
+    -ms-flex: 0 25%;
+    flex: 0 25%; }
+
+  .size-tablet-1-5 {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 20%;
+    -moz-flex: 0 20%;
+    -ms-flex: 0 20%;
+    flex: 0 20%; }
+
+  .size-tablet-1-6 {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 16.66667%;
+    -moz-flex: 0 16.66667%;
+    -ms-flex: 0 16.66667%;
+    flex: 0 16.66667%; }
+
+  .size-tablet-1-7 {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 14.28571%;
+    -moz-flex: 0 14.28571%;
+    -ms-flex: 0 14.28571%;
+    flex: 0 14.28571%; }
+
+  .size-tablet-1-8 {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 12.5%;
+    -moz-flex: 0 12.5%;
+    -ms-flex: 0 12.5%;
+    flex: 0 12.5%; }
+
+  .size-tablet-1-9 {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 11.11111%;
+    -moz-flex: 0 11.11111%;
+    -ms-flex: 0 11.11111%;
+    flex: 0 11.11111%; }
+
+  .size-tablet-1-10 {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 10%;
+    -moz-flex: 0 10%;
+    -ms-flex: 0 10%;
+    flex: 0 10%; }
+
+  .size-tablet-1-11 {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 9.09091%;
+    -moz-flex: 0 9.09091%;
+    -ms-flex: 0 9.09091%;
+    flex: 0 9.09091%; }
+
+  .size-tablet-1-12 {
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    box-flex: 0;
+    -webkit-flex: 0 8.33333%;
+    -moz-flex: 0 8.33333%;
+    -ms-flex: 0 8.33333%;
+    flex: 0 8.33333%; } }
+@media only all and (max-width: 47.938em) {
+  @supports not (flex-wrap: wrap) {
+    .grid {
+      display: block;
+      -webkit-box-lines: inherit;
+      -moz-box-lines: inherit;
+      box-lines: inherit;
+      -webkit-flex-wrap: inherit;
+      -moz-flex-wrap: inherit;
+      -ms-flex-wrap: inherit;
+      flex-wrap: inherit; }
+
+    .block {
+      display: block;
+      -webkit-box-flex: inherit;
+      -moz-box-flex: inherit;
+      box-flex: inherit;
+      -webkit-flex: inherit;
+      -moz-flex: inherit;
+      -ms-flex: inherit;
+      flex: inherit; } } }
+.first-block {
+  -webkit-box-ordinal-group: 0;
+  -webkit-order: -1;
+  -ms-flex-order: -1;
+  order: -1; }
+
+.last-block {
+  -webkit-box-ordinal-group: 2;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1; }
+
+.fixed-blocks {
+  -webkit-flex-flow: row wrap;
+  -moz-flex-flow: row wrap;
+  flex-flow: row wrap; }
+  .fixed-blocks .block {
+    -webkit-box-flex: inherit;
+    -moz-box-flex: inherit;
+    box-flex: inherit;
+    -webkit-flex: inherit;
+    -moz-flex: inherit;
+    -ms-flex: inherit;
+    flex: inherit;
+    width: 25%; }
+    @media only all and (min-width: 60em) and (max-width: 74.938em) {
+      .fixed-blocks .block {
+        width: 33.33333%; } }
+    @media only all and (min-width: 48em) and (max-width: 59.938em) {
+      .fixed-blocks .block {
+        width: 50%; } }
+    @media only all and (max-width: 47.938em) {
+      .fixed-blocks .block {
+        width: 100%; } }
+
+body {
+  font-size: 1.05rem;
+  line-height: 1.7; }
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0.85rem 0 1.7rem 0;
+  text-rendering: optimizeLegibility; }
+
+h1 {
+  font-size: 3.25rem; }
+
+h2 {
+  font-size: 2.55rem; }
+
+h3 {
+  font-size: 2.15rem; }
+
+h4 {
+  font-size: 1.8rem; }
+
+h5 {
+  font-size: 1.4rem; }
+
+h6 {
+  font-size: 0.9rem; }
+
+p {
+  margin: 1.7rem 0; }
+
+ul, ol {
+  margin-top: 1.7rem;
+  margin-bottom: 1.7rem; }
+  ul ul, ul ol, ol ul, ol ol {
+    margin-top: 0;
+    margin-bottom: 0; }
+
+blockquote {
+  margin: 1.7rem 0;
+  padding-left: 0.85rem; }
+
+cite {
+  display: block;
+  font-size: 0.925rem; }
+  cite:before {
+    content: "\2014 \0020"; }
+
+pre {
+  margin: 1.7rem 0;
+  padding: 0.938rem; }
+
+code {
+  vertical-align: bottom; }
+
+small {
+  font-size: 0.925rem; }
+
+hr {
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  margin: 1.7rem 0; }
+
+fieldset {
+  border: 0;
+  padding: 0.938rem;
+  margin: 0 0 1.7rem 0; }
+
+input,
+label,
+select {
+  display: block; }
+
+label {
+  margin-bottom: 0.425rem; }
+  label.required:after {
+    content: "*"; }
+  label abbr {
+    display: none; }
+
+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] {
+  -webkit-transition: border-color;
+  -moz-transition: border-color;
+  transition: border-color;
+  border-radius: 0.1875rem;
+  margin-bottom: 0.85rem;
+  padding: 0.425rem 0.425rem;
+  width: 100%; }
+  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 {
+    outline: none; }
+
+textarea {
+  resize: vertical; }
+
+input[type="checkbox"], input[type="radio"] {
+  display: inline;
+  margin-right: 0.425rem; }
+
+input[type="file"] {
+  width: 100%; }
+
+select {
+  width: auto;
+  max-width: 100%;
+  margin-bottom: 1.7rem; }
+
+button,
+input[type="submit"] {
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  border: inherit; }

themes/learn/static/css/perfect-scrollbar.min.css

@@ -0,0 +1,2 @@
+/* perfect-scrollbar v0.6.13 */
+.ps-container{-ms-touch-action:auto;touch-action:auto;overflow:hidden !important;-ms-overflow-style:none}@supports (-ms-overflow-style: none){.ps-container{overflow:auto !important}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.ps-container{overflow:auto !important}}.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block;background-color:transparent}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:.9}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999;height:11px}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:.9}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999;width:11px}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;bottom:0px;height:15px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;-o-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;-moz-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;bottom:2px;height:6px}.ps-container>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x,.ps-container>.ps-scrollbar-x-rail:active>.ps-scrollbar-x{height:11px}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;right:0;width:15px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;-o-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;-moz-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;right:2px;width:6px}.ps-container>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y,.ps-container>.ps-scrollbar-y-rail:active>.ps-scrollbar-y{width:11px}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:.9}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999;height:11px}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:.9}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999;width:11px}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999}

themes/learn/static/css/tabs.css

@@ -0,0 +1,43 @@
+#body .tab-nav-button {
+    border-width: 1px 1px 1px 1px !important;
+    border-color: #ccc !important;
+    border-radius: 4px 4px 0 0 !important;
+    background-color: #ddd !important;
+    float: left;
+    display: block;
+    position: relative;
+    margin-left: 4px;
+    bottom: -1px;
+}
+#body .tab-nav-button:first-child {
+    margin-left: 0px;
+}
+#body .tab-nav-button.active {
+    background-color: #fff !important;
+    border-bottom-color: #fff !important;
+}
+
+#body .tab-panel {
+    margin-top: 32px;
+    margin-bottom: 32px;
+}
+#body .tab-content {
+    display: block;
+    clear: both;
+    padding: 8px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #ccc;
+}
+#body .tab-content .tab-item{
+    display: none;
+}
+
+#body .tab-content .tab-item.active{
+    display: block;
+}
+
+#body .tab-item pre{
+    margin-bottom: 0;
+    margin-top: 0;
+}

themes/learn/static/css/tags.css

@@ -0,0 +1,49 @@
+/* Tags */
+
+#head-tags{
+    margin-left:1em;  
+    margin-top:1em;
+}
+  
+#body .tags a.tag-link {
+    display: inline-block;
+    line-height: 2em;
+    font-size: 0.8em;
+    position: relative;
+    margin: 0 16px 8px 0;
+    padding: 0 10px 0 12px;
+    background: #8451a1;    
+    
+    -webkit-border-bottom-right-radius: 3px;    
+    border-bottom-right-radius: 3px;
+    -webkit-border-top-right-radius: 3px;    
+    border-top-right-radius: 3px;
+
+    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    color: #fff;
+}
+  
+#body .tags a.tag-link:before {
+    content: "";
+    position: absolute;
+    top:0;
+    left: -1em;
+    width: 0;
+    height: 0;
+    border-color: transparent #8451a1 transparent transparent;
+    border-style: solid;
+    border-width: 1em 1em 1em 0;        
+}
+  
+#body .tags a.tag-link:after {
+    content: "";
+    position: absolute;
+    top: 10px;
+    left: 1px;
+    width: 5px;
+    height: 5px;
+    -webkit-border-radius: 50%;
+    border-radius: 100%;
+    background: #fff;    
+}

themes/learn/static/css/theme-blue.css

@@ -0,0 +1,128 @@
+
+:root{
+
+    --MAIN-TEXT-color:#323232; /* Color of text by default */
+    --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
+    --MAIN-LINK-color:#1C90F3; /* Color of links */
+    --MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */
+    --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
+
+    --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
+    --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
+
+    --MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */
+    --MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */
+
+    --MENU-SEARCH-BG-color:#167ad0; /* Search field background color (by default borders + icons) */
+    --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */
+    --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* Override search field icons color */
+
+    --MENU-SECTIONS-ACTIVE-BG-color:#20272b; /* Background color of the active section and its childs */
+    --MENU-SECTIONS-BG-color:#252c31; /* Background color of other sections */
+    --MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */
+    --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6;  /* Color of links in menu, when hovered */
+    --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
+    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
+
+    --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
+    --MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
+
+}
+
+body {
+    color: var(--MAIN-TEXT-color) !important;
+}
+
+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: none;
+    box-shadow: none;
+}
+
+h2, h3, h4, h5 {
+    color: var(--MAIN-TITLES-TEXT-color) !important;
+}
+
+a {
+    color: var(--MAIN-LINK-color);
+}
+
+.anchor {
+    color: var(--MAIN-ANCHOR-color);
+}
+
+a:hover {
+    color: var(--MAIN-LINK-HOVER-color);
+}
+
+#sidebar ul li.visited > a .read-icon {
+	color: var(--MENU-VISITED-color);
+}
+
+#body a.highlight:after {
+    display: block;
+    content: "";
+    height: 1px;
+    width: 0%;
+    -webkit-transition: width 0.5s ease;
+    -moz-transition: width 0.5s ease;
+    -ms-transition: width 0.5s ease;
+    transition: width 0.5s ease;
+    background-color: var(--MAIN-LINK-HOVER-color);
+}
+#sidebar {
+	background-color: var(--MENU-SECTIONS-BG-color);
+}
+#sidebar #header-wrapper {
+    background: var(--MENU-HEADER-BG-color);
+    color: var(--MENU-SEARCH-BOX-color);
+    border-color: var(--MENU-HEADER-BORDER-color);
+}
+#sidebar .searchbox {
+	border-color: var(--MENU-SEARCH-BOX-color);
+    background: var(--MENU-SEARCH-BG-color);
+}
+#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
+    background: var(--MENU-SECTIONS-ACTIVE-BG-color);
+}
+#sidebar .searchbox * {
+    color: var(--MENU-SEARCH-BOX-ICONS-color);
+}
+
+#sidebar a {
+    color: var(--MENU-SECTIONS-LINK-color);
+}
+
+#sidebar a:hover {
+    color: var(--MENU-SECTIONS-LINK-HOVER-color);
+}
+
+#sidebar ul li.active > a {
+    background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
+    color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
+}
+
+#sidebar hr {
+    border-color: var(--MENU-SECTION-HR-color);
+}
+
+#body .tags a.tag-link {
+    background-color: var(--MENU-HEADER-BG-color);
+}
+
+#body .tags a.tag-link:before {
+    border-right-color: var(--MENU-HEADER-BG-color);
+}
+
+#homelinks {
+  background: var(--MENU-HEADER-BG-color);
+  background-color: var(--MENU-HEADER-BORDER-color);
+  border-bottom-color: var(--MENU-HEADER-BORDER-color);
+}
+
+#homelinks a {
+  color: var(--MENU-HOME-LINK-color);
+}
+
+#homelinks a:hover {
+  color: var(--MENU-HOME-LINK-HOVERED-color);
+}

themes/learn/static/css/theme-green.css

@@ -0,0 +1,128 @@
+
+:root{
+
+    --MAIN-TEXT-color:#323232; /* Color of text by default */
+    --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
+    --MAIN-LINK-color:#599a3e; /* Color of links */
+    --MAIN-LINK-HOVER-color:#3f6d2c; /* Color of hovered links */
+    --MAIN-ANCHOR-color: #599a3e; /* color of anchors on titles */
+
+    --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
+    --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
+
+    --MENU-HEADER-BG-color:#74b559; /* Background color of menu header */
+    --MENU-HEADER-BORDER-color:#9cd484; /*Color of menu header border */
+
+    --MENU-SEARCH-BG-color:#599a3e; /* Search field background color (by default borders + icons) */
+    --MENU-SEARCH-BOX-color: #84c767; /* Override search field border color */
+    --MENU-SEARCH-BOX-ICONS-color: #c7f7c4; /* Override search field icons color */
+
+    --MENU-SECTIONS-ACTIVE-BG-color:#1b211c; /* Background color of the active section and its childs */
+    --MENU-SECTIONS-BG-color:#222723; /* Background color of other sections */
+    --MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */
+    --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6;  /* Color of links in menu, when hovered */
+    --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
+    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
+
+    --MENU-VISITED-color: #599a3e; /* Color of 'page visited' icons in menu */
+    --MENU-SECTION-HR-color: #18211c; /* Color of <hr> separator in menu */
+
+}
+
+body {
+    color: var(--MAIN-TEXT-color) !important;
+}
+
+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: none;
+    box-shadow: none;
+}
+
+h2, h3, h4, h5 {
+    color: var(--MAIN-TITLES-TEXT-color) !important;
+}
+
+a {
+    color: var(--MAIN-LINK-color);
+}
+
+.anchor {
+    color: var(--MAIN-ANCHOR-color);
+}
+
+a:hover {
+    color: var(--MAIN-LINK-HOVER-color);
+}
+
+#sidebar ul li.visited > a .read-icon {
+	color: var(--MENU-VISITED-color);
+}
+
+#body a.highlight:after {
+    display: block;
+    content: "";
+    height: 1px;
+    width: 0%;
+    -webkit-transition: width 0.5s ease;
+    -moz-transition: width 0.5s ease;
+    -ms-transition: width 0.5s ease;
+    transition: width 0.5s ease;
+    background-color: var(--MAIN-LINK-HOVER-color);
+}
+#sidebar {
+	background-color: var(--MENU-SECTIONS-BG-color);
+}
+#sidebar #header-wrapper {
+    background: var(--MENU-HEADER-BG-color);
+    color: var(--MENU-SEARCH-BOX-color);
+    border-color: var(--MENU-HEADER-BORDER-color);
+}
+#sidebar .searchbox {
+	border-color: var(--MENU-SEARCH-BOX-color);
+    background: var(--MENU-SEARCH-BG-color);
+}
+#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
+    background: var(--MENU-SECTIONS-ACTIVE-BG-color);
+}
+#sidebar .searchbox * {
+    color: var(--MENU-SEARCH-BOX-ICONS-color);
+}
+
+#sidebar a {
+    color: var(--MENU-SECTIONS-LINK-color);
+}
+
+#sidebar a:hover {
+    color: var(--MENU-SECTIONS-LINK-HOVER-color);
+}
+
+#sidebar ul li.active > a {
+    background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
+    color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
+}
+
+#sidebar hr {
+    border-color: var(--MENU-SECTION-HR-color);
+}
+
+#body .tags a.tag-link {
+    background-color: var(--MENU-HEADER-BG-color);
+}
+
+#body .tags a.tag-link:before {
+    border-right-color: var(--MENU-HEADER-BG-color);
+}
+
+#homelinks {
+  background: var(--MENU-HEADER-BG-color);
+  background-color: var(--MENU-HEADER-BORDER-color);
+  border-bottom-color: var(--MENU-HEADER-BORDER-color);
+}
+
+#homelinks a {
+  color: var(--MENU-HOME-LINK-color);
+}
+
+#homelinks a:hover {
+  color: var(--MENU-HOME-LINK-HOVERED-color);
+}

themes/learn/static/css/theme-red.css

@@ -0,0 +1,128 @@
+
+:root{
+
+    --MAIN-TEXT-color:#323232; /* Color of text by default */
+    --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
+    --MAIN-LINK-color:#f31c1c; /* Color of links */
+    --MAIN-LINK-HOVER-color:#d01616; /* Color of hovered links */
+    --MAIN-ANCHOR-color: #f31c1c; /* color of anchors on titles */
+
+    --MENU-HOME-LINK-color: #ccc; /* Color of the home button text */
+    --MENU-HOME-LINK-HOVER-color: #e6e6e6; /* Color of the hovered home button text */
+
+    --MENU-HEADER-BG-color:#dc1010; /* Background color of menu header */
+    --MENU-HEADER-BORDER-color:#e23131; /*Color of menu header border */
+
+    --MENU-SEARCH-BG-color:#b90000; /* Search field background color (by default borders + icons) */
+    --MENU-SEARCH-BOX-color: #ef2020; /* Override search field border color */
+    --MENU-SEARCH-BOX-ICONS-color: #fda1a1; /* Override search field icons color */
+
+    --MENU-SECTIONS-ACTIVE-BG-color:#2b2020; /* Background color of the active section and its childs */
+    --MENU-SECTIONS-BG-color:#312525; /* Background color of other sections */
+    --MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */
+    --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6;  /* Color of links in menu, when hovered */
+    --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
+    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
+
+    --MENU-VISITED-color: #ff3333; /* Color of 'page visited' icons in menu */
+    --MENU-SECTION-HR-color: #2b2020; /* Color of <hr> separator in menu */
+
+}
+
+body {
+    color: var(--MAIN-TEXT-color) !important;
+}
+
+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: none;
+    box-shadow: none;
+}
+
+h2, h3, h4, h5 {
+    color: var(--MAIN-TITLES-TEXT-color) !important;
+}
+
+a {
+    color: var(--MAIN-LINK-color);
+}
+
+.anchor {
+    color: var(--MAIN-ANCHOR-color);
+}
+
+a:hover {
+    color: var(--MAIN-LINK-HOVER-color);
+}
+
+#sidebar ul li.visited > a .read-icon {
+	color: var(--MENU-VISITED-color);
+}
+
+#body a.highlight:after {
+    display: block;
+    content: "";
+    height: 1px;
+    width: 0%;
+    -webkit-transition: width 0.5s ease;
+    -moz-transition: width 0.5s ease;
+    -ms-transition: width 0.5s ease;
+    transition: width 0.5s ease;
+    background-color: var(--MAIN-LINK-HOVER-color);
+}
+#sidebar {
+	background-color: var(--MENU-SECTIONS-BG-color);
+}
+#sidebar #header-wrapper {
+    background: var(--MENU-HEADER-BG-color);
+    color: var(--MENU-SEARCH-BOX-color);
+    border-color: var(--MENU-HEADER-BORDER-color);
+}
+#sidebar .searchbox {
+	border-color: var(--MENU-SEARCH-BOX-color);
+    background: var(--MENU-SEARCH-BG-color);
+}
+#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
+    background: var(--MENU-SECTIONS-ACTIVE-BG-color);
+}
+#sidebar .searchbox * {
+    color: var(--MENU-SEARCH-BOX-ICONS-color);
+}
+
+#sidebar a {
+    color: var(--MENU-SECTIONS-LINK-color);
+}
+
+#sidebar a:hover {
+    color: var(--MENU-SECTIONS-LINK-HOVER-color);
+}
+
+#sidebar ul li.active > a {
+    background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
+    color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
+}
+
+#sidebar hr {
+    border-color: var(--MENU-SECTION-HR-color);
+}
+
+#body .tags a.tag-link {
+    background-color: var(--MENU-HEADER-BG-color);
+}
+
+#body .tags a.tag-link:before {
+    border-right-color: var(--MENU-HEADER-BG-color);
+}
+
+#homelinks {
+  background: var(--MENU-HEADER-BG-color);
+  background-color: var(--MENU-HEADER-BORDER-color);
+  border-bottom-color: var(--MENU-HEADER-BORDER-color);
+}
+
+#homelinks a {
+  color: var(--MENU-HOME-LINK-color);
+}
+
+#homelinks a:hover {
+  color: var(--MENU-HOME-LINK-HOVERED-color);
+}

themes/learn/static/images/clippy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="896" height="1024"><path d="M128 768h256v64H128v-64zm320-384H128v64h320v-64zm128 192V448L384 640l192 192V704h320V576H576zm-288-64H128v64h160v-64zM128 704h160v-64H128v64zm576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z"/></svg>

themes/learn/static/js/hugo-learn.js

@@ -0,0 +1,94 @@
+// Get Parameters from some url
+var getUrlParameter = function getUrlParameter(sPageURL) {
+    var url = sPageURL.split('?');
+    var obj = {};
+    if (url.length == 2) {
+      var sURLVariables = url[1].split('&'),
+          sParameterName,
+          i;
+      for (i = 0; i < sURLVariables.length; i++) {
+          sParameterName = sURLVariables[i].split('=');
+          obj[sParameterName[0]] = sParameterName[1];
+      }
+    }
+    return obj;
+};
+
+// Execute actions on images generated from Markdown pages
+var images = $("div#body-inner img").not(".inline");
+// Wrap image inside a featherlight (to get a full size view in a popup)
+images.wrap(function(){
+  var image =$(this);
+  var o = getUrlParameter(image[0].src);
+  var f = o['featherlight'];
+  // IF featherlight is false, do not use feather light
+  if (f != 'false') {
+    if (!image.parent("a").length) {
+      return "<a href='" + image[0].src + "' data-featherlight='image'></a>";
+    }
+  }
+});
+
+// Change styles, depending on parameters set to the image
+images.each(function(index){
+  var image = $(this)
+  var o = getUrlParameter(image[0].src);
+  if (typeof o !== "undefined") {
+    var h = o["height"];
+    var w = o["width"];
+    var c = o["classes"];
+    image.css("width", function() {
+      if (typeof w !== "undefined") {
+        return w;
+      } else {
+        return "auto";
+      }
+    });
+    image.css("height", function() {
+      if (typeof h !== "undefined") {
+        return h;
+      } else {
+        return "auto";
+      }
+    });
+    if (typeof c !== "undefined") {
+      var classes = c.split(',');
+      for (i = 0; i < classes.length; i++) {
+        image.addClass(classes[i]);
+      }
+    }
+  }
+});
+
+// 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 ClipboardJS('.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');
+  });
+  $('code.language-mermaid').each(function(index, element) {
+    var content = $(element).html().replace(/&amp;/g, '&');
+    $(element).parent().replaceWith('<div class="mermaid" align="center">' + content + '</div>');
+  });
+});

themes/learn/static/js/jquery.sticky.js

@@ -0,0 +1,288 @@
+// Sticky Plugin v1.0.4 for jQuery
+// =============
+// Author: Anthony Garand
+// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
+// Improvements by Leonardo C. Daronco (daronco)
+// Created: 02/14/2011
+// Date: 07/20/2015
+// Website: http://stickyjs.com/
+// Description: Makes an element on the page stick on the screen as you scroll
+//              It will only set the 'top' and 'position' of your element, you
+//              might need to adjust the width in some cases.
+
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // Node/CommonJS
+        module.exports = factory(require('jquery'));
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+}(function ($) {
+    var slice = Array.prototype.slice; // save ref to original slice()
+    var splice = Array.prototype.splice; // save ref to original slice()
+
+  var defaults = {
+      topSpacing: 0,
+      bottomSpacing: 0,
+      className: 'is-sticky',
+      wrapperClassName: 'sticky-wrapper',
+      center: false,
+      getWidthFrom: '',
+      widthFromWrapper: true, // works only when .getWidthFrom is empty
+      responsiveWidth: false,
+      zIndex: 'inherit'
+    },
+    $window = $(window),
+    $document = $(document),
+    sticked = [],
+    windowHeight = $window.height(),
+    scroller = function() {
+      var scrollTop = $window.scrollTop(),
+        documentHeight = $document.height(),
+        dwh = documentHeight - windowHeight,
+        extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
+
+      for (var i = 0, l = sticked.length; i < l; i++) {
+        var s = sticked[i],
+          elementTop = s.stickyWrapper.offset().top,
+          etse = elementTop - s.topSpacing - extra;
+
+        //update height in case of dynamic content
+        s.stickyWrapper.css('height', s.stickyElement.outerHeight());
+
+        if (scrollTop <= etse) {
+          if (s.currentTop !== null) {
+            s.stickyElement
+              .css({
+                'width': '',
+                'position': '',
+                'top': '',
+                'z-index': ''
+              });
+            s.stickyElement.parent().removeClass(s.className);
+            s.stickyElement.trigger('sticky-end', [s]);
+            s.currentTop = null;
+          }
+        }
+        else {
+          var newTop = documentHeight - s.stickyElement.outerHeight()
+            - s.topSpacing - s.bottomSpacing - scrollTop - extra;
+          if (newTop < 0) {
+            newTop = newTop + s.topSpacing;
+          } else {
+            newTop = s.topSpacing;
+          }
+          if (s.currentTop !== newTop) {
+            var newWidth;
+            if (s.getWidthFrom) {
+                padding =  s.stickyElement.innerWidth() - s.stickyElement.width();
+                newWidth = $(s.getWidthFrom).width() - padding || null;
+            } else if (s.widthFromWrapper) {
+                newWidth = s.stickyWrapper.width();
+            }
+            if (newWidth == null) {
+                newWidth = s.stickyElement.width();
+            }
+            s.stickyElement
+              .css('width', newWidth)
+              .css('position', 'fixed')
+              .css('top', newTop)
+              .css('z-index', s.zIndex);
+
+            s.stickyElement.parent().addClass(s.className);
+
+            if (s.currentTop === null) {
+              s.stickyElement.trigger('sticky-start', [s]);
+            } else {
+              // sticky is started but it have to be repositioned
+              s.stickyElement.trigger('sticky-update', [s]);
+            }
+
+            if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) {
+              // just reached bottom || just started to stick but bottom is already reached
+              s.stickyElement.trigger('sticky-bottom-reached', [s]);
+            } else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) {
+              // sticky is started && sticked at topSpacing && overflowing from top just finished
+              s.stickyElement.trigger('sticky-bottom-unreached', [s]);
+            }
+
+            s.currentTop = newTop;
+          }
+
+          // Check if sticky has reached end of container and stop sticking
+          var stickyWrapperContainer = s.stickyWrapper.parent();
+          var unstick = (s.stickyElement.offset().top + s.stickyElement.outerHeight() >= stickyWrapperContainer.offset().top + stickyWrapperContainer.outerHeight()) && (s.stickyElement.offset().top <= s.topSpacing);
+
+          if( unstick ) {
+            s.stickyElement
+              .css('position', 'absolute')
+              .css('top', '')
+              .css('bottom', 0)
+              .css('z-index', '');
+          } else {
+            s.stickyElement
+              .css('position', 'fixed')
+              .css('top', newTop)
+              .css('bottom', '')
+              .css('z-index', s.zIndex);
+          }
+        }
+      }
+    },
+    resizer = function() {
+      windowHeight = $window.height();
+
+      for (var i = 0, l = sticked.length; i < l; i++) {
+        var s = sticked[i];
+        var newWidth = null;
+        if (s.getWidthFrom) {
+            if (s.responsiveWidth) {
+                newWidth = $(s.getWidthFrom).width();
+            }
+        } else if(s.widthFromWrapper) {
+            newWidth = s.stickyWrapper.width();
+        }
+        if (newWidth != null) {
+            s.stickyElement.css('width', newWidth);
+        }
+      }
+    },
+    methods = {
+      init: function(options) {
+        return this.each(function() {
+          var o = $.extend({}, defaults, options);
+          var stickyElement = $(this);
+
+          var stickyId = stickyElement.attr('id');
+          var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName;
+          var wrapper = $('<div></div>')
+            .attr('id', wrapperId)
+            .addClass(o.wrapperClassName);
+
+          stickyElement.wrapAll(function() {
+            if ($(this).parent("#" + wrapperId).length == 0) {
+                    return wrapper;
+            }
+});
+
+          var stickyWrapper = stickyElement.parent();
+
+          if (o.center) {
+            stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
+          }
+
+          if (stickyElement.css("float") === "right") {
+            stickyElement.css({"float":"none"}).parent().css({"float":"right"});
+          }
+
+          o.stickyElement = stickyElement;
+          o.stickyWrapper = stickyWrapper;
+          o.currentTop    = null;
+
+          sticked.push(o);
+
+          methods.setWrapperHeight(this);
+          methods.setupChangeListeners(this);
+        });
+      },
+
+      setWrapperHeight: function(stickyElement) {
+        var element = $(stickyElement);
+        var stickyWrapper = element.parent();
+        if (stickyWrapper) {
+          stickyWrapper.css('height', element.outerHeight());
+        }
+      },
+
+      setupChangeListeners: function(stickyElement) {
+        if (window.MutationObserver) {
+          var mutationObserver = new window.MutationObserver(function(mutations) {
+            if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
+              methods.setWrapperHeight(stickyElement);
+            }
+          });
+          mutationObserver.observe(stickyElement, {subtree: true, childList: true});
+        } else {
+          if (window.addEventListener) {
+            stickyElement.addEventListener('DOMNodeInserted', function() {
+              methods.setWrapperHeight(stickyElement);
+            }, false);
+            stickyElement.addEventListener('DOMNodeRemoved', function() {
+              methods.setWrapperHeight(stickyElement);
+            }, false);
+          } else if (window.attachEvent) {
+            stickyElement.attachEvent('onDOMNodeInserted', function() {
+              methods.setWrapperHeight(stickyElement);
+            });
+            stickyElement.attachEvent('onDOMNodeRemoved', function() {
+              methods.setWrapperHeight(stickyElement);
+            });
+          }
+        }
+      },
+      update: scroller,
+      unstick: function(options) {
+        return this.each(function() {
+          var that = this;
+          var unstickyElement = $(that);
+
+          var removeIdx = -1;
+          var i = sticked.length;
+          while (i-- > 0) {
+            if (sticked[i].stickyElement.get(0) === that) {
+                splice.call(sticked,i,1);
+                removeIdx = i;
+            }
+          }
+          if(removeIdx !== -1) {
+            unstickyElement.unwrap();
+            unstickyElement
+              .css({
+                'width': '',
+                'position': '',
+                'top': '',
+                'float': '',
+                'z-index': ''
+              })
+            ;
+          }
+        });
+      }
+    };
+
+  // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
+  if (window.addEventListener) {
+    window.addEventListener('scroll', scroller, false);
+    window.addEventListener('resize', resizer, false);
+  } else if (window.attachEvent) {
+    window.attachEvent('onscroll', scroller);
+    window.attachEvent('onresize', resizer);
+  }
+
+  $.fn.sticky = function(method) {
+    if (methods[method]) {
+      return methods[method].apply(this, slice.call(arguments, 1));
+    } else if (typeof method === 'object' || !method ) {
+      return methods.init.apply( this, arguments );
+    } else {
+      $.error('Method ' + method + ' does not exist on jQuery.sticky');
+    }
+  };
+
+  $.fn.unstick = function(method) {
+    if (methods[method]) {
+      return methods[method].apply(this, slice.call(arguments, 1));
+    } else if (typeof method === 'object' || !method ) {
+      return methods.unstick.apply( this, arguments );
+    } else {
+      $.error('Method ' + method + ' does not exist on jQuery.sticky');
+    }
+  };
+  $(function() {
+    setTimeout(scroller, 0);
+  });
+}));

themes/learn/static/js/learn.js

@@ -0,0 +1,496 @@
+// 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;
+}
+
+function switchTab(tabGroup, tabId) {
+    allTabItems = jQuery("[data-tab-group='"+tabGroup+"']");
+    targetTabItems = jQuery("[data-tab-group='"+tabGroup+"'][data-tab-item='"+tabId+"']");
+
+    // if event is undefined then switchTab was called from restoreTabSelection
+    // so it's not a button event and we don't need to safe the selction or
+    // prevent page jump
+    var isButtonEvent = event != undefined;
+
+    if(isButtonEvent){
+      // save button position relative to viewport
+      var yposButton = event.target.getBoundingClientRect().top;
+    }
+
+    allTabItems.removeClass("active");
+    targetTabItems.addClass("active");
+
+    if(isButtonEvent){
+      // reset screen to the same position relative to clicked button to prevent page jump
+      var yposButtonDiff = event.target.getBoundingClientRect().top - yposButton;
+      window.scrollTo(window.scrollX, window.scrollY+yposButtonDiff);
+
+      // Store the selection to make it persistent
+      if(window.localStorage){
+          var selectionsJSON = window.localStorage.getItem("tabSelections");
+          if(selectionsJSON){
+            var tabSelections = JSON.parse(selectionsJSON);
+          }else{
+            var tabSelections = {};
+          }
+          tabSelections[tabGroup] = tabId;
+          window.localStorage.setItem("tabSelections", JSON.stringify(tabSelections));
+      }
+    }
+}
+
+function restoreTabSelections() {
+    if(window.localStorage){
+        var selectionsJSON = window.localStorage.getItem("tabSelections");
+        if(selectionsJSON){
+          var tabSelections = JSON.parse(selectionsJSON);
+        }else{
+          var tabSelections = {};
+        }
+        Object.keys(tabSelections).forEach(function(tabGroup) {
+          var tabItem = tabSelections[tabGroup];
+          switchTab(tabGroup, tabItem);
+        });
+    }
+}
+
+// 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() {
+    restoreTabSelections();
+
+    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
+    var clipInit = false;
+    $('code').each(function() {
+        var code = $(this),
+            text = code.text();
+
+        if (text.length > 5) {
+            if (!clipInit) {
+                var text, clip = new ClipboardJS('.copy-to-clipboard', {
+                    text: function(trigger) {
+                        text = $(trigger).prev('code').text();
+                        return text.replace(/^\$\s/gm, '');
+                    }
+                });
+
+                var inPre;
+                clip.on('success', function(e) {
+                    e.clearSelection();
+                    inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
+                    $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
+                });
+
+                clip.on('error', function(e) {
+                    inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
+                    $(e.trigger).attr('aria-label', fallbackMessage(e.action)).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
+                    $(document).one('copy', function(){
+                        $(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
+                    });
+                });
+
+                clipInit = true;
+            }
+
+            code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
+            code.next('.copy-to-clipboard').on('mouseleave', function() {
+                $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
+            });
+        }
+    });
+
+    // 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, textarea').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() {
+    // 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' });
+});
+
+$(function() {
+    $('a[rel="lightbox"]').featherlight({
+        root: 'section#body'
+    });
+});
+
+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);
+    });
+};

themes/learn/static/js/search.js

@@ -0,0 +1,96 @@
+var lunrIndex, pagesIndex;
+
+function endsWith(str, suffix) {
+    return str.indexOf(suffix, str.length - suffix.length) !== -1;
+}
+
+// Initialize lunrjs using our generated index file
+function initLunr() {
+    if (!endsWith(baseurl,"/")){
+        baseurl = baseurl+'/'
+    };
+
+    // First retrieve the index file
+    $.getJSON(baseurl +"index.json")
+        .done(function(index) {
+            pagesIndex = index;
+            // Set up lunrjs by declaring the fields we use
+            // Also provide their boost level for the ranking
+            lunrIndex = lunr(function() {
+                this.ref("uri");
+                this.field('title', {
+		    boost: 15
+                });
+                this.field('tags', {
+		    boost: 10
+                });
+                this.field("content", {
+		    boost: 5
+                });
+				
+                this.pipeline.remove(lunr.stemmer);
+                this.searchPipeline.remove(lunr.stemmer);
+				
+                // Feed lunr with each file and let lunr actually index them
+                pagesIndex.forEach(function(page) {
+		    this.add(page);
+                }, this);
+            })
+        })
+        .fail(function(jqxhr, textStatus, error) {
+            var err = textStatus + ", " + error;
+            console.error("Error getting Hugo index file:", err);
+        });
+}
+
+/**
+ * Trigger a search in lunr and transform the result
+ *
+ * @param  {String} query
+ * @return {Array}  results
+ */
+function search(queryTerm) {
+    // Find the item in our index corresponding to the lunr one to have more info
+    return lunrIndex.search(queryTerm+"^100"+" "+queryTerm+"*^10"+" "+"*"+queryTerm+"^10"+" "+queryTerm+"~2^1").map(function(result) {
+            return pagesIndex.filter(function(page) {
+                return page.uri === result.ref;
+            })[0];
+        });
+}
+
+// Let's get started
+initLunr();
+$( document ).ready(function() {
+    var searchList = new autoComplete({
+        /* selector for the search box element */
+        selector: $("#search-by").get(0),
+        /* source is the callback to perform the search */
+        source: function(term, response) {
+            response(search(term));
+        },
+        /* renderItem displays individual search results */
+        renderItem: function(item, term) {
+            var numContextWords = 2;
+            var text = item.content.match(
+                "(?:\\s?(?:[\\w]+)\\s?){0,"+numContextWords+"}" +
+                    term+"(?:\\s?(?:[\\w]+)\\s?){0,"+numContextWords+"}");
+            item.context = text;
+            var divcontext = document.createElement("div");
+            divcontext.className = "context";
+            divcontext.innerText = (item.context || '');
+            var divsuggestion = document.createElement("div");
+            divsuggestion.className = "autocomplete-suggestion";
+            divsuggestion.setAttribute("data-term", term);
+            divsuggestion.setAttribute("data-title", item.title);
+            divsuggestion.setAttribute("data-uri", item.uri);
+            divsuggestion.setAttribute("data-context", item.context);
+            divsuggestion.innerText = '» ' + item.title;
+            divsuggestion.appendChild(divcontext);
+            return divsuggestion.outerHTML;
+        },
+        /* onSelect callback fires when a search suggestion is chosen */
+        onSelect: function(e, term, item) {
+            location.href = item.getAttribute('data-uri');
+        }
+    });
+});