From 0b74f587c7adde1c05c0cc97f54dc88a8c65adb8 Mon Sep 17 00:00:00 2001 From: Luciano Date: Sat, 11 Jun 2016 23:51:07 -0300 Subject: [PATCH 1/4] Created Theme-dark --- templates/template-dark.html | 79 +++ theme-dark/index.html | 91 ++++ theme-dark/script.js | 253 ++++++++++ theme-dark/style.css | 911 +++++++++++++++++++++++++++++++++++ theme-dark/style.styl | 656 +++++++++++++++++++++++++ 5 files changed, 1990 insertions(+) create mode 100644 templates/template-dark.html create mode 100644 theme-dark/index.html create mode 100644 theme-dark/script.js create mode 100644 theme-dark/style.css create mode 100644 theme-dark/style.styl diff --git a/templates/template-dark.html b/templates/template-dark.html new file mode 100644 index 0000000..4aecdc1 --- /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..acc6124 --- /dev/null +++ b/theme-dark/index.html @@ -0,0 +1,91 @@ + + + + + + + + Flatdoc + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Documentation is easy.

+

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

+
Flatdoc
+
+
+
+ +
+
+

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..56940b0 --- /dev/null +++ b/theme-dark/script.js @@ -0,0 +1,253 @@ +(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); + }); + }); + + /* + * 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..2409250 --- /dev/null +++ b/theme-dark/style.css @@ -0,0 +1,911 @@ +/* + +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: 13px; + 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: 90%; + 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; + width: calc( 60% - 138px ); + height: 100%; + 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.5em; +} +.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: #ddd; + -webkit-border-radius: 8px; + border-radius: 8px; + border: solid 4px #fff; + } + .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: 0.9em; + 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-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..a9f7c01 --- /dev/null +++ b/theme-dark/style.styl @@ -0,0 +1,656 @@ +support-for-ie = true + +@import 'nib' + +// Fonts +$body-font = Helvetica Neue, Open Sans, sans-serif +$mono-font = Menlo, monospace + +// Margins +$pad = 40px // Space between things +$sidepad = 30px // Padding to the left of the sidebar +$minipad = 20px // Space for mobile +$vmargin = 10px // Margin between blocks + +// Colors +$offwhite = #f3f6fb +$grey = #9090aa +$txt = #505050 +$accent = #3cc * 0.85 +$line = #e4e7ec * 0.98 + +// Misc +$shadow-str = 0.1 + +// Dimensions +$sidebar-width = 230px +$content-width = 550px +$pre-width = 380px + +/* ---------------------------------------------------------------------------- + * Fonts + */ + +@import url('//fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300') + +// ---------------------------------------------------------------------------- +// Mixins + +scrollbar($bg=white) + & + -webkit-overflow-scrolling: touch + &::-webkit-scrollbar + width: 15px + height: 15px + &::-webkit-scrollbar-thumb + background: #ddd + border-radius: 8px + border: solid 4px $bg + &:hover::-webkit-scrollbar-thumb + background: #999 + box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2) + +antialias() + -webkit-font-smoothing: antialiased + text-rendering: optimizeLegibility + +/* ---------------------------------------------------------------------------- + * Base + */ + +global-reset() + +html, body + height: 100% + +html + overflow-x: hidden + +body, td, textarea, input + font-family: $body-font + line-height: 1.6 + font-size: 13px + color:$txt + + @media (max-width: 480px) /* Mobile */ + font-size: 12px + +a + color: $accent + text-decoration: none + &:hover + color: $accent * 0.8 + +/* ---------------------------------------------------------------------------- + * Content styling + */ + +.content + p, ul, ol, h1, h2, h3, h4, h5, h6, pre, blockquote + padding: $vmargin 0 + box-sizing: border-box + + h1, h2, h3, h4, h5, h6 + font-weight: bold + antialias() + + pre + font-family: $mono-font + + ul > li + list-style-type: disc + + ol > li + list-style-type: decimal + + ul, ol + margin-left: 20px + + ul > li + list-style-type: none + position: relative + &:before + content: '' + display: block + absolute: left -17px top 7px + width: 5px + height: 5px + border-radius: 4px + box-sizing: border-box + background: white + border: solid 1px $grey + + li > :first-child + padding-top: 0 + + strong, b + font-weight: bold + + i, em + font-style: italic + color: $grey + + code + font-family: $mono-font + background: $offwhite + padding: 1px 3px + font-size: 0.95em + + pre > code + display: block + background: transparent + font-size: 0.85em + letter-spacing: -1px + + blockquote + :first-child + padding-top: 0 + :last-child + padding-bottom: 0 + + table + + margin-top: $vmargin + margin-bottom: $vmargin + padding: 0 + border-collapse: collapse + clear: both + float: left + + tr + border-top: 1px solid #cccccc + background-color: white + margin: 0 + padding: 0 + + :nth-child(2n) + background-color: #f8f8f8 + + th + text-align: auto; + font-weight: bold + border: 1px solid #cccccc + margin: 0 + padding: 6px 13px + + td + text-align: auto; + border: 1px solid #cccccc + margin: 0 + padding: 6px 13px + + th, td + :first-child + + margin-top: 0; + :last-child + margin-bottom: 0; + + + + + +/* ---------------------------------------------------------------------------- + * Content + */ + +.content-root + min-height: 90% + position: relative + +.content + padding-top: $pad - $vmargin + padding-bottom: $pad + padding-left: $pad + padding-right: $pad + clearfix() + + max-width: 700px + + blockquote + color: $grey + text-shadow: 0 1px 0 rgba(white, 0.5) + + h1, h2, h3 + antialias() + font-family: montserrat + padding-bottom: 0 + + + p, ul, ol + padding-top: 10px + + h1, h2 + text-transform: uppercase + letter-spacing: 1px + font-size: 1.5em + + h3 + font-size: 1.2em + + // Lines + h1, h2, .big-heading + padding-top: $pad * 2 + &:before + display: block + content: '' + background: linear-gradient(left, rgba($line, 1.0) 80%, rgba($line, 0.0)) + box-shadow: 0 1px 0 rgba(white, 0.4) + height: 1px + position: relative + top: $pad * -1 + left: $pad * -1 + width: 100% + + @media (max-width: 768px) /* Mobile and tablet */ + padding-top: $minipad * 2 + &:before + background: $line + left: $pad * -1 + top: $minipad * -1 + width: 120% + + // Small headings + h4, h5, .small-heading + border-bottom: solid 1px rgba(black, 0.07) + color: $grey + padding-top: $vmargin * 3 + padding-bottom: 10px + + body:not(.big-h3) & h3 + @extends .content .small-heading + font-size: 0.9em + + body.big-h3 & h3 + @extends .content .big-heading + + h1:first-child + padding-top: 0 + &, a, a:visited + color: $txt + &:before + display: none + +@media (max-width: 768px) /* Tablet */ + .content + h4, h5, .small-heading, body:not(.big-h3) & h3 + padding-top: $vmargin * 2 + +@media (max-width: 480px) /* Mobile */ + .content + padding: $minipad + padding-top: $minipad * 2 + + h4, h5, .small-heading, body:not(.big-h3) & h3 + padding-top: $vmargin + +// ---------------------------------------------------------------------------- +// Code blocks + +inset-box() + background: $offwhite + border: solid 1px $offwhite*0.95 + border-top: solid 1px $offwhite*0.9 + border-left: solid 1px $offwhite*0.93 + display: block + padding: 10px + border-radius: 2px + + overflow: auto + scrollbar($offwhite) + +body.no-literate .content pre > code + inset-box() + +@media (max-width: 1180px) /* Small desktop */ + .content pre > code + inset-box() + +// ---------------------------------------------------------------------------- +// Buttons + +.button + antialias() + font-family: montserrat, sans-serif + letter-spacing: -1px + font-weight: bold + + display: inline-block + padding: 3px 25px + + border: solid 2px $accent + border-radius: 20px + + margin-right: 15px + + &, &:visited + background: $accent + color: white + text-shadow: none + + &:hover + border-color: #111 + background: #111 + color: white + + &.light + &, &:visited + background: transparent + color: $grey + border-color: $grey + text-shadow: none + + &:hover + border-color: $grey + background: $grey + color: white + +.content + .button + em + color: $grey + + +// ---------------------------------------------------------------------------- +// Literate mode content + +@media (min-width: 1180px) /* Big desktop */ + body:not(.no-literate) + .content-root + background-color: $offwhite + $w = ($sidebar-width + $content-width) + box-shadow: inset $w 0 white, inset ($w + 1) 0 $line, inset ($w + 10) 0 5px -10px rgba(black, $shadow-str) + +// Literate mode +@media (min-width: 1180px) /* Big desktop */ + small-heading() + margin-left: $pad + width: $content-width - $pad * 2 + margin-bottom: 3px + + padding-left: 0 + padding-right: 0 + + body:not(.no-literate) + .content + padding-left: 0 + padding-right: 0 + + width: $content-width + $pre-width + max-width: none + + > + p, ul, ol, h1, h2, h3, h4, h5, h6, pre, blockquote + width: $content-width + box-sizing: border-box + padding-right: $pad + padding-left: $pad + h1, h2, h3 + clear: both + width: 100% + pre, blockquote + width: $pre-width + padding-left: ($pad/2) + padding-right: ($pad/2) + float: right + clear: right + + + p, ul, ol, h4, h5, h6 + clear: both + p, ul, ol, h4, h5, h6 + float: left + clear: left + + h4, h5, .small-heading, body:not(.big-h3) & h3 + small-heading() + + table + margin-left: $pad + margin-right: $pad + max-width: $content-width - $pad*2 + + body:not(.no-literate):not(.big-h3) + .content > h3 + small-heading() + +// ---------------------------------------------------------------------------- +// Header + +.header + background: $offwhite + text-shadow: 0 1px 0 rgba(white, 0.5) + border-bottom: solid 1px $line + padding: 15px 15px 15px $sidepad + clearfix() + + line-height: 20px + position: relative + + .left + float: left + + .right + text-align: right + position: absolute + right: 15px + top: 15px + + iframe + display: inline-block + vertical-align: middle + + h1 + antialias() + font-weight: bold + font-family: montserrat, sans-serif + font-size: 13px + + &, a, a:visited + color: $grey + a:hover + color: $txt + + li a + font-size: 0.88em + color: $grey + display: block + + &:hover + color: $grey*0.4 + + @media (min-width: 480px) /* Tablet & Desktop */ + h1 + float: left + + ul, li + display: block + float: left + + ul + margin-left: -15px + + h1 + ul + border-left: solid 1px $line + margin-left: 15px + + li + border-left: solid 1px rgba(white, 0.5) + border-right: solid 1px $line + &:last-child + border-right: 0 + + li a + padding: 0 15px + +@media (max-width: 480px) /* Mobile */ + // Hide extra stuff on mobile + .right + display: none + +// ---------------------------------------------------------------------------- +// Sidebar + +.menubar + antialias() + .section + padding: $sidepad $sidepad + box-sizing: border-box + + .section + .section + border-top: solid 1px $line + + .section.no-line + border-top: 0 + padding-top: 0 + +a.big.button + display: block + box-sizing: border-box + width: 100% + padding: 10px 20px + text-align: center + + font-weight: bold + font-size: 1.1em + + background: transparent + border: solid 3px $accent + border-radius: 30px + font-family: montserrat, sans-serif + + &, &:visited + color: $accent + text-decoration: none + + &:hover + background: $accent + &, &:visited + color: white + +@media (max-width: 480px) /* Mobile */ + .menubar + padding: $minipad + border-bottom: solid 1px $line + +@media (max-width: 768px) /* Mobile and tablet */ + .menubar + display: none + +@media (min-width: 768px) /* Desktop */ + .content-root + padding-left: $sidebar-width + + .menubar + position: absolute + left: 0 + top: 0 + bottom: 0 + width: $sidebar-width + border-right: solid 1px $line + + .menubar.fixed + position: fixed + + scrollbar() + overflow-y: auto + +.menubar + font-size: 0.9em + +// Menu items +.menu + ul.level-1 > li + li + margin-top: 20px + + a + box-sizing: border-box + position: relative + + display: block + padding-top: 1px + padding-bottom: 1px + margin-right: ($sidepad * -1) + + &, &:visited + color: $accent + &:hover + color: $accent*0.8 + + a.level-1 + font-family: montserrat, sans-serif + text-transform: uppercase + font-size: 0.9em + font-weight: bold + &, &:visited + color: $grey + &:hover + color: $grey*0.6 + + a.level-2 + font-weight: normal + + a.level-3 + font-weight: normal + font-size: 0.9em + padding-left: 10px + + a.active + &, &:visited, &:hover + color: $txt !important + font-weight: bold !important + + // Indicator + &:after + content: '' + display: block + box-sizing: border-box + + absolute: top 10px right $sidepad + + width: 9px + height: 3px + border-radius: 2px + background: $accent + +// ---------------------------------------------------------------------------- +// Syntax highlighting + +code + .string, .number + color: #3ac + .init + color: #383 + .keyword + font-weight: bold + .comment + color: $grey * 1.2 + +// ---------------------------------------------------------------------------- + +.content + .large-brief & > h1:first-child + p, + > p.brief + font-size: 1.3em + font-family: Open Sans, sans-serif + font-weight: 300 + +// ---------------------------------------------------------------------------- + +.title-area + min-height: 100px + box-sizing: border-box + antialias() + text-align: center + border-bottom: solid 1px $line + overflow: hidden + + > img.bg + z-index: 0 + + // Start it off screen + position: absolute + left: -9999px + + > div + position: relative + z-index: 1 + + From 4f0bb5a9952e6a12e7505273c19d79c028f31e0d Mon Sep 17 00:00:00 2001 From: Luciano Date: Sun, 12 Jun 2016 02:03:57 -0300 Subject: [PATCH 2/4] Added dark theme in readme --- Readme.md | 3 + templates/template-dark.html | 8 +- theme-dark/index.html | 40 +- theme-dark/script.js | 11 + theme-dark/style.css | 33 +- theme-dark/style.styl | 1353 +++++++++++++++++++--------------- 6 files changed, 828 insertions(+), 620 deletions(-) diff --git a/Readme.md b/Readme.md index 0967599..323eacd 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] * **new** (current theme) + [bower]: http://bower.io/search/?q=flatdoc [npm]: https://www.npmjs.org/package/flatdoc @@ -263,4 +265,5 @@ 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/rstacruz/flatdoc/raw/gh-pages/templates/template-dark.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 index 4aecdc1..e00fcfc 100644 --- a/templates/template-dark.html +++ b/templates/template-dark.html @@ -22,12 +22,12 @@ - - + + - - + + diff --git a/theme-dark/index.html b/theme-dark/index.html index acc6124..e6ade6d 100644 --- a/theme-dark/index.html +++ b/theme-dark/index.html @@ -5,7 +5,7 @@ - Flatdoc + Flatdoc - Dark Theme @@ -22,19 +22,27 @@ - + - + -
+

Documentation is easy.

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

-
Flatdoc
+
Flatdoc - Dark Theme
@@ -43,31 +51,31 @@
Flatdoc

Flatdoc

- - + +
- Download - + Download +
- +
HN
- View on GitHub
- See .md source + View on GitHub
+ See .md source
@@ -80,7 +88,7 @@

Flatdoc

-