Prepare 0.2.1 release

CHANGELOG

@@ -1,3 +1,18 @@
+mkdocs-material-0.2.1 (2016-03-12)
+
+  * Fixed #10: Invisible header after closing search bar with ESC key
+  * Fixed #13: Table cells don't wrap
+  * Fixed empty list in table of contents when no headline is defined
+  * Corrected wrong path for static asset monitoring in Gulpfile.js
+  * Set up tracking of site search for Google Analytics
+
+mkdocs-material-0.2.0 (2016-02-24)
+
+  * Fixed #6: Include multiple color palettes via mkdocs.yml
+  * Fixed #7: Better colors for links inside admonition notes and warnings
+  * Fixed #9: Text for prev/next footer navigation should be customizable
+  * Refactored templates (replaced if/else with modifiers where possible)
+
 mkdocs-material-0.1.3 (2016-02-21)
 
   * Fixed #3: Ordered lists within an unordered list have ::before content

Gulpfile.js

@@ -254,7 +254,7 @@ gulp.task('assets:watch', function() {
 
   /* Copy static assets */
   gulp.watch([
-    'assets/assets/{fonts,images}/*'
+    'src/assets/{fonts,images}/*'
   ], ['assets:static']);
 
   /* Minify views */

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "mkdocs-material",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "description": "A material design theme for MkDocs",
   "homepage": "http://squidfunk.github.io/mkdocs-material/",
   "authors": [

docs/getting-started.md

@@ -4,11 +4,11 @@
 
 ### Installing MkDocs
 
-In order to install [MkDocs][], Python and `pip` – the Python package manager –
-need to be up and running. Assuming you are a developer and have a basic
-understanding of how things work and what StackOverflow is, we won't provide
-guidelines on setting those up. You can verify if you're already good to go
-with the following commands:
+Before installing [MkDocs][], you need to make sure you have Python and `pip`
+– the Python package manager – up and running. Assuming you are a developer and
+have a basic understanding of how things work and what StackOverflow is, we
+won't provide guidelines on setting those up. You can verify if you're already
+good to go with the following commands:
 
 ``` sh
 python --version
@@ -103,6 +103,33 @@ extra:
   logo: 'images/logo.png'
 ```
 
+### Changing the color palette
+
+Material defines a default hue for every primary and accent color on Google's
+material design [color palette][]. This makes it very easy to change the
+overall look of the theme. Just set the variables `extra.palette.primary` and
+`extra.palette.accent` to one of the colors defined in the palette:
+
+``` yaml
+extra:
+  palette:
+    primary: 'indigo'
+    accent: 'light blue'
+```
+
+Color names can be written upper- or lowercase but must match the names of the
+material design [color palette][]. Valid values are: _red_, _pink_, _purple_,
+_deep purple_, _indigo_, _blue_, _light blue_, _cyan_, _teal_, _green_, _light
+green_, _lime_, _yellow_, _amber_, _orange_, _deep orange_, _brown_, _grey_ and
+_blue grey_. The last three colors can only be used as a primary color.
+
+![Material Screenshot](images/colors.png)
+
+If the color is set via this configuration, an additional CSS file called
+`palettes.css` is included that defines the color palettes. If you want to
+keep things lean, clone the repository and recompile the theme with your
+custom colors set. See [this article](customization.md) for more information.
+
 ### Changing the font family
 
 Material uses the [Ubuntu font family][] by default, specifically the regular
@@ -117,15 +144,28 @@ extra:
     code: 'Roboto Mono'
 ```
 
-The text font will be loaded in font-weights 400 and 700, the monospaced font
-in regular weight. If you want to load fonts from other destinations or don't
-want to use the Google Fonts loading magic, just set `extra.font` to `'none'`:
+The text font will be loaded in font-weights 400 and **700**, the monospaced
+font in regular weight. If you want to load fonts from other destinations or
+don't want to use the Google Fonts loading magic, just set `extra.font` to
+`'none'`:
 
 ``` yaml
 extra:
   font: 'none'
 ```
 
+### Localization
+
+The **Previous** and **Next** labels in the footer can easily be changed by
+defining the variables `extra.i18n.prev` and `extra.i18n.next`:
+
+``` yaml
+extra:
+  i18n:
+    prev: 'Previous'
+    next: 'Next'
+```
+
 ### Adding a GitHub and Twitter account
 
 If you have a GitHub and/or Twitter account, you can add links to your
@@ -139,11 +179,23 @@ extra:
     twitter: 'my-twitter-handle'
 ```
 
+### Google Analytics integration
+
+Material makes it easy to integrate site tracking with Google Analytics.
+Besides basic tracking, clicks on all outgoing links can be tracked, clicks on
+the download and star button, as well as how site search is used. Tracking can
+be activated in your project's `mkdocs.yml`:
+
+``` yaml
+google_analytics:
+  - 'UA-XXXXXXXX-X'
+  - 'auto'
+```
+
 ### More advanced customization
 
-If you want to change the colors or general appearance of the Material theme,
-see [this article](customization.md) for more information on advanced
-customization.
+If you want to change the general appearance of the Material theme, see
+[this article](customization.md) for more information on advanced customization.
 
 ## Extensions
 
@@ -242,13 +294,24 @@ theme: 'material'
 extra:
   version: '0.1.0'
   logo: 'images/logo.png'
+  palette:
+    primary: 'indigo'
+    accent: 'light blue'
   font:
     text: 'Roboto'
     code: 'Roboto Mono'
+  i18n:
+    prev: 'Previous'
+    next: 'Next'
   author:
     github: 'my-github-handle'
     twitter: 'my-twitter-handle'
 
+# Google Analytics
+google_analytics:
+  - 'UA-XXXXXXXX-X'
+  - 'auto'
+
 # Extensions
 markdown_extensions:
   - codehilite(css_class=code)
@@ -258,6 +321,7 @@ markdown_extensions:
 ```
 
 [MkDocs]: http://www.mkdocs.org
+[color palette]: http://www.materialui.co/colors
 [Ubuntu font family]: http://font.ubuntu.com
 [Google Fonts]: https://www.google.com/fonts
 [Roboto font]: https://www.google.com/fonts/specimen/Roboto

docs/index.md

@@ -14,12 +14,26 @@ CSS that weighs less than 30kb (minified, gzipped and excluding Google Fonts
 and Analytics). Yet, it is highly customizable and degrades gracefully in older
 browsers.
 
+## Quick start
+
+Install with `pip`:
+
+``` sh
+pip install mkdocs-material
+```
+
+Add the following line to your `mkdocs.yml`:
+
+``` yaml
+theme: 'material'
+```
+
 ## Features
 
 - Beautiful, readable and very user-friendly design based on Google's material
   design guidelines, packed in a full responsive template with a well-defined
-  color palette, great typography, as well as a beautiful search interface and
-  footer.
+  and [easily customizable color palette][], great typography, as well as a
+  beautiful search interface and footer.
 
 - Well-tested and optimized Javascript and CSS including a cross-browser
   fixed/sticky header, a drawer that even works without Javascript using
@@ -27,14 +41,14 @@ browsers.
   the screen is too small and well-defined print styles.
 
 - Extra configuration options like a [project logo][], links to the authors
-  [GitHub and Twitter accounts][] and display of the amount of stars the
-  project has on GitHub.
+  [GitHub and Twitter accounts][], display of the amount of stars the
+  project has on GitHub and [Google Analytics integration][].
 
 - Easily [extendable and customizable][] due to a well-designed asset pipeline
   built on-top of [Gulp][] with `npm` and `bower` and modular and abstracted
   style definitions built with [SASS][].
 
-- Web application capability on iOS - when the page is saved to the homescreen,
+- Web application capability on iOS – when the page is saved to the homescreen,
   it behaves and looks like a native application.
 
 See the [getting started guide](getting-started.md) for instructions how to get
@@ -44,7 +58,9 @@ it up and running.
 [material design]: https://www.google.com/design/spec/material-design
 [checkbox hack]: http://tutorialzine.com/2015/08/quick-tip-css-only-dropdowns-with-the-checkbox-hack/
 [project logo]: getting-started.md#adding-a-logo
+[easily customizable color palette]: getting-started.md#changing-the-color-palette
 [GitHub and Twitter accounts]: getting-started.md#adding-a-github-and-twitter-account
+[Google Analytics integration]: getting-started.md#google-analytics-integration
 [extendable and customizable]: customization.md
 [Gulp]: http://gulpjs.com
 [SASS]: http://sass-lang.com

material/base.html

@@ -34,7 +34,7 @@
     {% if config.extra.logo %}
       <link rel="apple-touch-icon" href="{{ base_url }}/{{ config.extra.logo }}">
     {% endif %}
-    {% set icon = icon | default('assets/images/favicon-e565ddfa3b.ico') %}
+    {% set icon = icon | default("assets/images/favicon-e565ddfa3b.ico") %}
     <link rel="shortcut icon" type="image/x-icon" href="{{ base_url }}/{{ icon }}">
     <link rel="icon" type="image/x-icon" href="{{ base_url }}/{{ icon }}">
     <style>
@@ -53,16 +53,13 @@
       	font-style: normal;
       }
     </style>
-    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-eaf860cca2.css">
-    {% if config.extra.font != 'none' %}
-      {% set text = 'Ubuntu' %}
-      {% if config.extra.font and config.extra.font.text %}
-        {% set text = config.extra.font.text %}
-      {% endif %}
-      {% set code = 'Ubuntu Mono' %}
-      {% if config.extra.font and config.extra.font.code %}
-        {% set code = config.extra.font.code %}
-      {% endif %}
+    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-20d5debb47.css">
+    {% if config.extra.palette %}
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/palettes-05ab2406df.css">
+    {% endif %}
+    {% if config.extra.font != "none" %}
+      {% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
+      {% set code = config.extra.get("font", {}).code | default("Ubuntu Mono") %}
       {% set font = text + ':400,700|' + code | replace(' ', '+') %}
       <link rel="stylesheet" href="//fonts.googleapis.com/css?family={{ font }}">
       <style>
@@ -80,10 +77,13 @@
     <script src="{{ base_url }}/assets/javascripts/modernizr-4ab42b99fd.js"></script>
     {% block extrahead %}{% endblock %}
   </head>
-  <body>
-    {% if repo_name == 'GitHub' and repo_url %}
-      {% set repo_id = repo_url | replace('https://github.com/', '') %}
-      {% if repo_id[-1:] == '/' %}
+  {% set palette = config.extra.get("palette", {}) %}
+  {% set primary = palette.primary | replace(' ', '-') | lower %}
+  {% set accent  = palette.accent  | replace(' ', '-') | lower %}
+  <body class="{% if primary %}palette-primary-{{ primary }}{% endif %} {% if accent %}palette-accent-{{ accent }}{% endif %}">
+    {% if repo_name == "GitHub" and repo_url %}
+      {% set repo_id = repo_url | replace("https://github.com/", "") %}
+      {% if repo_id[-1:] == "/" %}
         {% set repo_id = repo_id[:-1] %}
       {% endif %}
     {% endif %}
@@ -104,11 +104,7 @@
       <article class="article">
         <div class="wrapper">
           {% if not h1 %}
-            {% if page_title %}
-              <h1>{{ page_title }}</h1>
-            {% else %}
-              <h1>{{ site_name }}</h1>
-            {% endif %}
+            <h1>{{ page_title | default(site_name, true)}}</h1>
           {% endif %}
           {{ content }}
           <aside class="copyright" role="note">
@@ -128,7 +124,8 @@
               {% include "footer.html" %}
             </footer>
           {% endblock %}
-        </div></article>
+        </div>
+      </article>
       <div class="results" role="status" aria-live="polite">
         <div class="scrollable">
           <div class="wrapper">
@@ -142,7 +139,7 @@
       var base_url = '{{ base_url }}';
       var repo_id  = '{{ repo_id }}';
     </script>
-    <script src="{{ base_url }}/assets/javascripts/application-a10a824a49.js"></script>
+    <script src="{{ base_url }}/assets/javascripts/application-997097ee0c.js"></script>
     {% for path in extra_javascript %}
       <script src="{{ path }}"></script>
     {% endfor %}
@@ -162,13 +159,21 @@
         /* Track outbound links */
         var buttons = document.querySelectorAll('a');
         Array.prototype.map.call(buttons, function(item) {
-          if (item.host != window.location.host) {
+          if (item.host != document.location.host) {
             item.addEventListener('click', function() {
               var action = item.getAttribute('data-action') || 'follow';
               ga('send', 'event', 'outbound', action, item.href);
             });
           }
         });
+        /* Register handler to log search on blur */
+        var query = document.querySelector('.query');
+        query.addEventListener('blur', function() {
+          if (this.value) {
+            var path = document.location.pathname;
+            ga('send', 'pageview', path + '?q=' + this.value);
+          }
+        });
       </script>
     {% endif %}
   </body>

material/drawer.html

@@ -1,5 +1,5 @@
 <nav aria-label="Navigation">
-  {% set home = repo_url | default('/', true) %}
+  {% set home = repo_url | default("/", true) %}
   <a href="{{ home }}" class="project">
     <div class="banner">
       {% if config.extra.logo %}
@@ -18,17 +18,17 @@
   </a>
   <div class="scrollable">
     <div class="wrapper">
-      {% if repo_name == 'GitHub' and repo_url %}
+      {% if repo_name == "GitHub" and repo_url %}
         <ul class="repo">
           <li class="repo-download">
-            {% set version = config.extra.version | default('master') %}
-            <a href="{{ repo_url }}/archive/{{ version }}.zip" target="_blank" title="Download {{ site_name }} from GitHub" data-action="download">
+            {% set version = config.extra.version | default("master") %}
+            <a href="{{ repo_url }}/archive/{{ version }}.zip" target="_blank" title="Download" data-action="download">
               <i class="icon icon-download"></i> Download
             </a>
           </li>
           <li class="repo-stars">
-            <a href="{{ repo_url }}" target="_blank" title="Star {{ site_name }} on GitHub" data-action="star">
-              <i class="icon icon-star"></i> Star
+            <a href="{{ repo_url }}/stargazers" target="_blank" title="Stargazers" data-action="star">
+              <i class="icon icon-star"></i> Stars
               <span class="count">&ndash;</span>
             </a>
           </li>

material/footer.html

@@ -3,7 +3,9 @@
     <div class="previous">
       {% if previous_page %}
         <a href="{{ previous_page.url }}" title="{{ previous_page.title }}">
-          <span class="direction">Previous</span>
+          <span class="direction">
+            {{ config.extra.get("i18n", {}).prev | default("Previous") }}
+          </span>
           <div class="page">
             <div class="button button-previous" role="button" aria-label="Previous">
               <i class="icon icon-back"></i>
@@ -20,7 +22,9 @@
     <div class="next">
       {% if next_page %}
         <a href="{{ next_page.url }}" title="{{ next_page.title }}">
-          <span class="direction">Next</span>
+          <span class="direction">
+            {{ config.extra.get("i18n", {}).next | default("Next") }}
+          </span>
           <div class="page">
             <div class="stretch">
               <div class="title">

material/header.html

@@ -19,21 +19,19 @@
             {% endfor %}
           </span>
         {% endif %}
-        {% if page_title %}
-          {{ page_title }}
-        {% else %}
-          {{ site_name }}
-        {% endif %}
+        {{ page_title | default(site_name, true) }}
       </div>
     </div>
-    {% if config.extra.author and config.extra.author.twitter %}
+    {% if config.extra.get("author", {}).twitter %}
+      {% set author = config.extra.author.twitter %}
       <div class="button button-twitter" role="button" aria-label="Twitter">
-        <a href="https://twitter.com/{{ config.extra.author.twitter }}" title="@{{ config.extra.author.twitter }} on Twitter" target="_blank" class="toggle-button icon icon-twitter"></a>
+        <a href="https://twitter.com/{{ author }}" title="@{{ author }} on Twitter" target="_blank" class="toggle-button icon icon-twitter"></a>
       </div>
     {% endif %}
-    {% if config.extra.author and config.extra.author.github %}
+    {% if config.extra.get("author", {}).github %}
+      {% set author = config.extra.author.github %}
       <div class="button button-github" role="button" aria-label="GitHub">
-        <a href="https://github.com/{{ config.extra.author.github }}" title="@{{ config.extra.author.github }} on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
+        <a href="https://github.com/{{ author }}" title="@{{ author }} on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
       </div>
     {% endif %}
     <div class="button button-search" role="button" aria-label="Search">

material/manifest.json

@@ -1,6 +1,7 @@
 {
   "assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
-  "assets/javascripts/application.js": "assets/javascripts/application-a10a824a49.js",
+  "assets/javascripts/application.js": "assets/javascripts/application-997097ee0c.js",
   "assets/javascripts/modernizr.js": "assets/javascripts/modernizr-4ab42b99fd.js",
-  "assets/stylesheets/application.css": "assets/stylesheets/application-eaf860cca2.css"
+  "assets/stylesheets/application.css": "assets/stylesheets/application-20d5debb47.css",
+  "assets/stylesheets/palettes.css": "assets/stylesheets/palettes-05ab2406df.css"
 }

material/nav.html

@@ -3,7 +3,7 @@
     <span class="section">{{ nav_item.title }}</span>
     <ul>
       {% for nav_item in nav_item.children %}
-        {% include 'nav.html' %}
+        {% include "nav.html" %}
       {% endfor %}
     </ul>
   </li>
@@ -14,10 +14,9 @@
     </a>
     {% if nav_item == current_page %}
       {% if h1 %}
-        {% set toc_item = toc | first %}
-        {% set toc = toc_item.children %}
+        {% set toc = (toc | first).children %}
       {% endif %}
-      {% if toc %}
+      {% if toc and (toc | first) %}
         <ul>
           {% for toc_item in toc %}
             <li class="anchor">

mkdocs.yml

@@ -36,11 +36,8 @@ theme_dir: material
 
 # Options
 extra:
-  version: 0.1.3
+  version: 0.2.1
   logo: images/logo.png
-  font:
-    text: Ubuntu
-    code: Ubuntu Mono
   author:
     github: squidfunk
     twitter: squidfunk
@@ -50,7 +47,7 @@ markdown_extensions:
   - codehilite(css_class=code)
   - admonition
   - toc:
-      permalink: ¶
+      permalink: '#'
 
 # Page tree
 pages:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mkdocs-material",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "description": "A material design theme for MkDocs",
   "homepage": "http://squidfunk.github.io/mkdocs-material/",
   "authors": [

setup.py

@@ -23,7 +23,7 @@ from setuptools import setup, find_packages
 # Package description
 setup(
     name = 'mkdocs-material',
-    version = '0.1.3',
+    version = '0.2.1',
     url = 'http://squidfunk.github.io/mkdocs-material/',
     license = 'MIT',
     description = 'A material design theme for MkDocs',

src/assets/javascripts/application.js

@@ -253,7 +253,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
             /* Close search and jump to anchor when on same page */
             var parts = link.href.split('#');
-            if (parts[0] == window.location.href.split('#')[0]) {
+            if (parts[0] == document.location.href.split('#')[0]) {
               link.addEventListener('click', function(e) {
                 document.body.classList.remove('toggle-search');
                 document.body.classList.remove('locked');
@@ -373,6 +373,9 @@ document.addEventListener('DOMContentLoaded', function() {
   window.addEventListener('keyup', function(e) {
     var code = e.keyCode || e.which;
     if (code == 27) {
+      query.blur();
+
+      /* Exit locked state */
       document.body.classList.remove('toggle-search');
       document.body.classList.remove('locked');
       toggle.checked = false;

src/assets/stylesheets/modules/article/_appearance.scss

@@ -57,11 +57,17 @@
     border-bottom: 1px solid $black-lightest;
   }
 
+  /*
+   * Underline links
+   */
+  a {
+    border-bottom: 1px dotted;
+  }
+
   /*
    * Hovered and focused links
    */
-  a:hover,
-  a:focus {
+  a:hover, a:focus {
     color: $accent;
   }
 
@@ -70,6 +76,7 @@
    */
   .headerlink {
     color: $black-lighter;
+    border: none;
   }
 
   /*
@@ -117,6 +124,13 @@
 .footer {
   background: $primary;
   color: $white;
+
+  /*
+   * Remove bottom border on links
+   */
+  a {
+    border: none;
+  }
 }
 
 /*
@@ -166,4 +180,11 @@
   &.warning {
     background: $red-400;
   }
+
+  /*
+   * Headlines, chapters, links and inline code
+   */
+  a, a:hover {
+    color: $white;
+  }
 }

src/assets/stylesheets/modules/article/_layout.scss

@@ -242,7 +242,7 @@
       padding: 12px 16px;
       font-size: 12px;
       text-align: left;
-      white-space: nowrap;
+      vertical-align: top;
     }
 
     /*
@@ -250,7 +250,7 @@
      */
     td {
       padding: 12px 16px;
-      white-space: nowrap;
+      vertical-align: top;
     }
   }
 

src/assets/stylesheets/modules/drawer/_layout.scss

@@ -74,14 +74,14 @@
   }
 
   /*
-   * Nested links
+   * Nested links and anchors
    */
   .toc li ul {
     margin-left: 12px;
   }
 
   /*
-   *
+   * Nested anchors
    */
   .current + ul {
     margin-bottom: 9px;

src/assets/stylesheets/palettes.scss

@@ -0,0 +1,221 @@
+/*
+ * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Dependencies
+ * ------------------------------------------------------------------------- */
+
+@import "bourbon";
+@import "quantum-colors";
+@import "quantum-shadows";
+
+/* ----------------------------------------------------------------------------
+ * Application
+ * ------------------------------------------------------------------------- */
+
+@import "palette";
+
+@import "mixins/break";
+
+/* ----------------------------------------------------------------------------
+ * Palette
+ * ------------------------------------------------------------------------- */
+
+/*
+ * Build primary palette
+ */
+@each $name, $color in (
+  'red':         $red-400,
+  'pink':        $pink-500,
+  'purple':      $purple-400,
+  'deep-purple': $deep-purple-400,
+  'indigo':      $indigo-500,
+  'blue':        $blue-500,
+  'light-blue':  $light-blue-500,
+  'cyan':        $cyan-500,
+  'teal':        $teal-500,
+  'green':       $green-500,
+  'light-green': $light-green-600,
+  'lime':        $lime-600,
+  'yellow':      $yellow-800,
+  'amber':       $amber-600,
+  'orange':      $orange-600,
+  'deep-orange': $deep-orange-400,
+  'brown':       $brown-500,
+  'grey':        $grey-600,
+  'blue-grey':   $blue-grey-600
+) {
+
+  /*
+   * Device specific background hacks related to rubberband
+   */
+  .palette-primary-#{$name} {
+
+    /* Hack [Chrome, Opera]: Set background color in Chrome and Opera */
+    @supports (-webkit-appearance: none) {
+      background: $color;
+    }
+
+    /*
+     * Application header and footer
+     */
+    .header, .footer {
+      background: $color;
+    }
+
+    /*
+     * Drawer container
+     */
+    .drawer {
+
+      /*
+       * Color links
+       */
+      .toc a {
+
+        /*
+         * Current active element
+         */
+        &.current {
+          color: $color;
+        }
+
+        /*
+         * Hovered link
+         */
+        &:hover, &:focus {
+          color: $color;
+        }
+      }
+
+      /*
+       * Color anchors menu
+       */
+      .anchor a {
+        border-left: 2px solid $color;
+      }
+    }
+
+    /*
+     * Project information
+     */
+    .project {
+
+      /* [tablet landscape-]: Set background color */
+      @include break-to-device(tablet landscape) {
+        background: $color;
+      }
+    }
+
+    /*
+     * Article
+     */
+    .article {
+
+      /*
+       * Differing top and bottom rubberband backgrounds in iOS web application
+       */
+      .ios.standalone & {
+        background: linear-gradient(
+          to bottom, $white 50%, $color 50%);
+      }
+
+      /*
+       * Headlines, chapters, links and inline code
+       */
+      h1, h2, a, code {
+        color: $color;
+      }
+
+      /*
+       * Light permalinks
+       */
+      .headerlink {
+        color: $black-lighter;
+      }
+
+      /*
+       * Data table headings
+       */
+      table th {
+        background: mix($color, $white, 75%);
+      }
+    }
+
+    /*
+     * Search meta data
+     */
+    .results .meta {
+      background: $color;
+    }
+  }
+}
+
+/*
+ * Build accent palette
+ */
+@each $name, $color in (
+  'red':         $red-a400,
+  'pink':        $pink-a400,
+  'purple':      $purple-a200,
+  'deep-purple': $deep-purple-a200,
+  'indigo':      $indigo-a200,
+  'blue':        $blue-a200,
+  'light-blue':  $light-blue-a700,
+  'cyan':        $cyan-a700,
+  'teal':        $teal-a700,
+  'green':       $green-a700,
+  'light-green': $light-green-a700,
+  'lime':        $lime-a700,
+  'yellow':      $yellow-a700,
+  'amber':       $amber-a700,
+  'orange':      $orange-a400,
+  'deep-orange': $deep-orange-a200
+) {
+
+  /*
+   * Device specific background hacks related to rubberband
+   */
+  .palette-accent-#{$name} {
+
+    /*
+     * Article
+     */
+    .article {
+
+      /*
+       * Hovered and focused links
+       */
+      a:hover,
+      a:focus {
+        color: $color;
+      }
+    }
+
+    /*
+     * Repository buttons
+     */
+    .repo a {
+      background: $color;
+    }
+  }
+}

src/base.html

@@ -58,7 +58,7 @@
     {% endif %}
 
     <!-- Favicon -->
-    {% set icon = icon | default('assets/images/favicon.ico') %}
+    {% set icon = icon | default("assets/images/favicon.ico") %}
     <link rel="shortcut icon" type="image/x-icon"
       href="{{ base_url }}/{{ icon }}" />
     <link rel="icon" type="image/x-icon"
@@ -86,16 +86,16 @@
     <link rel="stylesheet" type="text/css"
       href="{{ base_url }}/assets/stylesheets/application.css" />
 
+    <!-- Extra palettes -->
+    {% if config.extra.palette %}
+      <link rel="stylesheet" type="text/css"
+        href="{{ base_url }}/assets/stylesheets/palettes.css" />
+    {% endif %}
+
     <!-- Configure webfonts -->
-    {% if config.extra.font != 'none' %}
-      {% set text = 'Ubuntu' %}
-      {% if config.extra.font and config.extra.font.text %}
-        {% set text = config.extra.font.text %}
-      {% endif %}
-      {% set code = 'Ubuntu Mono' %}
-      {% if config.extra.font and config.extra.font.code %}
-        {% set code = config.extra.font.code %}
-      {% endif %}
+    {% if config.extra.font != "none" %}
+      {% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
+      {% set code = config.extra.get("font", {}).code | default("Ubuntu Mono") %}
       {% set font = text + ':400,700|' + code | replace(' ', '+') %}
       <link rel="stylesheet" type="text/css"
         href="//fonts.googleapis.com/css?family={{ font }}" />
@@ -120,16 +120,24 @@
     <!-- Custom header -->
     {% block extrahead %}{% endblock %}
   </head>
-  <body>
+
+  <!-- Define palette -->
+  {% set palette = config.extra.get("palette", {}) %}
+  {% set primary = palette.primary | replace(' ', '-') | lower %}
+  {% set accent  = palette.accent  | replace(' ', '-') | lower %}
+  <body class="
+    {% if primary %}palette-primary-{{ primary }}{% endif %}
+    {% if accent %}palette-accent-{{ accent }}{% endif %}
+  ">
 
     <!--
       Sadly the jinja template engine is not very flexible - it doesn't support
       regular expressions out-of-the-box. Since there might be a slash at the
       end of the repository name, we just do a string comparison and kill it.
     -->
-    {% if repo_name == 'GitHub' and repo_url %}
-      {% set repo_id = repo_url | replace('https://github.com/', '') %}
-      {% if repo_id[-1:] == '/' %}
+    {% if repo_name == "GitHub" and repo_url %}
+      {% set repo_id = repo_url | replace("https://github.com/", "") %}
+      {% if repo_id[-1:] == "/" %}
         {% set repo_id = repo_id[:-1] %}
       {% endif %}
     {% endif %}
@@ -173,11 +181,7 @@
 
           <!-- Headline -->
           {% if not h1 %}
-            {% if page_title %}
-              <h1>{{ page_title }}</h1>
-            {% else %}
-              <h1>{{ site_name }}</h1>
-            {% endif %}
+            <h1>{{ page_title | default(site_name, true)}}</h1>
           {% endif %}
 
           <!-- Article content -->
@@ -204,8 +208,8 @@
               {% include "footer.html" %}
             </footer>
           {% endblock %}
-        </article>
-      </div>
+        </div>
+      </article>
 
       <!-- Search results -->
       <div class="results" role="status" aria-live="polite">
@@ -247,13 +251,22 @@
         /* Track outbound links */
         var buttons = document.querySelectorAll('a');
         Array.prototype.map.call(buttons, function(item) {
-          if (item.host != window.location.host) {
+          if (item.host != document.location.host) {
             item.addEventListener('click', function() {
               var action = item.getAttribute('data-action') || 'follow';
               ga('send', 'event', 'outbound', action, item.href);
             });
           }
         });
+
+        /* Register handler to log search on blur */
+        var query = document.querySelector('.query');
+        query.addEventListener('blur', function() {
+          if (this.value) {
+            var path = document.location.pathname;
+            ga('send', 'pageview', path + '?q=' + this.value);
+          }
+        });
       </script>
     {% endif %}
   </body>

src/drawer.html

@@ -1,6 +1,6 @@
 <!-- Navigation -->
 <nav aria-label="Navigation">
-  {% set home = repo_url | default('/', true) %}
+  {% set home = repo_url | default("/", true) %}
 
   <!-- Project information -->
   <a href="{{ home }}" class="project">
@@ -33,21 +33,19 @@
     <div class="wrapper">
 
       <!-- Repository -->
-      {% if repo_name == 'GitHub' and repo_url %}
+      {% if repo_name == "GitHub" and repo_url %}
         <ul class="repo">
           <li class="repo-download">
-            {% set version = config.extra.version | default('master') %}
+            {% set version = config.extra.version | default("master") %}
             <a href="{{ repo_url }}/archive/{{ version }}.zip" target="_blank"
-              title="Download {{ site_name }} from GitHub"
-              data-action="download">
+              title="Download" data-action="download">
               <i class="icon icon-download"></i> Download
             </a>
           </li>
           <li class="repo-stars">
-            <a href="{{ repo_url }}" target="_blank"
-              title="Star {{ site_name }} on GitHub"
-              data-action="star">
-              <i class="icon icon-star"></i> Star
+            <a href="{{ repo_url }}/stargazers" target="_blank"
+              title="Stargazers" data-action="star">
+              <i class="icon icon-star"></i> Stars
               <span class="count">&ndash;</span>
             </a>
           </li>

src/footer.html

@@ -6,7 +6,9 @@
     <div class="previous">
       {% if previous_page %}
         <a href="{{ previous_page.url }}" title="{{ previous_page.title }}">
-          <span class="direction">Previous</span>
+          <span class="direction">
+            {{ config.extra.get("i18n", {}).prev | default("Previous") }}
+          </span>
           <div class="page">
             <div class="button button-previous"
               role="button" aria-label="Previous">
@@ -26,7 +28,9 @@
     <div class="next">
       {% if next_page %}
         <a href="{{ next_page.url }}" title="{{ next_page.title }}">
-          <span class="direction">Next</span>
+          <span class="direction">
+            {{ config.extra.get("i18n", {}).next | default("Next") }}
+          </span>
           <div class="page">
             <div class="stretch">
               <div class="title">

src/header.html

@@ -26,28 +26,26 @@
             {% endfor %}
           </span>
         {% endif %}
-        {% if page_title %}
-          {{ page_title }}
-        {% else %}
-          {{ site_name }}
-        {% endif %}
+        {{ page_title | default(site_name, true) }}
       </div>
     </div>
 
     <!-- Twitter -->
-    {% if config.extra.author and config.extra.author.twitter %}
+    {% if config.extra.get("author", {}).twitter %}
+      {% set author = config.extra.author.twitter %}
       <div class="button button-twitter" role="button" aria-label="Twitter">
-        <a href="https://twitter.com/{{ config.extra.author.twitter }}"
-          title="@{{ config.extra.author.twitter }} on Twitter" target="_blank"
+        <a href="https://twitter.com/{{ author }}"
+          title="@{{ author }} on Twitter" target="_blank"
           class="toggle-button icon icon-twitter"></a>
       </div>
     {% endif %}
 
     <!-- GitHub -->
-    {% if config.extra.author and config.extra.author.github %}
+    {% if config.extra.get("author", {}).github %}
+      {% set author = config.extra.author.github %}
       <div class="button button-github" role="button" aria-label="GitHub">
-        <a href="https://github.com/{{ config.extra.author.github }}"
-          title="@{{ config.extra.author.github }} on GitHub" target="_blank"
+        <a href="https://github.com/{{ author }}"
+          title="@{{ author }} on GitHub" target="_blank"
           class="toggle-button icon icon-github"></a>
       </div>
     {% endif %}

src/nav.html

@@ -6,7 +6,7 @@
 
       <!-- Render pages of section -->
       {% for nav_item in nav_item.children %}
-        {% include 'nav.html' %}
+        {% include "nav.html" %}
       {% endfor %}
     </ul>
   </li>
@@ -29,12 +29,11 @@
         with the children of the anchor.
       -->
       {% if h1 %}
-        {% set toc_item = toc | first %}
-        {% set toc = toc_item.children %}
+        {% set toc = (toc | first).children %}
       {% endif %}
 
       <!-- Render anchors of active page -->
-      {% if toc %}
+      {% if toc and (toc | first) %}
         <ul>
           {% for toc_item in toc %}