diff options
Diffstat (limited to 'theme/stylesheets/website')
-rwxr-xr-x | theme/stylesheets/website/body.less | 136 | ||||
-rwxr-xr-x | theme/stylesheets/website/exercise.less | 49 | ||||
-rw-r--r-- | theme/stylesheets/website/font-settings.less | 159 | ||||
-rw-r--r-- | theme/stylesheets/website/fonts.less | 144 | ||||
-rwxr-xr-x | theme/stylesheets/website/header.less | 108 | ||||
-rw-r--r-- | theme/stylesheets/website/highlight/night.less | 92 | ||||
-rw-r--r-- | theme/stylesheets/website/highlight/sepia.less | 107 | ||||
-rw-r--r-- | theme/stylesheets/website/highlight/white.less | 90 | ||||
-rwxr-xr-x | theme/stylesheets/website/languages.less | 51 | ||||
-rwxr-xr-x | theme/stylesheets/website/markdown.less | 312 | ||||
-rwxr-xr-x | theme/stylesheets/website/navigation.less | 58 | ||||
-rwxr-xr-x | theme/stylesheets/website/progress.less | 115 | ||||
-rw-r--r-- | theme/stylesheets/website/quiz.less | 53 | ||||
-rwxr-xr-x | theme/stylesheets/website/summary.less | 232 | ||||
-rw-r--r-- | theme/stylesheets/website/variables.less | 171 |
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; |