mirror of
https://github.com/danbulant/api_docs
synced 2026-05-21 21:28:52 +00:00
Tariq Islam
commit
c5381c62af
15 changed files with 658 additions and 318 deletions
22
CHANGELOG.md
Normal file
22
CHANGELOG.md
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
# Changelog
|
||||
|
||||
## Version 1.0
|
||||
|
||||
*July 2, 2014*
|
||||
|
||||
[View Issues](https://github.com/tripit/slate/issues?milestone=1&state=closed)
|
||||
|
||||
**Features:**
|
||||
|
||||
- Responsive designs for phones and tablets
|
||||
- Started tagging versions
|
||||
|
||||
**Fixes:**
|
||||
|
||||
- Fixed 'unrecognized expression' error
|
||||
- Fixed #undefined hash bug
|
||||
- Fixed bug where the current language tab would be unselected
|
||||
- Fixed bug where tocify wouldn't highlight the current section while searching
|
||||
- Fixed bug where ids of header tags would have special characters that caused problems
|
||||
- Updated layout so that pages with disabled search wouldn't load search.js
|
||||
- Cleaned up Javascript
|
||||
30
README.md
30
README.md
|
|
@ -3,18 +3,18 @@ Slate
|
|||
|
||||
[](https://travis-ci.org/tripit/slate) [](https://gemnasium.com/tripit/slate)
|
||||
|
||||
Slate helps you create beautiful single-page API documentation. Think of it as an intelligent, modern documentation template for your API.
|
||||
Slate helps you create beautiful API documentation. Think of it as an intelligent, responsive documentation template for your API.
|
||||
|
||||
<img src="https://dl.dropboxusercontent.com/u/95847291/github%20images/slate/slate_screenshot.png" width=700 alt="Screenshot of Example Documentation created with Slate">
|
||||
<img src="https://dl.dropboxusercontent.com/u/95847291/github%20images/slate/slate_screenshot_new.png" width=700 alt="Screenshot of Example Documentation created with Slate">
|
||||
|
||||
*The example above was created with Slate. Check it out at [tripit.github.io/slate](http://tripit.github.io/slate).*
|
||||
|
||||
Features
|
||||
------------
|
||||
|
||||
* **Clean, intuitive design** — with Slate, the description of your API is on the left side of your documentation, and all the code examples are on the right side. Inspired by [Stripe's](https://stripe.com/docs/api) and [Paypal's](https://developer.paypal.com/webapps/developer/docs/api/) API docs. In addition to the design you see on screen, Slate comes with a print stylesheet, so your docs look great on paper.
|
||||
* **Clean, intuitive design** — with Slate, the description of your API is on the left side of your documentation, and all the code examples are on the right side. Inspired by [Stripe's](https://stripe.com/docs/api) and [Paypal's](https://developer.paypal.com/webapps/developer/docs/api/) API docs. Slate is responsive, so it looks great on tablets, phones, and even print.
|
||||
|
||||
* **Everything on a single page** — gone are the days where your users had to search through a million pages to find what they wanted. Slate puts the entire documentation on a single page. We haven't sacrificed linkability, though. As you scroll, your browser's hash will update to the nearest header, so it's insanely easy to link to a particular point in the documentation.
|
||||
* **Everything on a single page** — gone are the days where your users had to search through a million pages to find what they wanted. Slate puts the entire documentation on a single page. We haven't sacrificed linkability, though. As you scroll, your browser's hash will update to the nearest header, so linking to a particular point in the documentation is still natural and easy.
|
||||
|
||||
* **Slate is just Markdown** — when you write docs with Slate, you're just writing Markdown, which makes it simple to edit and understand. Everything is written in Markdown — even the code samples are just Markdown code blocks!
|
||||
|
||||
|
|
@ -55,6 +55,8 @@ Now that Slate is all set up your machine, you'll probably want to learn more ab
|
|||
Examples of Slate in the Wild
|
||||
---------------------------------
|
||||
|
||||
* [Travis-CI's API docs](http://docs.travis-ci.com/api/)
|
||||
* [Mozilla's localForage docs](http://mozilla.github.io/localForage/)
|
||||
* [Orchestrate.io API docs](https://docs.orchestrate.io/)
|
||||
* [ChaiOne Gameplan API docs](http://chaione.github.io/gameplanb2b/#introduction)
|
||||
* [Drcaban's Build a Quine tutorial](http://drcabana.github.io/build-a-quine/#introduction)
|
||||
|
|
@ -69,6 +71,18 @@ Need Help? Found a bug?
|
|||
Just [submit a issue](https://github.com/tripit/slate/issues) to the Slate Github if you need any help. And, of course, feel free to submit pull requests with bug fixes or changes.
|
||||
|
||||
|
||||
Contributors
|
||||
--------------------
|
||||
|
||||
Slate was built by [Robert Lord](http://lord.io) while at [TripIt](http://tripit.com).
|
||||
|
||||
Thanks to the following people who have submitted major pull requests:
|
||||
|
||||
- [@chrissrogers](https://github.com/chrissrogers)
|
||||
- [@bootstraponline](https://github.com/bootstraponline)
|
||||
|
||||
Also, thanks to [Sauce Labs](http://saucelabs.com) for helping sponsor the project.
|
||||
|
||||
Special Thanks
|
||||
--------------------
|
||||
- [Middleman](https://github.com/middleman/middleman)
|
||||
|
|
@ -76,11 +90,3 @@ Special Thanks
|
|||
- [middleman-syntax](https://github.com/middleman/middleman-syntax)
|
||||
- [middleman-gh-pages](https://github.com/neo/middleman-gh-pages)
|
||||
- [Font Awesome](http://fortawesome.github.io/Font-Awesome/)
|
||||
|
||||
Contributors
|
||||
--------------------
|
||||
|
||||
Thanks to the following people who have submitted pull requests:
|
||||
|
||||
- [@chrissrogers](https://github.com/chrissrogers)
|
||||
- [@bootstraponline](https://github.com/bootstraponline)
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
require './lib/redcarpet_header_fix'
|
||||
|
||||
set :css_dir, 'stylesheets'
|
||||
|
||||
set :js_dir, 'javascripts'
|
||||
|
|
@ -34,3 +36,4 @@ configure :build do
|
|||
# Or use a different image path
|
||||
# set :http_prefix, "/Content/images/"
|
||||
end
|
||||
|
||||
|
|
|
|||
9
lib/redcarpet_header_fix.rb
Normal file
9
lib/redcarpet_header_fix.rb
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
module RedcarpetHeaderFix
|
||||
def header(text, level, id)
|
||||
clean_id = id.gsub(/[\.]/, '-').gsub(/[^a-zA-Z0-9\-_]/, '')
|
||||
"<h#{level} id='#{clean_id}'>#{text}</h1>"
|
||||
end
|
||||
end
|
||||
|
||||
require 'middleman-core/renderers/redcarpet'
|
||||
Middleman::Renderers::MiddlemanRedcarpetHTML.send :include, RedcarpetHeaderFix
|
||||
BIN
source/images/navbar.png
Normal file
BIN
source/images/navbar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
4
source/javascripts/all_nosearch.js
Normal file
4
source/javascripts/all_nosearch.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
//= require_tree ./lib
|
||||
//= require_tree ./app
|
||||
//= stub ./app/search.js
|
||||
//= stub ./lib/lunr.js
|
||||
|
|
@ -21,9 +21,10 @@ under the License.
|
|||
|
||||
function activateLanguage(language) {
|
||||
if (!language) return;
|
||||
if (language === "") return;
|
||||
|
||||
$("#lang-selector a").removeClass('active');
|
||||
$("#lang-selector a[data-language-name='" + language + "']").addClass('active');
|
||||
$(".lang-selector a").removeClass('active');
|
||||
$(".lang-selector a[data-language-name='" + language + "']").addClass('active');
|
||||
for (var i=0; i < languages.length; i++) {
|
||||
$(".highlight." + languages[i]).hide();
|
||||
}
|
||||
|
|
@ -41,6 +42,9 @@ under the License.
|
|||
hash = hash.replace(/^#+/, '');
|
||||
}
|
||||
history.pushState({}, '', '?' + language + '#' + hash);
|
||||
|
||||
// save language as next default
|
||||
localStorage.setItem("language", language);
|
||||
}
|
||||
|
||||
function setupLanguages(l) {
|
||||
|
|
@ -53,7 +57,6 @@ under the License.
|
|||
// the language is in the URL, so use that language!
|
||||
activateLanguage(location.search.substr(1));
|
||||
|
||||
// set this language as the default for next time, if the URL has no language
|
||||
localStorage.setItem("language", location.search.substr(1));
|
||||
} else if ((defaultLanguage !== null) && (jQuery.inArray(defaultLanguage, languages) != -1)) {
|
||||
// the language was the last selected one saved in localstorage, so use that language!
|
||||
|
|
@ -66,7 +69,7 @@ under the License.
|
|||
|
||||
// if we click on a language tab, activate that language
|
||||
$(function() {
|
||||
$("#lang-selector a").on("click", function() {
|
||||
$(".lang-selector a").on("click", function() {
|
||||
var language = $(this).data("language-name");
|
||||
pushURL(language);
|
||||
activateLanguage(language);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
(function (global) {
|
||||
|
||||
var $global = $(global);
|
||||
var content, darkBox, searchInfo;
|
||||
var content, darkBox, searchResults;
|
||||
var highlightOpts = { element: 'span', className: 'search-highlight' };
|
||||
|
||||
var index = new lunr.Index;
|
||||
var index = new lunr.Index();
|
||||
|
||||
index.ref('id');
|
||||
index.field('title', { boost: 10 });
|
||||
|
|
@ -14,15 +14,10 @@
|
|||
$(populate);
|
||||
$(bind);
|
||||
|
||||
function populate () {
|
||||
$('h1').each(function () {
|
||||
function populate() {
|
||||
$('h1, h2').each(function() {
|
||||
var title = $(this);
|
||||
var body = title.nextUntil('h1');
|
||||
var wrapper = $('<section id="section-' + title.prop('id') + '"></section>');
|
||||
|
||||
title.after(wrapper.append(body));
|
||||
wrapper.prepend(title);
|
||||
|
||||
var body = title.nextUntil('h1, h2');
|
||||
index.add({
|
||||
id: title.prop('id'),
|
||||
title: title.text(),
|
||||
|
|
@ -31,99 +26,46 @@
|
|||
});
|
||||
}
|
||||
|
||||
function bind () {
|
||||
function bind() {
|
||||
content = $('.content');
|
||||
darkBox = $('.dark-box');
|
||||
searchInfo = $('.search-info');
|
||||
searchResults = $('.search-results');
|
||||
|
||||
$('#input-search')
|
||||
.on('keyup', search)
|
||||
.on('focus', active)
|
||||
.on('blur', inactive);
|
||||
$('#input-search').on('keyup', search);
|
||||
}
|
||||
|
||||
function refToHeader (itemRef) {
|
||||
return $('.tocify-item[data-unique=' + itemRef + ']').closest('.tocify-header');
|
||||
}
|
||||
|
||||
function sortDescending (obj2, obj1) {
|
||||
var s1 = parseInt(obj1.id.replace(/[^\d]/g, ''), 10);
|
||||
var s2 = parseInt(obj2.id.replace(/[^\d]/g, ''), 10);
|
||||
return s1 === s2 ? 0 : s1 < s2 ? -1 : 1;
|
||||
}
|
||||
|
||||
function resetHeaderLocations () {
|
||||
var headers = $(".tocify-header").sort(sortDescending);
|
||||
$.each(headers, function (index, item) {
|
||||
$(item).insertBefore($("#toc ul:first-child"));
|
||||
});
|
||||
}
|
||||
|
||||
function search (event) {
|
||||
var sections = $('section, #toc .tocify-header');
|
||||
|
||||
searchInfo.hide();
|
||||
function search(event) {
|
||||
unhighlight();
|
||||
searchResults.addClass('visible');
|
||||
|
||||
// ESC clears the field
|
||||
if (event.keyCode === 27) this.value = '';
|
||||
|
||||
if (this.value) {
|
||||
sections.hide();
|
||||
// results are sorted by score in descending order
|
||||
var results = index.search(this.value);
|
||||
var results = index.search(this.value).filter(function(r) {
|
||||
return r.score > 0.0001;
|
||||
});
|
||||
|
||||
if (results.length) {
|
||||
resetHeaderLocations();
|
||||
var lastRef;
|
||||
$.each(results, function (index, item) {
|
||||
if (item.score <= 0.0001) return; // remove low-score results
|
||||
var itemRef = item.ref;
|
||||
$('#section-' + itemRef).show();
|
||||
// headers must be repositioned in the DOM
|
||||
var closestHeader = refToHeader(itemRef);
|
||||
if (lastRef) {
|
||||
refToHeader(lastRef).insertBefore(closestHeader);
|
||||
}
|
||||
closestHeader.show();
|
||||
lastRef = itemRef;
|
||||
searchResults.empty();
|
||||
$.each(results, function (index, result) {
|
||||
searchResults.append("<li><a href='#" + result.ref + "'>" + $('#'+result.ref).text() + "</a></li>");
|
||||
});
|
||||
|
||||
// position first element. it wasn't positioned above if len > 1
|
||||
if (results.length > 1) {
|
||||
var firstRef = results[0].ref;
|
||||
var secondRef = results[1].ref
|
||||
refToHeader(firstRef).insertBefore(refToHeader(secondRef));
|
||||
}
|
||||
|
||||
highlight.call(this);
|
||||
} else {
|
||||
sections.show();
|
||||
searchInfo.text('No Results Found for "' + this.value + '"').show();
|
||||
searchResults.html('<li>No Results Found for "' + this.value + '"</li>');
|
||||
}
|
||||
} else {
|
||||
sections.show();
|
||||
unhighlight();
|
||||
searchResults.removeClass('visible');
|
||||
}
|
||||
|
||||
// HACK trigger tocify height recalculation
|
||||
$global.triggerHandler('scroll.tocify');
|
||||
$global.triggerHandler('resize');
|
||||
}
|
||||
|
||||
function active () {
|
||||
search.call(this, {});
|
||||
}
|
||||
|
||||
function inactive () {
|
||||
unhighlight();
|
||||
searchInfo.hide();
|
||||
}
|
||||
|
||||
function highlight () {
|
||||
function highlight() {
|
||||
if (this.value) content.highlight(this.value, highlightOpts);
|
||||
}
|
||||
|
||||
function unhighlight () {
|
||||
function unhighlight() {
|
||||
content.unhighlight(highlightOpts);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
(function (global) {
|
||||
|
||||
var toc;
|
||||
var closeToc = function() {
|
||||
$(".tocify-wrapper").removeClass('open');
|
||||
$("#nav-button").removeClass('open');
|
||||
};
|
||||
|
||||
global.toc = toc;
|
||||
|
||||
$(toc);
|
||||
$(animate);
|
||||
|
||||
function toc () {
|
||||
toc = $("#toc").tocify({
|
||||
var makeToc = function() {
|
||||
global.toc = $("#toc").tocify({
|
||||
selectors: 'h1, h2',
|
||||
extendPage: false,
|
||||
theme: 'none',
|
||||
|
|
@ -17,13 +15,22 @@
|
|||
hideEffectSpeed: 180,
|
||||
ignoreSelector: '.toc-ignore',
|
||||
highlightOffset: 60,
|
||||
scrollTo: -2,
|
||||
scrollTo: -1,
|
||||
scrollHistory: true,
|
||||
hashGenerator: function (text, element) {
|
||||
return element.prop('id');
|
||||
}
|
||||
}).data('toc-tocify');
|
||||
}
|
||||
|
||||
$("#nav-button").click(function() {
|
||||
$(".tocify-wrapper").toggleClass('open');
|
||||
$("#nav-button").toggleClass('open');
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".page-wrapper").click(closeToc);
|
||||
$(".tocify-item").click(closeToc);
|
||||
};
|
||||
|
||||
// Hack to make already open sections to start opened,
|
||||
// instead of displaying an ugly animation
|
||||
|
|
@ -33,5 +40,8 @@
|
|||
}, 50);
|
||||
}
|
||||
|
||||
$(makeToc);
|
||||
$(animate);
|
||||
|
||||
})(window);
|
||||
|
||||
|
|
|
|||
169
source/javascripts/lib/energize.js
Normal file
169
source/javascripts/lib/energize.js
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
/**
|
||||
* energize.js v0.1.0
|
||||
*
|
||||
* Speeds up click events on mobile devices.
|
||||
* https://github.com/davidcalhoun/energize.js
|
||||
*/
|
||||
|
||||
(function() { // Sandbox
|
||||
/**
|
||||
* Don't add to non-touch devices, which don't need to be sped up
|
||||
*/
|
||||
if(!('ontouchstart' in window)) return;
|
||||
|
||||
var lastClick = {},
|
||||
isThresholdReached, touchstart, touchmove, touchend,
|
||||
click, closest;
|
||||
|
||||
/**
|
||||
* isThresholdReached
|
||||
*
|
||||
* Compare touchstart with touchend xy coordinates,
|
||||
* and only fire simulated click event if the coordinates
|
||||
* are nearby. (don't want clicking to be confused with a swipe)
|
||||
*/
|
||||
isThresholdReached = function(startXY, xy) {
|
||||
return Math.abs(startXY[0] - xy[0]) > 5 || Math.abs(startXY[1] - xy[1]) > 5;
|
||||
};
|
||||
|
||||
/**
|
||||
* touchstart
|
||||
*
|
||||
* Save xy coordinates when the user starts touching the screen
|
||||
*/
|
||||
touchstart = function(e) {
|
||||
this.startXY = [e.touches[0].clientX, e.touches[0].clientY];
|
||||
this.threshold = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* touchmove
|
||||
*
|
||||
* Check if the user is scrolling past the threshold.
|
||||
* Have to check here because touchend will not always fire
|
||||
* on some tested devices (Kindle Fire?)
|
||||
*/
|
||||
touchmove = function(e) {
|
||||
// NOOP if the threshold has already been reached
|
||||
if(this.threshold) return false;
|
||||
|
||||
this.threshold = isThresholdReached(this.startXY, [e.touches[0].clientX, e.touches[0].clientY]);
|
||||
};
|
||||
|
||||
/**
|
||||
* touchend
|
||||
*
|
||||
* If the user didn't scroll past the threshold between
|
||||
* touchstart and touchend, fire a simulated click.
|
||||
*
|
||||
* (This will fire before a native click)
|
||||
*/
|
||||
touchend = function(e) {
|
||||
// Don't fire a click if the user scrolled past the threshold
|
||||
if(this.threshold || isThresholdReached(this.startXY, [e.changedTouches[0].clientX, e.changedTouches[0].clientY])) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create and fire a click event on the target element
|
||||
* https://developer.mozilla.org/en/DOM/event.initMouseEvent
|
||||
*/
|
||||
var touch = e.changedTouches[0],
|
||||
evt = document.createEvent('MouseEvents');
|
||||
evt.initMouseEvent('click', true, true, window, 0, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
|
||||
evt.simulated = true; // distinguish from a normal (nonsimulated) click
|
||||
e.target.dispatchEvent(evt);
|
||||
};
|
||||
|
||||
/**
|
||||
* click
|
||||
*
|
||||
* Because we've already fired a click event in touchend,
|
||||
* we need to listed for all native click events here
|
||||
* and suppress them as necessary.
|
||||
*/
|
||||
click = function(e) {
|
||||
/**
|
||||
* Prevent ghost clicks by only allowing clicks we created
|
||||
* in the click event we fired (look for e.simulated)
|
||||
*/
|
||||
var time = Date.now(),
|
||||
timeDiff = time - lastClick.time,
|
||||
x = e.clientX,
|
||||
y = e.clientY,
|
||||
xyDiff = [Math.abs(lastClick.x - x), Math.abs(lastClick.y - y)],
|
||||
target = closest(e.target, 'A') || e.target, // needed for standalone apps
|
||||
nodeName = target.nodeName,
|
||||
isLink = nodeName === 'A',
|
||||
standAlone = window.navigator.standalone && isLink && e.target.getAttribute("href");
|
||||
|
||||
lastClick.time = time;
|
||||
lastClick.x = x;
|
||||
lastClick.y = y;
|
||||
|
||||
/**
|
||||
* Unfortunately Android sometimes fires click events without touch events (seen on Kindle Fire),
|
||||
* so we have to add more logic to determine the time of the last click. Not perfect...
|
||||
*
|
||||
* Older, simpler check: if((!e.simulated) || standAlone)
|
||||
*/
|
||||
if((!e.simulated && (timeDiff < 500 || (timeDiff < 1500 && xyDiff[0] < 50 && xyDiff[1] < 50))) || standAlone) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if(!standAlone) return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Special logic for standalone web apps
|
||||
* See http://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-in-new-window
|
||||
*/
|
||||
if(standAlone) {
|
||||
window.location = target.getAttribute("href");
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an energize-focus class to the targeted link (mimics :focus behavior)
|
||||
* TODO: test and/or remove? Does this work?
|
||||
*/
|
||||
if(!target || !target.classList) return;
|
||||
target.classList.add("energize-focus");
|
||||
window.setTimeout(function(){
|
||||
target.classList.remove("energize-focus");
|
||||
}, 150);
|
||||
};
|
||||
|
||||
/**
|
||||
* closest
|
||||
* @param {HTMLElement} node current node to start searching from.
|
||||
* @param {string} tagName the (uppercase) name of the tag you're looking for.
|
||||
*
|
||||
* Find the closest ancestor tag of a given node.
|
||||
*
|
||||
* Starts at node and goes up the DOM tree looking for a
|
||||
* matching nodeName, continuing until hitting document.body
|
||||
*/
|
||||
closest = function(node, tagName){
|
||||
var curNode = node;
|
||||
|
||||
while(curNode !== document.body) { // go up the dom until we find the tag we're after
|
||||
if(!curNode || curNode.nodeName === tagName) { return curNode; } // found
|
||||
curNode = curNode.parentNode; // not found, so keep going up
|
||||
}
|
||||
|
||||
return null; // not found
|
||||
};
|
||||
|
||||
/**
|
||||
* Add all delegated event listeners
|
||||
*
|
||||
* All the events we care about bubble up to document,
|
||||
* so we can take advantage of event delegation.
|
||||
*
|
||||
* Note: no need to wait for DOMContentLoaded here
|
||||
*/
|
||||
document.addEventListener('touchstart', touchstart, false);
|
||||
document.addEventListener('touchmove', touchmove, false);
|
||||
document.addEventListener('touchend', touchend, false);
|
||||
document.addEventListener('click', click, true); // TODO: why does this use capture?
|
||||
|
||||
})();
|
||||
|
|
@ -681,9 +681,11 @@
|
|||
self.calculateHeights();
|
||||
}
|
||||
|
||||
var scrollTop = $(window).scrollTop();
|
||||
|
||||
// Determines the index of the closest anchor
|
||||
self.cachedAnchors.each(function(idx) {
|
||||
if (self.cachedHeights[idx] - $(window).scrollTop() < 0) {
|
||||
if (self.cachedHeights[idx] - scrollTop < 0) {
|
||||
closestAnchorIdx = idx;
|
||||
} else {
|
||||
return false;
|
||||
|
|
@ -696,7 +698,7 @@
|
|||
elem = $('li[data-unique="' + anchorText + '"]');
|
||||
|
||||
// If the `highlightOnScroll` option is true and a next element is found
|
||||
if(self.options.highlightOnScroll && elem.length) {
|
||||
if(self.options.highlightOnScroll && elem.length && !elem.hasClass(self.focusClass)) {
|
||||
|
||||
// Removes highlighting from all of the list item's
|
||||
self.element.find("." + self.focusClass).removeClass(self.focusClass);
|
||||
|
|
@ -722,12 +724,14 @@
|
|||
|
||||
if(self.options.scrollHistory) {
|
||||
|
||||
if(window.location.hash !== "#" + anchorText) {
|
||||
// IF STATEMENT ADDED BY ROBERT
|
||||
|
||||
if(history.replaceState) {
|
||||
if(window.location.hash !== "#" + anchorText && anchorText !== undefined) {
|
||||
|
||||
if(history.replaceState) {
|
||||
history.replaceState({}, "", "#" + anchorText);
|
||||
// provide a fallback
|
||||
} else {
|
||||
} else {
|
||||
scrollV = document.body.scrollTop;
|
||||
scrollH = document.body.scrollLeft;
|
||||
location.hash = "#" + anchorText;
|
||||
|
|
|
|||
|
|
@ -19,12 +19,17 @@ under the License.
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title><%= current_page.data.title || "API Documentation" %></title>
|
||||
|
||||
<%= stylesheet_link_tag :screen, media: :screen %>
|
||||
<%= stylesheet_link_tag :print, media: :print %>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
<%= javascript_include_tag "all" %>
|
||||
<% if current_page.data.search %>
|
||||
<%= javascript_include_tag "all" %>
|
||||
<% else %>
|
||||
<%= javascript_include_tag "all_nosearch" %>
|
||||
<% end %>
|
||||
|
||||
<% if language_tabs %>
|
||||
<script>
|
||||
|
|
@ -36,13 +41,30 @@ under the License.
|
|||
</head>
|
||||
|
||||
<body class="<%= page_classes %>">
|
||||
<a href="#" id="nav-button">
|
||||
<span>
|
||||
NAV
|
||||
<%= image_tag('navbar.png') %>
|
||||
</span>
|
||||
</a>
|
||||
<div class="tocify-wrapper">
|
||||
<%= image_tag "logo.png" %>
|
||||
<% if language_tabs %>
|
||||
<div class="lang-selector">
|
||||
<% language_tabs.each do |lang| %>
|
||||
<% if lang.is_a? Hash %>
|
||||
<a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a>
|
||||
<% else %>
|
||||
<a href="#" data-language-name="<%= lang %>"><%= lang %></a>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if current_page.data.search %>
|
||||
<div class="search">
|
||||
<input type="text" class="search" id="input-search">
|
||||
<input type="text" class="search" id="input-search" placeholder="Search">
|
||||
</div>
|
||||
<div class="search-info"></div>
|
||||
<ul class="search-results"></ul>
|
||||
<% end %>
|
||||
<div id="toc">
|
||||
</div>
|
||||
|
|
@ -64,7 +86,7 @@ under the License.
|
|||
</div>
|
||||
<div class="dark-box">
|
||||
<% if language_tabs %>
|
||||
<div id="lang-selector">
|
||||
<div class="lang-selector">
|
||||
<% language_tabs.each do |lang| %>
|
||||
<% if lang.is_a? Hash %>
|
||||
<a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ body {
|
|||
@extend %default-font;
|
||||
}
|
||||
|
||||
.tocify, .toc-footer {
|
||||
.tocify, .toc-footer, .lang-selector, .search, #nav-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,16 +34,44 @@ html, body {
|
|||
@extend %default-font;
|
||||
background-color: $main-bg;
|
||||
height: 100%;
|
||||
-webkit-text-size-adjust: none; /* Never autoresize text */
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// TABLE OF CONTENTS
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
#toc > ul > li > a > span {
|
||||
float: right;
|
||||
background-color: #2484FF;
|
||||
border-radius: 40px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
@mixin embossed-bg {
|
||||
@include background(
|
||||
linear-gradient(top,
|
||||
rgba(#000, 0.2),
|
||||
rgba(#000, 0) 8px),
|
||||
linear-gradient(bottom,
|
||||
rgba(#000, 0.2),
|
||||
rgba(#000, 0) 8px),
|
||||
linear-gradient(top,
|
||||
rgba($nav-embossed-border-top, 1),
|
||||
rgba($nav-embossed-border-top, 0) 1.5px),
|
||||
linear-gradient(bottom,
|
||||
rgba($nav-embossed-border-bottom, 1),
|
||||
rgba($nav-embossed-border-bottom, 0) 1.5px),
|
||||
$nav-subitem-bg
|
||||
);
|
||||
}
|
||||
|
||||
.tocify-wrapper {
|
||||
@include transition(left ease-in-out 0.3s);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -52,6 +80,15 @@ html, body {
|
|||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
|
||||
// language selector for mobile devices
|
||||
.lang-selector {
|
||||
display: none;
|
||||
a {
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// This is the logo at the top of the ToC
|
||||
&>img {
|
||||
display: block;
|
||||
|
|
@ -66,16 +103,17 @@ html, body {
|
|||
border-color: $search-box-border-color;
|
||||
padding: 6px 0 6px 20px;
|
||||
@include box-sizing(border-box);
|
||||
margin: 10px 15px;
|
||||
margin: $nav-v-padding $nav-padding;
|
||||
width: $nav-width - 30;
|
||||
outline: none;
|
||||
color: $nav-text;
|
||||
border-radius: 0; /* ios has a default border radius */
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 15px;
|
||||
left: $nav-padding;
|
||||
color: $nav-text;
|
||||
@extend %icon-search;
|
||||
}
|
||||
|
|
@ -85,16 +123,35 @@ html, body {
|
|||
margin-top: $logo-margin;
|
||||
}
|
||||
|
||||
.search-info {
|
||||
.search-results {
|
||||
margin-top: 0;
|
||||
padding: 1em $nav-padding;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 0 lighten($search-notice-bg, 15%);
|
||||
background: $search-notice-bg;
|
||||
display: none;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
height: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
@include transition-property(height margin);
|
||||
@include transition-duration(180ms);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
&.visible {
|
||||
height: 30%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
@include embossed-bg;
|
||||
|
||||
li {
|
||||
margin: 1em $nav-padding;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $nav-text;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -136,25 +193,14 @@ html, body {
|
|||
display: none; // tocify will override this when needed
|
||||
background-color: $nav-subitem-bg;
|
||||
font-weight: 500;
|
||||
@include background-image(
|
||||
linear-gradient(top,
|
||||
darken($nav-subitem-bg,2%),
|
||||
$nav-subitem-bg 10%,
|
||||
$nav-subitem-bg 90%,
|
||||
darken($nav-subitem-bg,2%))
|
||||
);
|
||||
.tocify-item>a {
|
||||
padding-left: $nav-padding + $nav-indent;
|
||||
font-size: 12px;
|
||||
}
|
||||
// These items make for a slight embossed look for the subheader.
|
||||
// "Why not put the borders in the subheader?" you ask.
|
||||
// "Because then the animation isn't as smooth," I reply.
|
||||
&>li:first-child {
|
||||
border-top: $nav-embossed-border-top;
|
||||
}
|
||||
|
||||
// for embossed look:
|
||||
@include embossed-bg;
|
||||
&>li:last-child {
|
||||
border-bottom: $nav-embossed-border-bottom;
|
||||
box-shadow: none; // otherwise it'll overflow out of the subheader
|
||||
}
|
||||
}
|
||||
|
|
@ -182,6 +228,39 @@ html, body {
|
|||
|
||||
}
|
||||
|
||||
// button to show navigation on mobile devices
|
||||
#nav-button {
|
||||
span {
|
||||
display: block;
|
||||
$side-pad: $main-padding / 2 - 8px;
|
||||
padding: $side-pad $side-pad $side-pad;
|
||||
background-color: rgba($main-bg, 0.7);
|
||||
@include transform-origin(0, 0);
|
||||
@include transform(rotate(-90deg) translate(-100%, 0));
|
||||
border-radius: 0 0 0 5px;
|
||||
}
|
||||
padding: 0 1.5em 5em 0; // increase touch size area
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
line-height: 16px;
|
||||
img {
|
||||
height: 16px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
@include transition(left ease-in-out 0.3s);
|
||||
|
||||
&:hover { opacity: 1; }
|
||||
&.open {left: $nav-width}
|
||||
}
|
||||
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// PAGE LAYOUT AND CODE SAMPLE BACKGROUND
|
||||
|
|
@ -189,7 +268,6 @@ html, body {
|
|||
|
||||
.page-wrapper {
|
||||
margin-left: $nav-width;
|
||||
min-width: 700px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: $main-bg;
|
||||
|
|
@ -211,38 +289,41 @@ html, body {
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
#lang-selector {
|
||||
.lang-selector {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 50;
|
||||
font-weight: bold;
|
||||
background-color: $lang-select-bg;
|
||||
border-bottom: 5px solid $lang-select-active-bg;
|
||||
a {
|
||||
display: block;
|
||||
float:left;
|
||||
color: $lang-select-text;
|
||||
text-decoration: none;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $lang-select-pressed-bg;
|
||||
color: $lang-select-pressed-text;
|
||||
}
|
||||
.lang-selector {
|
||||
background-color: $lang-select-bg;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
a {
|
||||
display: block;
|
||||
float:left;
|
||||
color: $lang-select-text;
|
||||
text-decoration: none;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
|
||||
&.active {
|
||||
background-color: $lang-select-active-bg;
|
||||
color: $lang-select-active-text;
|
||||
}
|
||||
&:active {
|
||||
background-color: $lang-select-pressed-bg;
|
||||
color: $lang-select-pressed-text;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block;
|
||||
&.active {
|
||||
background-color: $lang-select-active-bg;
|
||||
color: $lang-select-active-text;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
@ -255,177 +336,181 @@ html, body {
|
|||
position: relative;
|
||||
z-index: 30;
|
||||
|
||||
&, section {
|
||||
padding-bottom: 6em;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
|
||||
margin-right: $examples-width;
|
||||
padding: 0 $main-padding;
|
||||
@include box-sizing(border-box);
|
||||
display: block;
|
||||
@include text-shadow($main-embossed-text-shadow);
|
||||
|
||||
@extend %left-col;
|
||||
}
|
||||
|
||||
&>ul, &>ol {
|
||||
padding-left: $main-padding + 15px;
|
||||
}
|
||||
|
||||
// the div is the tocify hidden div for placeholding stuff
|
||||
&>h1, &>h2, &>div {
|
||||
clear:both;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %header-font;
|
||||
font-size: 30px;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: $h1-margin-bottom;
|
||||
margin-top: 2em;
|
||||
border-top: 1px solid #ddd;
|
||||
@include background-image(
|
||||
linear-gradient(top, #fff, #f9f9f9)
|
||||
);
|
||||
}
|
||||
|
||||
h1:first-child, div:first-child + h1 {
|
||||
border-top-width: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %header-font;
|
||||
font-size: 20px;
|
||||
margin-top: 4em;
|
||||
margin-bottom: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 1.2em;
|
||||
padding-bottom: 1.2em;
|
||||
@include background-image(
|
||||
linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0))
|
||||
);
|
||||
}
|
||||
|
||||
// h2s right after h1s should bump right up
|
||||
// against the h1s.
|
||||
h1 + h2, h1 + div + h2 {
|
||||
margin-top: $h1-margin-bottom * -1;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
@extend %header-font;
|
||||
font-size: 12px;
|
||||
margin-top: 2.5em;
|
||||
margin-bottom: 0.8em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 2em 0;
|
||||
border-top: 2px solid $examples-bg;
|
||||
border-bottom: 2px solid $main-bg;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-bottom: 1em;
|
||||
overflow: auto;
|
||||
th,td {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
&>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
|
||||
margin-right: $examples-width;
|
||||
padding: 0 $main-padding;
|
||||
@include box-sizing(border-box);
|
||||
display: block;
|
||||
@include text-shadow($main-embossed-text-shadow);
|
||||
}
|
||||
|
||||
&>ul, &>ol {
|
||||
padding-left: $main-padding + 15px;
|
||||
}
|
||||
|
||||
// the div is the tocify hidden div for placeholding stuff
|
||||
&>h1, &>h2, &>div {
|
||||
clear:both;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %header-font;
|
||||
font-size: 30px;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
th {
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: $h1-margin-bottom;
|
||||
margin-top: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
@include background-image(
|
||||
linear-gradient(top, #fff, #f9f9f9)
|
||||
);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %header-font;
|
||||
font-size: 20px;
|
||||
margin-top: 4em;
|
||||
margin-bottom: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 1.2em;
|
||||
padding-bottom: 1.2em;
|
||||
@include background-image(
|
||||
linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0))
|
||||
);
|
||||
td {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
// h2s right after h1s should bump right up
|
||||
// against the h1s.
|
||||
h1 + h2, h1 + div + h2 {
|
||||
margin-top: $h1-margin-bottom * -1;
|
||||
border-top: none;
|
||||
tr:last-child {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
@extend %header-font;
|
||||
font-size: 12px;
|
||||
margin-top: 2.5em;
|
||||
margin-bottom: 0.8em;
|
||||
text-transform: uppercase;
|
||||
tr:nth-child(odd)>td {
|
||||
background-color: lighten($main-bg,4.2%);
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
font-size: 10px;
|
||||
tr:nth-child(even)>td {
|
||||
background-color: lighten($main-bg,2.4%);
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
p, li, dt, dd {
|
||||
line-height: 1.6;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
@extend %break-words;
|
||||
@extend %code-font;
|
||||
}
|
||||
|
||||
aside {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%);
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
background: $aside-notice-bg;
|
||||
line-height: 1.6;
|
||||
|
||||
&.warning {
|
||||
background-color: $aside-warning-bg;
|
||||
text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 2em 0;
|
||||
border-top: 2px solid $examples-bg;
|
||||
border-bottom: 2px solid $main-bg;
|
||||
&.success {
|
||||
background-color: $aside-success-bg;
|
||||
text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
margin-bottom: 1em;
|
||||
overflow: auto;
|
||||
th,td {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
line-height: 1.6;
|
||||
}
|
||||
aside:before {
|
||||
vertical-align: middle;
|
||||
padding-right: 0.5em;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
aside.notice:before {
|
||||
@extend %icon-info-sign;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
}
|
||||
aside.warning:before {
|
||||
@extend %icon-exclamation-sign;
|
||||
}
|
||||
|
||||
tr:last-child {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
tr:nth-child(odd)>td {
|
||||
background-color: lighten($main-bg,4.2%);
|
||||
}
|
||||
|
||||
tr:nth-child(even)>td {
|
||||
background-color: lighten($main-bg,2.4%);
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
p, li, dt, dd {
|
||||
line-height: 1.6;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
@extend %break-words;
|
||||
@extend %code-font;
|
||||
}
|
||||
|
||||
aside {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%);
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
background: $aside-notice-bg;
|
||||
line-height: 1.6;
|
||||
|
||||
&.warning {
|
||||
background-color: $aside-warning-bg;
|
||||
text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $aside-success-bg;
|
||||
text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
aside:before {
|
||||
vertical-align: middle;
|
||||
padding-right: 0.5em;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
aside.notice:before {
|
||||
@extend %icon-info-sign;
|
||||
}
|
||||
|
||||
aside.warning:before {
|
||||
@extend %icon-exclamation-sign;
|
||||
}
|
||||
|
||||
aside.success:before {
|
||||
@extend %icon-ok-sign;
|
||||
}
|
||||
aside.success:before {
|
||||
@extend %icon-ok-sign;
|
||||
}
|
||||
|
||||
.search-highlight {
|
||||
|
|
@ -458,6 +543,8 @@ html, body {
|
|||
@include box-sizing(border-box);
|
||||
@include text-shadow(0px 1px 2px rgba(0,0,0,0.4));
|
||||
|
||||
@extend %right-col;
|
||||
|
||||
&>p { margin: 0; }
|
||||
|
||||
a {
|
||||
|
|
@ -482,3 +569,59 @@ html, body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// RESPONSIVE DESIGN
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// These are the styles for phones and tablets
|
||||
// There are also a couple styles disperesed
|
||||
|
||||
@media (max-width: $tablet-width) {
|
||||
.tocify-wrapper {
|
||||
left: -$nav-width;
|
||||
|
||||
&.open {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#nav-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tocify-wrapper .tocify-item > a {
|
||||
padding-top: 0.3em;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $phone-width) {
|
||||
.dark-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
%left-col {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.tocify-wrapper .lang-selector {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-wrapper .lang-selector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
%right-col {
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
%right-col + %left-col {
|
||||
margin-top: $main-padding;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,9 +57,12 @@ $examples-width: 50%; // portion of the screen taken up by code examples
|
|||
$logo-margin: 20px; // margin between nav items and logo, ignored if search is active
|
||||
$main-padding: 28px; // padding to left and right of content & examples
|
||||
$nav-padding: 15px; // padding to left and right of navbar
|
||||
$nav-v-padding: 10px; // padding used vertically around search boxes and results
|
||||
$nav-indent: 10px; // extra padding for ToC subitems
|
||||
$code-annotation-padding: 13px; // padding inside code annotations
|
||||
$h1-margin-bottom: 21px; // padding under the largest header tags
|
||||
$tablet-width: 930px; // min width before reverting to tablet size
|
||||
$phone-width: $tablet-width - $nav-width; // min width before reverting to mobile size
|
||||
|
||||
|
||||
// FONTS
|
||||
|
|
@ -84,8 +87,8 @@ $h1-margin-bottom: 21px; // padding under the largest header tags
|
|||
////////////////////
|
||||
$nav-active-shadow: #000;
|
||||
$nav-footer-border-color: #666;
|
||||
$nav-embossed-border-top: 1px solid #000;
|
||||
$nav-embossed-border-bottom: 1px solid #404040;
|
||||
$nav-embossed-border-top: #000;
|
||||
$nav-embossed-border-bottom: #939393;
|
||||
$main-embossed-text-shadow: 0px 1px 0px #fff;
|
||||
$search-box-border-color: #666;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue