diff --git a/Readme.md b/Readme.md index 0967599..27c7c0d 100644 --- a/Readme.md +++ b/Readme.md @@ -32,6 +32,8 @@ The main JS and CSS files are also available in [npm] and [bower]. [Blank template >][blank] +[Dark theme template >][dark-theme] **[Demo][dark-theme-preview]** + [bower]: http://bower.io/search/?q=flatdoc [npm]: https://www.npmjs.org/package/flatdoc @@ -263,4 +265,6 @@ License](http://www.opensource.org/licenses/mit-license.php). [project]: https://github.com/rstacruz/flatdoc [template]: https://github.com/rstacruz/flatdoc/raw/gh-pages/templates/template.html [blank]: https://github.com/rstacruz/flatdoc/raw/gh-pages/templates/blank.html +[dark-theme]: https://github.com/tonetlds/flatdoc/raw/gh-pages/templates/template-dark.html +[dark-theme-preview]: https://tonetlds.github.com/flatdoc/theme-dark/index.html [dist]: https://github.com/rstacruz/flatdoc/tree/gh-pages/v/0.9.0 diff --git a/templates/template-dark.html b/templates/template-dark.html new file mode 100644 index 0000000..e00fcfc --- /dev/null +++ b/templates/template-dark.html @@ -0,0 +1,79 @@ + + + + + + + + + Your Project + + + + + + + + + + + + + + + + + + + + + +
+
+

Your Project

+ +
+
+ + +
+
+ +
+
+
+
+
+
+ + + + + + diff --git a/theme-dark/index.html b/theme-dark/index.html new file mode 100644 index 0000000..c9be3d8 --- /dev/null +++ b/theme-dark/index.html @@ -0,0 +1,99 @@ + + + + + + + + Flatdoc - Dark Theme + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Documentation is easy.

+

Flatdoc is the fastest way to create a site for your open source project.

+
Flatdoc - Dark Theme
+
+
+
+ +
+
+

Flatdoc

