Upgrade Slate sample to Slate 2.7.1

Closes gh-693

samples/rest-notes-slate/slate/source/fonts/slate.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>Generated by IcoMoon</metadata>
 <defs>

samples/rest-notes-slate/slate/source/includes/_errors.md

@@ -1,20 +1,22 @@
 # Errors
 
-<aside class="notice">This error section is stored in a separate file in `includes/_errors.md`. Slate allows you to optionally separate out your docs into many files...just save them to the `includes` folder and add them to the top of your `index.md`'s frontmatter. Files are included in the order listed.</aside>
+<aside class="notice">
+This error section is stored in a separate file in <code>includes/_errors.md</code>. Slate allows you to optionally separate out your docs into many files...just save them to the <code>includes</code> folder and add them to the top of your <code>index.md</code>'s frontmatter. Files are included in the order listed.
+</aside>
 
 The Kittn API uses the following error codes:
 
 
 Error Code | Meaning
 ---------- | -------
-400 | Bad Request -- Your request sucks
-401 | Unauthorized -- Your API key is wrong
-403 | Forbidden -- The kitten requested is hidden for administrators only
-404 | Not Found -- The specified kitten could not be found
-405 | Method Not Allowed -- You tried to access a kitten with an invalid method
-406 | Not Acceptable -- You requested a format that isn't json
-410 | Gone -- The kitten requested has been removed from our servers
-418 | I'm a teapot
+400 | Bad Request -- Your request is invalid.
+401 | Unauthorized -- Your API key is wrong.
+403 | Forbidden -- The kitten requested is hidden for administrators only.
+404 | Not Found -- The specified kitten could not be found.
+405 | Method Not Allowed -- You tried to access a kitten with an invalid method.
+406 | Not Acceptable -- You requested a format that isn't json.
+410 | Gone -- The kitten requested has been removed from our servers.
+418 | I'm a teapot.
 429 | Too Many Requests -- You're requesting too many kittens! Slow down!
 500 | Internal Server Error -- We had a problem with our server. Try again later.
 503 | Service Unavailable -- We're temporarily offline for maintenance. Please try again later.

samples/rest-notes-slate/slate/source/index.html.md

@@ -1,7 +1,7 @@
 ---
 title: API Reference
 
-language_tabs:
+language_tabs: # must be one of https://git.io/vQNgJ
   - shell
   - ruby
   - python
@@ -9,21 +9,23 @@ language_tabs:
 
 toc_footers:
   - <a href='#'>Sign Up for a Developer Key</a>
-  - <a href='https://github.com/tripit/slate'>Documentation Powered by Slate</a>
+  - <a href='https://github.com/slatedocs/slate'>Documentation Powered by Slate</a>
 
 includes:
   - errors
 
 search: true
+
+code_clipboard: true
 ---
 
 # Introduction
 
 Welcome to the Kittn API! You can use our API to access Kittn API endpoints, which can get information on various cats, kittens, and breeds in our database.
 
-We have language bindings in Shell, Ruby, and Python! You can view code examples in the dark area to the right, and you can switch the programming language of the examples with the tabs in the top right.
+We have language bindings in Shell, Ruby, Python, and JavaScript! You can view code examples in the dark area to the right, and you can switch the programming language of the examples with the tabs in the top right.
 
