summaryrefslogtreecommitdiffstats
path: root/theme/stylesheets/website
diff options
context:
space:
mode:
Diffstat (limited to 'theme/stylesheets/website')
-rwxr-xr-xtheme/stylesheets/website/body.less136
-rwxr-xr-xtheme/stylesheets/website/exercise.less49
-rw-r--r--theme/stylesheets/website/font-settings.less159
-rw-r--r--theme/stylesheets/website/fonts.less144
-rwxr-xr-xtheme/stylesheets/website/header.less108
-rw-r--r--theme/stylesheets/website/highlight/night.less92
-rw-r--r--theme/stylesheets/website/highlight/sepia.less107
-rw-r--r--theme/stylesheets/website/highlight/white.less90
-rwxr-xr-xtheme/stylesheets/website/languages.less51
-rwxr-xr-xtheme/stylesheets/website/markdown.less312
-rwxr-xr-xtheme/stylesheets/website/navigation.less58
-rwxr-xr-xtheme/stylesheets/website/progress.less115
-rw-r--r--theme/stylesheets/website/quiz.less53
-rwxr-xr-xtheme/stylesheets/website/summary.less232
-rw-r--r--theme/stylesheets/website/variables.less171
15 files changed, 1877 insertions, 0 deletions
diff --git a/theme/stylesheets/website/body.less b/theme/stylesheets/website/body.less
new file mode 100755
index 0000000..9c0340f
--- /dev/null
+++ b/theme/stylesheets/website/body.less
@@ -0,0 +1,136 @@
+.book {
+ position: relative;
+ width: 100%;
+ height: 100%;
+
+ .book-body {
+ position: absolute;
+ top: @header-height;
+ right: 0px;
+ left: 0px;
+ bottom: 0px;
+
+ color: @page-color;
+ background: @body-background;
+ .transition(left 0.5s ease);
+
+ .body-inner {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ left: 0px;
+ bottom: 0px;
+ overflow-y: auto;
+ }
+
+ .page-wrapper {
+ position: relative;
+ outline: none;
+
+ .page-inner {
+ max-width: 800px;
+ margin: 0px auto;
+
+ section {
+ margin: 0px 0px;
+ padding: 5px 15px;
+
+ background: @page-background;
+ border-radius: 2px;
+ line-height: 1.5em;
+ }
+
+ .btn-group {
+ .btn {
+ border-radius: 0px;
+ background: #eee;
+ border: 0px;
+ }
+ }
+ }
+ }
+
+ @media (max-width: @mobileMaxWidth) {
+ overflow-y: auto;
+
+ .body-inner {
+ position: static;
+ padding-bottom: 20px;
+ min-height: calc(~"100% - 57px")
+ }
+ }
+ }
+
+ &.with-summary {
+ @media (min-width: @sidebar-breakpoint) {
+ .book-body {
+ left: 250px;
+ }
+ }
+ }
+
+ &.without-animation {
+ .book-body {
+ .transition(none) !important;
+ }
+ }
+ &.color-theme-1{
+ .book-body {
+ color: @page-color-1;
+ background: @body-background-1;
+ .page-wrapper {
+ .page-inner {
+ section{
+ background: @page-background-1;
+ }
+ }
+ }
+ }
+ }
+ &.color-theme-2{
+ .book-body {
+ color: @page-color-2;
+ background: @body-background-2;
+ .page-wrapper {
+ .page-inner {
+ section{
+ background: @page-background-2;
+ }
+ }
+ }
+ }
+ }
+
+ &.font-size-0 {
+ .book-body {
+ font-size:@s-font-size;
+ }
+ }
+ &.font-size-1 {
+ .book-body {
+ font-size:@m-font-size;
+ }
+ }
+ &.font-size-2 {
+ .book-body {
+ font-size:@l-font-size;
+ }
+ }
+ &.font-size-3 {
+ .book-body {
+ font-size:@xl-font-size;
+ }
+ }
+ &.font-size-4 {
+ .book-body {
+ font-size:@xxl-font-size;
+ }
+ }
+
+ &.font-family-0{
+ font-family: @font-family-serif;
+ }
+ &.font-family-1{
+ font-family: @font-family-sans;
+ }
+} \ No newline at end of file
diff --git a/theme/stylesheets/website/exercise.less b/theme/stylesheets/website/exercise.less
new file mode 100755
index 0000000..a6f8a45
--- /dev/null
+++ b/theme/stylesheets/website/exercise.less
@@ -0,0 +1,49 @@
+.book .book-body .page-wrapper .page-inner {
+ section.exercise {
+ padding: 0px;
+ margin: 20px 15px;
+ border: 3px solid #2f8cde;
+
+ .header {
+ padding: 5px 15px;
+
+ color: #fff;
+ background: #2f8cde;
+
+ h2 {
+ margin: 0px;
+ font-size: 20px;
+ }
+ }
+
+ .message {
+ margin: 5px 15px;
+ }
+
+ .editor {
+ min-height: 50px;
+ font-size: 14px;
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+ }
+
+
+ .alert {
+ display: none;
+ margin: 0px;
+ margin-bottom: 10px;
+ padding: 8px 15px;
+ }
+
+ &.return-error {
+ .alert-danger {
+ display: block;
+ }
+ }
+ &.return-success {
+ .alert-success {
+ display: block;
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/theme/stylesheets/website/font-settings.less b/theme/stylesheets/website/font-settings.less
new file mode 100644
index 0000000..42fe41f
--- /dev/null
+++ b/theme/stylesheets/website/font-settings.less
@@ -0,0 +1,159 @@
+.book-header{
+ #font-settings-wrapper{
+ position:relative;
+ .dropdown-menu{
+ background-color:@header-background;
+ border-color:@sidebar-divider-color;
+ padding: 0px;
+
+ .dropdown-caret{
+ position: absolute;
+ top: 14px;
+ left: -8px;
+ width: 10px;
+ height: 18px;
+ float: left;
+ overflow: hidden;
+ .caret-outer{
+ position: absolute;
+ border-bottom: 9px solid transparent;
+ border-top: 9px solid transparent;
+ border-right: 9px solid rgba(0,0,0,0.1);
+ height: auto;
+ left: 0;
+ top: 0;
+ width: auto;
+ display: inline-block;
+ margin-left: -1px;
+ }
+ .caret-inner{
+ position: absolute;
+ display: inline-block;
+ margin-left: -1px;
+ top: 0;
+ left: 1px;
+ border-bottom: 9px solid transparent;
+ border-top: 9px solid transparent;
+ border-right: 9px solid @header-background;
+ }
+ }
+ button{
+ border: 0;
+ background-color:transparent;
+ color:@header-button-color;
+ &:hover{
+ color:@header-button-hover-color;
+ background-color:@header-button-hover-background;
+ }
+ }
+ #enlarge-font-size{
+ width: 50%;
+ font-size:1.4em;
+ }
+ #reduce-font-size{
+ width: 50.5%;
+ font-size:1em;
+ }
+ .btn-group-xs{
+ .btn{
+ width: 33.7%;
+ padding: initial;
+ }
+ }
+ .list-group{
+ margin: 0px 0;
+
+ .list-group-item{
+ cursor:pointer;
+ background-color:transparent;
+ border-color: @sidebar-divider-color;
+ border-width: 1px 0 !important;
+
+ &:hover{
+ color:@header-button-hover-color;
+ background-color:@header-button-hover-background !important;
+ }
+ &.active{
+ color:@header-button-hover-color;
+ background-color:@header-button-hover-background !important;
+ }
+ }
+ }
+ &.open{
+ display:block;
+ }
+ }
+ }
+}
+
+/*
+ * Theme 1
+ */
+
+.color-theme-1{
+ #font-settings-wrapper{
+ .dropdown-menu{
+ background-color:@sidebar-background-1;
+ border-color:@sidebar-divider-color-1;
+ .dropdown-caret .caret-inner{
+ border-right: 9px solid @sidebar-background-1;
+ }
+ button{
+ color:@header-button-color-1;
+ &:hover{
+ color:@header-button-hover-color-1;
+ background-color:@header-button-hover-background-1;
+ }
+ }
+ .list-group{
+ .list-group-item{
+ border-color:@sidebar-divider-color-1;
+ &:hover{
+ color:@header-button-hover-color-1;
+ background-color:@header-button-hover-background-1 !important;
+ }
+ &.active{
+ color:@header-button-hover-color-1;
+ background-color:@header-button-hover-background-1 !important;
+ }
+ }
+ }
+ }
+ }
+}
+
+/*
+ * Theme 2
+ */
+
+.color-theme-2{
+ #font-settings-wrapper{
+ .dropdown-menu{
+ background-color:@sidebar-background-2;
+ border-color:@sidebar-divider-color-2;
+ .dropdown-caret .caret-inner{
+ border-right: 9px solid @sidebar-background-2;
+ }
+ button{
+ color:@header-button-color-2;
+ &:hover{
+ color:@header-button-hover-color-2;
+ background-color:@header-button-hover-background-2;
+ }
+ }
+ .list-group{
+ .list-group-item{
+ border-color:@sidebar-divider-color-2;
+ &:hover{
+ color:@header-button-hover-color-2;
+ background-color:@header-button-hover-background-2 !important;
+ }
+ &.active{
+ color:@header-button-hover-color-2;
+ background-color:@header-button-hover-background-2 !important;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/theme/stylesheets/website/fonts.less b/theme/stylesheets/website/fonts.less
new file mode 100644
index 0000000..3dfff3f
--- /dev/null
+++ b/theme/stylesheets/website/fonts.less
@@ -0,0 +1,144 @@
+@font-face {
+ font-family: 'EB Garamond';
+ font-style: normal;
+ font-weight: 400;
+ src: local('EB Garamond 12 Regular'),url('@{FontPath}/ebgaramond/400.woff') format('woff');
+}
+@font-face {
+ font-family: 'EB Garamond';
+ font-style: italic;
+ font-weight: 400i;
+ src: local('EB Garamond 12 Italic'),url('@{FontPath}/ebgaramond/400i.woff') format('woff');
+}
+@font-face {
+ font-family: 'Merriweather';
+ font-style: normal;
+ font-weight: 250;
+ src: local('Merriweather Light'),url('@{FontPath}/merriweather/250.woff') format('woff');
+}
+@font-face {
+ font-family: 'Merriweather';
+ font-style: italic;
+ font-weight: 250i;
+ src: local('Merriweather Light Italic'),url('@{FontPath}/merriweather/250i.woff') format('woff');
+}
+@font-face {
+ font-family: 'Merriweather';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Merriweather'),url('@{FontPath}/merriweather/400.woff') format('woff');
+}
+@font-face {
+ font-family: 'Merriweather';
+ font-style: italic;
+ font-weight: 400i;
+ src: local('Merriweather Italic'),url('@{FontPath}/merriweather/400i.woff') format('woff');
+}
+@font-face {
+ font-family: 'Merriweather';
+ font-style: normal;
+ font-weight: 600;
+ src: local(''),url('@{FontPath}/merriweather/600.woff') format('woff');
+}
+/*@font-face {
+ font-family: 'Merriweather';
+ font-style: italic;
+ font-weight: 600i;
+ src: local(''),url('@{FontPath}/merriweather/600i.woff') format('woff');
+}*/
+@font-face {
+ font-family: 'Merriweather';
+ font-style: normal;
+ font-weight: 700;
+ src: local('Merriweather Bold'),url('@{FontPath}/merriweather/700.woff') format('woff');
+}
+@font-face {
+ font-family: 'Merriweather';
+ font-style: italic;
+ font-weight: 700i;
+ src: local('Merriweather Bold Italic'),url('@{FontPath}/merriweather/700i.woff') format('woff');
+}
+@font-face {
+ font-family: 'Merriweather';
+ font-style: normal;
+ font-weight: 900;
+ src: local('Merriweather Heavy'),url('@{FontPath}/merriweather/900.woff') format('woff');
+}
+@font-face {
+ font-family: 'Merriweather';
+ font-style: italic;
+ font-weight: 900i;
+ src: local('Merriweather Heavy Italic'),url('@{FontPath}/merriweather/900i.woff') format('woff');
+}
+@font-face {
+ font-family: 'Anonymous Pro';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Anonymous Pro'),url('@{FontPath}/anonymouspro/400.woff') format('woff');
+}
+@font-face {
+ font-family: 'Anonymous Pro';
+ font-style: italic;
+ font-weight: 400i;
+ src: local('Anonymous Pro Italic'),url('@{FontPath}/anonymouspro/400i.woff') format('woff');
+}
+@font-face {
+ font-family: 'Anonymous Pro';
+ font-style: normal;
+ font-weight: 700;
+ src: local('Anonymous Pro Bold'),url('@{FontPath}/anonymouspro/700.woff') format('woff');
+}
+@font-face {
+ font-family: 'Anonymous Pro';
+ font-style: italic;
+ font-weight: 700i;
+ src: local('Anonymous Pro Bold Italic'),url('@{FontPath}/anonymouspro/700i.woff') format('woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Open Sans Light'),url('@{FontPath}/opensans/300.woff') format('woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-weight: 300i;
+ src: local('Open Sans Light Italic'),url('@{FontPath}/opensans/300i.woff') format('woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Open Sans Regular'),url('@{FontPath}/opensans/400.woff') format('woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-weight: 400i;
+ src: local('Open Sans Italic'),url('@{FontPath}/opensans/400i.woff') format('woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 600;
+ src: local('Open Sans Semibold'),url('@{FontPath}/opensans/600.woff') format('woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-weight: 600i;
+ src: local('Open Sans Semibold Italic'),url('@{FontPath}/opensans/600i.woff') format('woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 700;
+ src: local('Open Sans Bold'),url('@{FontPath}/opensans/700.woff') format('woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-weight: 700i;
+ src: local('Open Sans Bold Italic'),url('@{FontPath}/opensans/700i.woff') format('woff');
+} \ No newline at end of file
diff --git a/theme/stylesheets/website/header.less b/theme/stylesheets/website/header.less
new file mode 100755
index 0000000..2acaee4
--- /dev/null
+++ b/theme/stylesheets/website/header.less
@@ -0,0 +1,108 @@
+.book {
+ .book-header {
+ font-family: @font-family-sans;
+
+ position: absolute;
+ overflow: visible;
+ top: 0px;
+ right: 0px;
+ left: 0px;
+ height: @header-height;
+ z-index: 2;
+
+ font-size: 0.85em;
+ color: @header-color;
+ background: @header-background;
+ box-shadow: 0 1px 2px hsla(200,10%,80%,0.6);
+
+ .btn {
+ display: block;
+ height: @header-height;
+ padding: 0px 15px;
+ border-bottom: none;
+ color: @header-button-color;
+ text-transform: uppercase;
+ line-height: @header-height;
+ .box-shadow(none) !important;
+ position:relative;
+
+ &:hover {
+ position: relative;
+ text-decoration: none;
+ color: @header-button-hover-color;
+ background: @header-button-hover-background;
+ }
+ }
+
+ h1 {
+ margin: 0px;
+ font-size: 20px;
+ text-align: center;
+ line-height: @header-height;
+
+ padding-left: 200px;
+ padding-right: 200px;
+ .transition(margin-left 0.5s ease);
+
+ a, a:hover {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ @media (max-width: 800px) {
+ display: none;
+ }
+
+ i {
+ display: none;
+ }
+ }
+ }
+
+ &.is-loading {
+ .book-header h1 {
+ i {
+ display: inline-block;
+ }
+ a {
+ display: none;
+ }
+ }
+ }
+ &.with-summary {
+ .book-header h1 {
+ margin-left: 250px;
+ }
+ }
+ &.without-animation {
+ .book-header h1 {
+ .transition(none) !important;
+ }
+ }
+ &.color-theme-1{
+ .book-header{
+ color: @header-color-1;
+ background: @header-background-1;
+ .btn {
+ color: @header-button-color-1;
+ &:hover {
+ color: @header-button-hover-color-1;
+ background: @header-button-hover-background-1;
+ }
+ }
+ }
+ }
+ &.color-theme-2{
+ .book-header{
+ color: @header-color-2;
+ background: @header-background-2;
+ .btn {
+ color: @header-button-color-2;
+ &:hover {
+ color: @header-button-hover-color-2;
+ background: @header-button-hover-background-2;
+ }
+ }
+ }
+ }
+}
diff --git a/theme/stylesheets/website/highlight/night.less b/theme/stylesheets/website/highlight/night.less
new file mode 100644
index 0000000..8e06c2a
--- /dev/null
+++ b/theme/stylesheets/website/highlight/night.less
@@ -0,0 +1,92 @@
+/* Tomorrow Night Bright Theme */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-title {
+ color: #969896;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-regexp,
+.ruby .hljs-constant,
+.xml .hljs-tag .hljs-title,
+.xml .hljs-pi,
+.xml .hljs-doctype,
+.html .hljs-doctype,
+.css .hljs-id,
+.css .hljs-class,
+.css .hljs-pseudo {
+ color: #d54e53;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-built_in,
+.hljs-literal,
+.hljs-params,
+.hljs-constant {
+ color: #e78c45;
+}
+
+/* Tomorrow Yellow */
+.ruby .hljs-class .hljs-title,
+.css .hljs-rules .hljs-attribute {
+ color: #e7c547;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-value,
+.hljs-inheritance,
+.hljs-header,
+.ruby .hljs-symbol,
+.xml .hljs-cdata {
+ color: #b9ca4a;
+}
+
+/* Tomorrow Aqua */
+.css .hljs-hexcolor {
+ color: #70c0b1;
+}
+
+/* Tomorrow Blue */
+.hljs-function,
+.python .hljs-decorator,
+.python .hljs-title,
+.ruby .hljs-function .hljs-title,
+.ruby .hljs-title .hljs-keyword,
+.perl .hljs-sub,
+.javascript .hljs-title,
+.coffeescript .hljs-title {
+ color: #7aa6da;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.javascript .hljs-function {
+ color: #c397d8;
+}
+
+.hljs {
+ display: block;
+ background: black;
+ color: #eaeaea;
+ padding: 0.5em;
+}
+
+.coffeescript .javascript,
+.javascript .xml,
+.tex .hljs-formula,
+.xml .javascript,
+.xml .vbscript,
+.xml .css,
+.xml .hljs-cdata {
+ opacity: 0.5;
+} \ No newline at end of file
diff --git a/theme/stylesheets/website/highlight/sepia.less b/theme/stylesheets/website/highlight/sepia.less
new file mode 100644
index 0000000..3d9dddb
--- /dev/null
+++ b/theme/stylesheets/website/highlight/sepia.less
@@ -0,0 +1,107 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
+
+*/
+
+.hljs {
+ display: block;
+ padding: 0.5em;
+ background: #fdf6e3;
+ color: #657b83;
+}
+
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-doctype,
+.hljs-pi,
+.lisp .hljs-string,
+.hljs-javadoc {
+ color: #93a1a1;
+}
+
+/* Solarized Green */
+.hljs-keyword,
+.hljs-winutils,
+.method,
+.hljs-addition,
+.css .hljs-tag,
+.hljs-request,
+.hljs-status,
+.nginx .hljs-title {
+ color: #859900;
+}
+
+/* Solarized Cyan */
+.hljs-number,
+.hljs-command,
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-rules .hljs-value,
+.hljs-phpdoc,
+.tex .hljs-formula,
+.hljs-regexp,
+.hljs-hexcolor,
+.hljs-link_url {
+ color: #2aa198;
+}
+
+/* Solarized Blue */
+.hljs-title,
+.hljs-localvars,
+.hljs-chunk,
+.hljs-decorator,
+.hljs-built_in,
+.hljs-identifier,
+.vhdl .hljs-literal,
+.hljs-id,
+.css .hljs-function {
+ color: #268bd2;
+}
+
+/* Solarized Yellow */
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body,
+.smalltalk .hljs-number,
+.hljs-constant,
+.hljs-class .hljs-title,
+.hljs-parent,
+.haskell .hljs-type,
+.hljs-link_reference {
+ color: #b58900;
+}
+
+/* Solarized Orange */
+.hljs-preprocessor,
+.hljs-preprocessor .hljs-keyword,
+.hljs-pragma,
+.hljs-shebang,
+.hljs-symbol,
+.hljs-symbol .hljs-string,
+.diff .hljs-change,
+.hljs-special,
+.hljs-attr_selector,
+.hljs-subst,
+.hljs-cdata,
+.clojure .hljs-title,
+.css .hljs-pseudo,
+.hljs-header {
+ color: #cb4b16;
+}
+
+/* Solarized Red */
+.hljs-deletion,
+.hljs-important {
+ color: #dc322f;
+}
+
+/* Solarized Violet */
+.hljs-link_label {
+ color: #6c71c4;
+}
+
+.tex .hljs-formula {
+ background: #eee8d5;
+} \ No newline at end of file
diff --git a/theme/stylesheets/website/highlight/white.less b/theme/stylesheets/website/highlight/white.less
new file mode 100644
index 0000000..ae9d1f8
--- /dev/null
+++ b/theme/stylesheets/website/highlight/white.less
@@ -0,0 +1,90 @@
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-title {
+ color: #8e908c;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-regexp,
+.ruby .hljs-constant,
+.xml .hljs-tag .hljs-title,
+.xml .hljs-pi,
+.xml .hljs-doctype,
+.html .hljs-doctype,
+.css .hljs-id,
+.css .hljs-class,
+.css .hljs-pseudo {
+ color: #c82829;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-built_in,
+.hljs-literal,
+.hljs-params,
+.hljs-constant {
+ color: #f5871f;
+}
+
+/* Tomorrow Yellow */
+.ruby .hljs-class .hljs-title,
+.css .hljs-rules .hljs-attribute {
+ color: #eab700;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-value,
+.hljs-inheritance,
+.hljs-header,
+.ruby .hljs-symbol,
+.xml .hljs-cdata {
+ color: #718c00;
+}
+
+/* Tomorrow Aqua */
+.css .hljs-hexcolor {
+ color: #3e999f;
+}
+
+/* Tomorrow Blue */
+.hljs-function,
+.python .hljs-decorator,
+.python .hljs-title,
+.ruby .hljs-function .hljs-title,
+.ruby .hljs-title .hljs-keyword,
+.perl .hljs-sub,
+.javascript .hljs-title,
+.coffeescript .hljs-title {
+ color: #4271ae;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.javascript .hljs-function {
+ color: #8959a8;
+}
+
+.hljs {
+ display: block;
+ background: white;
+ color: #4d4d4c;
+ padding: 0.5em;
+}
+
+.coffeescript .javascript,
+.javascript .xml,
+.tex .hljs-formula,
+.xml .javascript,
+.xml .vbscript,
+.xml .css,
+.xml .hljs-cdata {
+ opacity: 0.5;
+} \ No newline at end of file
diff --git a/theme/stylesheets/website/languages.less b/theme/stylesheets/website/languages.less
new file mode 100755
index 0000000..bde5a77
--- /dev/null
+++ b/theme/stylesheets/website/languages.less
@@ -0,0 +1,51 @@
+.book-langs-index {
+ width: 100%;
+ height: 100%;
+ padding: 40px 0px;
+ margin: 0px;
+ overflow: auto;
+
+ @media (max-width: 600px) {
+ padding: 0px;
+ }
+
+ .inner {
+ max-width: 600px;
+ width: 100%;
+
+ margin: 0px auto;
+ padding: 30px;
+
+ background: #fff;
+ border-radius: 3px;
+
+ h3 {
+ margin: 0px;
+ }
+
+ .languages {
+ list-style: none;
+ padding: 20px 30px;
+ margin-top: 20px;
+ border-top: 1px solid #eee;
+
+ .clearfix();
+
+ li {
+ width: 50%;
+ float: left;
+ padding: 10px 5px;
+ font-size: 16px;
+
+ a {
+
+ }
+
+ @media (max-width: 600px) {
+ width: 100%;
+ max-width: 100%;
+ }
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/theme/stylesheets/website/markdown.less b/theme/stylesheets/website/markdown.less
new file mode 100755
index 0000000..52927a8
--- /dev/null
+++ b/theme/stylesheets/website/markdown.less
@@ -0,0 +1,312 @@
+.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal {
+ color:@page-color-1;
+
+ pre, code {
+ background: #fdf6e3;
+ color: #657b83;
+ border-color: darken(#fdf6e3, 15%);
+
+ @import "./highlight/sepia.less";
+ }
+}
+.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal {
+ color:@page-color-2;
+
+ pre, code {
+ background: black;
+ color: #eaeaea;
+ border-color: #000;
+
+ @import "./highlight/night.less";
+ }
+}
+.book .book-body .page-wrapper .page-inner section.normal {
+ padding-bottom: 25px;
+ padding-top: 15px;
+ color:@page-color;
+ letter-spacing: 0.01rem;
+
+ & > *:first-child {
+ margin-top: 0 !important; }
+ & > *:last-child {
+ margin-bottom: 0 !important; }
+
+ a {
+ color: #4183C4; }
+ a.absent {
+ color: #cc0000; }
+ a.anchor {
+ display: block;
+ padding-left: 30px;
+ margin-left: -30px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0; }
+
+ h1, h2, h3, h4, h5, h6 {
+ line-height: 1.7;
+ margin: 20px 0 10px;
+ padding: 0;
+ font-weight: bold;
+ -webkit-font-smoothing: antialiased;
+ cursor: text;
+ position: relative; }
+
+ h1 tt, h1 code {
+ font-size: inherit; }
+
+ h2 tt, h2 code {
+ font-size: inherit; }
+
+ h3 tt, h3 code {
+ font-size: inherit; }
+
+ h4 tt, h4 code {
+ font-size: inherit; }
+
+ h5 tt, h5 code {
+ font-size: inherit; }
+
+ h6 tt, h6 code {
+ font-size: inherit; }
+
+ h1 {
+ font-size: 2.5em;
+ }
+
+ h2 {
+ font-size: 2em;
+ border-bottom: 1px solid #eee;
+ }
+
+ h3 {
+ font-size: 1.5em; }
+
+ h4 {
+ font-size: 1.2em; }
+
+ h5 {
+ font-size: 1em; }
+
+ h6 {
+ font-size: 1em; }
+
+ p, blockquote, ul, ol, dl, table, pre {
+ margin: 15px 0; }
+
+ hr {
+
+ }
+
+ body > h2:first-child {
+ margin-top: 0;
+ padding-top: 0; }
+ body > h1:first-child {
+ margin-top: 0;
+ padding-top: 0; }
+ body > h1:first-child + h2 {
+ margin-top: 0;
+ padding-top: 0; }
+ body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
+ margin-top: 0;
+ padding-top: 0; }
+
+ a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
+ margin-top: 0;
+ padding-top: 0; }
+
+ h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
+ margin-top: 0; }
+
+ li p.first {
+ display: inline-block; }
+
+ ul, ol {
+ padding-left: 30px; }
+
+ ul :first-child, ol :first-child {
+ margin-top: 0; }
+
+ ul :last-child, ol :last-child {
+ margin-bottom: 0; }
+
+ ul p {
+ margin: 0px;
+ }
+ ul ul {
+ margin: 0px;
+ }
+
+ dl {
+ padding: 0; }
+ dl dt {
+ font-size: 14px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 15px 0 5px; }
+ dl dt:first-child {
+ padding: 0; }
+ dl dt > :first-child {
+ margin-top: 0; }
+ dl dt > :last-child {
+ margin-bottom: 0; }
+ dl dd {
+ margin: 0 0 15px;
+ padding: 0 15px; }
+ dl dd > :first-child {
+ margin-top: 0; }
+ dl dd > :last-child {
+ margin-bottom: 0; }
+
+ blockquote {
+ border-left: 4px solid #dddddd;
+ padding: 0 15px;
+ color: #777777;
+
+ p {
+ font-size: inherit;
+ }
+ }
+ blockquote > :first-child {
+ margin-top: 0;
+ }
+ blockquote > :last-child {
+ margin-bottom: 0; }
+
+ table {
+ width: 100%;
+ padding: 0;
+ }
+
+ table tr {
+ border-top: 1px solid #cccccc;
+ background-color: white;
+ margin: 0;
+ padding: 0; }
+ table tr:nth-child(2n) {
+ background-color: #f8f8f8; }
+ table tr th {
+ font-weight: bold;
+ border: 1px solid #cccccc;
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px; }
+ table tr td {
+ border: 1px solid #cccccc;
+ text-align: left;
+ margin: 0;
+ padding: 6px 13px; }
+ table tr th :first-child, table tr td :first-child {
+ margin-top: 0; }
+ table tr th :last-child, table tr td :last-child {
+ margin-bottom: 0; }
+
+ img {
+ max-width: 100%;
+ display: block;
+ margin: 0px auto;
+ }
+
+ span.frame {
+ display: block;
+ overflow: hidden; }
+ span.frame > span {
+ border: 1px solid #dddddd;
+ display: block;
+ float: left;
+ overflow: hidden;
+ margin: 13px 0 0;
+ padding: 7px;
+ width: auto; }
+ span.frame span img {
+ display: block;
+ float: left; }
+ span.frame span span {
+ clear: both;
+ color: #333333;
+ display: block;
+ padding: 5px 0 0; }
+ span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both; }
+ span.align-center > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: center; }
+ span.align-center span img {
+ margin: 0 auto;
+ text-align: center; }
+ span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both; }
+ span.align-right > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px 0 0;
+ text-align: right; }
+ span.align-right span img {
+ margin: 0;
+ text-align: right; }
+ span.float-left {
+ display: block;
+ margin-right: 13px;
+ overflow: hidden;
+ float: left;
+
+ & span {
+ margin: 13px 0 0;
+ }
+ }
+
+ span.float-right {
+ display: block;
+ margin-left: 13px;
+ overflow: hidden;
+ float: right;
+
+ & > span {
+ display: block;
+ overflow: hidden;
+ margin: 13px auto 0;
+ text-align: right;
+ }
+ }
+
+ code, tt {
+ margin: 0 2px;
+ padding: 0 5px;
+ white-space: nowrap;
+ border: 1px solid #eaeaea;
+ background-color: #f8f8f8;
+ border-radius: 3px;
+ }
+
+ pre code {
+ margin: 0;
+ padding: 0;
+ white-space: pre;
+ border: none;
+ background: transparent;
+
+ @import "./highlight/white.less";
+ }
+
+ pre {
+ font-size: inherit;
+ line-height: 1.5em;
+ overflow: auto;
+ padding: 20px;
+ border-radius: 3px;
+ }
+
+ pre code, pre tt {
+ background-color: transparent;
+ border: none;
+ }
+} \ No newline at end of file
diff --git a/theme/stylesheets/website/navigation.less b/theme/stylesheets/website/navigation.less
new file mode 100755
index 0000000..52270d1
--- /dev/null
+++ b/theme/stylesheets/website/navigation.less
@@ -0,0 +1,58 @@
+.book .book-body {
+ .navigation {
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ margin: 0;
+ max-width: 150px;
+ min-width: 90px;
+
+ display: flex;
+ justify-content: center;
+ align-content: center;
+ flex-direction: column;
+
+ font-size: 40px;
+ color: rgba(0,0,0,0.4);
+
+ text-align: center;
+
+ .transition(all 350ms ease);
+
+ &:hover {
+ text-decoration: none;
+ color: rgba(0,0,0,0.6);
+ }
+
+ &.navigation-next {
+ right: 0px;
+ }
+ &.navigation-prev {
+ left: 0px;
+ }
+ }
+
+ @media (max-width: @mobileMaxWidth) {
+ .navigation {
+ position: static;
+ top: auto;
+ max-width: 50%;
+ width: 50%;
+ display: inline-block;
+ float: left;
+
+ &.navigation-unique {
+ max-width: 100%;
+ width: 100%;
+ }
+ }
+ }
+}
+.book.color-theme-1 .book-body {
+ .navigation:hover{
+ }
+}
+.book.color-theme-2 .book-body {
+ .navigation:hover{
+ }
+} \ No newline at end of file
diff --git a/theme/stylesheets/website/progress.less b/theme/stylesheets/website/progress.less
new file mode 100755
index 0000000..c67d7e7
--- /dev/null
+++ b/theme/stylesheets/website/progress.less
@@ -0,0 +1,115 @@
+/* Chrome, Safari, Opera */
+@-webkit-keyframes animate-loading {
+ from {width: 0%;}
+ to {}
+}
+
+/* Standard syntax */
+@keyframes animate-loading {
+ from {width: 0%;}
+ to {}
+}
+
+.book .book-body {
+ .book-progress {
+ height: @progress-height;
+ width: 100%;
+ position: relative;
+ background: #fff;
+ margin-bottom: 10px;
+
+ .bar {
+ height: @bar-height;
+ position: @bar-position;
+ right: @bar-right;
+ left: @bar-left;
+ top: @bar-top;
+
+ background: @bar-background;
+ border-radius: 5px;
+ overflow: hidden;
+
+ .inner {
+ height: 100%;
+ width: 0%;
+
+ background: @bar-progress-background;
+ -webkit-animation: animate-loading 1s; /* Chrome, Safari, Opera */
+ animation: animate-loading 1s;
+
+ .in-inner {
+ height: 100%;
+ width: 50%;
+ }
+ }
+ }
+
+ .chapters {
+ display: @chapter-display;
+
+ position: absolute;
+ right: 20px + @chapter-size;
+ left: 20px;
+ top: 7px;
+
+ .chapter {
+ position: absolute;
+ width: @chapter-size;
+ height: @chapter-size;
+ border-radius: @chapter-size;
+
+ background: @bar-background;
+ box-shadow: 0px 0px 1px #bbb;
+
+ &.new-chapter {
+
+ }
+
+ &.done {
+ background: @bar-progress-background;
+ box-shadow: none;
+ }
+
+ @media (max-width: 800px) {
+ display: none;
+
+ &.new-chapter {
+ display: block;
+ }
+ }
+ }
+ }
+ }
+}
+.book.color-theme-1 .book-body {
+ .book-progress {
+ .bar {
+ background: @bar-background-1;
+ .inner {
+ background: @bar-progress-background-1;
+ }
+ }
+ }
+ .chapters .chapter{
+ background: @bar-background-1;
+ &.done{
+ background: @bar-progress-background-1;
+ }
+ }
+}
+.book.color-theme-2 .book-body {
+ .book-progress {
+ .bar {
+ background: @bar-background-2;
+ .inner {
+ background: @bar-progress-background-2;
+ }
+ }
+ }
+ .chapters .chapter{
+ background: @bar-background-2;
+ &.done{
+ background: @bar-progress-background-2;
+ }
+ }
+} \ No newline at end of file
diff --git a/theme/stylesheets/website/quiz.less b/theme/stylesheets/website/quiz.less
new file mode 100644
index 0000000..0abdaf6
--- /dev/null
+++ b/theme/stylesheets/website/quiz.less
@@ -0,0 +1,53 @@
+.book .book-body .page-wrapper .page-inner {
+ section.quiz {
+ padding: 0px;
+ margin: 20px 15px;
+ border: 3px solid #2f8cde;
+
+ .header {
+ padding: 5px 15px;
+
+ color: #fff;
+ background: #2f8cde;
+
+ h2 {
+ margin: 0px;
+ font-size: 20px;
+ }
+ }
+
+ .message {
+ margin: 15px;
+ }
+
+ .question {
+ .question-header {
+ padding: 5px 15px;
+ color: #fff;
+ background: #2f8cde;
+ }
+
+ .question-inner {
+ padding: 15px;
+ .quiz-label {
+ font-weight: normal;
+ cursor: pointer;
+ }
+ }
+
+ table {
+ margin-bottom: 10px;
+ width: 100%;
+ }
+ th, td {
+ padding-right: 5px;
+ }
+ li {
+ list-style-type: none;
+ input {
+ margin-right: 10px;
+ }
+ }
+ }
+ }
+}
diff --git a/theme/stylesheets/website/summary.less b/theme/stylesheets/website/summary.less
new file mode 100755
index 0000000..49c7a29
--- /dev/null
+++ b/theme/stylesheets/website/summary.less
@@ -0,0 +1,232 @@
+.book {
+ .book-summary {
+ font-family: @font-family-sans;
+
+ position: absolute;
+ top: @header-height;
+ left: -@sidebar-width;
+ bottom: 0px;
+ z-index: 1;
+
+ width: @sidebar-width;
+ color: @sidebar-color;
+ background: @sidebar-background;
+ box-shadow: inset -1px 0 5px hsla(0, 0%, 0%, 0.1);
+
+ .transition(all 0.5s ease);
+
+ .book-search {
+ padding: @sidebar-search-padding;
+
+ background: @sidebar-search-background;
+
+ position: absolute;
+ top: -@header-height;
+ left: 0px;
+ right: 0px;
+
+ .transition(top 0.5s ease);
+
+ input, input:focus {
+ width: 100%;
+ border: 1px solid @sidebar-search-input-border-color;
+ .box-shadow(none);
+ }
+ }
+
+ ul.summary {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+
+ overflow-y: auto;
+
+ list-style: none;
+ margin: 0px;
+ padding: 0px;
+
+ .transition(top 0.5s ease);
+
+ li {
+ list-style: none;
+
+ &.divider {
+ height: 1px;
+ margin: 7px 0;
+ overflow: hidden;
+ background: @sidebar-divider-color;
+ box-shadow: 0 1px rgba(255,255,255,0.7);
+ }
+
+ i.fa-check {
+ display: none;
+ position: absolute;
+ right: 9px;
+ top: 16px;
+ font-size: 9px;
+ color: @sidebar-icon-color;
+ }
+
+ &.done {
+ > a {
+ color: @sidebar-link-completed;
+ font-weight: @sidebar-link-completed-weight;
+
+ i {
+ display: inline;
+ }
+ }
+ }
+
+ a, span {
+ display: block;
+ padding: 10px 15px;
+ border-bottom: none;
+ color: @sidebar-link-color;
+ background: @sidebar-link-background;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ position: relative;
+ }
+
+ span {
+ cursor: not-allowed;
+ .opacity(0.3);
+ }
+
+ &.active > a, a:hover {
+ color: @sidebar-link-hover-color;
+ background: @sidebar-link-hover-background;
+ text-decoration: none;
+ }
+
+ ul {
+ padding-left: @sidebar-nested-padding;
+ }
+ }
+ }
+
+ @media (max-width: @sidebar-breakpoint) {
+ width: 100%;
+ bottom: 0px;
+ left: -100%;
+ }
+ }
+
+ &.with-summary {
+ .book-summary {
+ left: 0px;
+ }
+ }
+
+ &.without-animation {
+ .book-summary {
+ .transition(none) !important;
+ }
+ }
+
+ &.with-search {
+ .book-summary {
+ .book-search {
+ top: 0px;
+ }
+
+ ul.summary {
+ top: @header-height;
+ }
+ }
+ }
+}
+
+/*
+ * Theme 1
+ */
+.book.color-theme-1 {
+ .book-summary {
+ color: @sidebar-color-1;
+ background: @sidebar-background-1;
+
+ .book-search {
+ background: @sidebar-search-background-1;
+
+ input, input:focus {
+ border: 1px solid @sidebar-search-input-border-color-1;
+ }
+ }
+
+ ul.summary {
+ li {
+ &.divider {
+ background: @sidebar-divider-color-1;
+ box-shadow: none;
+ }
+
+ i.fa-check {
+ color: @sidebar-icon-color-1;
+ }
+
+ &.done > a {
+ color: @sidebar-link-completed-1;
+ }
+
+ a, span {
+ color: @sidebar-link-color-1;
+ background: @sidebar-link-background-1;
+ }
+
+ &.active > a, a:hover {
+ color: @sidebar-link-hover-color-1;
+ background: @sidebar-link-hover-background-1;
+ }
+ }
+ }
+ }
+}
+
+/*
+ * Theme 2
+ */
+.book.color-theme-2{
+ .book-summary {
+ color: @sidebar-color-2;
+ background: @sidebar-background-2;
+
+ .book-search {
+ background: @sidebar-search-background-2;
+
+ input, input:focus {
+ border: 1px solid @sidebar-search-input-border-color-2;
+ }
+ }
+
+ ul.summary {
+ li {
+ &.divider {
+ background: @sidebar-divider-color-2;
+ box-shadow: none;
+ }
+
+ i.fa-check {
+ color: @sidebar-icon-color-2;
+ }
+
+ &.done > a {
+ color: @sidebar-link-completed-2;
+ }
+
+ a, span {
+ color: @sidebar-link-color-2;
+ background: @sidebar-link-background-2;
+ }
+
+ &.active > a, a:hover {
+ color: @sidebar-link-hover-color-2;
+ background: @sidebar-link-hover-background-2;
+ }
+ }
+ }
+ }
+}
diff --git a/theme/stylesheets/website/variables.less b/theme/stylesheets/website/variables.less
new file mode 100644
index 0000000..f496f06
--- /dev/null
+++ b/theme/stylesheets/website/variables.less
@@ -0,0 +1,171 @@
+@staticPath: "./";
+
+// Sizes
+@mobileMaxWidth: 1240px;
+
+// Header
+@header-height: 50px;
+@header-color: hsl(194, 5%, 52%);
+@header-background: white;
+@header-button-color: hsl(194, 5%, 52%);
+@header-button-hover-color: #151515;
+@header-button-hover-background: hsl(207, 15%, 95%);
+
+// Body
+@body-background: white;
+
+// Sidebar
+@sidebar-width: 250px;
+@sidebar-breakpoint: 600px;
+@sidebar-color: hsl(207, 15%, 80%);
+@sidebar-background: hsl(207, 15%, 95%);
+
+@sidebar-nested-padding: 20px;
+
+@sidebar-search-padding: 6px;
+@sidebar-search-background: transparent;
+@sidebar-search-input-border-color: hsl(207, 15%, 80%);
+
+@sidebar-divider-color: hsl(207, 15%, 85%);
+
+@sidebar-link-color: hsl(207, 15%, 50%);
+@sidebar-link-background: transparent;
+@sidebar-link-hover-color: hsl(207, 100%, 50%);
+@sidebar-link-hover-background: transparent;
+
+@sidebar-icon-color: @bar-progress-background;
+@sidebar-link-completed: hsl(207, 15%, 25%);
+@sidebar-link-completed-weight: normal;
+
+// Page
+@page-color: black;
+@page-background: white;
+
+// Progress Bar
+@chapter-display: none;
+@chapter-size: 16px;
+
+@progress-height: 0px;
+
+@bar-height: 2px;
+@bar-left: @sidebar-width;
+@bar-right: 0;
+@bar-top: 50px;
+@bar-position: static;
+@bar-background: white;
+@bar-progress-background: hsl(120, 60%, 50%);
+
+// Basics of a navbar
+@navbar-height: 50px;
+@navbar-margin-bottom: @line-height-computed;
+@navbar-default-border: #d5d5d5;
+@navbar-border-radius: 0px;
+@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
+@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
+
+// Navbar brand label
+@navbar-default-color: #333;
+@navbar-default-link-color: #333;
+@navbar-default-brand-color: @navbar-default-link-color;
+@navbar-default-brand-hover-color: @navbar-default-link-color;
+@navbar-default-brand-hover-bg: transparent;
+
+// Border Radius
+@border-radius-base: 1px;
+@border-radius-large: 3px;
+@border-radius-small: 1px;
+
+// Fonts
+@font-family-serif: Merriweather, "EB Garamond", Georgia, serif;
+@font-family-sans: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-base: @font-family-serif;
+
+
+@FontPath: '@{staticPath}/fonts';
+@fa-font-path: "@{FontPath}/fontawesome";
+
+@s-font-size: 1.2rem;
+@m-font-size: 1.4rem;
+@l-font-size: 1.6rem;
+@xl-font-size: 2.2rem;
+@xxl-font-size: 4.0rem;
+
+/*
+,--------.,--.
+'--. .--'| ,---. ,---. ,--,--,--. ,---. ,---. .--.
+ | | | .-. || .-. :| || .-. :( .-' '--'
+ | | | | | |\ --.| | | |\ --..-' `).--.
+ `--' `--' `--' `----'`--`--`--' `----'`----' '--'
+*/
+// Header
+@header-color-1: #AFA790;
+@header-color-2: #7e888b;
+@header-background-1: #ECE3C4;
+@header-background-2: #1d1f21;
+@header-button-color-1: #AFA790;
+@header-button-color-2: #7e888b;
+@header-button-hover-color-1: #73553C;
+@header-button-hover-color-2: #C9C9C9;
+@header-button-hover-background-1: #E2DABE;
+@header-button-hover-background-2: #0B0D0E;
+
+// Body
+@body-background-1: #F3EACB;
+@body-background-2: #1d1f21;
+
+// Sidebar
+@sidebar-color-1: #AFA790;
+@sidebar-color-2: hsl(207, 15%, 80%);
+@sidebar-background-1: #F3EACB;
+@sidebar-background-2: #111111;
+
+@sidebar-search-background-1: transparent;
+@sidebar-search-background-2: transparent;
+@sidebar-search-input-border-color-1: #D6CFBA;
+@sidebar-search-input-border-color-2: #c4cdd4;
+
+@sidebar-divider-color-1: hsl(207, 15%, 85%);
+@sidebar-divider-color-2: #1d1f21;
+
+@sidebar-link-color-1: #877F6A;
+@sidebar-link-color-2: hsl(207, 15%, 50%);
+@sidebar-link-background-1: transparent;
+@sidebar-link-background-2: transparent;
+@sidebar-link-hover-color-1: #704214;
+@sidebar-link-hover-color-2: hsl(207, 100%, 50%);
+@sidebar-link-hover-background-1: transparent;
+@sidebar-link-hover-background-2: transparent;
+
+@sidebar-icon-color-1: @bar-progress-background;
+@sidebar-icon-color-2: @bar-progress-background;
+@sidebar-link-completed-1: hsl(207, 15%, 25%);
+@sidebar-link-completed-2: hsl(207, 15%, 25%);
+@sidebar-link-completed-weight-1: normal;
+@sidebar-link-completed-weight-2: normal;
+
+// Page
+@page-color-1: #704214;
+@page-color-2: #a4b1b1;
+@page-background-1: #F3EACB;
+@page-background-2: #1d1f21;
+
+@bar-background-1: #F3EACB;
+@bar-background-2: #1d1f21;
+@bar-progress-background-1: #704214;
+@bar-progress-background-2: hsl(120, 60%, 50%);
+
+// Basics of a navbar
+@navbar-default-border-1: #d5d5d5;
+@navbar-default-border-2: #d5d5d5;
+
+// Navbar brand label
+@navbar-default-color-1: #333;
+@navbar-default-color-2: #333;
+@navbar-default-link-color-1: #333;
+@navbar-default-link-color-2: #333;
+@navbar-default-brand-color-1: @navbar-default-link-color;
+@navbar-default-brand-color-2: @navbar-default-link-color;
+@navbar-default-brand-hover-color-1: @navbar-default-link-color;
+@navbar-default-brand-hover-color-2: @navbar-default-link-color;
+@navbar-default-brand-hover-bg-1: transparent;
+@navbar-default-brand-hover-bg-2: transparent;