+ +
+
+ + +
+
+ +
+
+
+ Download + +
+
+
+ +
+ HN +
+ View on GitHub
+ See .md source +
+
+
+
+ + + + + + + + + + + + + diff --git a/theme-dark/script.js b/theme-dark/script.js new file mode 100644 index 0000000..c95d198 --- /dev/null +++ b/theme-dark/script.js @@ -0,0 +1,264 @@ +(function($) { + var $window = $(window); + var $document = $(document); + + /* + * Scrollspy. + */ + + $document.on('flatdoc:ready', function() { + $("h2, h3").scrollagent(function(cid, pid, currentElement, previousElement) { + if (pid) { + $("[href='#"+pid+"']").removeClass('active'); + } + if (cid) { + $("[href='#"+cid+"']").addClass('active'); + } + }); + }); + + /* + * Anchor jump links. + */ + + $document.on('flatdoc:ready', function() { + $('.menu a').anchorjump(); + }); + + + /* + * Sintax highlight the codes. + */ + $document.on('flatdoc:ready', function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); + + +$(window).on('hashchange', function() { + var file = window.location.hash.replace('#', ""); + // file = file.match(/[a-zA-Z0-9]*\.md$/g); + if (file == null || file.length < 1) file = '../Readme.md'; else file = file; + + Flatdoc.run({ + fetcher: Flatdoc.file(file) + }); +}); + + /* + * Title card. + */ + + $(function() { + var $card = $('.title-card'); + if (!$card.length) return; + + var $header = $('.header'); + var headerHeight = $header.length ? $header.outerHeight() : 0; + + $window + .on('resize.title-card', function() { + var windowWidth = $window.width(); + + if (windowWidth < 480) { + $card.css('height', ''); + } else { + var height = $window.height(); + $card.css('height', height - headerHeight); + } + }) + .trigger('resize.title-card'); + }); + + /* + * Sidebar stick. + */ + + $(function() { + var $sidebar = $('.menubar'); + var elTop; + + $window + .on('resize.sidestick', function() { + $sidebar.removeClass('fixed'); + elTop = $sidebar.offset().top; + $window.trigger('scroll.sidestick'); + }) + .on('scroll.sidestick', function() { + var scrollY = $window.scrollTop(); + $sidebar.toggleClass('fixed', (scrollY >= elTop)); + }) + .trigger('resize.sidestick'); + }); + +})(jQuery); +/*! jQuery.scrollagent (c) 2012, Rico Sta. Cruz. MIT License. + * https://github.com/rstacruz/jquery-stuff/tree/master/scrollagent */ + +// Call $(...).scrollagent() with a callback function. +// +// The callback will be called everytime the focus changes. +// +// Example: +// +// $("h2").scrollagent(function(cid, pid, currentElement, previousElement) { +// if (pid) { +// $("[href='#"+pid+"']").removeClass('active'); +// } +// if (cid) { +// $("[href='#"+cid+"']").addClass('active'); +// } +// }); + +(function($) { + + $.fn.scrollagent = function(options, callback) { + // Account for $.scrollspy(function) + if (typeof callback === 'undefined') { + callback = options; + options = {}; + } + + var $sections = $(this); + var $parent = options.parent || $(window); + + // Find the top offsets of each section + var offsets = []; + $sections.each(function(i) { + var offset = $(this).attr('data-anchor-offset') ? + parseInt($(this).attr('data-anchor-offset'), 10) : + (options.offset || 0); + + offsets.push({ + id: $(this).attr('id'), + index: i, + el: this, + offset: offset + }); + }); + + // State + var current = null; + var height = null; + var range = null; + + // Save the height. Do this only whenever the window is resized so we don't + // recalculate often. + $(window).on('resize', function() { + height = $parent.height(); + range = $(document).height(); + }); + + // Find the current active section every scroll tick. + $parent.on('scroll', function() { + var y = $parent.scrollTop(); + y += height * (0.3 + 0.7 * Math.pow(y/range, 2)); + + var latest = null; + + for (var i in offsets) { + if (offsets.hasOwnProperty(i)) { + var offset = offsets[i]; + if ($(offset.el).offset().top + offset.offset < y) latest = offset; + } + } + + if (latest && (!current || (latest.index !== current.index))) { + callback.call($sections, + latest ? latest.id : null, + current ? current.id : null, + latest ? latest.el : null, + current ? current.el : null); + current = latest; + } + }); + + $(window).trigger('resize'); + $parent.trigger('scroll'); + + return this; + }; + +})(jQuery); +/*! Anchorjump (c) 2012, Rico Sta. Cruz. MIT License. + * http://github.com/rstacruz/jquery-stuff/tree/master/anchorjump */ + +// Makes anchor jumps happen with smooth scrolling. +// +// $("#menu a").anchorjump(); +// $("#menu a").anchorjump({ offset: -30 }); +// +// // Via delegate: +// $("#menu").anchorjump({ for: 'a', offset: -30 }); +// +// You may specify a parent. This makes it scroll down to the parent. +// Great for tabbed views. +// +// $('#menu a').anchorjump({ parent: '.anchor' }); +// +// You can jump to a given area. +// +// $.anchorjump('#bank-deposit', options); + +(function($) { + var defaults = { + 'speed': 500, + 'offset': 0, + 'for': null, + 'parent': null + }; + + $.fn.anchorjump = function(options) { + options = $.extend({}, defaults, options); + + if (options['for']) { + this.on('click', options['for'], onClick); + } else { + this.on('click', onClick); + } + + function onClick(e) { + var $a = $(e.target).closest('a'); + if (e.ctrlKey || e.metaKey || e.altKey || $a.attr('target')) return; + + e.preventDefault(); + var href = $a.attr('href'); + + $.anchorjump(href, options); + } + }; + + // Jump to a given area. + $.anchorjump = function(href, options) { + options = $.extend({}, defaults, options); + + var top = 0; + + if (href != '#') { + var $area = $(href); + // Find the parent + if (options.parent) { + var $parent = $area.closest(options.parent); + if ($parent.length) { $area = $parent; } + } + if (!$area.length) { return; } + + // Determine the pixel offset; use the default if not available + var offset = + $area.attr('data-anchor-offset') ? + parseInt($area.attr('data-anchor-offset'), 10) : + options.offset; + + top = Math.max(0, $area.offset().top + offset); + } + + $('html, body').animate({ scrollTop: top }, options.speed); + $('body').trigger('anchor', href); + + // Add the location hash via pushState. + if (window.history.pushState) { + window.history.pushState({ href: href }, "", href); + } + }; +})(jQuery); diff --git a/theme-dark/style.css b/theme-dark/style.css new file mode 100644 index 0000000..29f0e6a --- /dev/null +++ b/theme-dark/style.css @@ -0,0 +1,926 @@ +/* + +Please don't edit this file directly. +Instead, edit the stylus (.styl) files and compile it to CSS on your machine. + +*/ +/* ---------------------------------------------------------------------------- + * Fonts + */ +@import url("//fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300"); +/* ---------------------------------------------------------------------------- + * Base + */ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-style: inherit; + font-family: inherit; + font-size: 100%; + vertical-align: baseline; +} +body { + line-height: 1; + color: #000; + background: #fff; +} +ol, +ul { + list-style: none; +} +table { + border-collapse: separate; + border-spacing: 0; + vertical-align: middle; +} +caption, +th, +td { + text-align: left; + font-weight: normal; + vertical-align: middle; +} +a img { + border: none; +} +html, +body { + height: 100%; +} +html { + overflow-x: hidden; +} +body, +td, +textarea, +input { + font-family: Helvetica Neue, Open Sans, sans-serif; + line-height: 1.6; + font-size: 15px; + color: #272724; + background: #272724; +} +@media (max-width: 480px) { + body, + td, + textarea, + input { + font-size: 12px; + } +} +a { + color: #2badad; + text-decoration: none; +} +a:hover { + color: #228a8a; +} +/* ---------------------------------------------------------------------------- + * Content styling + */ +.content p, +.content ul, +.content ol, +.content h1, +.content h2, +.content h3, +.content h4, +.content h5, +.content h6, +.content pre, +.content blockquote { + padding: 15px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.content h1, +.content h2, +.content h3, +.content h4, +.content h5, +.content h6 { + font-weight: bold; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} +.content pre { + font-family: Menlo, monospace; +} +.content ul > li { + list-style-type: disc; +} +.content ol > li { + list-style-type: decimal; +} +.content ul, +.content ol { + margin-left: 20px; +} +.content ul > li { + list-style-type: none; + position: relative; +} +.content ul > li:before { + content: ''; + display: block; + position: absolute; + left: -17px; + top: 7px; + width: 5px; + height: 5px; + -webkit-border-radius: 4px; + border-radius: 4px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + background: #fff; + border: solid 1px #9090aa; +} +.content li > :first-child { + padding-top: 0; +} +.content strong, +.content b { + font-weight: bold; +} +.content i, +.content em { + font-style: italic; + color: #9090aa; +} +.content code { + font-family: Menlo, monospace; + background: #2e2e2e; + color: #fff; + padding: 1px 3px; + font-size: 0.95em; +} +.content pre > code { + display: block; + /* background: transparent; */ + font-size: 0.85em; + letter-spacing: 0px; + background: #2e2e2e; + /* border: solid 1px #dfe2e7; */ + /* border-top: solid 1px #dbdde2; */ + /* border-left: solid 1px #e2e5e9; */ + display: block; + padding: 15px; + -webkit-border-radius: 2px; + border-radius: 2px; + overflow: auto; + line-height: 1.44; +} +.content blockquote :first-child { + padding-top: 0; +} +.content blockquote :last-child { + padding-bottom: 0; + /* padding-left: 40px; */ + /* padding-right: 40px; */ +} +.content table { + margin-top: 10px; + margin-bottom: 10px; + padding: 0; + border-collapse: collapse; + clear: both; + float: left; +} +.content table tr { + border-top: 1px solid #ccc; + background-color: #fff; + margin: 0; + padding: 0; +} +.content table tr :nth-child(2n) { + background-color: #f8f8f8; +} +.content table tr th { + text-align: auto; + font-weight: bold; + border: 1px solid #ccc; + margin: 0; + padding: 6px 13px; +} +.content table tr td { + text-align: auto; + border: 1px solid #ccc; + margin: 0; + padding: 6px 13px; +} +.content table tr th :first-child, +.content table tr td :first-child { + margin-top: 0; +} +.content table tr th :last-child, +.content table tr td :last-child { + margin-bottom: 0; +} +/* ---------------------------------------------------------------------------- + * Content + */ +.content-root { + min-height: calc( 100% + 70px ); + position: relative; +} +.content { + padding-top: 30px; + padding-bottom: 40px; + padding-left: 40px; + padding-right: 40px; + zoom: 1; + max-width: 66%; + background: #fff; +} +.content:before, +.content:after { + content: ""; + display: table; +} +.content:after { + content: ""; + display: block; + position: absolute; + margin-left: 230px; + top: 0; + left: 0; + bottom: 0; + width: calc( 60% - 138px ); + height: calc( 100% + 160px ); + background-color: white; + z-index: -1; +} +.content:after { + clear: both; +} +.content blockquote { + color: #9090aa; + /* text-shadow: 0 1px 0 rgba(255,255,255,0.5); */ +} +.content h1, +.content h2, +.content h3 { + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + font-family: montserrat; + padding-bottom: 0; +} +.content h1 + p, +.content h2 + p, +.content h3 + p, +.content h1 ul, +.content h2 ul, +.content h3 ul, +.content h1 ol, +.content h2 ol, +.content h3 ol { + padding-top: 10px; +} +.content h1, +.content h2 { + text-transform: uppercase; + letter-spacing: 1px; + font-size: 1.7em; +} +.content h3 { + font-size: 1.2em; +} +.content h1, +.content h2, +.content .big-heading, +body.big-h3 .content h3 { + padding-top: 80px; +} +.content h1:before, +.content h2:before, +.content .big-heading:before, +body.big-h3 .content h3:before { + display: block; + content: ''; + /* background: -webkit-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0)); */ + background: -moz-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0)); + background: -o-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0)); + background: -ms-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0)); + /* background: linear-gradient(to right, #dfe2e7 80%, rgba(223,226,231,0)); */ + /* -webkit-box-shadow: 0 1px 0 #dfe2e7; */ + border-bottom: 1px solid #dfe2e7; + /* box-shadow: 0 1px 0 rgba(255,255,255,0.4); */ + height: 1px; + position: relative; + top: -40px; + left: -40px; + width: calc( 60% + 48px ); +} +@media (max-width: 768px) { + .content h1, + .content h2, + .content .big-heading, +body.big-h3 .content h3 { + padding-top: 40px; + } + .content h1:before, + .content h2:before, + .content .big-heading:before, +body.big-h3 .content h3:before { + background: #dfe2e7; + left: -40px; + top: -20px; + width: 120%; + } +} +.content h4, +.content h5, +.content .small-heading, +body:not(.big-h3) .content h3 { + border-bottom: solid 1px #dfe2e7; + color: #2e2e2e; + padding-top: 40px; + padding-bottom: 10px; +} +body:not(.big-h3) .content h3 { + font-size: 0.9em; +} +.content h1:first-child { + padding-top: 0; +} +.content h1:first-child, +.content h1:first-child a, +.content h1:first-child a:visited { + color: #505050; +} +.content h1:first-child:before { + display: none; +} +@media (max-width: 768px) { + .content h4, + .content h5, + .content .small-heading, + body:not(.big-h3) .content h3 { + padding-top: 20px; + } +} +@media (max-width: 480px) { + .content { + padding: 20px; + padding-top: 40px; + } + .content h4, + .content h5, + .content .small-heading, + body:not(.big-h3) .content h3 { + padding-top: 10px; + } +} +body.no-literate .content pre > code { + background: #2e2e2e; + border: solid 1px #dfe2e7; + /* border-top: solid 1px #dbdde2; */ + /* border-left: solid 1px #e2e5e9; */ + display: block; + padding: 10px; + -webkit-border-radius: 2px; + border-radius: 2px; + overflow: auto; +} +body.no-literate .content pre > code { + -webkit-overflow-scrolling: touch; +} +body.no-literate .content pre > code::-webkit-scrollbar { + width: 15px; + height: 15px; +} +body.no-literate .content pre > code::-webkit-scrollbar-thumb { + background: #ddd; + -webkit-border-radius: 8px; + border-radius: 8px; + border: solid 4px #f3f6fb; +} +body.no-literate .content pre > code:hover::-webkit-scrollbar-thumb { + background: #999; + -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2); + box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2); +} +@media (max-width: 1180px) { + .content pre > code { + background: #f3f6fb; + border: solid 1px #e7eaee; + border-top: solid 1px #dbdde2; + border-left: solid 1px #e2e5e9; + display: block; + padding: 10px; + -webkit-border-radius: 2px; + border-radius: 2px; + overflow: auto; + } + .content pre > code { + -webkit-overflow-scrolling: touch; + } + .content pre > code::-webkit-scrollbar { + width: 15px; + height: 15px; + } + .content pre > code::-webkit-scrollbar-thumb { + background: #ddd; + -webkit-border-radius: 8px; + border-radius: 8px; + border: solid 4px #f3f6fb; + } + .content pre > code:hover::-webkit-scrollbar-thumb { + background: #999; + -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2); + box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2); + } +} +.button { + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + font-family: montserrat, sans-serif; + letter-spacing: -1px; + font-weight: bold; + display: inline-block; + padding: 3px 25px; + border: solid 2px #2badad; + -webkit-border-radius: 20px; + border-radius: 20px; + margin-right: 15px; +} +.button, +.button:visited { + background: #2badad; + color: #fff; + text-shadow: none; +} +.button:hover { + border-color: #111; + background: #111; + color: #fff; +} +.button.light, +.button.light:visited { + background: transparent; + color: #9090aa; + border-color: #9090aa; + text-shadow: none; +} +.button.light:hover { + border-color: #9090aa; + background: #9090aa; + color: #fff; +} +.content .button + em { + color: #9090aa; +} +@media (min-width: 1180px) { + body:not(.no-literate) .content-root { + /* background-color: #2e2e2e; */ + -webkit-box-shadow: inset calc(66%) 0 #fff, inset calc(66%) 0 #dfe2e7, inset calc(66%) 0 5px -10px rgba(0,0,0,0.1); + /* box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1); */ + } +} +@media (min-width: 1180px) { + body:not(.no-literate) .content { + padding-left: 0; + padding-right: 0; + width: calc( 100% ); + max-width: none; + z-index: 1; + background: transparent; + } + body:not(.no-literate) .content > p, + body:not(.no-literate) .content > ul, + body:not(.no-literate) .content > ol, + body:not(.no-literate) .content > h1, + body:not(.no-literate) .content > h2, + body:not(.no-literate) .content > h3, + body:not(.no-literate) .content > h4, + body:not(.no-literate) .content > h5, + body:not(.no-literate) .content > h6, + body:not(.no-literate) .content > pre, + body:not(.no-literate) .content > blockquote { + width: calc( 60% - 40px ); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding-right: 40px; + padding-left: 40px; + } + body:not(.no-literate) .content > h1, + body:not(.no-literate) .content > h2, + body:not(.no-literate) .content > h3 { + clear: both; + width: 100%; + } + body:not(.no-literate) .content > pre, + body:not(.no-literate) .content > blockquote { + width: 40%; + padding-left: 15px; + padding-right: 0px; + float: right; + clear: right; + background: #2e2e2e; + /* border-left: 1px solid #eeeeee; */ + } + body:not(.no-literate) .content > pre + p, + body:not(.no-literate) .content > blockquote + p, + body:not(.no-literate) .content > pre + ul, + body:not(.no-literate) .content > blockquote + ul, + body:not(.no-literate) .content > pre + ol, + body:not(.no-literate) .content > blockquote + ol, + body:not(.no-literate) .content > pre + h4, + body:not(.no-literate) .content > blockquote + h4, + body:not(.no-literate) .content > pre + h5, + body:not(.no-literate) .content > blockquote + h5, + body:not(.no-literate) .content > pre + h6, + body:not(.no-literate) .content > blockquote + h6 { + clear: both; + } + body:not(.no-literate) .content > p, + body:not(.no-literate) .content > ul, + body:not(.no-literate) .content > ol, + body:not(.no-literate) .content > h4, + body:not(.no-literate) .content > h5, + body:not(.no-literate) .content > h6 { + float: left; + clear: left; + } + body:not(.no-literate) .content > h4, + body:not(.no-literate) .content > h5, + body:not(.no-literate) .content > .small-heading, + body:not(.big-h3) body:not(.no-literate) .content > h3 { + margin-left: 40px; + width: calc( 60% - 40px ); + margin-bottom: 0px; + padding-left: 0px; + padding-right: 0; + } + body:not(.no-literate) .content > table { + margin-left: 40px; + margin-right: 40px; + max-width: 470px; + } + body:not(.no-literate):not(.big-h3) .content > h3 { + margin-left: 40px; + width: 470px; + margin-bottom: 3px; + padding-left: 0; + padding-right: 0; + } +} +.header { + background: #ffffff; + text-shadow: 0 1px 0 rgba(255,255,255,0.5); + border-bottom: solid 1px #dfe2e7; + padding: 15px 15px 15px 30px; + zoom: 1; + line-height: 20px; + position: relative; +} +.header:before, +.header:after { + content: ""; + display: table; +} +.header:after { + clear: both; +} +.header .left { + float: left; +} +.header .right { + text-align: right; + position: absolute; + right: 15px; + top: 15px; +} +.header .right iframe { + display: inline-block; + vertical-align: middle; +} +.header h1 { + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + font-weight: bold; + font-family: montserrat, sans-serif; + font-size: 13px; +} +.header h1, +.header h1 a, +.header h1 a:visited { + color: #272724; +} +.header h1 a:hover { + color: #505050; +} +.header li a { + font-size: 0.88em; + color: #272724; + display: block; +} +.header li a:hover { + color: #3a3a44; +} +@media (min-width: 480px) { + .header h1 { + float: left; + } + .header ul, + .header li { + display: block; + float: left; + } + .header ul { + margin-left: -15px; + } + .header h1 + ul { + border-left: solid 1px #dfe2e7; + margin-left: 15px; + } + .header li { + border-left: solid 1px rgba(255,255,255,0.5); + border-right: solid 1px #dfe2e7; + } + .header li:last-child { + border-right: 0; + } + .header li a { + padding: 0 15px; + } +} +@media (max-width: 480px) { + .right { + display: none; + } +} +.menubar { + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} +.menubar .section { + padding: 30px 30px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.menubar .section + .section { + border-top: solid 1px #2e2e2e; +} +.menubar .section.no-line { + border-top: 0; + padding-top: 0; +} +a.big.button { + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + padding: 10px 20px; + text-align: center; + font-weight: bold; + font-size: 1.1em; + background: transparent; + border: solid 3px #2badad; + -webkit-border-radius: 30px; + border-radius: 30px; + font-family: montserrat, sans-serif; +} +a.big.button, +a.big.button:visited { + color: #2badad; + text-decoration: none; +} +a.big.button:hover { + background: #2badad; +} +a.big.button:hover, +a.big.button:hover:visited { + color: #fff; +} +@media (max-width: 480px) { + .menubar { + padding: 20px; + border-bottom: solid 1px #dfe2e7; + } +} +@media (max-width: 768px) { + .menubar { + display: none; + } +} +@media (min-width: 768px) { + .content-root { + padding-left: 230px; + } + .menubar { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 230px; + /* border-right: solid 1px #dfe2e7; */ + } + .menubar.fixed { + position: fixed; + overflow-y: auto; + } + .menubar.fixed { + -webkit-overflow-scrolling: touch; + } + .menubar.fixed::-webkit-scrollbar { + width: 15px; + height: 15px; + } + .menubar.fixed::-webkit-scrollbar-thumb { + background: rgba(255,255,255,0.25); + -webkit-border-radius: 8px; + border-radius:8px; + border: solid 5px #272724; + } + .menubar.fixed:hover::-webkit-scrollbar-thumb { + background: #999; + -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2); + box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2); + } +} +.menubar { + font-size: 0.9em; + background: #272724; +} +.menu ul.level-1 > li + li { + margin-top: 20px; +} +.menu a { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + position: relative; + display: block; + padding-top: 1px; + padding-bottom: 1px; + margin-right: -30px; +} +.menu a, +.menu a:visited { + color: #2badad; +} +.menu a:hover { + color: #228a8a; +} +.menu a.level-1 { + font-family: montserrat, sans-serif; + text-transform: uppercase; + font-size: 0.9em; + font-weight: bold; +} +.menu a.level-1, +.menu a.level-1:visited { + color: #ffffff; +} +.menu a.level-1:hover { + color: #565666; +} +.menu a.level-2 { + font-weight: normal; +} +.menu a.level-3 { + font-weight: normal; + font-size: 1em; + padding-left: 10px; +} +.menu a.active { + /* font-weight: bold !important; */ +} +.menu a.active, +.menu a.active:visited, +.menu a.active:hover { + color: #dfe2e7 !important; +} +.menu a.active:after { + content: ''; + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + position: absolute; + top: 10px; + right: 30px; + width: 9px; + height: 3px; + -webkit-border-radius: 2px; + border-radius: 2px; + background: #2badad; +} +code .string, +code .number { + color: #3ac; +} +code .init { + color: #383; +} +code .keyword { + font-weight: bold; +} +code .comment { + color: #adadcc; +} +.large-brief .content > h1:first-child + p, +.content > p.brief { + font-size: 1.3em; + font-family: Open Sans, sans-serif; + font-weight: 300; +} +.title-card:before { + content: ""; + display: block; + height: 100%; + background: rgba(23, 56, 56, 0.85); + background-position: center center; + background-size: cover; + color: #ccc; + text-align: center; + position: absolute; + z-index: 1; + width: 100%; + display: table; +} +.title-area { + min-height: 100px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + text-align: center; + border-bottom: solid 1px #dfe2e7; + overflow: hidden; +} +.title-area > img.bg { + z-index: 0; + position: absolute; + left: -9999px; +} +.title-area > div { + position: relative; + z-index: 1; +} diff --git a/theme-dark/style.styl b/theme-dark/style.styl new file mode 100644 index 0000000..43bbd6c --- /dev/null +++ b/theme-dark/style.styl @@ -0,0 +1,827 @@ +@import url("//fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300"); +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td + margin 0 + padding 0 + border 0 + outline 0 + font-weight inherit + font-style inherit + font-family inherit + font-size 100% + vertical-align baseline + +body + line-height 1 + color #000 + background #fff + &:not(.big-h3) + .content + h3 + font-size 0.9em + &.no-literate + .content + pre + & > code + background #2e2e2e + border solid 1px #dfe2e7 + display block + padding 10px + -webkit-border-radius 2px + border-radius 2px + overflow auto + -webkit-overflow-scrolling touch + &::-webkit-scrollbar + width 15px + height 15px + &::-webkit-scrollbar-thumb + background #ddd + -webkit-border-radius 8px + border-radius 8px + border solid 4px #f3f6fb + &:hover + &::-webkit-scrollbar-thumb + background #999 + -webkit-box-shadow inset 2px 2px 3px rgba(0,0,0,0.2) + box-shadow inset 2px 2px 3px rgba(0,0,0,0.2) + +ol, +ul + list-style none + +table + border-collapse separate + border-spacing 0 + vertical-align middle + +caption, +th, +td + text-align left + font-weight normal + vertical-align middle + +a + color #2badad + text-decoration none + img + border none + &:hover + color #228a8a + &.big + &.button + display block + -webkit-box-sizing border-box + -moz-box-sizing border-box + box-sizing border-box + width 100% + padding 10px 20px + text-align center + font-weight bold + font-size 1.1em + background transparent + border solid 3px #2badad + -webkit-border-radius 30px + border-radius 30px + font-family montserrat, sans-serif + &:hover + background #2badad + +html, +body + height 100% + +html + overflow-x hidden + +body, +td, +textarea, +input + font-family Helvetica Neue, Open Sans, sans-serif + line-height 1.6 + font-size 15px + color #272724 + background #272724 + +body, + td, + textarea, +@media (max-width: 480px) input + font-size 12px + +.content p, +.content ul, +.content ol, +.content h1, +.content h2, +.content h3, +.content h4, +.content h5, +.content h6, +.content pre, +.content blockquote + padding 15px + -webkit-box-sizing border-box + -moz-box-sizing border-box + box-sizing border-box + +.content h1, +.content h2, +.content h3, +.content h4, +.content h5, +.content h6 + font-weight bold + -webkit-font-smoothing antialiased + text-rendering optimizeLegibility + +.content + padding-top 30px + padding-bottom 40px + padding-left 40px + padding-right 40px + zoom 1 + max-width 66% + background #fff + pre + font-family Menlo, monospace + & > code + display block + font-size 0.85em + letter-spacing 0px + background #2e2e2e + display block + padding 15px + -webkit-border-radius 2px + border-radius 2px + overflow auto + line-height 1.44 + ul + & > li + list-style-type disc + list-style-type none + position relative + &:before + content '' + display block + position absolute + left -17px + top 7px + width 5px + height 5px + -webkit-border-radius 4px + border-radius 4px + -webkit-box-sizing border-box + -moz-box-sizing border-box + box-sizing border-box + background #fff + border solid 1px #9090aa + ol + & > li + list-style-type decimal + li + & > :first-child + padding-top 0 + code + font-family Menlo, monospace + background #2e2e2e + color #fff + padding 1px 3px + font-size 0.95em + blockquote + color #9090aa + :first-child + padding-top 0 + :last-child + padding-bottom 0 + table + margin-top 10px + margin-bottom 10px + padding 0 + border-collapse collapse + clear both + float left + tr + border-top 1px solid #ccc + background-color #fff + margin 0 + padding 0 + :nth-child(2n) + background-color #f8f8f8 + th + text-align auto + font-weight bold + border 1px solid #ccc + margin 0 + padding 6px 13px + td + text-align auto + border 1px solid #ccc + margin 0 + padding 6px 13px + &:after + content "" + display block + position absolute + margin-left 230px + top 0 + left 0 + bottom 0 + width calc( 60% - 138px ) + height calc( 100% + 160px ) + background-color white + z-index -1 + clear both + h3 + font-size 1.2em + h1 + &:first-child + padding-top 0 + &:before + display none + .button + & + em + color #9090aa + +.content ul, +.content ol + margin-left 20px + +.content strong, +.content b + font-weight bold + +.content i, +.content em + font-style italic + color #9090aa + +.content table tr th :first-child, +.content table tr td :first-child + margin-top 0 + +.content table tr th :last-child, +.content table tr td :last-child + margin-bottom 0 + +.content-root + min-height calc( 100% + 70px ) + position relative + +.content:before, +.content:after + content "" + display table + +.content h1, +.content h2, +.content h3 + -webkit-font-smoothing antialiased + text-rendering optimizeLegibility + font-family montserrat + padding-bottom 0 + +.content h1 + p, +.content h2 + p, +.content h3 + p, +.content h1 ul, +.content h2 ul, +.content h3 ul, +.content h1 ol, +.content h2 ol, +.content h3 ol + padding-top 10px + +.content h1, +.content h2 + text-transform uppercase + letter-spacing 1px + font-size 1.7em + +.content h1, +.content h2, +.content .big-heading, +body.big-h3 .content h3 + padding-top 80px + +.content h1:before, +.content h2:before, +.content .big-heading:before, +body.big-h3 .content h3:before + display block + content '' + background -moz-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0)) + background -o-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0)) + background -ms-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0)) + border-bottom 1px solid #dfe2e7 + height 1px + position relative + top -40px + left -40px + width calc( 60% + 48px ) + +.content h1, + .content h2, + .content .big-heading, +@media (max-width: 768px) body.big-h3 .content h3 + padding-top 40px + +.content h1:before, + .content h2:before, + .content .big-heading:before, +@media (max-width: 768px) body.big-h3 .content h3:before + background #dfe2e7 + left -40px + top -20px + width 120% + +.content h4, +.content h5, +.content .small-heading, +body:not(.big-h3) .content h3 + border-bottom solid 1px #dfe2e7 + color #2e2e2e + padding-top 40px + padding-bottom 10px + +.content h1:first-child, +.content h1:first-child a, +.content h1:first-child a:visited + color #505050 + +.content h4, + .content h5, + .content .small-heading, +@media (max-width: 768px) body:not(.big-h3) .content h3 + padding-top 20px + +@media (max-width: 480px) + .content + padding 20px + padding-top 40px + +.content h4, + .content h5, + .content .small-heading, +@media (max-width: 480px) body:not(.big-h3) .content h3 + padding-top 10px + +@media (max-width: 1180px) + .content + pre + & > code + background #f3f6fb + border solid 1px #e7eaee + border-top solid 1px #dbdde2 + border-left solid 1px #e2e5e9 + display block + padding 10px + -webkit-border-radius 2px + border-radius 2px + overflow auto + -webkit-overflow-scrolling touch + &::-webkit-scrollbar + width 15px + height 15px + &::-webkit-scrollbar-thumb + background #ddd + -webkit-border-radius 8px + border-radius 8px + border solid 4px #f3f6fb + &:hover + &::-webkit-scrollbar-thumb + background #999 + -webkit-box-shadow inset 2px 2px 3px rgba(0,0,0,0.2) + box-shadow inset 2px 2px 3px rgba(0,0,0,0.2) + +.button + -webkit-font-smoothing antialiased + text-rendering optimizeLegibility + font-family montserrat, sans-serif + letter-spacing -1px + font-weight bold + display inline-block + padding 3px 25px + border solid 2px #2badad + -webkit-border-radius 20px + border-radius 20px + margin-right 15px + &:hover + border-color #111 + background #111 + color #fff + &.light + &:hover + border-color #9090aa + background #9090aa + color #fff + +.button, +.button:visited + background #2badad + color #fff + text-shadow none + +.button.light, +.button.light:visited + background transparent + color #9090aa + border-color #9090aa + text-shadow none + +@media (min-width: 1180px) + body + &:not(.no-literate) + .content-root + -webkit-box-shadow inset calc(66%) 0 #fff, inset calc(66%) 0 #dfe2e7, inset calc(66%) 0 5px -10px rgba(0,0,0,0.1) + +@media (min-width: 1180px) + body + &:not(.no-literate) + .content + padding-left 0 + padding-right 0 + width calc( 100% ) + max-width none + z-index 1 + background transparent + & > table + margin-left 40px + margin-right 40px + max-width 470px + &:not(.no-literate):not(.big-h3) + .content + & > h3 + margin-left 40px + width 470px + margin-bottom 3px + padding-left 0 + padding-right 0 + +body:not(.no-literate) .content > p, + body:not(.no-literate) .content > ul, + body:not(.no-literate) .content > ol, + body:not(.no-literate) .content > h1, + body:not(.no-literate) .content > h2, + body:not(.no-literate) .content > h3, + body:not(.no-literate) .content > h4, + body:not(.no-literate) .content > h5, + body:not(.no-literate) .content > h6, + body:not(.no-literate) .content > pre, +@media (min-width: 1180px) body:not(.no-literate) .content > blockquote + width calc( 60% - 40px ) + -webkit-box-sizing border-box + -moz-box-sizing border-box + box-sizing border-box + padding-right 40px + padding-left 40px + +body:not(.no-literate) .content > h1, + body:not(.no-literate) .content > h2, +@media (min-width: 1180px) body:not(.no-literate) .content > h3 + clear both + width 100% + +body:not(.no-literate) .content > pre, +@media (min-width: 1180px) body:not(.no-literate) .content > blockquote + width 40% + padding-left 15px + padding-right 0px + float right + clear right + background #2e2e2e + +body:not(.no-literate) .content > pre + p, + body:not(.no-literate) .content > blockquote + p, + body:not(.no-literate) .content > pre + ul, + body:not(.no-literate) .content > blockquote + ul, + body:not(.no-literate) .content > pre + ol, + body:not(.no-literate) .content > blockquote + ol, + body:not(.no-literate) .content > pre + h4, + body:not(.no-literate) .content > blockquote + h4, + body:not(.no-literate) .content > pre + h5, + body:not(.no-literate) .content > blockquote + h5, + body:not(.no-literate) .content > pre + h6, +@media (min-width: 1180px) body:not(.no-literate) .content > blockquote + h6 + clear both + +body:not(.no-literate) .content > p, + body:not(.no-literate) .content > ul, + body:not(.no-literate) .content > ol, + body:not(.no-literate) .content > h4, + body:not(.no-literate) .content > h5, +@media (min-width: 1180px) body:not(.no-literate) .content > h6 + float left + clear left + +body:not(.no-literate) .content > h4, + body:not(.no-literate) .content > h5, + body:not(.no-literate) .content > .small-heading, +@media (min-width: 1180px) body:not(.big-h3) body:not(.no-literate) .content > h3 + margin-left 40px + width calc( 60% - 40px ) + margin-bottom 0px + padding-left 0px + padding-right 0 + +.header + background #ffffff + text-shadow 0 1px 0 rgba(255,255,255,0.5) + border-bottom solid 1px #dfe2e7 + padding 15px 15px 15px 30px + zoom 1 + line-height 20px + position relative + &:after + clear both + .left + float left + .right + text-align right + position absolute + right 15px + top 15px + iframe + display inline-block + vertical-align middle + h1 + -webkit-font-smoothing antialiased + text-rendering optimizeLegibility + font-weight bold + font-family montserrat, sans-serif + font-size 13px + a + &:hover + color #505050 + li + a + font-size 0.88em + color #272724 + display block + &:hover + color #3a3a44 + +.header:before, +.header:after + content "" + display table + +.header h1, +.header h1 a, +.header h1 a:visited + color #272724 + +@media (min-width: 480px) + .header + h1 + float left + & + ul + border-left solid 1px #dfe2e7 + margin-left 15px + ul + margin-left -15px + li + border-left solid 1px rgba(255,255,255,0.5) + border-right solid 1px #dfe2e7 + &:last-child + border-right 0 + a + padding 0 15px + +.header ul, +@media (min-width: 480px) .header li + display block + float left + +@media (max-width: 480px) + .right + display none + +.menubar + -webkit-font-smoothing antialiased + text-rendering optimizeLegibility + font-size 0.9em + background #272724 + .section + padding 30px 30px + -webkit-box-sizing border-box + -moz-box-sizing border-box + box-sizing border-box + & + .section + border-top solid 1px #2e2e2e + &.no-line + border-top 0 + padding-top 0 + +a.big.button, +a.big.button:visited + color #2badad + text-decoration none + +a.big.button:hover, +a.big.button:hover:visited + color #fff + +@media (max-width: 480px) + .menubar + padding 20px + border-bottom solid 1px #dfe2e7 + +@media (max-width: 768px) + .menubar + display none + +@media (min-width: 768px) + .content-root + padding-left 230px + .menubar + position absolute + left 0 + top 0 + bottom 0 + width 230px + &.fixed + position fixed + overflow-y auto + -webkit-overflow-scrolling touch + &::-webkit-scrollbar + width 15px + height 15px + &::-webkit-scrollbar-thumb + background rgba(255,255,255,0.25) + -webkit-border-radius 8px + border-radius 8px + border solid 5px #272724 + &:hover + &::-webkit-scrollbar-thumb + background #999 + -webkit-box-shadow inset 2px 2px 3px rgba(0,0,0,0.2) + box-shadow inset 2px 2px 3px rgba(0,0,0,0.2) + +.menu + ul + &.level-1 + & > li + & + li + margin-top 20px + a + -webkit-box-sizing border-box + -moz-box-sizing border-box + box-sizing border-box + position relative + display block + padding-top 1px + padding-bottom 1px + margin-right -30px + &:hover + color #228a8a + &.level-1 + font-family montserrat, sans-serif + text-transform uppercase + font-size 0.9em + font-weight bold + &:hover + color #565666 + &.level-2 + font-weight normal + &.level-3 + font-weight normal + font-size 1em + padding-left 10px + &.active + &:after + content '' + display block + -webkit-box-sizing border-box + -moz-box-sizing border-box + box-sizing border-box + position absolute + top 10px + right 30px + width 9px + height 3px + -webkit-border-radius 2px + border-radius 2px + background #2badad + +.menu a, +.menu a:visited + color #2badad + +.menu a.level-1, +.menu a.level-1:visited + color #ffffff + +.menu a.active, +.menu a.active:visited, +.menu a.active:hover + color #dfe2e7 !important + +code .string, +code .number + color #3ac + +code + .init + color #383 + .keyword + font-weight bold + .comment + color #adadcc + +.large-brief .content > h1:first-child + p, +.content > p.brief + font-size 1.3em + font-family Open Sans, sans-serif + font-weight 300 + +.title-card + &:before + content "" + display block + height 100% + background rgba(23, 56, 56, 0.85) + background-position center center + background-size cover + color #ccc + text-align center + position absolute + z-index 1 + width 100% + display table + +.title-area + min-height 100px + -webkit-box-sizing border-box + -moz-box-sizing border-box + box-sizing border-box + -webkit-font-smoothing antialiased + text-rendering optimizeLegibility + text-align center + border-bottom solid 1px #dfe2e7 + overflow hidden + & > img + &.bg + z-index 0 + position absolute + left -9999px + & > div + position relative + z-index 1 +