diff options
Diffstat (limited to 'theme/stylesheets')
24 files changed, 3062 insertions, 0 deletions
diff --git a/theme/stylesheets/base/markdown.less b/theme/stylesheets/base/markdown.less new file mode 100644 index 0000000..28e9b59 --- /dev/null +++ b/theme/stylesheets/base/markdown.less @@ -0,0 +1,388 @@ +.markdown-content(@md-color, @md-line-height) { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + line-height: 1.4; + color: @md-color; + overflow: hidden; + line-height: @md-line-height; + word-wrap: break-word; + display: block; + + & > *:first-child { + margin-top: 0 !important; + } + & > *:last-child { + margin-bottom: 0 !important; + } + + a { + background: transparent; + } + + a:active, + a:hover { + outline: 0; + } + + strong { + font-weight: bold; + } + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + img { + border: 0; + } + + hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; + } + + pre { + overflow: auto; + } + + code, + pre { + font-family: monospace, monospace; + font-size: 1em; + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + td, + th { + padding: 0; + } + + * { + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + a { + color: #4183c4; + text-decoration: none; + } + + a:hover, + a:focus, + a:active { + text-decoration: underline; + } + + hr { + height: 0; + margin: 15px 0; + overflow: hidden; + background: transparent; + border: 0; + border-bottom: 1px solid #ddd; + } + + hr:before, + hr:after { + display: table; + content: " "; + } + + hr:after { + clear: both; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-top: 15px; + margin-bottom: 15px; + line-height: 1.1; + } + + h1 { + font-size: 30px; + } + + h2 { + font-size: 21px; + } + + h3 { + font-size: 16px; + } + + h4 { + font-size: 14px; + } + + h5 { + font-size: 12px; + } + + h6 { + font-size: 11px; + } + + blockquote { + margin: 0; + } + + ul, + ol { + padding: 0; + margin-top: 0; + margin-bottom: 0; + } + + ol ol { + list-style-type: lower-roman; + } + + dd { + margin-left: 0; + } + + code, + pre { + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 12px; + } + + pre { + margin-top: 0; + margin-bottom: 0; + } + + .markdown-body>*:first-child { + margin-top: 0 !important; + } + + .markdown-body>*:last-child { + margin-bottom: 0 !important; + } + + .anchor { + position: absolute; + top: 0; + bottom: 0; + left: 0; + display: block; + padding-right: 6px; + padding-left: 30px; + margin-left: -30px; + } + + .anchor:focus { + outline: none; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + position: relative; + margin-top: 1em; + margin-bottom: 16px; + font-weight: bold; + line-height: 1.4; + } + + h1 { + padding-bottom: 0.3em; + font-size: 2.25em; + line-height: 1.2; + border-bottom: 1px solid #eee; + } + + h2 { + padding-bottom: 0.3em; + font-size: 1.75em; + line-height: 1.225; + border-bottom: 1px solid #eee; + } + + h3 { + font-size: 1.5em; + line-height: 1.43; + } + + h4 { + font-size: 1.25em; + } + + h5 { + font-size: 1em; + } + + h6 { + font-size: 1em; + color: #777; + } + + p, + blockquote, + ul, + ol, + dl, + table, + pre { + margin-top: 0; + margin-bottom: 16px; + } + + hr { + height: 4px; + padding: 0; + margin: 16px 0; + background-color: #e7e7e7; + border: 0 none; + } + + ul, + ol { + padding-left: 2em; + } + + ol ol, + ol ul, + ul ul { + margin-top: 0; + margin-bottom: 0; + } + + dl { + padding: 0; + } + + dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: bold; + } + + dl dd { + padding: 0 16px; + margin-bottom: 16px; + } + + blockquote { + padding: 0 15px; + color: #777; + border-left: 4px solid #ddd; + } + + blockquote>:first-child { + margin-top: 0; + } + + blockquote>:last-child { + margin-bottom: 0; + } + + table { + display: block; + width: 100%; + overflow: auto; + } + + table th { + font-weight: bold; + } + + table th, + table td { + padding: 6px 13px; + border: 1px solid #ddd; + } + + table tr { + background-color: #fff; + border-top: 1px solid #ccc; + } + + table tr:nth-child(2n) { + background-color: #f8f8f8; + } + + img { + max-width: 100%; + -moz-box-sizing: border-box; + box-sizing: border-box; + page-break-inside: avoid; + } + + code { + padding: 0; + padding-top: 0.2em; + padding-bottom: 0.2em; + margin: 0; + font-size: 85%; + background-color: #f7f7f7; + border-radius: 3px; + } + + code:before, + code:after { + letter-spacing: -0.2em; + content: "\00a0"; + } + + pre>code { + padding: 0; + margin: 0; + font-size: 100%; + white-space: pre; + background: transparent; + border: 0; + } + + .highlight pre, + pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: #f7f7f7; + border: none; + border-radius: 3px; + } + + pre { + word-wrap: normal; + } + + pre code { + display: inline; + max-width: initial; + padding: 0; + margin: 0; + overflow: initial; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; + } + + pre code:before, + pre code:after { + content: normal; + } + + .highlight { + background: #ffffff; + } +} diff --git a/theme/stylesheets/base/normalize.less b/theme/stylesheets/base/normalize.less new file mode 100644 index 0000000..559de6a --- /dev/null +++ b/theme/stylesheets/base/normalize.less @@ -0,0 +1,396 @@ +/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +}
\ No newline at end of file diff --git a/theme/stylesheets/base/preboot.less b/theme/stylesheets/base/preboot.less new file mode 100644 index 0000000..6e7e6fb --- /dev/null +++ b/theme/stylesheets/base/preboot.less @@ -0,0 +1,406 @@ +/*! + * Preboot v2 + * + * Open sourced under MIT license by @mdo. + * Some variables and mixins from Bootstrap (Apache 2 license). + */ + + +// +// Variables +// -------------------------------------------------- + +// Grayscale +@black-10: darken(#fff, 10%); +@black-20: darken(#fff, 20%); +@black-30: darken(#fff, 30%); +@black-40: darken(#fff, 40%); +@black-50: darken(#fff, 50%); +@black-60: darken(#fff, 60%); +@black-70: darken(#fff, 70%); +@black-80: darken(#fff, 80%); +@black-90: darken(#fff, 90%); + +// Brand colors +@brand-primary: #428bca; +@brand-success: #5cb85c; +@brand-warning: #f0ad4e; +@brand-danger: #d9534f; +@brand-info: #5bc0de; + +// Scaffolding +@body-background: #fff; +@text-color: @black-50; + +// Links +@link-color: @brand-primary; +@link-color-hover: darken(@link-color, 15%); + +// Typography +@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-serif: Georgia, "Times New Roman", Times, serif; +@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; +@font-family-base: @font-family-sans-serif; + +@font-size-base: 14px; +@font-size-large: @font-size-base * 1.25; // ~18px +@font-size-small: @font-size-base * 0.85; // ~12px +@font-size-mini: @font-size-base * 0.75; // ~11px + +@line-height-base: 1.4; + +@headings-font-family: inherit; // empty to use BS default, @font-family-base +@headings-font-weight: 500; + +// Forms +@input-color-placeholder: lighten(@text-color, 25%); + +// Grid +// Used with the grid mixins below +@grid-columns: 12; +@grid-column-padding: 15px; // Left and right inner padding +@grid-float-breakpoint: 768px; + + + +// +// Grid system +// -------------------------------------------------- + +// Grid +.make-row() { + // Negative margin the row out to align the content of columns + margin-left: -@grid-column-padding; + margin-right: -@grid-column-padding; + // Then clear the floated columns + .clearfix(); +} +.make-column(@columns) { + @media (min-width: @grid-float-breakpoint) { + float: left; + // Calculate width based on number of columns available + width: percentage(@columns / @grid-columns); + } + // Prevent columns from collapsing when empty + min-height: 1px; + // Set inner padding as gutters instead of margin + padding-left: @grid-column-padding; + padding-right: @grid-column-padding; + // Proper box-model (padding doesn't add to width) + .box-sizing(border-box); +} +.make-column-offset(@columns) { + @media (min-width: @grid-float-breakpoint) { + margin-left: percentage(@columns / @grid-columns); + } +} + + + +// +// Mixins: vendor prefixes +// -------------------------------------------------- + +// Box sizing +.box-sizing(@box-model) { + -webkit-box-sizing: @box-model; // Safari <= 5 + -moz-box-sizing: @box-model; // Firefox <= 19 + box-sizing: @box-model; +} + +// Single side border-radius +.border-top-radius(@radius) { + border-top-right-radius: @radius; + border-top-left-radius: @radius; +} +.border-right-radius(@radius) { + border-bottom-right-radius: @radius; + border-top-right-radius: @radius; +} +.border-bottom-radius(@radius) { + border-bottom-right-radius: @radius; + border-bottom-left-radius: @radius; +} +.border-left-radius(@radius) { + border-bottom-left-radius: @radius; + border-top-left-radius: @radius; +} + +// Drop shadows +.box-shadow(@shadow) { + -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 + box-shadow: @shadow; +} + +// Transitions +.transition(@transition) { + -webkit-transition: @transition; + -moz-transition: @transition; + -o-transition: @transition; + transition: @transition; +} +.transition-delay(@transition-delay) { + -webkit-transition-delay: @transition-delay; + -moz-transition-delay: @transition-delay; + -o-transition-delay: @transition-delay; + transition-delay: @transition-delay; +} +.transition-duration(@transition-duration) { + -webkit-transition-duration: @transition-duration; + -moz-transition-duration: @transition-duration; + -o-transition-duration: @transition-duration; + transition-duration: @transition-duration; +} + +// Transformations +.rotate(@degrees) { + -webkit-transform: rotate(@degrees); + -moz-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); + -o-transform: rotate(@degrees); + transform: rotate(@degrees); +} +.scale(@ratio) { + -webkit-transform: scale(@ratio); + -moz-transform: scale(@ratio); + -ms-transform: scale(@ratio); + -o-transform: scale(@ratio); + transform: scale(@ratio); +} +.translate(@x, @y) { + -webkit-transform: translate(@x, @y); + -moz-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); + -o-transform: translate(@x, @y); + transform: translate(@x, @y); +} +.skew(@x, @y) { + -webkit-transform: skew(@x, @y); + -moz-transform: skew(@x, @y); + -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885 + -o-transform: skew(@x, @y); + transform: skew(@x, @y); + -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319 +} +.translate3d(@x, @y, @z) { + -webkit-transform: translate3d(@x, @y, @z); + -moz-transform: translate3d(@x, @y, @z); + -o-transform: translate3d(@x, @y, @z); + transform: translate3d(@x, @y, @z); +} + +// Backface visibility +// +// Prevent browsers from flickering when using CSS 3D transforms. +// Default value is `visible`, but can be changed to `hidden +// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples +.backface-visibility(@visibility){ + -webkit-backface-visibility: @visibility; + -moz-backface-visibility: @visibility; + backface-visibility: @visibility; +} + +// User select +// +// For selecting text on the page +.user-select(@select) { + -webkit-user-select: @select; + -moz-user-select: @select; + -ms-user-select: @select; + -o-user-select: @select; + user-select: @select; +} + +// Opacity +.opacity(@opacity) { + opacity: @opacity; + @opacity-ie: @opacity * 100; + filter: ~"alpha(opacity=@{opacity-ie})"; // IE8 +} + +// Placeholder text +.placeholder(@color: @input-color-placeholder) { + &:-moz-placeholder { color: @color; } // Firefox 4-18 + &::-moz-placeholder { color: @color; } // Firefox 19+ + &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ + &::-webkit-input-placeholder { color: @color; } // Safari and Chrome +} + +// Resize anything +.resizable(@direction) { + resize: @direction; // Options: horizontal, vertical, both + overflow: auto; // Safari fix +} + +// CSS3 Content Columns +.content-columns(@width, @count, @gap) { + -webkit-column-width: @width; + -moz-column-width: @width; + column-width: @width; + -webkit-column-count: @count; + -moz-column-count: @count; + column-count: @count; + -webkit-column-gap: @gap; + -moz-column-gap: @gap; + column-gap: @gap; +} + +// Optional hyphenation +.hyphens(@mode: auto) { + word-wrap: break-word; + -webkit-hyphens: @mode; + -moz-hyphens: @mode; + -ms-hyphens: @mode; + -o-hyphens: @mode; + hyphens: @mode; +} + +// Gradients +#gradient { + .horizontal(@startColor: #555, @endColor: #333) { + background-color: @endColor; + background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ + background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down + } + .vertical(@startColor: #555, @endColor: #333) { + background-color: @endColor; + background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down + } + .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { + background-color: @endColor; + background-repeat: repeat-x; + background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ + background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 + } + .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { + background-color: mix(@midColor, @endColor, 80%); + background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); + background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); + background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); + background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); + background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor); + background-repeat: no-repeat; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback + } + .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { + background-color: mix(@midColor, @endColor, 80%); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); + background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); + background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); + background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); + background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); + background-repeat: no-repeat; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback + } + .radial(@innerColor: #555, @outerColor: #333) { + background-color: @outerColor; + background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); + background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); + background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); + background-image: -o-radial-gradient(circle, @innerColor, @outerColor); + background-repeat: no-repeat; + } + .striped(@color: #555, @angle: 45deg) { + background-color: @color; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + } +} + +// Reset filters for IE +// +// Useful for when you want to remove a gradient from an element. +.reset-filter() { + filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); +} + + + +// +// Mixins: utilities +// -------------------------------------------------- + +// Clearfix +// +// Source: http://nicolasgallagher.com/micro-clearfix-hack/ +// +// For modern browsers +// 1. The space content is one way to avoid an Opera bug when the +// contenteditable attribute is included anywhere else in the document. +// Otherwise it causes space to appear at the top and bottom of elements +// that are clearfixed. +// 2. The use of `table` rather than `block` is only necessary if using +// `:before` to contain the top-margins of child elements. +.clearfix() { + *zoom: 1; + &:before, + &:after { + content: " "; // 1 + display: table; // 2 + // Fixes Opera/contenteditable bug: + // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 + line-height: 0; + } + &:after { + clear: both; + } +} + +// Center-align a block level element +.center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Sizing shortcuts +.size(@width, @height) { + width: @width; + height: @height; +} +.square(@size) { + .size(@size, @size); +} + +// Text overflow +// +// Requires inline-block or block for proper styling +.text-truncate() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// Retina images +// +// Retina background-image support with non-retina fall back +.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) { + background-image: url("@{file-1x}"); + + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and ( min--moz-device-pixel-ratio: 2), + only screen and ( -o-min-device-pixel-ratio: 2/1), + only screen and ( min-device-pixel-ratio: 2), + only screen and ( min-resolution: 192dpi), + only screen and ( min-resolution: 2dppx) { + background-image: url("@{file-2x}"); + background-size: @width-1x @height-1x; + } +}
\ No newline at end of file diff --git a/theme/stylesheets/ebook.less b/theme/stylesheets/ebook.less new file mode 100755 index 0000000..46fe4bd --- /dev/null +++ b/theme/stylesheets/ebook.less @@ -0,0 +1,63 @@ +@import "mixins.less"; + +@import "ebook/variables.less"; +@import "ebook/highlight.less"; + +.page { + &.page-toc { + ol { + margin: 0px; + } + } + + .book-chapter { + display: none; + } + + .exercise, .quiz { + margin: 1cm 0cm; + border: 2px solid #ddd; + + .exercise-header { + padding: 0.1cm 0.3cm; + background: #f5f5f5; + border-bottom: 1px solid #ddd; + font-weight: bold; + page-break-inside: avoid; + } + + .exercise-inner { + padding: 0.15cm 0.3cm; + + p:last-child { + margin: 0px; + } + } + + hr { + height: 2px; + } + + .question { + margin-top: 0.1cm; + border-top: 1px solid #ddd; + + .question-base { + + } + + .question-solution { + + } + } + } +} + + + +body { + .page { + font-family: sans-serif; + .markdown-content(#333, 1.6); + } +} diff --git a/theme/stylesheets/ebook/highlight.less b/theme/stylesheets/ebook/highlight.less new file mode 100644 index 0000000..26078cb --- /dev/null +++ b/theme/stylesheets/ebook/highlight.less @@ -0,0 +1,90 @@ +/* http://jmblog.github.io/color-themes-for-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; +} diff --git a/theme/stylesheets/ebook/variables.less b/theme/stylesheets/ebook/variables.less new file mode 100644 index 0000000..4714151 --- /dev/null +++ b/theme/stylesheets/ebook/variables.less @@ -0,0 +1 @@ +@font-size-base: 13px; diff --git a/theme/stylesheets/mixins.less b/theme/stylesheets/mixins.less new file mode 100755 index 0000000..9d28305 --- /dev/null +++ b/theme/stylesheets/mixins.less @@ -0,0 +1,20 @@ +@import "base/markdown.less"; + +.link-inherit { + color: inherit; + + &:hover, &:focus { + color: inherit; + } +} + +.transition-transform(@transition) { + -webkit-transition: -webkit-transform @transition; + -moz-transition: -moz-transform @transition; + -o-transition: -o-transform @transition; + transition: transform @transition; +} + +.hidden { + display: none; +} diff --git a/theme/stylesheets/website.less b/theme/stylesheets/website.less new file mode 100755 index 0000000..3a5258b --- /dev/null +++ b/theme/stylesheets/website.less @@ -0,0 +1,47 @@ +@import "base/normalize.less"; +@import "base/preboot.less"; +@import "../vendors/fontawesome/less/font-awesome.less"; + +@import "mixins.less"; + +@import "website/fonts.less"; +@import "website/variables.less"; +@import "website/languages.less"; +@import "website/header.less"; +@import "website/dropdown.less"; +@import "website/alerts.less"; +@import "website/summary.less"; +@import "website/font-settings.less"; +@import "website/body.less"; +@import "website/buttons.less"; +@import "website/markdown.less"; +@import "website/navigation.less"; +@import "website/glossary.less"; + +* { + .box-sizing(border-box); + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: transparent; + -webkit-text-size-adjust: none; + -webkit-touch-callout: none; + -webkit-font-smoothing: antialiased; +} + +a { + text-decoration: none; +} + +html, body { + height: 100%; +} + +html { + font-size: 62.5%; +} + +body { + text-rendering: optimizeLegibility; + font-smoothing: antialiased; + font-family: @font-family-base; + font-size: @font-size-base; +} diff --git a/theme/stylesheets/website/alerts.less b/theme/stylesheets/website/alerts.less new file mode 100644 index 0000000..22fc863 --- /dev/null +++ b/theme/stylesheets/website/alerts.less @@ -0,0 +1,31 @@ +.alert { + padding: 15px; + margin-bottom: 20px; + color: #444; + background: #eee; + border-bottom: 5px solid #ddd; +} + +.alert-success { + background: @state-success-bg; + border-color: @state-success-border; + color: @state-success-text; +} + +.alert-info { + background: @state-info-bg; + border-color: @state-info-border; + color: @state-info-text; +} + +.alert-danger { + background: @state-danger-bg; + border-color: @state-danger-border; + color: @state-danger-text; +} + +.alert-warning { + background: @state-warning-bg; + border-color: @state-warning-border; + color: @state-warning-text; +} diff --git a/theme/stylesheets/website/body.less b/theme/stylesheets/website/body.less new file mode 100755 index 0000000..3b99250 --- /dev/null +++ b/theme/stylesheets/website/body.less @@ -0,0 +1,146 @@ +.book { + position: relative; + width: 100%; + height: 100%; + + .book-body { + position: absolute; + top: 0px; + right: 0px; + left: 0px; + bottom: 0px; + overflow-y: auto; + + color: @page-color; + background: @body-background; + .transition(left @sidebar-transition-duration 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; + padding: 20px 0px 40px 0px; + + section { + margin: 0px 0px; + padding: 5px 15px; + + background: @page-background; + border-radius: 2px; + line-height: @content-line-height; + font-size: @default-font-size; + } + + .btn-group { + .btn { + border-radius: 0px; + background: #eee; + border: 0px; + } + } + } + } + + @media (max-width: @mobileMaxWidth) { + .transition-transform(@sidebar-transition-duration ease); + padding-bottom: 20px; + + .body-inner { + position: static; + min-height: calc(~"100% - 50px") + } + } + } + + &.with-summary { + @media (min-width: @sidebar-breakpoint) { + .book-body { + left: @sidebar-width; + } + } + @media (max-width: @sidebar-breakpoint) { + overflow: hidden; + + .book-body { + .translate(~"calc(100% - 60px)", 0px); + } + } + } + + &.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 .page-inner section { + font-size:@s-font-size; + } + } + &.font-size-1 { + .book-body .page-inner section { + font-size:@m-font-size; + } + } + &.font-size-2 { + .book-body .page-inner section { + font-size:@l-font-size; + } + } + &.font-size-3{ + .book-body .page-inner section { + font-size:@xl-font-size; + } + } + &.font-size-4 { + .book-body .page-inner section { + 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/buttons.less b/theme/stylesheets/website/buttons.less new file mode 100644 index 0000000..dbc4769 --- /dev/null +++ b/theme/stylesheets/website/buttons.less @@ -0,0 +1,32 @@ +.buttons { + .clearfix(); +} + +.button { + border: 0; + background-color: transparent; + background: @button-background; + color: @button-color; + width: 100%; + text-align: center; + float: left; + line-height: @line-height-base; + padding: 8px 4px; + + &:hover { + color: @button-hover-color; + } + + &:focus, &:hover { + outline: none; + } + + &.size-2 { + width: 50%; + } + + &.size-3 { + width: 33%; + } +} + diff --git a/theme/stylesheets/website/dropdown.less b/theme/stylesheets/website/dropdown.less new file mode 100644 index 0000000..0cc1e8e --- /dev/null +++ b/theme/stylesheets/website/dropdown.less @@ -0,0 +1,159 @@ +.dropdown { + position: relative; +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: @dropdown-zindex; + display: none; // none by default, but block on "open" of the menu + float: left; + min-width: 160px; + padding: 0; + margin: 2px 0 0; // override default ul + list-style: none; + font-size: @font-size-base; + background-color: @dropdown-background; + border: 1px solid @dropdown-border-color; + border-radius: @border-radius-base; + .box-shadow(0 6px 12px rgba(0,0,0,.175)); + background-clip: padding-box; + + &.open{ + display:block; + } + + &.dropdown-left { + left: auto; + right: 4%; + + .dropdown-caret { + right: 14px; + left: auto; + } + } + + .dropdown-caret{ + position: absolute; + top: -8px; + left: 14px; + width: 18px; + height: 10px; + float: left; + overflow: hidden; + + .caret-outer{ + position: absolute; + border-left: 9px solid transparent; + border-right: 9px solid transparent; + border-bottom: 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-top: -1px; + top: 0; + top: 1px; + border-left: 9px solid transparent; + border-right: 9px solid transparent; + border-bottom: 9px solid @dropdown-background; + } + } + + .buttons { + .clearfix(); + border-bottom: 1px solid @sidebar-divider-color; + + &:last-child { + border-bottom: none; + } + + .button { + border: 0; + background-color: transparent; + color: @dropdown-button-color; + width: 100%; + text-align: center; + float: left; + line-height: @line-height-base; + padding: 8px 4px; + + &:hover { + color: @dropdown-button-hover-color; + } + + &:focus, &:hover { + outline: none; + } + + &.size-2 { + width: 50%; + } + + &.size-3 { + width: 33%; + } + } + } +} + +/* + * Theme 1 + */ + +.color-theme-1 { + .dropdown-menu{ + background-color: @dropdown-background-1; + border-color: @dropdown-border-color-1; + + .dropdown-caret .caret-inner{ + border-bottom: 9px solid @dropdown-background-1; + } + + .buttons { + border-color: @dropdown-divider-color-1; + } + + .button { + color: @dropdown-button-color-1; + + &:hover{ + color: @dropdown-button-hover-color-1; + } + } + } +} + +/* + * Theme 2 + */ + +.color-theme-2 { + .dropdown-menu{ + background-color: @dropdown-background-2; + border-color: @dropdown-border-color-2; + + .dropdown-caret .caret-inner{ + border-bottom: 9px solid @dropdown-background-2; + } + + .buttons { + border-color: @dropdown-divider-color-2; + } + + .button { + color: @dropdown-button-color-2; + + &:hover{ + color: @dropdown-button-hover-color-2; + } + } + } +} diff --git a/theme/stylesheets/website/font-settings.less b/theme/stylesheets/website/font-settings.less new file mode 100644 index 0000000..dc3fb7e --- /dev/null +++ b/theme/stylesheets/website/font-settings.less @@ -0,0 +1,15 @@ +.book-header{ + #font-settings-wrapper{ + #enlarge-font-size, #reduce-font-size { + line-height: 30px; + } + + #enlarge-font-size{ + font-size: 1.4em; + } + #reduce-font-size{ + font-size: 1em; + } + } +} + diff --git a/theme/stylesheets/website/fonts.less b/theme/stylesheets/website/fonts.less new file mode 100644 index 0000000..e6457bc --- /dev/null +++ b/theme/stylesheets/website/fonts.less @@ -0,0 +1,96 @@ +@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: 250; + 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: 400; + src: local('Merriweather Italic'),url('@{FontPath}/merriweather/400i.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: 700; + 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: 900; + src: local('Merriweather Heavy Italic'),url('@{FontPath}/merriweather/900i.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: 300; + 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: 400; + 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: 600; + 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: 700; + 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/glossary.less b/theme/stylesheets/website/glossary.less new file mode 100644 index 0000000..e360627 --- /dev/null +++ b/theme/stylesheets/website/glossary.less @@ -0,0 +1,22 @@ +.book .book-body .page-wrapper .page-inner section.glossary { + margin-bottom: 40px; + + h2 { + a, a:hover { + color: inherit; + text-decoration: none; + } + } + + .glossary-index { + list-style: none; + margin: 0px; + padding: 0px; + + li { + display: inline; + margin: 0px 8px; + white-space: nowrap; + } + } +} diff --git a/theme/stylesheets/website/header.less b/theme/stylesheets/website/header.less new file mode 100755 index 0000000..2e987d7 --- /dev/null +++ b/theme/stylesheets/website/header.less @@ -0,0 +1,120 @@ +.book { + .book-header { + font-family: @font-family-sans; + + overflow: visible; + height: @header-height; + padding: 0px 8px; + z-index: 2; + + font-size: 0.85em; + color: @header-color; + background: @header-background; + + .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; + font-size: @font-size-base; + + &:hover { + position: relative; + text-decoration: none; + color: @header-button-hover-color; + background: @header-button-hover-background; + } + } + + h1 { + margin: 0px; + font-size: 20px; + font-weight: 200; + text-align: center; + line-height: @header-height; + opacity: 0; + .transition(opacity ease 0.4s); + + padding-left: 200px; + padding-right: 200px; + .transition(opacity 0.2s ease); + + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + a, a:hover { + color: inherit; + text-decoration: none; + } + + @media (max-width: 1000px) { + display: none; + } + + i { + display: none; + } + } + + &:hover { + h1 { + opacity: 1; + } + } + } + + &.is-loading { + .book-header h1 { + i { + display: inline-block; + } + a { + display: none; + } + } + } + + &.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; + } + } + + h1 { + color: @page-color-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; + } + } + + h1 { + color: @page-color-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..b5b0121 --- /dev/null +++ b/theme/stylesheets/website/markdown.less @@ -0,0 +1,138 @@ +.book .book-body .page-wrapper .page-inner section { + display: none; +} + +.book .book-body .page-wrapper .page-inner section.normal { + .markdown-content(@content-color, @content-line-height); + + pre, code { + @import "./highlight/white.less"; + } + + .glossary-term { + cursor: help; + text-decoration: underline; + } +} + +.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal { + color: @page-color-1; + + a { + color: @page-link-color-1; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: @page-heading-color-1; + } + + h1, h2 { + border-color: @page-heading-border-color-1; + } + + h6 { + color: @page-h6-color-1; + } + + hr { + background-color: @page-hr-color-1; + } + + blockquote { + border-color: @page-blockquote-border-color-1; + } + + pre, code { + background: @page-pre-background-1; + color: @page-pre-color-1; + border-color: @page-pre-border-color-1; + + @import "./highlight/sepia.less"; + } + + .highlight { + background-color: @page-highlight-background-1; + } + + table { + th, td { + border-color: @page-table-header-border-color-1; + } + + tr { + color: @page-table-row-color-1; + background-color: @page-table-row-background-1; + border-color: @page-table-row-border-color-1; + } + + tr:nth-child(2n) { + background-color: @page-table-row-odd-background-1; + } + } +} + +.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal { + color: @page-color-2; + + a { + color: @page-link-color-2; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: @page-heading-color-2; + } + + h1, h2 { + border-color: @page-heading-border-color-2; + } + + h6 { + color: @page-h6-color-2; + } + + hr { + background-color: @page-hr-color-2; + } + + blockquote { + border-color: @page-blockquote-border-color-2; + } + + pre, code { + color: @page-pre-color-2; + background: @page-pre-background-2; + border-color: @page-pre-border-color-2; + + @import "./highlight/night.less"; + } + + .highlight { + background-color: @page-highlight-background-2; + } + + table { + th, td { + border-color: @page-table-header-border-color-2; + } + + tr { + color: @page-table-row-color-2; + background-color: @page-table-row-background-2; + border-color: @page-table-row-border-color-2; + } + + tr:nth-child(2n) { + background-color: @page-table-row-odd-background-2; + } + } +} diff --git a/theme/stylesheets/website/navigation.less b/theme/stylesheets/website/navigation.less new file mode 100755 index 0000000..3743381 --- /dev/null +++ b/theme/stylesheets/website/navigation.less @@ -0,0 +1,68 @@ +.book .book-body { + .navigation { + position: absolute; + top: @header-height; + 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: @navigation-color; + + text-align: center; + + .transition(all 350ms ease); + + &:hover { + text-decoration: none; + color: @navigation-hover-color; + } + + &.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 { + color: @navigation-color-1; + + &:hover { + color: @navigation-hover-color-1; + } + } +} +.book.color-theme-2 .book-body { + .navigation { + color: @navigation-color-2; + + &:hover { + color: @navigation-hover-color-2; + } + } +}
\ No newline at end of file diff --git a/theme/stylesheets/website/summary.less b/theme/stylesheets/website/summary.less new file mode 100755 index 0000000..50aeebd --- /dev/null +++ b/theme/stylesheets/website/summary.less @@ -0,0 +1,242 @@ +.book { + .book-summary { + font-family: @font-family-sans; + + position: absolute; + top: 0px; + left: -@sidebar-width; + bottom: 0px; + z-index: 1; + + width: @sidebar-width; + color: @sidebar-color; + background: @sidebar-background; + border-right: @sidebar-border-right; + + .transition(left @sidebar-transition-duration 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, input:hover { + width: 100%; + background: @sidebar-search-input-background; + border: 1px solid @sidebar-search-input-border-color; + .box-shadow(none); + outline: none; + line-height: 22px; + padding: 7px 4px; + color: inherit; + } + } + + 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; + } + + 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: calc(~"100% - 60px"); + 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; + border-right: @sidebar-border-right-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; + font-weight: @sidebar-link-weight-1; + } + + &.active > a, a:hover { + color: @sidebar-link-hover-color-1; + background: @sidebar-link-hover-background-1; + font-weight: @sidebar-link-hover-weight-1; + } + } + } + } +} + +/* + * Theme 2 + */ +.book.color-theme-2{ + .book-summary { + color: @sidebar-color-2; + background: @sidebar-background-2; + border-right: @sidebar-border-right-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; + font-weight: @sidebar-link-weight-2; + } + + &.active > a, a:hover { + color: @sidebar-link-hover-color-2; + background: @sidebar-link-hover-background-2; + font-weight: @sidebar-link-hover-weight-2; + } + } + } + } +} diff --git a/theme/stylesheets/website/variables.less b/theme/stylesheets/website/variables.less new file mode 100644 index 0000000..e3ec2cb --- /dev/null +++ b/theme/stylesheets/website/variables.less @@ -0,0 +1,242 @@ +@staticPath: "./"; + +// Font sizes +@font-size-base: 14px; +@font-size-large: ceil(@font-size-base * 1.25); // ~18px +@font-size-small: ceil(@font-size-base * 0.85); // ~12px +@line-height-base: 1.428571429; // 20/14 +@line-height-computed: floor(@font-size-base * @line-height-base); + +// Sizes +@mobileMaxWidth: 1240px; + +// Header +@header-height: 50px; +@header-color: hsl(194, 5%, 52%); +@header-background: transparent; +@header-border: rgba(0, 0, 0, 0.07); +@header-button-color: #ccc; +@header-button-hover-color: #444; +@header-button-hover-background: none; + +// Navigation +@navigation-color: @header-button-color; +@navigation-hover-color: @header-button-hover-color; + +// Body +@body-background: white; + +// Sidebar +@sidebar-width: 300px; +@sidebar-breakpoint: 600px; +@sidebar-color: hsl(207, 15%, 25%); +@sidebar-background: #fafafa; +@sidebar-border-right: 1px solid @header-border; + +@sidebar-nested-padding: 20px; + +@sidebar-search-padding: 6px; +@sidebar-search-background: transparent; +@sidebar-search-input-background: transparent; +@sidebar-search-input-border-color: transparent; + +@sidebar-divider-color: @header-border; + +@sidebar-link-color: @sidebar-color; +@sidebar-link-background: transparent; +@sidebar-link-hover-color: hsl(207, 100%, 50%); +@sidebar-link-hover-background: transparent; + +@sidebar-icon-color: hsl(120, 60%, 50%); +@sidebar-link-completed: @sidebar-link-color; +@sidebar-link-completed-weight: normal; + +// Page +@page-color: black; +@page-background: @body-background; + +// Content +@content-line-height: 1.6; +@content-color: #333333; + +// Dropdown +@dropdown-zindex: 100; +@dropdown-divider-color: @sidebar-divider-color; +@dropdown-background: @sidebar-background; +@dropdown-button-color: darken(@header-button-color, 15%); +@dropdown-border-color: @sidebar-divider-color; +@dropdown-button-hover-color: @header-button-hover-color; + +// Buttons +@button-background: #eee; +@button-color: #666; +@button-hover-color: #444; + +// States and alerts +@state-success-text: #3c763d; +@state-success-bg: #dff0d8; +@state-success-border: darken(spin(@state-success-bg, -10), 5%); + +@state-info-text: #31708f; +@state-info-bg: #d9edf7; +@state-info-border: darken(spin(@state-info-bg, -10), 7%); + +@state-warning-text: #8a6d3b; +@state-warning-bg: #fcf8e3; +@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); + +@state-danger-text: #a94442; +@state-danger-bg: #f2dede; +@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); + +// Border Radius +@border-radius-base: 1px; +@border-radius-large: 3px; +@border-radius-small: 1px; + +// Fonts +@font-family-serif: "Merriweather", Georgia, serif; +@font-family-sans: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-base: @font-family-sans; +@headings-font-family: inherit; + +@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; +@default-font-size: @l-font-size; + +/* +,--------.,--. +'--. .--'| ,---. ,---. ,--,--,--. ,---. ,---. .--. + | | | .-. || .-. :| || .-. :( .-' '--' + | | | | | |\ --.| | | |\ --..-' `).--. + `--' `--' `--' `----'`--`--`--' `----'`----' '--' +*/ +// Header +@header-color-1: #AFA790; +@header-color-2: #7e888b; +@header-background-1: transparent; +@header-background-2: transparent; +@header-button-color-1: #AFA790; +@header-button-color-2: hsl(230, 17%, 28%); +@header-button-hover-color-1: #73553C; +@header-button-hover-color-2: hsl(60, 100%, 98%); +@header-button-hover-background-1: none; +@header-button-hover-background-2: none; +@header-dropdown-background-1: @sidebar-background-1; +@header-dropdown-background-2: @sidebar-background-2; + +// Body +@body-background-1: #F3EACB; +@body-background-2: hsl(228, 21%, 14%); + +// Sidebar +@sidebar-transition-duration: 250ms; +@sidebar-color-1: #AFA790; +@sidebar-color-2: hsl(226, 20%, 78%); +@sidebar-background-1: #111; +@sidebar-background-2: hsl(229, 20%, 22%); +@sidebar-border-right-1: @sidebar-border-right; +@sidebar-border-right-2: none; + +@sidebar-search-background-1: transparent; +@sidebar-search-background-2: transparent; +@sidebar-search-input-border-color-1: transparent; +@sidebar-search-input-border-color-2: transparent; + +@sidebar-divider-color-1: @sidebar-divider-color; +@sidebar-divider-color-2: hsl(230, 19%, 19%); + +@sidebar-link-color-1: #877F6A; +@sidebar-link-color-2: hsl(226, 22%, 80%); +@sidebar-link-background-1: transparent; +@sidebar-link-background-2: transparent; +@sidebar-link-weight-1: normal; +@sidebar-link-weight-2: 600; +@sidebar-link-hover-color-1: #704214; +@sidebar-link-hover-color-2: hsl(240, 5%, 96%); +@sidebar-link-hover-background-1: transparent; +@sidebar-link-hover-background-2: hsl(233, 19%, 18%); +@sidebar-link-hover-weight-1: normal; +@sidebar-link-hover-weight-2: 600; + +@sidebar-icon-color-1: hsl(120, 60%, 50%); +@sidebar-icon-color-2: @sidebar-icon-color-1; +@sidebar-link-completed-1: @sidebar-link-color-1; +@sidebar-link-completed-2: hsl(227, 13%, 44%); +@sidebar-link-completed-weight-1: normal; +@sidebar-link-completed-weight-2: 600; + +// Dropdown +@dropdown-divider-color-1: @sidebar-divider-color-1; +@dropdown-divider-color-2: @sidebar-divider-color-2; +@dropdown-border-color-1: @sidebar-divider-color-1; +@dropdown-border-color-2: @sidebar-divider-color-2; +@dropdown-background-1: @sidebar-background-1; +@dropdown-background-2: @sidebar-background-2; + +@dropdown-button-color-1: @header-button-color-1; +@dropdown-button-color-2: hsl(228, 13%, 44%); +@dropdown-button-hover-color-1: @header-button-hover-color-1; +@dropdown-button-hover-color-2: hsl(240, 5%, 96%); + +// Page +@page-color-1: #704214; +@page-color-2: hsl(214, 29%, 80%); +@page-background-1: @body-background-1; +@page-background-2: @body-background-2; + +@page-link-color-1: inherit; +@page-link-color-2: hsl(193, 61%, 53%); + +@page-heading-color-1: inherit; +@page-heading-color-2: hsl(60, 100%, 99%); +@page-heading-border-color-1: inherit; +@page-heading-border-color-2: hsl(230, 17%, 26%); +@page-h6-color-1: inherit; +@page-h6-color-2: hsl(230, 17%, 26%); + +@page-hr-color-1: inherit; +@page-hr-color-2: hsl(230, 17%, 26%); + +@page-blockquote-border-color-1: inherit; +@page-blockquote-border-color-2: hsl(230, 17%, 26%); + +@page-pre-color-1: #657b83; +@page-pre-color-2: hsl(206, 43%, 73%); +@page-pre-background-1: #fdf6e3; +@page-pre-background-2: hsl(229, 20%, 22%); +@page-pre-border-color-1: darken(#fdf6e3, 15%); +@page-pre-border-color-2: hsl(229, 20%, 22%); +@page-highlight-background-1: inherit; +@page-highlight-background-2: hsl(233, 18%, 19%); + +@page-table-header-border-color-1: darken(#fdf6e3, 25%); +@page-table-header-border-color-2: hsl(230, 17%, 28%); +@page-table-row-border-color-1: #444; +@page-table-row-border-color-2: hsl(230, 17%, 28%); +@page-table-row-color-1: inherit; +@page-table-row-color-2: hsl(216, 24%, 77%); +@page-table-row-background-1: #fdf6e3; +@page-table-row-background-2: hsl(229, 19%, 22%); +@page-table-row-odd-background-1: darken(#fdf6e3, 5%); +@page-table-row-odd-background-2: hsl(229, 17%, 25%); + +// Page Bar +@bar-background-1: @page-background-1; +@bar-background-2: @page-background-2; + +// Navigation +@navigation-color-1: @header-button-color-1; +@navigation-color-2: hsl(224, 19%, 27%); +@navigation-hover-color-1: @header-button-hover-color-1; +@navigation-hover-color-2: hsl(60, 100%, 98%); + +// Basics of a navbar +@navbar-default-border-1: #d5d5d5; +@navbar-default-border-2: #d5d5d5; |