-This example API documentation page was created with [Slate](https://github.com/tripit/slate). Feel free to edit it and use it as a base for your own API's documentation.
+This example API documentation page was created with [Slate](https://github.com/slatedocs/slate). Feel free to edit it and use it as a base for your own API's documentation.
 
 # Authentication
 
@@ -55,7 +57,7 @@ let api = kittn.authorize('meowmeowmeow');
 
 > Make sure to replace `meowmeowmeow` with your API key.
 
-Kittn uses API keys to allow access to the API. You can register a new Kittn API key at our [developer portal](https://example.com/developers).
+Kittn uses API keys to allow access to the API. You can register a new Kittn API key at our [developer portal](http://example.com/developers).
 
 Kittn expects for the API key to be included in all API requests to the server in a header that looks like the following:
 
@@ -84,7 +86,7 @@ api.kittens.get()
 ```
 
 ```shell
-curl "https://example.com/api/kittens"
+curl "http://example.com/api/kittens"
   -H "Authorization: meowmeowmeow"
 ```
 
@@ -120,7 +122,7 @@ This endpoint retrieves all kittens.
 
 ### HTTP Request
 
-`GET https://example.com/api/kittens`
+`GET http://example.com/api/kittens`
 
 ### Query Parameters
 
@@ -150,7 +152,7 @@ api.kittens.get(2)
 ```
 
 ```shell
-curl "https://example.com/api/kittens/2"
+curl "http://example.com/api/kittens/2"
   -H "Authorization: meowmeowmeow"
 ```
 
@@ -179,7 +181,7 @@ This endpoint retrieves a specific kitten.
 
 ### HTTP Request
 
-`GET https://example.com/kittens/<ID>`
+`GET http://example.com/kittens/<ID>`
 
 ### URL Parameters
 
@@ -187,3 +189,53 @@ Parameter | Description
 --------- | -----------
 ID | The ID of the kitten to retrieve
 
+## Delete a Specific Kitten
+
+```ruby
+require 'kittn'
+
+api = Kittn::APIClient.authorize!('meowmeowmeow')
+api.kittens.delete(2)
+```
+
+```python
+import kittn
+
+api = kittn.authorize('meowmeowmeow')
+api.kittens.delete(2)
+```
+
+```shell
+curl "http://example.com/api/kittens/2"
+  -X DELETE
+  -H "Authorization: meowmeowmeow"
+```
+
+```javascript
+const kittn = require('kittn');
+
+let api = kittn.authorize('meowmeowmeow');
+let max = api.kittens.delete(2);
+```
+
+> The above command returns JSON structured like this:
+
+```json
+{
+  "id": 2,
+  "deleted" : ":("
+}
+```
+
+This endpoint deletes a specific kitten.
+
+### HTTP Request
+
+`DELETE http://example.com/kittens/<ID>`
+
+### URL Parameters
+
+Parameter | Description
+--------- | -----------
+ID | The ID of the kitten to delete
+

samples/rest-notes-slate/slate/source/javascripts/all.js

@@ -1,4 +1,2 @@
-//= require ./lib/_energize
-//= require ./app/_lang
+//= require ./all_nosearch
 //= require ./app/_search
-//= require ./app/_toc

samples/rest-notes-slate/slate/source/javascripts/all_nosearch.js

@@ -1,3 +1,27 @@
 //= require ./lib/_energize
-//= require ./app/_lang
+//= require ./app/_copy
 //= require ./app/_toc
+//= require ./app/_lang
+
+function adjustLanguageSelectorWidth() {
+  const elem = $('.dark-box > .lang-selector');
+  elem.width(elem.parent().width());
+}
+
+$(function() {
+  loadToc($('#toc'), '.toc-link', '.toc-list-h2', 10);
+  setupLanguages($('body').data('languages'));
+  $('.content').imagesLoaded( function() {
+    window.recacheHeights();
+    window.refreshToc();
+  });
+
+  $(window).resize(function() {
+    adjustLanguageSelectorWidth();
+  });
+  adjustLanguageSelectorWidth();
+});
+
+window.onpopstate = function() {
+  activateLanguage(getLanguageFromQueryString());
+};

samples/rest-notes-slate/slate/source/javascripts/app/_copy.js

@@ -0,0 +1,15 @@
+function copyToClipboard(container) {
+  const el = document.createElement('textarea');
+  el.value = container.textContent;
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+}
+
+function setupCodeCopy() {
+  $('pre.highlight').prepend('<div class="copy-clipboard"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Copy to Clipboard</title><path d="M18 6v-6h-18v18h6v6h18v-18h-6zm-12 10h-4v-14h14v4h-10v10zm16 6h-14v-14h14v14z"></path></svg></div>');
+  $('.copy-clipboard').on('click', function() {
+    copyToClipboard(this.parentNode.children[1]);
+  });
+}

samples/rest-notes-slate/slate/source/javascripts/app/_lang.js

@@ -7,7 +7,7 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may
 not use this file except in compliance with the License. You may obtain
 a copy of the License at
 
-  https://www.apache.org/licenses/LICENSE-2.0
+  http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
@@ -15,13 +15,14 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations
 under the License.
 */
-(function (global) {
+;(function () {
   'use strict';
 
   var languages = [];
 
-  global.setupLanguages = setupLanguages;
-  global.activateLanguage = activateLanguage;
+  window.setupLanguages = setupLanguages;
+  window.activateLanguage = activateLanguage;
+  window.getLanguageFromQueryString = getLanguageFromQueryString;
 
   function activateLanguage(language) {
     if (!language) return;
@@ -36,7 +37,7 @@ under the License.
     $(".highlight.tab-" + language).show();
     $(".lang-specific." + language).show();
 
-    global.toc.calculateHeights();
+    window.recacheHeights();
 
     // scroll to the new location of the position
     if ($(window.location.hash).get(0)) {
@@ -65,7 +66,7 @@ under the License.
 
       key = decodeURIComponent(key);
       // missing `=` should be `null`:
-      // https://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
+      // http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
       val = val === undefined ? null : decodeURIComponent(val);
 
       if (!ret.hasOwnProperty(key)) {
@@ -97,7 +98,7 @@ under the License.
   // gets the language set in the query string
   function getLanguageFromQueryString() {
     if (location.search.length >= 1) {
-      var language = parseURL(location.search).language
+      var language = parseURL(location.search).language;
       if (language) {
         return language;
       } else if (jQuery.inArray(location.search.substr(1), languages) != -1) {
@@ -159,8 +160,5 @@ under the License.
       activateLanguage(language);
       return false;
     });
-    window.onpopstate = function() {
-      activateLanguage(getLanguageFromQueryString());
-    };
   });
-})(window);
+})();

samples/rest-notes-slate/slate/source/javascripts/app/_search.js

@@ -1,50 +1,76 @@
 //= require ../lib/_lunr
 //= require ../lib/_jquery
 //= require ../lib/_jquery.highlight
-(function () {
+;(function () {
   'use strict';
 
   var content, searchResults;
   var highlightOpts = { element: 'span', className: 'search-highlight' };
+  var searchDelay = 0;
+  var timeoutHandle = 0;
+  var index;
 
-  var index = new lunr.Index();
+  function populate() {
+    index = lunr(function(){
 
-  index.ref('id');
-  index.field('title', { boost: 10 });
-  index.field('body');
-  index.pipeline.add(lunr.trimmer, lunr.stopWordFilter);
+      this.ref('id');
+      this.field('title', { boost: 10 });
+      this.field('body');
+      this.pipeline.add(lunr.trimmer, lunr.stopWordFilter);
+      var lunrConfig = this;
+
+      $('h1, h2').each(function() {
+        var title = $(this);
+        var body = title.nextUntil('h1, h2');
+        lunrConfig.add({
+          id: title.prop('id'),
+          title: title.text(),
+          body: body.text()
+        });
+      });
+
+    });
+    determineSearchDelay();
+  }
 
   $(populate);
   $(bind);
 
-  function populate() {
-    $('h1, h2').each(function() {
-      var title = $(this);
-      var body = title.nextUntil('h1, h2');
-      index.add({
-        id: title.prop('id'),
-        title: title.text(),
-        body: body.text()
-      });
-    });
+  function determineSearchDelay() {
+    if (index.tokenSet.toArray().length>5000) {
+      searchDelay = 300;
+    }
   }
 
   function bind() {
     content = $('.content');
     searchResults = $('.search-results');
 
-    $('#input-search').on('keyup', search);
+    $('#input-search').on('keyup',function(e) {
+      var wait = function() {
+        return function(executingFunction, waitTime){
+          clearTimeout(timeoutHandle);
+          timeoutHandle = setTimeout(executingFunction, waitTime);
+        };
+      }();
+      wait(function(){
+        search(e);
+      }, searchDelay);
+    });
   }
 
   function search(event) {
+
+    var searchInput = $('#input-search')[0];
+
     unhighlight();
     searchResults.addClass('visible');
 
     // ESC clears the field
-    if (event.keyCode === 27) this.value = '';
+    if (event.keyCode === 27) searchInput.value = '';
 
-    if (this.value) {
-      var results = index.search(this.value).filter(function(r) {
+    if (searchInput.value) {
+      var results = index.search(searchInput.value).filter(function(r) {
         return r.score > 0.0001;
       });
 
@@ -54,10 +80,10 @@
           var elem = document.getElementById(result.ref);
           searchResults.append("<li><a href='#" + result.ref + "'>" + $(elem).text() + "</a></li>");
         });
-        highlight.call(this);
+        highlight.call(searchInput);
       } else {
         searchResults.html('<li></li>');
-        $('.search-results li').text('No Results Found for "' + this.value + '"');
+        $('.search-results li').text('No Results Found for "' + searchInput.value + '"');
       }
     } else {
       unhighlight();
@@ -73,3 +99,4 @@
     content.unhighlight(highlightOpts);
   }
 })();
+

samples/rest-notes-slate/slate/source/javascripts/app/_toc.js

@@ -1,57 +1,122 @@
 //= require ../lib/_jquery
-//= require ../lib/_jquery_ui
-//= require ../lib/_jquery.tocify
 //= require ../lib/_imagesloaded.min
-(function (global) {
+;(function () {
   'use strict';
 
+  var htmlPattern = /<[^>]*>/g;
+  var loaded = false;
+
+  var debounce = function(func, waitTime) {
+    var timeout = false;
+    return function() {
+      if (timeout === false) {
+        setTimeout(function() {
+          func();
+          timeout = false;
+        }, waitTime);
+        timeout = true;
+      }
+    };
+  };
+
   var closeToc = function() {
-    $(".tocify-wrapper").removeClass('open');
+    $(".toc-wrapper").removeClass('open');
     $("#nav-button").removeClass('open');
   };
 
-  var makeToc = function() {
-    global.toc = $("#toc").tocify({
-      selectors: 'h1, h2',
-      extendPage: false,
-      theme: 'none',
-      smoothScroll: false,
-      showEffectSpeed: 0,
-      hideEffectSpeed: 180,
-      ignoreSelector: '.toc-ignore',
-      highlightOffset: 60,
-      scrollTo: -1,
-      scrollHistory: true,
-      hashGenerator: function (text, element) {
-        return element.prop('id');
+  function loadToc($toc, tocLinkSelector, tocListSelector, scrollOffset) {
+    var headerHeights = {};
+    var pageHeight = 0;
+    var windowHeight = 0;
+    var originalTitle = document.title;
+
+    var recacheHeights = function() {
+      headerHeights = {};
+      pageHeight = $(document).height();
+      windowHeight = $(window).height();
+
+      $toc.find(tocLinkSelector).each(function() {
+        var targetId = $(this).attr('href');
+        if (targetId[0] === "#") {
+          headerHeights[targetId] = $("#" + $.escapeSelector(targetId.substring(1))).offset().top;
+        }
+      });
+    };
+
+    var refreshToc = function() {
+      var currentTop = $(document).scrollTop() + scrollOffset;
+
+      if (currentTop + windowHeight >= pageHeight) {
+        // at bottom of page, so just select last header by making currentTop very large
+        // this fixes the problem where the last header won't ever show as active if its content
+        // is shorter than the window height
+        currentTop = pageHeight + 1000;
       }
-    }).data('toc-tocify');
 
-    $("#nav-button").click(function() {
-      $(".tocify-wrapper").toggleClass('open');
-      $("#nav-button").toggleClass('open');
-      return false;
-    });
+      var best = null;
+      for (var name in headerHeights) {
+        if ((headerHeights[name] < currentTop && headerHeights[name] > headerHeights[best]) || best === null) {
+          best = name;
+        }
+      }
 
-    $(".page-wrapper").click(closeToc);
-    $(".tocify-item").click(closeToc);
-  };
+      // Catch the initial load case
+      if (currentTop == scrollOffset && !loaded) {
+        best = window.location.hash;
+        loaded = true;
+      }
 
-  // Hack to make already open sections to start opened,
-  // instead of displaying an ugly animation
-  function animate() {
-    setTimeout(function() {
-      toc.setOption('showEffectSpeed', 180);
-    }, 50);
+      var $best = $toc.find("[href='" + best + "']").first();
+      if (!$best.hasClass("active")) {
+        // .active is applied to the ToC link we're currently on, and its parent <ul>s selected by tocListSelector
+        // .active-expanded is applied to the ToC links that are parents of this one
+        $toc.find(".active").removeClass("active");
+        $toc.find(".active-parent").removeClass("active-parent");
+        $best.addClass("active");
+        $best.parents(tocListSelector).addClass("active").siblings(tocLinkSelector).addClass('active-parent');
+        $best.siblings(tocListSelector).addClass("active");
+        $toc.find(tocListSelector).filter(":not(.active)").slideUp(150);
+        $toc.find(tocListSelector).filter(".active").slideDown(150);
+        if (window.history.replaceState) {
+          window.history.replaceState(null, "", best);
+        }
+        var thisTitle = $best.data("title");
+        if (thisTitle !== undefined && thisTitle.length > 0) {
+          document.title = thisTitle.replace(htmlPattern, "") + " – " + originalTitle;
+        } else {
+          document.title = originalTitle;
+        }
+      }
+    };
+
+    var makeToc = function() {
+      recacheHeights();
+      refreshToc();
+
+      $("#nav-button").click(function() {
+        $(".toc-wrapper").toggleClass('open');
+        $("#nav-button").toggleClass('open');
+        return false;
+      });
+      $(".page-wrapper").click(closeToc);
+      $(".toc-link").click(closeToc);
+
+      // reload immediately after scrolling on toc click
+      $toc.find(tocLinkSelector).click(function() {
+        setTimeout(function() {
+          refreshToc();
+        }, 0);
+      });
+
+      $(window).scroll(debounce(refreshToc, 200));
+      $(window).resize(debounce(recacheHeights, 200));
+    };
+
+    makeToc();
+
+    window.recacheHeights = recacheHeights;
+    window.refreshToc = refreshToc;
   }
 
-  $(function() {
-    makeToc();
-    animate();
-    setupLanguages($('body').data('languages'));
-    $('.content').imagesLoaded( function() {
-      global.toc.calculateHeights();
-    });
-  });
-})(window);
-
+  window.loadToc = loadToc;
+})();

samples/rest-notes-slate/slate/source/javascripts/lib/_energize.js

@@ -115,7 +115,7 @@
 
     /** 
      * Special logic for standalone web apps
-     * See https://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-in-new-window
+     * See http://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-in-new-window
      */
     if(standAlone) {
       window.location = target.getAttribute("href");

samples/rest-notes-slate/slate/source/javascripts/lib/_jquery.highlight.js

@@ -2,7 +2,7 @@
  * jQuery Highlight plugin
  *
  * Based on highlight v3 by Johann Burkard
- * https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
+ * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
  *
  * Code a little bit refactored and cleaned (in my humble opinion).
  * Most important changes:

samples/rest-notes-slate/slate/source/javascripts/lib/_jquery_ui.js

@@ -1,566 +0,0 @@
-/*! jQuery UI - v1.11.3 - 2015-02-12
- * https://jqueryui.com
- * Includes: widget.js
- * Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */
-
-(function( factory ) {
-  if ( typeof define === "function" && define.amd ) {
-
-    // AMD. Register as an anonymous module.
-    define([ "jquery" ], factory );
-  } else {
-
-    // Browser globals
-    factory( jQuery );
-  }
-}(function( $ ) {
-  /*!
-   * jQuery UI Widget 1.11.3
-   * https://jqueryui.com
-   *
-   * Copyright jQuery Foundation and other contributors
-   * Released under the MIT license.
-   * https://jquery.org/license
-   *
-   * https://api.jqueryui.com/jQuery.widget/
-   */
-
-
-  var widget_uuid = 0,
-      widget_slice = Array.prototype.slice;
-
-  $.cleanData = (function( orig ) {
-    return function( elems ) {
-      var events, elem, i;
-      for ( i = 0; (elem = elems[i]) != null; i++ ) {
-        try {
-
-          // Only trigger remove when necessary to save time
-          events = $._data( elem, "events" );
-          if ( events && events.remove ) {
-            $( elem ).triggerHandler( "remove" );
-          }
-
-          // https://bugs.jquery.com/ticket/8235
-        } catch ( e ) {}
-      }
-      orig( elems );
-    };
-  })( $.cleanData );
-
-  $.widget = function( name, base, prototype ) {
-    var fullName, existingConstructor, constructor, basePrototype,
-    // proxiedPrototype allows the provided prototype to remain unmodified
-    // so that it can be used as a mixin for multiple widgets (#8876)
-        proxiedPrototype = {},
-        namespace = name.split( "." )[ 0 ];
-
-    name = name.split( "." )[ 1 ];
-    fullName = namespace + "-" + name;
-
-    if ( !prototype ) {
-      prototype = base;
-      base = $.Widget;
-    }
-
-    // create selector for plugin
-    $.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
-      return !!$.data( elem, fullName );
-    };
-
-    $[ namespace ] = $[ namespace ] || {};
-    existingConstructor = $[ namespace ][ name ];
-    constructor = $[ namespace ][ name ] = function( options, element ) {
-      // allow instantiation without "new" keyword
-      if ( !this._createWidget ) {
-        return new constructor( options, element );
-      }
-
-      // allow instantiation without initializing for simple inheritance
-      // must use "new" keyword (the code above always passes args)
-      if ( arguments.length ) {
-        this._createWidget( options, element );
-      }
-    };
-    // extend with the existing constructor to carry over any static properties
-    $.extend( constructor, existingConstructor, {
-      version: prototype.version,
-      // copy the object used to create the prototype in case we need to
-      // redefine the widget later
-      _proto: $.extend( {}, prototype ),
-      // track widgets that inherit from this widget in case this widget is
-      // redefined after a widget inherits from it
-      _childConstructors: []
-    });
-
-    basePrototype = new base();
-    // we need to make the options hash a property directly on the new instance
-    // otherwise we'll modify the options hash on the prototype that we're
-    // inheriting from
-    basePrototype.options = $.widget.extend( {}, basePrototype.options );
-    $.each( prototype, function( prop, value ) {
-      if ( !$.isFunction( value ) ) {
-        proxiedPrototype[ prop ] = value;
-        return;
-      }
-      proxiedPrototype[ prop ] = (function() {
-        var _super = function() {
-              return base.prototype[ prop ].apply( this, arguments );
-            },
-            _superApply = function( args ) {
-              return base.prototype[ prop ].apply( this, args );
-            };
-        return function() {
-          var __super = this._super,
-              __superApply = this._superApply,
-              returnValue;
-
-          this._super = _super;
-          this._superApply = _superApply;
-
-          returnValue = value.apply( this, arguments );
-
-          this._super = __super;
-          this._superApply = __superApply;
-
-          return returnValue;
-        };
-      })();
-    });
-    constructor.prototype = $.widget.extend( basePrototype, {
-      // TODO: remove support for widgetEventPrefix
-      // always use the name + a colon as the prefix, e.g., draggable:start
-      // don't prefix for widgets that aren't DOM-based
-      widgetEventPrefix: existingConstructor ? (basePrototype.widgetEventPrefix || name) : name
-    }, proxiedPrototype, {
-      constructor: constructor,
-      namespace: namespace,
-      widgetName: name,
-      widgetFullName: fullName
-    });
-
-    // If this widget is being redefined then we need to find all widgets that
-    // are inheriting from it and redefine all of them so that they inherit from
-    // the new version of this widget. We're essentially trying to replace one
-    // level in the prototype chain.
-    if ( existingConstructor ) {
-      $.each( existingConstructor._childConstructors, function( i, child ) {
-        var childPrototype = child.prototype;
-
-        // redefine the child widget using the same prototype that was
-        // originally used, but inherit from the new version of the base
-        $.widget( childPrototype.namespace + "." + childPrototype.widgetName, constructor, child._proto );
-      });
-      // remove the list of existing child constructors from the old constructor
-      // so the old child constructors can be garbage collected
-      delete existingConstructor._childConstructors;
-    } else {
-      base._childConstructors.push( constructor );
-    }
-
-    $.widget.bridge( name, constructor );
-
-    return constructor;
-  };
-
-  $.widget.extend = function( target ) {
-    var input = widget_slice.call( arguments, 1 ),
-        inputIndex = 0,
-        inputLength = input.length,
-        key,
-        value;
-    for ( ; inputIndex < inputLength; inputIndex++ ) {
-      for ( key in input[ inputIndex ] ) {
-        value = input[ inputIndex ][ key ];
-        if ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) {
-          // Clone objects
-          if ( $.isPlainObject( value ) ) {
-            target[ key ] = $.isPlainObject( target[ key ] ) ?
-                $.widget.extend( {}, target[ key ], value ) :
-              // Don't extend strings, arrays, etc. with objects
-                $.widget.extend( {}, value );
-            // Copy everything else by reference
-          } else {
-            target[ key ] = value;
-          }
-        }
-      }
-    }
-    return target;
-  };
-
-  $.widget.bridge = function( name, object ) {
-    var fullName = object.prototype.widgetFullName || name;
-    $.fn[ name ] = function( options ) {
-      var isMethodCall = typeof options === "string",
-          args = widget_slice.call( arguments, 1 ),
-          returnValue = this;
-
-      if ( isMethodCall ) {
-        this.each(function() {
-          var methodValue,
-              instance = $.data( this, fullName );
-          if ( options === "instance" ) {
-            returnValue = instance;
-            return false;
-          }
-          if ( !instance ) {
-            return $.error( "cannot call methods on " + name + " prior to initialization; " +
-            "attempted to call method '" + options + "'" );
-          }
-          if ( !$.isFunction( instance[options] ) || options.charAt( 0 ) === "_" ) {
-            return $.error( "no such method '" + options + "' for " + name + " widget instance" );
-          }
-          methodValue = instance[ options ].apply( instance, args );
-          if ( methodValue !== instance && methodValue !== undefined ) {
-            returnValue = methodValue && methodValue.jquery ?
-                returnValue.pushStack( methodValue.get() ) :
-                methodValue;
-            return false;
-          }
-        });
-      } else {
-
-        // Allow multiple hashes to be passed on init
-        if ( args.length ) {
-          options = $.widget.extend.apply( null, [ options ].concat(args) );
-        }
-
-        this.each(function() {
-          var instance = $.data( this, fullName );
-          if ( instance ) {
-            instance.option( options || {} );
-            if ( instance._init ) {
-              instance._init();
-            }
-          } else {
-            $.data( this, fullName, new object( options, this ) );
-          }
-        });
-      }
-
-      return returnValue;
-    };
-  };
-
-  $.Widget = function( /* options, element */ ) {};
-  $.Widget._childConstructors = [];
-
-  $.Widget.prototype = {
-    widgetName: "widget",
-    widgetEventPrefix: "",
-    defaultElement: "<div>",
-    options: {
-      disabled: false,
-
-      // callbacks
-      create: null
-    },
-    _createWidget: function( options, element ) {
-      element = $( element || this.defaultElement || this )[ 0 ];
-      this.element = $( element );
-      this.uuid = widget_uuid++;
-      this.eventNamespace = "." + this.widgetName + this.uuid;
-
-      this.bindings = $();
-      this.hoverable = $();
-      this.focusable = $();
-
-      if ( element !== this ) {
-        $.data( element, this.widgetFullName, this );
-        this._on( true, this.element, {
-          remove: function( event ) {
-            if ( event.target === element ) {
-              this.destroy();
-            }
-          }
-        });
-        this.document = $( element.style ?
-          // element within the document
-            element.ownerDocument :
-          // element is window or document
-        element.document || element );
-        this.window = $( this.document[0].defaultView || this.document[0].parentWindow );
-      }
-
-      this.options = $.widget.extend( {},
-          this.options,
-          this._getCreateOptions(),
-          options );
-
-      this._create();
-      this._trigger( "create", null, this._getCreateEventData() );
-      this._init();
-    },
-    _getCreateOptions: $.noop,
-    _getCreateEventData: $.noop,
-    _create: $.noop,
-    _init: $.noop,
-
-    destroy: function() {
-      this._destroy();
-      // we can probably remove the unbind calls in 2.0
-      // all event bindings should go through this._on()
-      this.element
-          .unbind( this.eventNamespace )
-          .removeData( this.widgetFullName )
-        // support: jquery <1.6.3
-        // https://bugs.jquery.com/ticket/9413
-          .removeData( $.camelCase( this.widgetFullName ) );
-      this.widget()
-          .unbind( this.eventNamespace )
-          .removeAttr( "aria-disabled" )
-          .removeClass(
-          this.widgetFullName + "-disabled " +
-          "ui-state-disabled" );
-
-      // clean up events and states
-      this.bindings.unbind( this.eventNamespace );
-      this.hoverable.removeClass( "ui-state-hover" );
-      this.focusable.removeClass( "ui-state-focus" );
-    },
-    _destroy: $.noop,
-
-    widget: function() {
-      return this.element;
-    },
-
-    option: function( key, value ) {
-      var options = key,
-          parts,
-          curOption,
-          i;
-
-      if ( arguments.length === 0 ) {
-        // don't return a reference to the internal hash
-        return $.widget.extend( {}, this.options );
-      }
-
-      if ( typeof key === "string" ) {
-        // handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
-        options = {};
-        parts = key.split( "." );
-        key = parts.shift();
-        if ( parts.length ) {
-          curOption = options[ key ] = $.widget.extend( {}, this.options[ key ] );
-          for ( i = 0; i < parts.length - 1; i++ ) {
-            curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {};
-            curOption = curOption[ parts[ i ] ];
-          }
-          key = parts.pop();
-          if ( arguments.length === 1 ) {
-            return curOption[ key ] === undefined ? null : curOption[ key ];
-          }
-          curOption[ key ] = value;
-        } else {
-          if ( arguments.length === 1 ) {
-            return this.options[ key ] === undefined ? null : this.options[ key ];
-          }
-          options[ key ] = value;
-        }
-      }
-
-      this._setOptions( options );
-
-      return this;
-    },
-    _setOptions: function( options ) {
-      var key;
-
-      for ( key in options ) {
-        this._setOption( key, options[ key ] );
-      }
-
-      return this;
-    },
-    _setOption: function( key, value ) {
-      this.options[ key ] = value;
-
-      if ( key === "disabled" ) {
-        this.widget()
-            .toggleClass( this.widgetFullName + "-disabled", !!value );
-
-        // If the widget is becoming disabled, then nothing is interactive
-        if ( value ) {
-          this.hoverable.removeClass( "ui-state-hover" );
-          this.focusable.removeClass( "ui-state-focus" );
-        }
-      }
-
-      return this;
-    },
-
-    enable: function() {
-      return this._setOptions({ disabled: false });
-    },
-    disable: function() {
-      return this._setOptions({ disabled: true });
-    },
-
-    _on: function( suppressDisabledCheck, element, handlers ) {
-      var delegateElement,
-          instance = this;
-
-      // no suppressDisabledCheck flag, shuffle arguments
-      if ( typeof suppressDisabledCheck !== "boolean" ) {
-        handlers = element;
-        element = suppressDisabledCheck;
-        suppressDisabledCheck = false;
-      }
-
-      // no element argument, shuffle and use this.element
-      if ( !handlers ) {
-        handlers = element;
-        element = this.element;
-        delegateElement = this.widget();
-      } else {
-        element = delegateElement = $( element );
-        this.bindings = this.bindings.add( element );
-      }
-
-      $.each( handlers, function( event, handler ) {
-        function handlerProxy() {
-          // allow widgets to customize the disabled handling
-          // - disabled as an array instead of boolean
-          // - disabled class as method for disabling individual parts
-          if ( !suppressDisabledCheck &&
-              ( instance.options.disabled === true ||
-              $( this ).hasClass( "ui-state-disabled" ) ) ) {
-            return;
-          }
-          return ( typeof handler === "string" ? instance[ handler ] : handler )
-              .apply( instance, arguments );
-        }
-
-        // copy the guid so direct unbinding works
-        if ( typeof handler !== "string" ) {
-          handlerProxy.guid = handler.guid =
-              handler.guid || handlerProxy.guid || $.guid++;
-        }
-
-        var match = event.match( /^([\w:-]*)\s*(.*)$/ ),
-            eventName = match[1] + instance.eventNamespace,
-            selector = match[2];
-        if ( selector ) {
-          delegateElement.delegate( selector, eventName, handlerProxy );
-        } else {
-          element.bind( eventName, handlerProxy );
-        }
-      });
-    },
-
-    _off: function( element, eventName ) {
-      eventName = (eventName || "").split( " " ).join( this.eventNamespace + " " ) +
-      this.eventNamespace;
-      element.unbind( eventName ).undelegate( eventName );
-
-      // Clear the stack to avoid memory leaks (#10056)
-      this.bindings = $( this.bindings.not( element ).get() );
-      this.focusable = $( this.focusable.not( element ).get() );
-      this.hoverable = $( this.hoverable.not( element ).get() );
-    },
-
-    _delay: function( handler, delay ) {
-      function handlerProxy() {
-        return ( typeof handler === "string" ? instance[ handler ] : handler )
-            .apply( instance, arguments );
-      }
-      var instance = this;
-      return setTimeout( handlerProxy, delay || 0 );
-    },
-
-    _hoverable: function( element ) {
-      this.hoverable = this.hoverable.add( element );
-      this._on( element, {
-        mouseenter: function( event ) {
-          $( event.currentTarget ).addClass( "ui-state-hover" );
-        },
-        mouseleave: function( event ) {
-          $( event.currentTarget ).removeClass( "ui-state-hover" );
-        }
-      });
-    },
-
-    _focusable: function( element ) {
-      this.focusable = this.focusable.add( element );
-      this._on( element, {
-        focusin: function( event ) {
-          $( event.currentTarget ).addClass( "ui-state-focus" );
-        },
-        focusout: function( event ) {
-          $( event.currentTarget ).removeClass( "ui-state-focus" );
-        }
-      });
-    },
-
-    _trigger: function( type, event, data ) {
-      var prop, orig,
-          callback = this.options[ type ];
-
-      data = data || {};
-      event = $.Event( event );
-      event.type = ( type === this.widgetEventPrefix ?
-          type :
-      this.widgetEventPrefix + type ).toLowerCase();
-      // the original event may come from any element
-      // so we need to reset the target on the new event
-      event.target = this.element[ 0 ];
-
-      // copy original event properties over to the new event
-      orig = event.originalEvent;
-      if ( orig ) {
-        for ( prop in orig ) {
-          if ( !( prop in event ) ) {
-            event[ prop ] = orig[ prop ];
-          }
-        }
-      }
-
-      this.element.trigger( event, data );
-      return !( $.isFunction( callback ) &&
-      callback.apply( this.element[0], [ event ].concat( data ) ) === false ||
-      event.isDefaultPrevented() );
-    }
-  };
-
-  $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
-    $.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
-      if ( typeof options === "string" ) {
-        options = { effect: options };
-      }
-      var hasOptions,
-          effectName = !options ?
-              method :
-              options === true || typeof options === "number" ?
-                  defaultEffect :
-              options.effect || defaultEffect;
-      options = options || {};
-      if ( typeof options === "number" ) {
-        options = { duration: options };
-      }
-      hasOptions = !$.isEmptyObject( options );
-      options.complete = callback;
-      if ( options.delay ) {
-        element.delay( options.delay );
-      }
-      if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {
-        element[ method ]( options );
-      } else if ( effectName !== method && element[ effectName ] ) {
-        element[ effectName ]( options.duration, options.easing, callback );
-      } else {
-        element.queue(function( next ) {
-          $( this )[ method ]();
-          if ( callback ) {
-            callback.call( element[ 0 ] );
-          }
-          next();
-        });
-      }
-    };
-  });
-
-  var widget = $.widget;
-
-
-
-}));

samples/rest-notes-slate/slate/source/layouts/layout.erb

@@ -5,7 +5,7 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may
 not use this file except in compliance with the License. You may obtain
 a copy of the License at
 
-  https://www.apache.org/licenses/LICENSE-2.0
+  http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
@@ -14,6 +14,15 @@ License for the specific language governing permissions and limitations
 under the License.
 %>
 <% language_tabs = current_page.data.language_tabs || [] %>
+<% page_content = yield %>
+<%
+  if current_page.data.includes
+    current_page.data.includes.each do |include|
+      page_content += partial("includes/#{include}")
+    end
+  end
+%>
+
 <!doctype html>
 <html>
   <head>
@@ -22,8 +31,14 @@ under the License.
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <title><%= current_page.data.title || "API Documentation" %></title>
 
-    <style>
-      <%= Rouge::Themes::MonokaiSublime.render(:scope => '.highlight') %>
+    <style media="screen">
+      <%= Rouge::Themes::MonokaiSublimeSlate.render(:scope => '.highlight') %>
+    </style>
+    <style media="print">
+      * {
+        transition:none!important;
+      }
+      <%= Rouge::Themes::Base16::Solarized.render(:scope => '.highlight') %>
     </style>
     <%= stylesheet_link_tag :screen, media: :screen %>
     <%= stylesheet_link_tag :print, media: :print %>
@@ -32,6 +47,12 @@ under the License.
     <% else %>
       <%= javascript_include_tag  "all_nosearch" %>
     <% end %>
+
+    <% if current_page.data.code_clipboard %>
+    <script>
+      $(function() { setupCodeCopy(); });
+    </script>
+    <% end %>
   </head>
 
   <body class="<%= page_classes %>" data-languages="<%=h language_tabs.map{ |lang| lang.is_a?(Hash) ? lang.keys.first : lang }.to_json %>">
@@ -41,8 +62,8 @@ under the License.
         <%= image_tag('navbar.png') %>
       </span>
     </a>
-    <div class="tocify-wrapper">
-      <%= image_tag "logo.png" %>
+    <div class="toc-wrapper">
+      <%= image_tag "logo.png", class: 'logo' %>
       <% if language_tabs.any? %>
         <div class="lang-selector">
           <% language_tabs.each do |lang| %>
@@ -60,8 +81,22 @@ under the License.
         </div>
         <ul class="search-results"></ul>
       <% end %>
-      <div id="toc">
-      </div>
+      <ul id="toc" class="toc-list-h1">
+        <% toc_data(page_content).each do |h1| %>
+          <li>
+            <a href="#<%= h1[:id] %>" class="toc-h1 toc-link" data-title="<%= h1[:title] %>"><%= h1[:content] %></a>
+            <% if h1[:children].length > 0 %>
+              <ul class="toc-list-h2">
+                <% h1[:children].each do |h2| %>
+                  <li>
+                    <a href="#<%= h2[:id] %>" class="toc-h2 toc-link" data-title="<%= h2[:title] %>"><%= h2[:content] %></a>
+                  </li>
+                <% end %>
+              </ul>
+            <% end %>
+          </li>
+        <% end %>
+      </ul>
       <% if current_page.data.toc_footers %>
         <ul class="toc-footer">
           <% current_page.data.toc_footers.each do |footer| %>
@@ -73,10 +108,7 @@ under the License.
     <div class="page-wrapper">
       <div class="dark-box"></div>
       <div class="content">
-        <%= yield %>
-        <% current_page.data.includes && current_page.data.includes.each do |include| %>
-          <%= partial "includes/#{include}" %>
-        <% end %>
+        <%= page_content %>
       </div>
       <div class="dark-box">
         <% if language_tabs.any? %>

samples/rest-notes-slate/slate/source/stylesheets/_rtl.scss

@@ -0,0 +1,140 @@
+////////////////////////////////////////////////////////////////////////////////
+// RTL Styles Variables
+////////////////////////////////////////////////////////////////////////////////
+
+$default: auto;
+
+////////////////////////////////////////////////////////////////////////////////
+// TABLE OF CONTENTS
+////////////////////////////////////////////////////////////////////////////////
+
+#toc>ul>li>a>span {
+    float: left;
+}
+
+.toc-wrapper {
+    transition: right 0.3s ease-in-out !important;
+    left: $default !important;
+    #{right}: 0;
+}
+
+.toc-h2 {
+    padding-#{right}: $nav-padding + $nav-indent;
+}
+
+#nav-button {
+    #{right}: 0;
+    transition: right 0.3s ease-in-out;
+    &.open {
+        right: $nav-width
+    }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// PAGE LAYOUT AND CODE SAMPLE BACKGROUND
+////////////////////////////////////////////////////////////////////////////////
+.page-wrapper {
+    margin-#{left}: $default !important;
+    margin-#{right}: $nav-width;
+    .dark-box {
+        #{right}: $default;
+        #{left}: 0;
+    }
+}
+
+.lang-selector {
+    width: $default !important;
+    a {
+        float: right;
+    }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// CODE SAMPLE STYLES
+////////////////////////////////////////////////////////////////////////////////
+.content {
+    &>h1,
+    &>h2,
+    &>h3,
+    &>h4,
+    &>h5,
+    &>h6,
+    &>p,
+    &>table,
+    &>ul,
+    &>ol,
+    &>aside,
+    &>dl {
+        margin-#{left}: $examples-width;
+        margin-#{right}: $default !important;
+    }
+    &>ul,
+    &>ol {
+        padding-#{right}: $main-padding + 15px;
+    }
+    table {
+        th,
+        td {
+            text-align: right;
+        }
+    }
+    dd {
+        margin-#{right}: 15px;
+    }
+    aside {
+        aside:before {
+            padding-#{left}: 0.5em;
+        }
+        .search-highlight {
+            background: linear-gradient(to top right, #F7E633 0%, #F1D32F 100%);
+        }
+    }
+    pre,
+    blockquote {
+        float: left !important;
+        clear: left !important;
+    }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// TYPOGRAPHY
+////////////////////////////////////////////////////////////////////////////////
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+aside {
+    text-align: right;
+    direction: rtl;
+}
+
+.toc-wrapper {
+    text-align: right;
+    direction: rtl;
+    font-weight: 100 !important;
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// RESPONSIVE DESIGN
+////////////////////////////////////////////////////////////////////////////////
+@media (max-width: $tablet-width) {
+    .toc-wrapper {
+        #{right}: -$nav-width;
+        &.open {
+            #{right}: 0;
+        }
+    }
+    .page-wrapper {
+        margin-#{right}: 0;
+    }
+}
+
+@media (max-width: $phone-width) {
+    %left-col {
+        margin-#{left}: 0;
+    }
+}

samples/rest-notes-slate/slate/source/stylesheets/_variables.scss

@@ -5,7 +5,7 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may
 not use this file except in compliance with the License. You may obtain
 a copy of the License at
 
-  https://www.apache.org/licenses/LICENSE-2.0
+  http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
@@ -23,17 +23,18 @@ under the License.
 
 // BACKGROUND COLORS
 ////////////////////
-$nav-bg: #393939 !default;
-$examples-bg: #393939 !default;
-$code-bg: #292929 !default;
-$code-annotation-bg: #1c1c1c !default;
-$nav-subitem-bg: #262626 !default;
-$nav-active-bg: #2467af !default;
+$nav-bg: #2E3336 !default;
+$examples-bg: #2E3336 !default;
+$code-bg: #1E2224 !default;
+$code-annotation-bg: #191D1F !default;
+$nav-subitem-bg: #1E2224 !default;
+$nav-active-bg: #0F75D4 !default;
+$nav-active-parent-bg: #1E2224 !default; // parent links of the current section
 $lang-select-border: #000 !default;
-$lang-select-bg: #222 !default;
+$lang-select-bg: #1E2224 !default;
 $lang-select-active-bg: $examples-bg !default; // feel free to change this to blue or something
 $lang-select-pressed-bg: #111 !default; // color of language tab bg when mouse is pressed
-$main-bg: #eaf2f6 !default;
+$main-bg: #F3F7F9 !default;
 $aside-notice-bg: #8fbcd4 !default;
 $aside-warning-bg: #c97a7e !default;
 $aside-success-bg: #6ac174 !default;
@@ -45,6 +46,7 @@ $search-notice-bg: #c97a7e !default;
 $main-text: #333 !default; // main content text color
 $nav-text: #fff !default;
 $nav-active-text: #fff !default;
+$nav-active-parent-text: #fff !default; // parent links of the current section
 $lang-select-text: #fff !default; // color of unselected language tab text
 $lang-select-active-text: #fff !default; // color of selected language tab text
 $lang-select-pressed-text: #fff !default; // color of language tab text when mouse is pressed
@@ -54,7 +56,7 @@ $lang-select-pressed-text: #fff !default; // color of language tab text when mou
 ////////////////////
 $nav-width: 230px !default; // width of the navbar
 $examples-width: 50% !default; // portion of the screen taken up by code examples
-$logo-margin: 20px !default; // margin between nav items and logo, ignored if search is active
+$logo-margin: 0px !default; // margin below logo
 $main-padding: 28px !default; // padding to left and right of content & examples
 $nav-padding: 15px !default; // padding to left and right of navbar
 $nav-v-padding: 10px !default; // padding used vertically around search boxes and results
@@ -68,8 +70,8 @@ $phone-width: $tablet-width - $nav-width !default; // min width before reverting
 // FONTS
 ////////////////////
 %default-font {
-  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
-  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 14px;
 }
 
 %header-font {
@@ -86,11 +88,7 @@ $phone-width: $tablet-width - $nav-width !default; // min width before reverting
 
 // OTHER
 ////////////////////
-$nav-active-shadow: #000 !default;
 $nav-footer-border-color: #666 !default;
-$nav-embossed-border-top: #000 !default;
-$nav-embossed-border-bottom: #939393 !default;
-$main-embossed-text-shadow: 0px 1px 0px #fff !default;
 $search-box-border-color: #666 !default;
 
 

samples/rest-notes-slate/slate/source/stylesheets/print.css.scss

@@ -10,7 +10,7 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may
 not use this file except in compliance with the License. You may obtain
 a copy of the License at
 
-  https://www.apache.org/licenses/LICENSE-2.0
+  http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
@@ -144,4 +144,10 @@ body {
   aside.success:before {
     @extend %icon-ok-sign;
   }
-}
+}
+
+.copy-clipboard {
+  @media print {
+    display: none
+  }
+}

samples/rest-notes-slate/slate/source/stylesheets/screen.css.scss

@@ -2,6 +2,7 @@
 @import 'normalize';
 @import 'variables';
 @import 'icon-font';
+// @import 'rtl'; // uncomment to switch to RTL format
 
 /*
 Copyright 2008-2013 Concur Technologies, Inc.
@@ -10,7 +11,7 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may
 not use this file except in compliance with the License. You may obtain
 a copy of the License at
 
-  https://www.apache.org/licenses/LICENSE-2.0
+  http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
@@ -46,16 +47,7 @@ html, body {
   width: 20px;
 }
 
-@mixin embossed-bg {
-  background:
-    linear-gradient(to bottom, rgba(#000, 0.2), rgba(#000, 0) 8px),
-    linear-gradient(to top, rgba(#000, 0.2), rgba(#000, 0) 8px),
-    linear-gradient(to bottom, rgba($nav-embossed-border-top, 1), rgba($nav-embossed-border-top, 0) 1.5px),
-    linear-gradient(to top, rgba($nav-embossed-border-bottom, 1), rgba($nav-embossed-border-bottom, 0) 1.5px),
-    $nav-subitem-bg;
-}
-
-.tocify-wrapper {
+.toc-wrapper {
   transition: left 0.3s ease-in-out;
 
   overflow-y: auto;
@@ -80,9 +72,10 @@ html, body {
   }
 
   // This is the logo at the top of the ToC
-  &>img {
+  .logo {
     display: block;
     max-width: 100%;
+    margin-bottom: $logo-margin;
   }
 
   &>.search {
@@ -95,7 +88,7 @@ html, body {
       padding: 6px 0 6px 20px;
       box-sizing: border-box;
       margin: $nav-v-padding $nav-padding;
-      width: $nav-width - 30;
+      width: $nav-width - ($nav-padding*2);
       outline: none;
       color: $nav-text;
       border-radius: 0; /* ios has a default border radius */
@@ -110,10 +103,6 @@ html, body {
     }
   }
 
-  img+.tocify, .lang-selector+.tocify {
-    margin-top: $logo-margin;
-  }
-
   .search-results {
     margin-top: 0;
     box-sizing: border-box;
@@ -123,13 +112,12 @@ html, body {
     transition-property: height, margin;
     transition-duration: 180ms;
     transition-timing-function: ease-in-out;
+    background: $nav-subitem-bg;
     &.visible {
       height: 30%;
       margin-bottom: 1em;
     }
 
-    @include embossed-bg;
-
     li {
       margin: 1em $nav-padding;
       line-height: 1;
@@ -146,14 +134,6 @@ html, body {
   }
 
 
-  .tocify-item>a, .toc-footer li {
-    padding: 0 $nav-padding 0 $nav-padding;
-    display: block;
-    overflow-x: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
   // The Table of Contents is composed of multiple nested
   // unordered lists.  These styles remove the default
   // styling of an unordered list because it is ugly.
@@ -168,32 +148,30 @@ html, body {
     color: $nav-text;
     transition-property: background;
     transition-timing-function: linear;
-    transition-duration: 230ms;
+    transition-duration: 200ms;
   }
 
   // This is the currently selected ToC entry
-  .tocify-focus {
-    box-shadow: 0px 1px 0px $nav-active-shadow;
+  .toc-link.active {
     background-color: $nav-active-bg;
     color: $nav-active-text;
   }
 
-  // Subheaders are the submenus that slide open
-  // in the table of contents.
-  .tocify-subheader {
-    display: none; // tocify will override this when needed
+  // this is parent links of the currently selected ToC entry
+  .toc-link.active-parent {
+    background-color: $nav-active-parent-bg;
+    color: $nav-active-parent-text;
+  }
+
+  .toc-list-h2 {
+    display: none;
     background-color: $nav-subitem-bg;
     font-weight: 500;
-    .tocify-item>a {
-      padding-left: $nav-padding + $nav-indent;
-      font-size: 12px;
-    }
+  }
 
-    // for embossed look:
-    @include embossed-bg;
-    &>li:last-child {
-      box-shadow: none; // otherwise it'll overflow out of the subheader
-    }
+  .toc-h2 {
+    padding-left: $nav-padding + $nav-indent;
+    font-size: 12px;
   }
 
   .toc-footer {
@@ -216,7 +194,19 @@ html, body {
       text-decoration: none;
     }
   }
+}
 
+.toc-link, .toc-footer li {
+  padding: 0 $nav-padding 0 $nav-padding;
+  display: block;
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-decoration: none;
+  color: $nav-text;
+  transition-property: background;
+  transition-timing-function: linear;
+  transition-duration: 130ms;
 }
 
 // button to show navigation on mobile devices
@@ -288,12 +278,13 @@ html, body {
 }
 
 .lang-selector {
+  display: flex;
   background-color: $lang-select-bg;
   width: 100%;
   font-weight: bold;
+  overflow-x: auto;
   a {
-    display: block;
-    float:left;
+    display: inline;
     color: $lang-select-text;
     text-decoration: none;
     padding: 0 10px;
@@ -324,6 +315,8 @@ html, body {
 // This is all the stuff with the light background in the left half of the page
 
 .content {
+  // fixes webkit rendering bug for some: see #538
+  -webkit-transform: translateZ(0);
   // to place content above the dark box
   position: relative;
   z-index: 30;
@@ -339,7 +332,6 @@ html, body {
     padding: 0 $main-padding;
     box-sizing: border-box;
     display: block;
-    text-shadow: $main-embossed-text-shadow;
 
     @extend %left-col;
   }
@@ -355,14 +347,14 @@ html, body {
 
   h1 {
     @extend %header-font;
-    font-size: 30px;
+    font-size: 25px;
     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;
-    background-image: linear-gradient(to bottom, #fff, #f9f9f9);
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    background-color: #fdfdfd;
   }
 
   h1:first-child, div:first-child + h1 {
@@ -372,13 +364,13 @@ html, body {
 
   h2 {
     @extend %header-font;
-    font-size: 20px;
+    font-size: 19px;
     margin-top: 4em;
     margin-bottom: 0;
     border-top: 1px solid #ccc;
     padding-top: 1.2em;
     padding-bottom: 1.2em;
-    background-image: linear-gradient(to bottom, rgba(#fff, 0.4), rgba(#fff, 0));
+    background-image: linear-gradient(to bottom, rgba(#fff, 0.2), rgba(#fff, 0));
   }
 
   // h2s right after h1s should bump right up
@@ -412,6 +404,9 @@ html, body {
       text-align: left;
       vertical-align: top;
       line-height: 1.6;
+      code {
+        white-space: nowrap;
+      }
     }
 
     th {
@@ -470,7 +465,6 @@ html, body {
   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;
@@ -478,12 +472,10 @@ html, body {
 
     &.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%);
     }
   }
 
@@ -507,10 +499,9 @@ html, body {
 
   .search-highlight {
     padding: 2px;
-    margin: -2px;
+    margin: -3px;
     border-radius: 4px;
     border: 1px solid #F7E633;
-    text-shadow: 1px 1px 0 #666;
     background: linear-gradient(to top left, #F7E633 0%, #F1D32F 100%);
   }
 }
@@ -521,11 +512,14 @@ html, body {
 // This is all the stuff that appears in the right half of the page
 
 .content {
+  &>div.highlight {
+    clear:none;
+  }
+
   pre, blockquote {
     background-color: $code-bg;
     color: #fff;
 
-    padding: 2em $main-padding;
     margin: 0;
     width: $examples-width;
 
@@ -533,7 +527,6 @@ html, body {
     clear:right;
 
     box-sizing: border-box;
-    text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
 
     @extend %right-col;
 
@@ -548,16 +541,16 @@ html, body {
 
   pre {
     @extend %code-font;
+    padding-top: 2em;
+    padding-bottom: 2em;
+    padding: 2em $main-padding;
   }
 
   blockquote {
     &>p {
       background-color: $code-annotation-bg;
-      border-radius: 5px;
-      padding: $code-annotation-padding;
-      color: #ccc;
-      border-top: 1px solid #000;
-      border-bottom: 1px solid #404040;
+      padding: $code-annotation-padding 2em;
+      color: #eee;
     }
   }
 }
@@ -569,7 +562,7 @@ html, body {
 // There are also a couple styles disperesed
 
 @media (max-width: $tablet-width) {
-  .tocify-wrapper {
+  .toc-wrapper {
     left: -$nav-width;
 
     &.open {
@@ -585,7 +578,7 @@ html, body {
     display: block;
   }
 
-  .tocify-wrapper .tocify-item > a {
+  .toc-link {
     padding-top: 0.3em;
     padding-bottom: 0.3em;
   }
@@ -600,7 +593,7 @@ html, body {
     margin-right: 0;
   }
 
-  .tocify-wrapper .lang-selector {
+  .toc-wrapper .lang-selector {
     display: block;
   }
 
@@ -625,3 +618,16 @@ html, body {
 .highlight, .highlight .w {
   background-color: $code-bg;
 }
+
+.copy-clipboard {
+  float: right;
+  fill: #9DAAB6;
+  cursor: pointer;
+  opacity: 0.4;
+  height: 18px;
+  width: 18px;
+}
+
+.copy-clipboard:hover {
+  opacity: 0.8;
+}