Introduced SassLint for code style checks

.sass-lint.yml

@@ -0,0 +1,119 @@
+# 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.
+
+options:
+  merge-default-rules: true
+  formatter: stylish
+
+rules:
+  attribute-quotes: 2
+  bem-depth: 2
+  border-zero: 2
+  brace-style: 2
+  class-name-format:
+    - 2
+    - convention: hyphenatedbem
+  clean-import-paths: 2
+  empty-args: 2
+  empty-line-between-blocks: 2
+  extends-before-declarations: 2
+  extends-before-mixins: 2
+  final-newline: 2
+  function-name-format:
+    - 2
+    - allow-leading-underscore: false
+  force-attribute-nesting: 0
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+  hex-length:
+    - 2
+    - style: long
+  hex-notation:
+    - 2
+    - style: uppercase
+  id-name-format:
+    - 2
+  indentation: 0
+  leading-zero:
+    - 2
+    - include: true
+  mixin-name-format:
+    - 2
+    - convention: hyphenatedbem
+    - allow-leading-underscore: false
+  mixins-before-declarations:
+    - 2
+    - exclude:
+      - break-at
+      - break-at-orientation
+      - break-at-ratio
+      - break-at-device
+      - break-from-device
+      - break-to-device
+  nesting-depth: 0
+  no-color-keywords: 2
+  no-color-literals: 2
+  no-css-comments: 2
+  no-debug: 2
+  no-duplicate-properties: 0
+  no-empty-rulesets: 2
+  no-important: 2
+  no-invalid-hex: 2
+  no-mergeable-selectors: 0
+  no-misspelled-properties: 0
+  no-qualifying-elements:
+    - 2
+    - allow-element-with-attribute: true
+  no-trailing-zero: 0
+  no-transition-all: 2
+  no-url-protocols: 2
+  no-vendor-prefixes: 0
+  one-declaration-per-line: 2
+  placeholder-name-format:
+    - 2
+    - convention: hyphenatedbem
+  property-sort-order:
+    - 2
+    - order: smacss
+  property-units:
+    - 2
+    - global: [rem, em, s]
+  pseudo-element: 2
+  quotes:
+    - 2
+    - style: double
+  shorthand-values: 2
+  single-line-per-selector: 0
+  space-after-bang: 2
+  space-after-colon: 2
+  space-after-comma: 2
+  space-around-operator: 2
+  space-before-bang: 2
+  space-before-brace: 2
+  space-before-colon: 2
+  space-between-parens: 2
+  trailing-semicolon: 2
+  url-quotes: 2
+  variable-for-property: 2
+  variable-name-format:
+    - 2
+    - convention: hyphenatedbem
+    - allow-leading-underscore: false
+  zero-unit: 2

CHANGELOG

@@ -10,7 +10,7 @@ mkdocs-material-1.0.0-rc.1 (2016-XX-XX)
   * Introduced Webpack for more sophisticated JavaScript bundling
   * Introduced ESLint and SassLint for code style checks
   * Introduced more accurate Material Design colors and shadows
-  * Introduced a Modular Scale for harmonic font sizing
+  * Introduced Modular Scales for harmonic font sizing
   * Rewrite of CSS using the BEM methodology
   * Rewrite of JavaScript using ES6 and Babel as a transpiler
   * Rewrite of Admonition, Permalinks and Codehilite integration
@@ -18,8 +18,8 @@ mkdocs-material-1.0.0-rc.1 (2016-XX-XX)
   * Removed Bower as a dependency in favor of npm
   * Removed custom icon build in favor of the Material Design iconset
   * Removed _blank targets on links due to vulnerability: http://bit.ly/1Mk2Rtw
-  * Added support for Metadata and Footnotes Markdown extensions
   * Added build and watch scripts in package.json
+  * Added support for Metadata and Footnotes Markdown extensions
   * Added support for collapsible sections in navigation
   * Added support for separate table of contents
   * Added support for better accessibility through REM-based layout

docs/extensions/codehilite.md

@@ -0,0 +1,705 @@
+# Codehilite
+
+## Usage
+
+This extensions adds code highlighting to fenced code blocks. It might not be
+the best code highlighter, but it works without JavaScript and on the server:
+
+``` yaml
+markdown_extensions:
+  - codehilite
+```
+
+## Supported languages <small>excerpt</small>
+
+Codehilite uses [Pygments][], a generic syntax highlighter with support for
+over [300 languages][], so the following list of examples is just an excerpt.
+
+### Bash
+
+``` bash
+#!/bin/sh
+
+for OPT in "$@"
+do
+  case "$OPT" in
+    '-f' )  canonicalize=1 ;;
+    '-n' )  switchlf="-n" ;;
+  esac
+done
+
+# readlink -f
+function __readlink_f {
+  target="$1"
+  while test -n "$target"; do
+    filepath="$target"
+    cd `dirname "$filepath"`
+    target=`readlink "$filepath"`
+  done
+  /bin/echo $switchlf `pwd -P`/`basename "$filepath"`
+}
+
+if [ ! "$canonicalize" ]; then
+  readlink $switchlf "$@"
+else
+  for file in "$@"
+  do
+    case "$file" in
+      -* )  ;;
+      *  )  __readlink_f "$file" ;;
+    esac
+    done
+fi
+
+exit $?
+```
+
+### C
+
+``` c
+extern size_t
+pb_varint_scan(const uint8_t data[], size_t left) {
+  assert(data && left);
+  left = left > 10 ? 10 : left;
+
+#ifdef __SSE2__
+
+  /* Mapping: remaining bytes ==> bitmask */
+  static const int mask_map[] = {
+    0x0000, 0x0001, 0x0003, 0x0007,
+    0x000F, 0x001F, 0x003F, 0x007F,
+    0x00FF, 0x01FF, 0x03FF
+  };
+
+  /* Load buffer into 128-bit integer and create high-bit mask */
+  __m128i temp = _mm_loadu_si128((const __m128i *)data);
+  __m128i high = _mm_set1_epi8(0x80);
+
+  /* Intersect and extract mask with high-bits set */
+  int mask = _mm_movemask_epi8(_mm_and_si128(temp, high));
+  mask = (mask & mask_map[left]) ^ mask_map[left];
+
+  /* Count trailing zeroes */
+  return mask ? __builtin_ctz(mask) + 1 : 0;
+
+#else
+
+  /* Linear scan */
+  size_t size = 0;
+  while (data[size++] & 0x80)
+    if (!--left)
+      return 0;
+  return size;
+
+#endif /* __SSE2__ */
+
+}
+```
+
+### C++
+
+``` cpp
+Extension::
+Extension(const Descriptor *descriptor, const Descriptor *scope) :
+    descriptor_(descriptor),
+    scope_(scope) {
+
+  /* Extract full name for signature */
+  variables_["signature"] = descriptor_->full_name();
+
+  /* Prepare message symbol */
+  variables_["message"] = StringReplace(
+    variables_["signature"], ".", "_", true);
+  LowerString(&(variables_["message"]));
+
+  /* Suffix scope to identifiers, if given */
+  string suffix ("");
+  if (scope_) {
+    suffix = scope_->full_name();
+
+    /* Check if the base and extension types are in the same package */
+    if (!scope_->file()->package().compare(descriptor_->file()->package()))
+      suffix = StripPrefixString(suffix,
+        scope_->file()->package() + ".");
+
+    /* Append to signature */
+    variables_["signature"] += ".[" + suffix +"]";
+    suffix = "_" + suffix;
+  }
+
+  /* Prepare extension symbol */
+  variables_["extension"] = StringReplace(
+    suffix, ".", "_", true);
+  LowerString(&(variables_["extension"]));
+}
+```
+
+### C&#35;
+
+``` csharp
+public static void Send(
+    Socket socket, byte[] buffer, int offset, int size, int timeout) {
+  int startTickCount = Environment.TickCount;
+  int sent = 0;
+  do {
+    if (Environment.TickCount > startTickCount + timeout)
+      throw new Exception("Timeout.");
+    try {
+      sent += socket.Send(buffer, offset + sent,
+        size - sent, SocketFlags.None);
+    } catch (SocketException ex) {
+      if (ex.SocketErrorCode == SocketError.WouldBlock ||
+          ex.SocketErrorCode == SocketError.IOPending ||
+          ex.SocketErrorCode == SocketError.NoBufferSpaceAvailable) {
+        /* Socket buffer is probably full, wait and try again */
+        Thread.Sleep(30);
+      } else {
+        throw ex;
+      }
+    }
+  } while (sent < size);
+}
+```
+
+### Clojure
+
+``` clojure
+(clojure-version)
+
+(defn partition-when
+  [f]
+  (fn [rf]
+    (let [a (java.util.ArrayList.)
+          fval (volatile! false)]
+      (fn
+        ([] (rf))
+        ([result]
+           (let [result (if (.isEmpty a)
+                          result
+                          (let [v (vec (.toArray a))]
+                            ;; Clear first
+                            (.clear a)
+                            (unreduced (rf result v))))]
+             (rf result)))
+        ([result input]
+            (if-not (and (f input)  @fval)
+               (do
+                 (vreset! fval true)
+                 (.add a input)
+                 result)
+               (let [v (vec (.toArray a))]
+                 (.clear a)
+                 (let [ret (rf result v)]
+                   (when-not (reduced? ret)
+                     (.add a input))
+                   ret))))))))
+
+
+(into [] (partition-when
+          #(.startsWith % ">>"))
+          ["1d" "33" ">> 1" ">> 2" "22" ">> 3"])
+```
+
+### Diff
+
+``` diff
+Index: grunt.js
+===================================================================
+--- grunt.js	(revision 31200)
++++ grunt.js	(working copy)
+@@ -12,6 +12,7 @@
+
+ module.exports = function (grunt) {
+
++  console.log('hello world');
+   // Project configuration.
+   grunt.initConfig({
+     lint: {
+@@ -19,10 +20,6 @@
+         'packages/services.web/{!(test)/**/,}*.js',
+         'packages/error/**/*.js'
+       ],
+-      scripts: [
+-        'grunt.js',
+-        'db/**/*.js'
+-      ],
+       browser: [
+         'packages/web/server.js',
+         'packages/web/server/**/*.js',
+```
+
+### Docker
+
+``` docker
+FROM ubuntu
+
+# Install vnc, xvfb in order to create a 'fake' display and firefox
+RUN apt-get update && apt-get install -y x11vnc xvfb firefox
+RUN mkdir ~/.vnc
+
+# Setup a password
+RUN x11vnc -storepasswd 1234 ~/.vnc/passwd
+
+# Autostart firefox (might not be the best way, but it does the trick)
+RUN bash -c 'echo "firefox" >> /.bashrc'
+
+EXPOSE 5900
+CMD ["x11vnc", "-forever", "-usepw", "-create"]
+```
+
+### Elixir
+
+``` elixir
+require Logger
+
+def accept(port) do
+  {:ok, socket} = :gen_tcp.listen(port,
+                    [:binary, packet: :line, active: false, reuseaddr: true])
+  Logger.info "Accepting connections on port #{port}"
+  loop_acceptor(socket)
+end
+
+defp loop_acceptor(socket) do
+  {:ok, client} = :gen_tcp.accept(socket)
+  serve(client)
+  loop_acceptor(socket)
+end
+
+defp serve(socket) do
+  socket
+  |> read_line()
+  |> write_line(socket)
+
+  serve(socket)
+end
+
+defp read_line(socket) do
+  {:ok, data} = :gen_tcp.recv(socket, 0)
+  data
+end
+
+defp write_line(line, socket) do
+  :gen_tcp.send(socket, line)
+end
+```
+
+### Erlang
+
+``` erlang
+circular(Defs) ->
+  [ { { Type, Base }, Fields } ||
+    { { Type, Base }, Fields } <- Defs, Type == msg, circular(Base, Defs) ].
+
+circular(Base, Defs) ->
+  Fields = proplists:get_value({ msg, Base }, Defs),
+  circular(Defs, Fields, [Base]).
+
+circular(_Defs, [], _Path) ->
+  false;
+circular(Defs, [Field | Fields], Path) ->
+  case Field#field.type of
+    { msg, Type } ->
+      case lists:member(Type, Path) of
+        false ->
+          Children = proplists:get_value({ msg, Type }, Defs),
+          case circular(Defs, Children, [Type | Path]) of
+            false -> circular(Defs, Fields, Path);
+            true  -> true
+          end;
+        true ->
+          Type == lists:last(Path) andalso
+            (length(Path) == 1 orelse not is_tree(Path))
+      end;
+    _ ->
+      circular(Defs, Fields, Path)
+  end.
+```
+
+### F&#35;
+
+``` fsharp
+/// Asynchronously download retangles from the server
+/// and decode the JSON format to F# Rectangle record
+let [<Js>] getRectangles () : Async<Rectangle[]> = async {
+  let req = XMLHttpRequest()
+  req.Open("POST", "/get", true)
+  let! resp = req.AsyncSend()
+  return JSON.parse(resp) }
+
+/// Repeatedly update rectangles after 0.5 sec
+let [<Js>] updateLoop () = async {
+  while true do
+    do! Async.Sleep(500)
+    let! rects = getRectangles()
+    cleanRectangles()
+    rects |> Array.iter createRectangle }
+```
+
+### Go
+
+``` go
+package main
+
+import "fmt"
+
+func counter(id int, channel chan int, closer bool) {
+  for i := 0; i < 10000000; i++ {
+    fmt.Println("process", id," send", i)
+    channel <- 1
+  }
+  if closer { close(channel ) }
+}
+
+func main() {
+  channel := make(chan int)
+  go counter(1, channel, false)
+  go counter(2, channel, true)
+
+  x := 0
+
+  // receiving data from channel
+  for i := range channel {
+    fmt.Println("receiving")
+    x += i
+  }
+
+  fmt.Println(x)
+}
+```
+
+### HTML
+
+``` html
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>HTML5 Boilerplate</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/main.css">
+    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
+  </head>
+  <body>
+    <p>Hello world! This is HTML5 Boilerplate.</p>
+  </body>
+</html>  
+```
+
+### Java
+
+``` java
+import java.util.LinkedList;
+import java.lang.reflect.Array;
+
+public class UnsortedHashSet<E> {
+
+  private static final double LOAD_FACTOR_LIMIT = 0.7;
+
+  private int size;
+  private LinkedList<E>[] con;
+
+  public UnsortedHashSet() {
+    con  = (LinkedList<E>[])(new LinkedList[10]);
+  }
+
+  public boolean add(E obj) {
+    int oldSize = size;
+    int index = Math.abs(obj.hashCode()) % con.length;
+    if (con[index] == null)
+      con[index] = new LinkedList<E>();
+    if (!con[index].contains(obj)) {
+      con[index].add(obj);
+      size++;
+    }
+    if (1.0 * size / con.length > LOAD_FACTOR_LIMIT)
+      resize();
+    return oldSize != size;
+  }
+
+  private void resize() {
+    UnsortedHashSet<E> temp = new UnsortedHashSet<E>();
+    temp.con = (LinkedList<E>[])(new LinkedList[con.length * 2 + 1]);
+    for (int i = 0; i < con.length; i++) {
+      if (con[i] != null)
+        for (E e : con[i])
+          temp.add(e);
+    }
+    con = temp.con;
+  }
+
+  public int size() {
+    return size;
+  }
+}
+```
+
+### JavaScript
+
+``` javascript
+var Math = require('lib/math');
+
+var _extends = function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];
+    for (var key in source) {
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+};
+
+var e = exports.e = 2.71828182846;
+exports['default'] = function (x) {
+  return Math.exp(x);
+};
+
+module.exports = _extends(exports['default'], exports);
+```
+
+### JSON
+
+``` json
+{
+  "name": "mkdocs-material",
+  "version": "0.2.4",
+  "description": "A material design theme for MkDocs",
+  "homepage": "http://squidfunk.github.io/mkdocs-material/",
+  "authors": [
+    "squidfunk <martin.donath@squidfunk.com>"
+  ],
+  "license": "MIT",
+  "main": "Gulpfile.js",
+  "scripts": {
+    "start": "./node_modules/.bin/gulp watch --mkdocs",
+    "build": "./node_modules/.bin/gulp build --production"
+  }
+  ...
+}
+```
+
+### Julia
+
+``` julia
+using MXNet
+
+mlp = @mx.chain mx.Variable(:data)             =>
+  mx.FullyConnected(name=:fc1, num_hidden=128) =>
+  mx.Activation(name=:relu1, act_type=:relu)   =>
+  mx.FullyConnected(name=:fc2, num_hidden=64)  =>
+  mx.Activation(name=:relu2, act_type=:relu)   =>
+  mx.FullyConnected(name=:fc3, num_hidden=10)  =>
+  mx.SoftmaxOutput(name=:softmax)
+
+# data provider
+batch_size = 100
+include(Pkg.dir("MXNet", "examples", "mnist", "mnist-data.jl"))
+train_provider, eval_provider = get_mnist_providers(batch_size)
+
+# setup model
+model = mx.FeedForward(mlp, context=mx.cpu())
+
+# optimization algorithm
+optimizer = mx.SGD(lr=0.1, momentum=0.9)
+
+# fit parameters
+mx.fit(model, optimizer, train_provider, n_epoch=20, eval_data=eval_provider)
+```
+
+### Lua
+
+``` lua
+local ffi = require("ffi")
+
+ffi.cdef[[
+  void Sleep(int ms);
+  int poll(struct pollfd *fds, unsigned long nfds, int timeout);
+]]
+
+local sleep
+if ffi.os == "Windows" then
+  function sleep(s)
+    ffi.C.Sleep(s*1000)
+  end
+else
+  function sleep(s)
+    ffi.C.poll(nil, 0, s * 1000)
+  end
+end
+
+for i = 1,160 do
+  io.write("."); io.flush()
+  sleep(0.01)
+end
+io.write("\n")
+```
+
+### MySQL
+
+``` mysql
+SELECT
+  Employees.EmployeeID`,
+  Employees.Name,
+  Employees.Salary,
+  Manager.Name AS Manager
+FROM
+  Employees
+LEFT JOIN
+  Employees AS Manager
+ON
+  Employees.ManagerID = Manager.EmployeeID
+WHERE
+  Employees.EmployeeID = '087652';
+```
+
+### PHP
+
+``` php
+<?php
+
+// src/AppBundle/Controller/LuckyController.php
+namespace AppBundle\Controller;
+
+use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
+use Symfony\Component\HttpFoundation\Response;
+
+class LuckyController {
+
+  /**
+   * @Route("/lucky/number")
+   */
+  public function numberAction() {
+    $number = mt_rand(0, 100);
+
+    return new Response(
+      '<html><body>Lucky number: '.$number.'</body></html>'
+    );
+  }
+}
+```
+
+### Protocol Buffers
+
+``` proto
+syntax = "proto2";
+
+package caffe;
+
+// Specifies the shape (dimensions) of a Blob.
+message BlobShape {
+  repeated int64 dim = 1 [packed = true];
+}
+
+message BlobProto {
+  optional BlobShape shape = 7;
+  repeated float data = 5 [packed = true];
+  repeated float diff = 6 [packed = true];
+
+  // 4D dimensions -- deprecated.  Use "shape" instead.
+  optional int32 num = 1 [default = 0];
+  optional int32 channels = 2 [default = 0];
+  optional int32 height = 3 [default = 0];
+  optional int32 width = 4 [default = 0];
+}
+```
+
+### Python
+
+``` python
+
+"""
+  A very simple MNIST classifier.
+  See extensive documentation at
+  http://tensorflow.org/tutorials/mnist/beginners/index.md
+"""
+from __future__ import absolute_import
+from __future__ import division
+from __future__ import print_function
+
+# Import data
+from tensorflow.examples.tutorials.mnist import input_data
+
+import tensorflow as tf
+
+flags = tf.app.flags
+FLAGS = flags.FLAGS
+flags.DEFINE_string('data_dir', '/tmp/data/', 'Directory for storing data')
+
+mnist = input_data.read_data_sets(FLAGS.data_dir, one_hot=True)
+
+sess = tf.InteractiveSession()
+
+# Create the model
+x = tf.placeholder(tf.float32, [None, 784])
+W = tf.Variable(tf.zeros([784, 10]))
+b = tf.Variable(tf.zeros([10]))
+y = tf.nn.softmax(tf.matmul(x, W) + b)
+```
+
+### Ruby
+
+``` ruby
+require 'finity/event'
+require 'finity/machine'
+require 'finity/state'
+require 'finity/transition'
+require 'finity/version'
+
+module Finity
+  class InvalidCallback < StandardError; end
+  class MissingCallback < StandardError; end
+  class InvalidState    < StandardError; end
+
+  # Class methods to be injected into the including class upon inclusion.
+  module ClassMethods
+
+    # Instantiate a new state machine for the including class by accepting a
+    # block with state and event (and subsequent transition) definitions.
+    def finity options = {}, &block
+      @finity ||= Machine.new self, options, &block
+    end
+
+    # Return the names of all registered states.
+    def states
+      @finity.states.map { |name, _| name }
+    end
+
+    # Return the names of all registered events.
+    def events
+      @finity.events.map { |name, _| name }
+    end
+  end
+
+  # Inject methods into the including class upon inclusion.
+  def self.included base
+    base.extend ClassMethods
+  end
+end
+```
+
+### XML
+
+``` xml
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mainTag SYSTEM "some.dtd" [ENTITY % entity]>
+<?oxygen RNGSchema="some.rng" type="xml"?>
+<xs:main-Tag xmlns:xs="http://www.w3.org/2001/XMLSchema">
+  <!-- This is a sample comment -->
+  <childTag attribute="Quoted Value" another-attribute='Single quoted value'
+      a-third-attribute='123'>
+    <withTextContent>Some text content</withTextContent>
+    <withEntityContent>Some text content with &lt;entities&gt; and
+      mentioning uint8_t and int32_t</withEntityContent>
+    <otherTag attribute='Single quoted Value'/>
+  </childTag>
+  <![CDATA[ some CData ]]>
+</main-Tag>
+```
+
+[Pygments]: http://pygments.org
+[300 languages]: http://pygments.org/languages

material/base.html

@@ -25,19 +25,19 @@
         <meta name="author" content="{{ site_author }}">
       {% endif %}
     {% endblock %}
-    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-28991d4685.css">
+    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-67e8d741f4.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     {% for path in extra_css %}
       <link rel="stylesheet" href="{{ path }}">
     {% endfor %}
-    <script src="{{ base_url }}/assets/javascripts/modernizr-ca288b1d5b.js"></script>
+    <script src="{{ base_url }}/assets/javascripts/modernizr-d41d8cd98f.js"></script>
   </head>
   <body>
-    <input class="md-toggle" type="checkbox" id="md-toggle-drawer">
+    <input class="md-toggle md-toggle--drawer" type="checkbox" id="drawer">
-    <input class="md-toggle" type="checkbox" id="md-toggle-search">
+    <input class="md-toggle md-toggle--search" type="checkbox" id="search">
-    <label class="md-overlay" for="md-toggle-drawer"></label>
+    <label class="md-overlay" for="drawer"></label>
     {% include "header.html" %}
     <div class="md-container">
       <main class="md-main">

material/header.html

@@ -2,7 +2,7 @@
   <nav class="md-grid md-header-nav">
     <div class="md-flex">
       <div class="md-flex__cell md-flex__cell--shrink">
-        <label class="md-icon md-icon--menu md-header-nav__icon" for="md-toggle-drawer"></label>
+        <label class="md-icon md-icon--menu md-header-nav__icon" for="drawer"></label>
       </div>
       <div class="md-flex__cell md-flex__cell--stretch md-header-nav__title">
         <span class="md-flex__ellipsis">
@@ -10,12 +10,12 @@
         </span>
       </div>
       <div class="md-flex__cell md-flex__cell--shrink md-search">
-        <label class="md-icon md-icon--search md-header-nav__icon" for="md-toggle-search"></label>
+        <label class="md-icon md-icon--search md-header-nav__icon" for="search"></label>
         <div class="md-search__overlay"></div>
         <div class="md-search__inner">
           <form class="md-search__form">
-            <input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="md-search">
+            <input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="query">
-            <label class="md-icon md-icon--search md-search__icon" for="md-search"></label>
+            <label class="md-icon md-icon--search md-search__icon" for="query"></label>
             <div class="md-search__suggest">
               FOO<br>
               FOO<br>

material/manifest.json

@@ -1,6 +1,6 @@
 {
   "assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
   "assets/javascripts/application.js": "assets/javascripts/application-e9877e2824.js",
-  "assets/javascripts/modernizr.js": "assets/javascripts/modernizr-ca288b1d5b.js",
+  "assets/javascripts/modernizr.js": "assets/javascripts/modernizr-d41d8cd98f.js",
-  "assets/stylesheets/application.css": "assets/stylesheets/application-28991d4685.css"
+  "assets/stylesheets/application.css": "assets/stylesheets/application-67e8d741f4.css"
 }

package.json

@@ -45,6 +45,7 @@
     "gulp-rev": "^7.0.0",
     "gulp-rev-collector": "^1.0.2",
     "gulp-sass": "^2.2.0",
+    "gulp-sass-lint": "^1.2.0",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.5.2",
     "gulp-util": "^3.0.7",

src/assets/stylesheets/_config.scss

@@ -1,42 +1,38 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Typography
+/// Typography
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Modular typographic scale
- * Modular typographic scale
- */
 $ms-base: 1.6rem;
 $ms-ratio: $major-third;
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Breakpoints
+/// Breakpoints
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Device-specific breakpoints
- * Device-specific breakpoints
- */
 $break-devices: (
   mobile: (
     portrait:  px2em(220px)  px2em(479px),
@@ -53,30 +49,24 @@ $break-devices: (
   )
 );
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Colors
+/// Colors
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Primary and accent colors
- * Primary and accent colors
- */
 $md-color-primary:         $clr-indigo-500;
 $md-color-primary--light:  $clr-indigo-100;
 $md-color-primary--dark:   $clr-indigo-700;
 $md-color-accent:          $clr-indigo-a200;
 
-/*
+/// Shades of black
- * Shades of black
+$md-color-black:           hsla(0, 0%, 0%, 0.87);
- */
+$md-color-black--light:    hsla(0, 0%, 0%, 0.54);
-$md-color-black:           rgba(black, 0.87);
+$md-color-black--lighter:  hsla(0, 0%, 0%, 0.26);
-$md-color-black--light:    rgba(black, 0.54);
+$md-color-black--lightest: hsla(0, 0%, 0%, 0.07);
-$md-color-black--lighter:  rgba(black, 0.26);
-$md-color-black--lightest: rgba(black, 0.07);
 
-/*
+/// Shades of white
- * Shades of white
+$md-color-white:           hsla(0, 0%, 100%, 1.00);
- */
+$md-color-white--light:    hsla(0, 0%, 100%, 0.70);
-$md-color-white:           rgba(white, 1.00);
+$md-color-white--lighter:  hsla(0, 0%, 100%, 0.30);
-$md-color-white--light:    rgba(white, 0.70);
+$md-color-white--lightest: hsla(0, 0%, 100%, 0.12);
-$md-color-white--lighter:  rgba(white, 0.30);
-$md-color-white--lightest: rgba(white, 0.12);

src/assets/stylesheets/_shame.scss

@@ -1,33 +1,33 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Nothing to see here, move along
+/// Nothing to see here, move along
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
 .md-search__suggest {
   background: $md-color-white;
   border-radius: 0 0 px2rem(3px) px2rem(3px);
-  color: black;
+  color: #000000;
   text-align: left;
   border-top: px2rem(1px) solid $md-color-black--lightest;
   display: none;

src/assets/stylesheets/application.scss

@@ -1,36 +1,36 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Dependencies
+/// Dependencies
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
 @import "modular-scale";
 @import "material-color";
 @import "material-shadows";
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Application
+/// Application
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
 @import "helpers/break";
 @import "helpers/px2em";

src/assets/stylesheets/base/_icons.scss

@@ -1,52 +1,49 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Icon set
+/// Icon set
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Base icon class
- * Base icon class
+%md-icon,
- */
 .md-icon {
   font-family: "Material Icons";
-  speak: none;
   font-style: normal;
-  font-weight: normal;
   font-variant: normal;
-  text-transform: none;
+  font-weight: normal;
   line-height: 1;
+  text-transform: none;
   white-space: nowrap;
+  speak: none;
   word-wrap: normal;
   direction: ltr;
 
-  /* Better Font Rendering */
+  /// Enable font-smoothing in Webkit and FF
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-/*
+/// Build representational classes
- * Build representational classes
- */
 @each $ligature, $name in (
   "arrow_back": "back",
   "arrow_forward": "forward",
@@ -54,7 +51,7 @@
   "menu": "menu",
   "search": "search"
 ) {
-  .md-icon--#{$name}:before {
+  .md-icon--#{$name}::before {
     content: $ligature;
   }
 }

src/assets/stylesheets/base/_reset.scss

@@ -1,60 +1,52 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Resets
+/// Resets
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Enfore correct box model - the prefixed versions are necessary for older
- * Enfore correct box model - the prefixed versions are necessary for older
+/// browsers, i.e. Chrome < 10, Firefox < 29, Safari < 6 and Android < 4
- * browsers, i.e. Chrome < 10, Firefox < 29, Safari < 6 and Android < 4
- */
 html {
           box-sizing: border-box;
      -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 
-/*
+/// All elements shall inherit the document default
- * All elements shall inherit the document default
+*, *::before, *::after {
- */
-*, *:before, *:after {
           box-sizing: inherit;
      -moz-box-sizing: inherit;
   -webkit-box-sizing: inherit;
 }
 
-/*
+/// Prevent adjustments of font size after orientation changes in IE and iOS
- * Prevent adjustments of font size after orientation changes in IE and iOS
+/// and set base font-size to 10px for simple rem calculations.
- * and set base font-size to 10px for simple rem calculations.
- */
 html {
   font-size: 62.5%;
   text-size-adjust: none;
 }
 
-/*
+/// Reset spacing and borders for all tags
- * Reset spacing and borders for all tags
- */
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
 pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
 q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol,
@@ -67,55 +59,42 @@ audio, video {
   border: 0;
 }
 
-/*
+/// Reset table styles
- * Reset table styles
- */
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-/*
+/// Reset table cell styles
- * Reset table cell styles
- */
 td, th {
-  text-align: left;
   font-weight: normal;
+  text-align: left;
   vertical-align: top;
 }
 
-/*
+/// Reset (native) button styles
- * Reset (native) button styles
- */
 button {
   padding: 0;
-  outline: 0;
   border: 0;
+  outline: 0;
   background: transparent;
   font-size: inherit;
 }
 
-/*
+/// Reset (native) input styles
- * Reset (native) input styles
- */
 input {
-  appearance: none;
-  outline: 0;
   border: 0;
+  outline: 0;
+  appearance: none;
 }
 
-/*
+/// Reset link styles
- * Reset link styles
- */
 a {
-  text-decoration: none;
   color: inherit;
+  text-decoration: none;
 }
 
-/*
+/// Reset tap outlines on iOS and Android
- * Reset tap outlines on iOS and Android
- */
 a, button, label, input {
-  -webkit-tap-highlight-color: rgba(white, 0);
   -webkit-tap-highlight-color: transparent;
 }

src/assets/stylesheets/base/_typeset.scss

@@ -1,297 +1,244 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Font definitions
+/// Font definitions
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Default fonts
- * Default fonts
- */
 body, kbd {
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   font-weight: 400;
   font-feature-settings: "kern", "onum", "liga";
 
-  /* Enable font-smoothing in Webkit and FF */
+  /// Enable font-smoothing in Webkit and FF
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  /*
+  /// Use system fonts, if browser doesn't support webfonts
-   * Use system fonts, if browser doesn't support webfonts
-   */
   .no-fontface & {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   }
 }
 
-/*
+/// Proportionally spaced fonts
- * Proportionally spaced fonts
- */
 pre, code {
   font-family: "Roboto Mono", "Courier New", Courier, monospace;
 
-  /*
+  /// Use system fonts, if browser doesn't support webfonts
-   * Use system fonts, if browser doesn't support webfonts
-   */
   .no-fontface & {
     font-family: "Courier New", Courier, monospace;
   }
 }
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Typeset
+/// Typeset
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Content that is typeset
- * Content that is typeset
- */
 .md-content--typeset {
   font-size: ms(0);
   line-height: 1.6;
 
-  /*
+  /// Body copy
-   * Body copy
-   */
   p {
     margin: 1.25em 0;
   }
 
-  /*
+  /// 1st level headline
-   * 1st level headline
-   */
   h1 {
+    color: $md-color-black--light;
     font-size: ms(3);
     font-weight: 300;
+    letter-spacing: -0.01em;
     line-height: 1.3;
-    letter-spacing: -.01em;
-    color: $md-color-black--light;
   }
 
-  /*
+  /// 2nd level headline
-   * 2nd level headline
-   */
   h2 {
     margin-top: 4.0rem;
     font-size: ms(2);
     font-weight: 300;
+    letter-spacing: -0.01em;
     line-height: 1.4;
-    letter-spacing: -.01em;
   }
 
-  /*
+  /// 3rd level headline
-   * 3rd level headline
-   */
   h3 {
     margin-top: 3.2rem;
     font-size: ms(1);
     font-weight: 400;
+    letter-spacing: -0.01em;
     line-height: 1.5;
-    letter-spacing: -.01em;
   }
 
-  /*
+  /// 3rd level headline following an 2nd level headline
-   * 2nd + 3rd level headline
-   */
   h2 + h3 {
     margin-top: 1.6rem;
   }
 
-  /*
+  /// 4th level headline
-   * 4th level headline
-   */
   h4 {
     margin-top: 1.6rem;
     font-size: ms(0);
     font-weight: 700;
-    letter-spacing: -.01em;
+    letter-spacing: -0.01em;
   }
 
-  /*
+  /// 5th and 6th level headline
-   * 5th and 6th level headline
+  h5,
-   */
+  h6 {
-  h5, h6 {
     margin-top: 1.6rem;
+    color: $md-color-black--light;
     font-size: ms(-1);
     font-weight: 700;
-    letter-spacing: -.01em;
+    letter-spacing: -0.01em;
-    color: $md-color-black--light;
   }
 
-  /*
+  /// Overrides for 5th level headline
-   * Overrides for 5th level headline
-   */
   h5 {
     text-transform: uppercase;
   }
 
-  /*
+  /// Links
-   * Links
-   */
   a {
     color: $md-color-primary;
 
-    /*
+    /// Also enable transition on pseudo elements
-     * Also enable transition on pseudo elements
-     */
     &,
-    &:before {
+    &::before {
-      transition: color .125s;
+      transition: color 0.125s;
     }
 
-    /*
+    /// Active links
-     * Active links
-     */
     &:hover,
     &:active {
       color: $md-color-accent;
     }
   }
 
-  /*
+  /// Inline code blocks
-   * Inline code blocks
-   */
   code {
     padding: 0.1rem 0.4rem;
+    background: #F7F7F7;
+    color: #37474F;
     font-size: 85%;
     font-weight: 400;
     word-break: break-word;
-    background: #F7F7F7;
-    color: #37474F;
   }
 
-  /*
+  /// Formatted code blocks
-   * Formatted code blocks
-   */
   pre {
+    margin: 2.0rem 0;
     padding: 1.0rem 1.2rem;
-    overflow-x: scroll;
+    background: #F7F7F7;
+    color: #37474F;
     font-size: 85%;
     line-height: 1.4;
-    background: #F7F7F7;
+    overflow-x: scroll;
-    color: #37474F;
+
+    /// Reset, if pre is inside code
+    > code {
+      font-size: inherit;
+    }
   }
 
-  /*
+  /// Keyboard tags
-   * Keyboard tags
-   */
   kbd {
     display: inline-block;
     padding: 0.4rem 0.5rem 0.5rem;
-    vertical-align: 0.1rem;
+    border: px2rem(1px) solid #CCCCCC;
-    font-size: 85%;
+    border-radius: px2rem(3px);
-    line-height: 1.0rem;
+    border-bottom-color: #BBBBBB;
-    word-break: break-word;
     background-color: #FCFCFC;
     color: #555555;
-    border: px2rem(1px) solid #CCCCCC;
+    font-size: 85%;
-    border-bottom-color: #BBBBBB;
+    line-height: 1.0rem;
-    border-radius: px2rem(3px);
     box-shadow: 0 #{-(px2rem(1px))} 0 #BBBBBB inset;
+    vertical-align: 0.1rem;
+    word-break: break-word;
   }
 
-  /*
+  /// Smaller text
-   * Smaller text
-   */
   small {
-    font-size: smaller;
     color: $md-color-black--light;
+    font-size: smaller;
   }
 
-  /*
+  /// Superscript and subscript
-   * Superscript and subscript
-   */
   sup,
   sub {
     margin-left: 0.1rem;
   }
 
-  /*
+  /// Horizontal separators
-   * Horizontal separators
-   */
   hr {
     margin: 2.4rem 0;
     border-bottom: px2rem(1px) dotted $md-color-black--lighter;
   }
 
-  /*
+  /// Blockquotes, possibly nested
-   * Blockquotes, possibly nested
-   */
   blockquote {
     padding-left: 1.2rem;
     border-left: px2rem(4px) solid $md-color-black--lighter;
     color: $md-color-black--light;
   }
 
-  /*
+  /// Unordered lists
-   * Unordered lists
-   */
   ul {
     list-style-type: disc;
   }
 
-  /*
+  /// Ordered lists
-   * Ordered lists
-   */
   ol ol {
     list-style-type: lower-alpha;
 
-    /*
+    /// Triply nested ordered list
-     * Triply nested ordered list
-     */
     ol {
       list-style-type: lower-roman;
     }
   }
 
-  /*
+  /// Unordered and ordered lists
-   * Unordered and ordered lists
-   */
   ul,
   ol {
     margin-left: 1.0rem;
 
-    /*
+    /// List elements
-     * List elements
-     */
     li {
       margin-bottom: 1.0rem;
       margin-left: 2.0rem;
 
-      /*
+      /// Remove margin on last element
-       * Remove margin on last element
-       */
       &:last-child {
         margin-bottom: 0;
       }
 
-      /*
+      /// Nested lists
-       * Nested lists
-       */
       ul,
       ol {
-        padding-top: 1.0rem;
         margin-bottom: 1.0rem;
         margin-left: 1.0rem;
+        padding-top: 1.0rem;
       }
     }
   }

src/assets/stylesheets/extensions/_admonition.scss

@@ -1,139 +1,116 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Admonition extension
+/// Admonition extension
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Admonition
- * Admonition
- */
 .admonition {
   position: relative;
-  padding: 0.8rem 1.6rem;
   margin: 2.0rem 0;
-  background: rgba($clr-blue-a200, 0.05);
+  padding: 0.8rem 1.6rem;
   border-left: px2rem(32px) solid $clr-blue-a200;
   border-radius: px2rem(2px);
+  background: transparentize($clr-blue-a200, 0.95);
 
-  /*
+  /// Icon
-   * Icon
+  &::before {
-   */
-  &:before {
-    content: "edit";
     display: block;
     position: absolute;
     top: 0.2rem;
     left: -2.6rem;
     float: left;
-    font-family: "Material Icons";
-    font-weight: normal;
-    font-size: 2.0rem;
-    vertical-align: -0.1em;
     color: $md-color-white;
+    font-family: "Material Icons";
+    font-size: 2.0rem;
+    font-weight: normal;
+    content: "edit";
+    vertical-align: -0.1em;
   }
 
-  /*
+  /// Title
-   * Title
-   */
   &-title {
+    color: $clr-blue-a400;
     font-size: ms(-1);
     font-weight: 700;
     line-height: 2.0rem;
     text-transform: uppercase;
-    color: $clr-blue-a400;
 
-    /*
+    /// Ensure smaller spacing to next element
-     * Ensure smaller spacing to next element
-     */
     html & {
       margin-bottom: 1.6rem;
     }
 
-    /*
+    /// Ensure smaller spacing to next element
-     * Ensure smaller spacing to next element
-     */
     html & + * {
       margin-top: 1.6rem;
     }
   }
 
-  /*
+  /// Remove spacing on first element
-   * Remove spacing on first element
-   */
   :first-child {
     margin-top: 0;
   }
 
-  /*
+  /// Remove spacing on last element
-   * Remove spacing on last element
-   */
   :last-child {
     margin-bottom: 0;
   }
 
-  /*
+  /// Build representational classes
-   * Build representational classes
-   */
   @each $names, $appearance in (
     tip idea: $clr-teal-a700 "whatshot",
-    success check: $clr-green-a400 "done",
+    success check done: $clr-green-a400 "done",
     warning warn: $clr-orange-a400 "warning",
-    failure fail: $clr-red-a200 "clear",
+    failure fail missing: $clr-red-a200 "clear",
     danger fatal: $clr-red-a400 "flash_on",
-    bug error: $clr-pink-a400 "bug_report"
+    error bug: $clr-pink-a400 "bug_report"
   ) {
     $tint: nth($appearance, 1);
     $icon: nth($appearance, 2);
 
-    /*
+    /// Define base class
-     * Define base class
+    &%#{nth($names, 1)},
-     */
     &.#{nth($names, 1)} {
-      background: rgba($tint, 0.05);
       border-color: $tint;
+      background: transparentize($tint, 0.95);
 
-      /*
+      /// Icon
-       * Icon
+      &::before {
-       */
-      &:before {
         content: $icon;
       }
 
-      /*
+      /// Set color for title
-       * Set color for title
-       */
       .admonition-title {
         color: $tint;
       }
     }
 
-    /*
+    /// Define synonyms for base class
-     * Define synonyms for base class
-     */
     @if length($names) > 1 {
       @for $n from 2 through length($names) {
         &.#{nth($names, $n)} {
-          @extend .admonition.#{nth($names, 1)};
+          @extend .admonition%#{nth($names, 1)};
         }
       }
     }

src/assets/stylesheets/extensions/_codehilite.scss

@@ -1,133 +1,117 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Codehilite extension
+/// Codehilite extension
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Github-style syntax highlighting
- * Github-style syntax highlighting
- */
 .codehilite,
 .code {
 
-  /*
+  /// Errors
-   * Errors
-   */
   .err { color: #A61717; }
 
-  /*
+  /// Operators
-   * Operators
-   */
   .o { color: inherit; }
 
-  /*
+  /// Generics
-   * Generics
-   */
-  .ge { color: #000000; } /* Generic.Emph */
-  .gr { color: #AA0000; } /* Generic.Error */
-  .gh { color: #999999; } /* Generic.Heading */
-  .go { color: #888888; } /* Generic.Output */
-  .gp { color: #555555; } /* Generic.Prompt */
-  .gs { color: inherit; } /* Generic.Strong */
-  .gu { color: #AAAAAA; } /* Generic.Subheading */
-  .gt { color: #AA0000; } /* Generic.Traceback */
 
-  /*
+  .ge { color: #000000; } /// Generic.Emph
-   * Keywords
+  .gr { color: #AA0000; } /// Generic.Error
-   */
+  .gh { color: #999999; } /// Generic.Heading
-  .k  { color: #A71D5D; } /* Keyword */
+  .go { color: #888888; } /// Generic.Output
-  .kc { color: #A71D5D; } /* Keyword.Constant */
+  .gp { color: #555555; } /// Generic.Prompt
-  .kd { color: #A71D5D; } /* Keyword.Declaration */
+  .gs { color: inherit; } /// Generic.Strong
-  .kn { color: #A71D5D; } /* Keyword.Namespace */
+  .gu { color: #AAAAAA; } /// Generic.Subheading
-  .kp { color: #A71D5D; } /* Keyword.Pseudo */
+  .gt { color: #AA0000; } /// Generic.Traceback
-  .kr { color: #0086B3; } /* Keyword.Reserved */
-  .kt { color: #0086B3; } /* Keyword.Type */
 
-  /*
+  /// Keywords
-   * Comments
-   */
-  .c  { color: #969896; } /* Comment */
-  .cm { color: #969896; } /* Comment.Multiline */
-  .cp { color: #666666; } /* Comment.Preproc */
-  .c1 { color: #969896; } /* Comment.Single */
-  .cs { color: #969896; } /* Comment.Special */
 
-  /*
+  .k  { color: #A71D5D; } /// Keyword
-   * Names
+  .kc { color: #A71D5D; } /// Keyword.Constant
-   */
+  .kd { color: #A71D5D; } /// Keyword.Declaration
-  .na { color: #795DA3; } /* Name.Attribute */
+  .kn { color: #A71D5D; } /// Keyword.Namespace
-  .na { color: #795DA3; } /* Name.Attribute */
+  .kp { color: #A71D5D; } /// Keyword.Pseudo
-  .nb { color: #795DA3; } /* Name.Builtin */
+  .kr { color: #0086B3; } /// Keyword.Reserved
-  .bp { color: #795DA3; } /* Name.Builtin.Pseudo */
+  .kt { color: #0086B3; } /// Keyword.Type
-  .nc { color: #795DA3; } /* Name.Class */
-  .no { color: #795DA3; } /* Name.Constant */
-  .nd { color: #795DA3; } /* Name.Decorator */
-  .ni { color: #795DA3; } /* Name.Entity */
-  .ne { color: #795DA3; } /* Name.Exception */
-  .nf { color: #795DA3; } /* Name.Function */
-  .nl { color: #795DA3; } /* Name.Label */
-  .nn { color: #795DA3; } /* Name.Namespace */
-  .nt { color: #795DA3; } /* Name.Tag */
-  .nv { color: #795DA3; } /* Name.Variable */
-  .vc { color: #795DA3; } /* Name.Variable.Class */
-  .vg { color: #795DA3; } /* Name.Variable.Global */
-  .vi { color: #795DA3; } /* Name.Variable.Instance */
-  .ow { color: inherit; } /* Operator.Word */
 
-  /*
+  /// Comments
-   * Numbers
-   */
-  .m  { color: #0086B3; } /* Literal.Number */
-  .mf { color: #0086B3; } /* Literal.Number.Float */
-  .mh { color: #0086B3; } /* Literal.Number.Hex */
-  .mi { color: #0086B3; } /* Literal.Number.Integer */
-  .mo { color: #0086B3; } /* Literal.Number.Oct */
-  .il { color: #0086B3; } /* Literal.Number.Integer.Long */
 
-  /*
+  .c  { color: #969896; } /// Comment
-   * Strings
+  .cm { color: #969896; } /// Comment.Multiline
-   */
+  .cp { color: #666666; } /// Comment.Preproc
-  .s  { color: #183691; } /* Literal.String */
+  .c1 { color: #969896; } /// Comment.Single
-  .sb { color: #183691; } /* Literal.String.Backtick */
+  .cs { color: #969896; } /// Comment.Special
-  .sc { color: #183691; } /* Literal.String.Char */
-  .sd { color: #183691; } /* Literal.String.Doc */
-  .s2 { color: #183691; } /* Literal.String.Double */
-  .se { color: #183691; } /* Literal.String.Escape */
-  .sh { color: #183691; } /* Literal.String.Heredoc */
-  .si { color: #183691; } /* Literal.String.Interpol */
-  .sx { color: #183691; } /* Literal.String.Other */
-  .sr { color: #009926; } /* Literal.String.Regex */
-  .s1 { color: #D01040; } /* Literal.String.Single */
-  .ss { color: #990073; } /* Literal.String.Symbol */
 
-  /*
+  /// Names
-   * Diffs
-   */
-  .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */
-  .gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */
 
-  /*
+  .na { color: #795DA3; } /// Name.Attribute
-   * Miscellaneous
+  .na { color: #795DA3; } /// Name.Attribute
-   */
+  .nb { color: #795DA3; } /// Name.Builtin
-  .w { color: transparent; } /* Text.Whitespace */
+  .bp { color: #795DA3; } /// Name.Builtin.Pseudo
+  .nc { color: #795DA3; } /// Name.Class
+  .no { color: #795DA3; } /// Name.Constant
+  .nd { color: #795DA3; } /// Name.Decorator
+  .ni { color: #795DA3; } /// Name.Entity
+  .ne { color: #795DA3; } /// Name.Exception
+  .nf { color: #795DA3; } /// Name.Function
+  .nl { color: #795DA3; } /// Name.Label
+  .nn { color: #795DA3; } /// Name.Namespace
+  .nt { color: #795DA3; } /// Name.Tag
+  .nv { color: #795DA3; } /// Name.Variable
+  .vc { color: #795DA3; } /// Name.Variable.Class
+  .vg { color: #795DA3; } /// Name.Variable.Global
+  .vi { color: #795DA3; } /// Name.Variable.Instance
+  .ow { color: inherit; } /// Operator.Word
+
+  /// Numbers
+
+  .m  { color: #0086B3; } /// Literal.Number
+  .mf { color: #0086B3; } /// Literal.Number.Float
+  .mh { color: #0086B3; } /// Literal.Number.Hex
+  .mi { color: #0086B3; } /// Literal.Number.Integer
+  .mo { color: #0086B3; } /// Literal.Number.Oct
+  .il { color: #0086B3; } /// Literal.Number.Integer.Long
+
+  /// Strings
+
+  .s  { color: #183691; } /// Literal.String
+  .sb { color: #183691; } /// Literal.String.Backtick
+  .sc { color: #183691; } /// Literal.String.Char
+  .sd { color: #183691; } /// Literal.String.Doc
+  .s2 { color: #183691; } /// Literal.String.Double
+  .se { color: #183691; } /// Literal.String.Escape
+  .sh { color: #183691; } /// Literal.String.Heredoc
+  .si { color: #183691; } /// Literal.String.Interpol
+  .sx { color: #183691; } /// Literal.String.Other
+  .sr { color: #009926; } /// Literal.String.Regex
+  .s1 { color: #D01040; } /// Literal.String.Single
+  .ss { color: #990073; } /// Literal.String.Symbol
+
+  /// Diffs
+  .gd { background-color: #ffdddd; } /// Generic.Deleted
+  .gi { background-color: #ddffdd; } /// Generic.Inserted
+
+  /// Miscellaneous
+  .w { color: transparent; } /// Text.Whitespace
 }

src/assets/stylesheets/extensions/_footnotes.scss

@@ -1,71 +1,60 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Footnotes extension
+/// Footnotes extension
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Scoped in typesetted content for greater specificity
- * Scoped in typesetted content for greater specificity
- */
 .md-content--typeset {
 
-  /*
+  /// Footnote
-   * Footnote
-   */
   .footnote {
-    @extend small;
+    color: $md-color-black--light;
+    font-size: smaller;
 
-    /*
+    /// Remove additional spacing on footnotes
-     * Remove additional spacing on footnotes
-     */
     > ol {
       margin-left: 0;
 
-      /*
+      /// Single footnote
-       * Single footnote
-       */
       > li {
 
         // TODO: this doesn't work entirely
-        // &:before {
+        // &::before {
         //   display: block;
         //   content: " ";
         //   padding-top: (5.6rem + 2.4rem + 0.4rem);
         //   margin-top: -(5.6rem + 2.4rem + 0.4rem);
         // }
 
-        /*
+        /// Make back references visible on hover
-         * Make permalink visible on hover
-         */
         &:hover  .footnote-backref,
         &:target .footnote-backref {
-          opacity: 1;
           transform: translate3d(0, 0, 0);
+          opacity: 1;
         }
 
-        /*
+        /// Active or targeted back reference
-         * Active or targeted permalink
-         */
         &:hover  .footnote-backref:hover,
         &:target .footnote-backref {
           color: $md-color-accent;
@@ -73,44 +62,36 @@
       }
     }
 
-    /*
+    /// Correct anchor offset
-     * Correct anchor offset;
+    &-ref::before {
-     */
-    &-ref:before {
       position: absolute;
+      margin-top: -(5.6rem + 2.4rem + 0.4rem);
+      padding-top: (5.6rem + 2.4rem + 0.4rem);
       content: " ";
       pointer-events: none;
-      padding-top: (5.6rem + 2.4rem + 0.4rem);
-      margin-top: -(5.6rem + 2.4rem + 0.4rem);
     }
 
-    /*
+    /// Make back reference text transparent for icon
-     * Make backref transparent for custom icon
-     */
     &-backref {
-      @extend .md-icon;
+      @extend %md-icon;
 
       position: absolute;
-      font-size: 2.0rem;
-      vertical-align: middle;
-      opacity: 0;
-      color: $md-color-black--lighter;
       transform: translate3d(0.5rem, 0, 0);
-      transition: opacity  .125s .125s,
+      transition: transform 0.25s  0.125s,
-                  transform .25s .125s,
+                  color     0.25s,
-                  color     .25s;
+                  opacity   0.125s 0.125s;
+      color: $md-color-black--lighter;
+      font-size: 2.0rem;
+      opacity: 0;
+      vertical-align: middle;
 
-      /*
+      /// Hack: remove Unicode arrow for icon
-       * Hack: remove Unicode arrow for icon
+      &::first-letter {
-       */
-      &:first-letter {
         font-size: 0;
       }
 
-      /*
+      /// Back reference icon
-       * Icon
+      &::after {
-       */
-      &:after {
         content: "keyboard_return";
       }
     }

src/assets/stylesheets/extensions/_permalinks.scss

@@ -1,74 +1,62 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Permalinks extension
+/// Permalinks extension
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Scoped in typesetted content for greater specificity
- * Scoped in typesetted content for greater specificity
- */
 .md-content--typeset {
 
-  /*
+  /// Permalink
-   * Permalink
-   */
   .headerlink {
     display: inline-block;
     margin-left: 1.0rem;
-    opacity: 0;
-    color: $md-color-black--lighter;
     transform: translate3d(0, 0.5rem, 0);
-    transition: opacity  .125s .25s,
+    transition: transform 0.25s  0.25s,
-                transform .25s .25s,
+                color     0.25s,
-                color     .25s;
+                opacity   0.125s 0.25s;
+    color: $md-color-black--lighter;
+    opacity: 0;
   }
 
-  /*
+  /// All headers with permalinks have ids
-   * All headers with permalinks have ids
-   */
   [id] {
 
-    /*
+    /// Make permalink visible on hover
-     * Make permalink visible on hover
-     */
     &:hover  .headerlink,
     &:target .headerlink {
-      opacity: 1;
       transform: translate3d(0, 0, 0);
+      opacity: 1;
     }
 
-    /*
+    /// Active or targeted permalink
-     * Active or targeted permalink
-     */
     &:hover  .headerlink:hover,
     &:target .headerlink {
       color: $md-color-accent;
     }
   }
 
-  /*
+  /// Correct anchor offset of headlines
-   * Correct anchor offset of headlines
-   */
   @each $level, $delta in (
     h1: 3.0rem,
     h2: 0.2rem,
@@ -77,11 +65,11 @@
     h5: 1.0rem,
     h6: 1.0rem
   ) {
-    #{$level}[id]:before {
+    #{$level}[id]::before {
-      content: " ";
       display: block;
-      padding-top: (5.6rem + 2.4rem + $delta);
       margin-top: -(5.6rem + 2.4rem + $delta);
+      padding-top: (5.6rem + 2.4rem + $delta);
+      content: " ";
     }
   }
 }

src/assets/stylesheets/helpers/_break.scss

@@ -1,48 +1,70 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Variables
+/// Variables
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+////
- * Device-specific breakpoints
+/// Device-specific breakpoints
- *
+///
- * @type Map
+/// @example
- */
+///   $break-devices: (
+///     mobile: (
+///       portrait:  px2em(220px)  px2em(479px),
+///       landscape: px2em(480px)  px2em(719px)
+///     ),
+///     tablet: (
+///       portrait:  px2em(720px)  px2em(959px),
+///       landscape: px2em(960px)  px2em(1199px)
+///     ),
+///     screen: (
+///       small:     px2em(1200px) px2em(1599px),
+///       medium:    px2em(1600px) px2em(1999px),
+///       large:     px2em(2000px)
+///     )
+///   );
+///
+/// @group  helpers
+/// @access private
+/// @type   Map
+////
 $break-devices: () !default;
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Breakpoint helpers
+/// Breakpoint helpers
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+////
- * Choose minimum and maximum device widths
+/// Choose minimum and maximum device widths
- *
+///
- * @param  {Map}  $devices Map of devices
+/// @group  helpers
- * @return {List}          Minimum and maximum width
+/// @access private
- */
+/// @param  {Map}  $devices Map of devices
+/// @return {List}          Minimum and maximum width
+////
 @function break-select-min-max($devices) {
-  $min: 1000000; $max: 0;
+  $min: 1000000;
+  $max: 0;
   @each $key, $value in $devices {
     @while type-of($value) == map {
       $value: break-select-min-max($value);
@@ -68,12 +90,14 @@ $break-devices: () !default;
   @return $min, $max;
 }
 
-/*
+////
- * Select minimum and maximum widths for a device breakpoint
+/// Select minimum and maximum widths for a device breakpoint
- *
+///
- * @param  {String} $device Device
+/// @group  helpers
- * @return {List}           Minimum and maximum width
+/// @access private
- */
+/// @param  {String} $device Device
+/// @return {List}           Minimum and maximum width
+////
 @function break-select-device($device) {
   $current: $break-devices;
   @for $n from 1 through length($device) {
@@ -90,22 +114,25 @@ $break-devices: () !default;
   @return break-select-min-max($current);
 }
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Breakpoint mixins
+/// Breakpoint mixins
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+////
- * A minimum-maximum media query breakpoint
+/// A minimum-maximum media query breakpoint
- *
+///
- * @param {Number|List} $breakpoint Number or number pair
+/// @group  helpers
- */
+/// @access public
+/// @param {Number|List} $breakpoint Number or number pair
+////
 @mixin break-at($breakpoint) {
   @if type-of($breakpoint) == number {
     @media only screen and (min-width: $breakpoint) {
       @content;
     }
   } @elseif type-of($breakpoint) == list {
-    $min: nth($breakpoint, 1); $max: nth($breakpoint, 2);
+    $min: nth($breakpoint, 1);
+    $max: nth($breakpoint, 2);
     @if type-of($min) == number and type-of($max) == number {
       @media only screen and (min-width: $min) and (max-width: $max) {
         @content;
@@ -118,11 +145,13 @@ $break-devices: () !default;
   }
 }
 
-/*
+////
- * An orientation media query breakpoint
+/// An orientation media query breakpoint
- *
+///
- * @param {String} $breakpoint Orientation
+/// @group  helpers
- */
+/// @access public
+/// @param {String} $breakpoint Orientation
+////
 @mixin break-at-orientation($breakpoint) {
   @if type-of($breakpoint) == string {
     @media only screen and (orientation: $breakpoint) {
@@ -133,11 +162,13 @@ $break-devices: () !default;
   }
 }
 
-/*
+////
- * A maximum-aspect-ratio media query breakpoint
+/// A maximum-aspect-ratio media query breakpoint
- *
+///
- * @param {Number} $breakpoint Ratio
+/// @group  helpers
- */
+/// @access public
+/// @param {Number} $breakpoint Ratio
+////
 @mixin break-at-ratio($breakpoint) {
   @if type-of($breakpoint) == number {
     @media only screen and (max-aspect-ratio: $breakpoint) {
@@ -148,11 +179,13 @@ $break-devices: () !default;
   }
 }
 
-/*
+////
- * A minimum-maximum media query device breakpoint
+/// A minimum-maximum media query device breakpoint
- *
+///
- * @param {String|List} $breakpoint Device
+/// @group  helpers
- */
+/// @access public
+/// @param {String|List} $breakpoint Device
+////
 @mixin break-at-device($device) {
   @if type-of($device) == string {
     $device: $device,;
@@ -160,7 +193,8 @@ $break-devices: () !default;
   @if type-of($device) == list {
     $breakpoint: break-select-device($device);
     @if nth($breakpoint, 2) != null {
-      $min: nth($breakpoint, 1); $max: nth($breakpoint, 2);
+      $min: nth($breakpoint, 1);
+      $max: nth($breakpoint, 2);
       @media only screen and (min-width: $min) and (max-width: $max) {
         @content;
       }
@@ -172,11 +206,13 @@ $break-devices: () !default;
   }
 }
 
-/*
+////
- * A minimum media query device breakpoint
+/// A minimum media query device breakpoint
- *
+///
- * @param {String|List} $breakpoint Device
+/// @group  helpers
- */
+/// @access public
+/// @param {String|List} $breakpoint Device
+////
 @mixin break-from-device($device) {
   @if type-of($device) == string {
     $device: $device,;
@@ -192,11 +228,13 @@ $break-devices: () !default;
   }
 }
 
-/*
+////
- * A maximum media query device breakpoint
+/// A maximum media query device breakpoint
- *
+///
- * @param {String|List} $breakpoint Device
+/// @group  helpers
- */
+/// @access public
+/// @param {String|List} $breakpoint Device
+////
 @mixin break-to-device($device) {
   @if type-of($device) == string {
     $device: $device,;

src/assets/stylesheets/helpers/_px2em.scss

@@ -1,36 +1,38 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Pixel conversion helpers
+/// Pixel conversion helpers
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+////
- * Convert font size in px to em.
+/// Convert font size in px to em.
- *
+///
- * @param  {Number} $size Font size in px
+/// @group  helpers
- * @param  {Number} $base Base font size
+/// @access public
- * @return {Number}       Font size in em
+/// @param  {Number} $size Font size in px
- */
+/// @param  {Number} $base Base font size
+/// @return {Number}       Font size in em
+////
 @function px2em($size, $base: 16px) {
   @if unit($size) == px {
     @return ($size / $base) * 1.0em;
@@ -39,12 +41,15 @@
   }
 }
 
-/*
+////
- * Convert font size in px to rem.
+/// Convert font size in px to rem.
- *
+///
- * @param  {Number} $size Font size in px
+/// @group  helpers
- * @return {Number}       Font size in rem
+/// @access public
- */
+/// @param  {Number} $size Font size in px
+/// @param  {Number} $base Base font size
+/// @return {Number}       Font size in rem
+////
 @function px2rem($size, $base: 10px) {
   @if unit($size) == px {
     @return ($size / $base) * 1.0rem;

src/assets/stylesheets/layout/_base.scss

@@ -1,88 +1,82 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Grid
+/// Grid
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Stretch container to viewport
- * Stretch container to viewport
- */
 html {
   height: 100%;
+
+  /// [screen medium +] Set base font-size to 11px
+  @include break-from-device(screen medium) {
+    font-size: 68.75%;
+  }
+
+  /// [screen large +] Set base font-size to 12px
+  @include break-from-device(screen large) {
+    font-size: 75.00%;
+  }
 }
 
-/*
+/// Stretch body to container and leave room for footer.
- * Stretch body to container and leave room for footer.
- */
 body {
   position: relative;
   min-height: 100%;
 
-  /*
+  /// Lock body to viewport height (e.g. in search mode)
-   * Lock body to viewport height (e.g. in search mode)
-   */
   &.md-js__body--locked {
     height: 100%;
     overflow: hidden;
   }
 }
 
-/*
+/// Horizontal separators
- * Horizontal separators
- */
 hr {
   display: block;
-  height: 1px;
+  height: px2rem(1px);
   padding: 0;
   border: 0;
 }
 
-/*
+/// Template-wide grid
- * Template-wide grid
- */
 .md-grid {
   max-width: 120.0rem;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }
 
-/*
+/// Prevent collapse of margin when setting margin on child element
- * Prevent collapse of margin when setting margin on child element
- */
 .md-container,
 .md-main {
   overflow: auto;
 }
 
-/*
+/// Add top spacing to acount for header
- * Add top spacing to acount for header
- */
 .md-main {
   margin-top: 5.6rem;
 
-  /*
+  /// Bottom spacing to account for footer
-   * Bottom spacing to account for footer
-   */
   &__inner {
     margin-top: 3.0rem;
     margin-bottom: 9.2rem;
@@ -90,90 +84,74 @@ hr {
   }
 }
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Navigational elements
+/// Navigational elements
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Toggle checkbox
- * Toggle checkbox (should never be visible)
- */
 .md-toggle {
-  display: none !important;
+  display: none;
 }
 
-/*
+/// Overlay below expanded drawer
- * Overlay below expanded drawer
- */
 .md-overlay {
   position: fixed;
   top: 0;
   width: 0;
   height: 0;
-  z-index: 2;
+  transition: width   0.0s 0.25s,
-  opacity: 0;
+              height  0.0s 0.25s,
+              opacity 0.25s;
   background: $md-color-black--light;
-  transition: opacity .25s,
+  opacity: 0;
-              width    .0s .25s,
+  z-index: 2;
-              height   .0s .25s;
 
-  /* [tablet landscape -]: Trigger overlay */
+  /// [tablet landscape -]: Trigger overlay
   @include break-to-device(tablet landscape) {
 
-    /*
+    /// Expanded drawer
-     * Expanded drawer
+    .md-toggle--drawer:checked ~ & {
-     */
-    #md-toggle-drawer:checked ~ & {
       width: 100%;
       height: 100%;
+      transition: width   0.0s,
+                  height  0.0s,
+                  opacity 0.25s;
       opacity: 1;
-      transition: opacity .25s,
-                  width    .0s,
-                  height   .0s;
     }
   }
 }
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Flexible elements, implemented with table layout
+/// Flexible elements, implemented with table layout
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Flexible layout container
- * Flexible layout container
- */
 .md-flex {
   display: table;
 
-  /*
+  /// Flexible layout container cell/element
-   * Flexible layout container cell/element
-   */
   &__cell {
     display: table-cell;
     vertical-align: top;
 
-    /*
+    /// Shrink to minimum width
-     * Shrink to minimum width
-     */
     &--shrink {
       width: 1%;
     }
 
-    /*
+    /// Stretch to maximum width
-     * Stretch to maximum width
-     */
     &--stretch {
       display: table;
-      table-layout: fixed;
       width: 100%;
+      table-layout: fixed;
     }
   }
 
-  /*
+  /// Apply ellipsis in case of overflowing text
-   * Apply ellipsis in case of overflowing text
-   */
   &__ellipsis {
     display: table-cell;
-    overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 }

src/assets/stylesheets/layout/_content.scss

@@ -1,59 +1,53 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Main content
+/// Main content
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Content container
- * Content container
- */
 .md-content {
 
-  /* [tablet landscape +]: Add space for table of contents */
+  /// [tablet landscape +]: Add space for table of contents
   @include break-from-device(tablet landscape) {
     margin-right: 24.2rem;
   }
 
-  /* [screen small +]: Add space for table of contents */
+  /// [screen small +]: Add space for table of contents
   @include break-from-device(screen small) {
     margin-left: 24.2rem;
   }
 
-  /*
+  /// Define padding
-   * Define padding
-   */
   &__inner {
     margin: 2.4rem 1.6rem;
 
-    /* [screen small +]: Add space for table of contents */
+    /// [screen small +]: Add space for table of contents
     @include break-from-device(screen small) {
-      margin: 2.4rem 2.4rem;
+      margin: 2.4rem;
     }
   }
 
-  /*
+  /// Copyright and theme information
-   * Copyright and theme information
-   */
   &__copyright {
     display: block;
   }

src/assets/stylesheets/layout/_footer.scss

@@ -1,116 +1,96 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Footer
+/// Footer
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Application footer
- * Application footer
- */
 .md-footer {
   position: absolute;
-  width: 100%;
   bottom: 0;
+  width: 100%;
 
-  /*
+  /// Pagination container
-   * Pagination container
-   */
   &-pagination {
     background: $md-color-black;
     color: $md-color-white;
   }
 
-  /*
+  /// Footer navigation
-   * Link to previous and next page
-   */
   &-nav {
-    overflow: auto;
     padding: 0.4rem;
+    overflow: auto;
 
-    /*
+    /// Links to previous and next page
-     * Links to previous and next page
-     */
     &__link {
       padding-top: 2.8rem;
       padding-bottom: 0.8rem;
 
-      /* [mobile landscape +]: Set proportional width */
+      /// [mobile landscape +]: Set proportional width
       @include break-from-device(mobile landscape) {
         width: 50%;
       }
 
-      /*
+      /// Link to previous page
-       * Link to previous page
-       */
       &--prev {
-        float: left;
         width: 25%;
+        float: left;
 
-        /*
+        /// Title
-         * Title
-         */
         .md-footer-nav__title {
 
-          /* [mobile portrait -]: Hide title for previous page */
+          /// [mobile portrait -]: Hide title for previous page
           @include break-to-device(mobile portrait) {
             display: none;
           }
         }
       }
 
-      /*
+      /// Link to next page
-       * Link to next page
-       */
       &--next {
-        float: right;
         width: 75%;
+        float: right;
         text-align: right;
       }
     }
 
-    /*
+    /// Link icon
-     * Icon
-     */
     &__icon {
       display: inline-block;
-      font-size: 2.4rem;
-      padding: 0.8rem;
       margin: 0.4rem;
-      cursor: pointer;
+      padding: 0.8rem;
+      transition: background 0.25s;
       border-radius: 100%;
-      transition: background .25s;
+      font-size: 2.4rem;
+      cursor: pointer;
 
-      /*
+      /// Pushed/clicked icon
-       * Pushed/clicked icon
-       */
       &:active {
         background: $md-color-white--lightest;
       }
     }
 
-    /*
+    /// Link title
-     * Title
-     */
     &__title {
       position: relative;
       padding: 0 0.4rem;
@@ -118,17 +98,15 @@
       line-height: 4.8rem;
     }
 
-    /*
+    /// Link direction
-     * Direction
-     */
     &__direction {
       position: absolute;
-      left: 0;
       right: 0;
-      padding: 0 0.4rem;
+      left: 0;
       margin-top: -2.0rem;
-      font-size: 1.5rem;
+      padding: 0 0.4rem;
       color: $md-color-white--light;
+      font-size: 1.5rem;
     }
   }
 }

src/assets/stylesheets/layout/_header.scss

@@ -1,86 +1,74 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Header
+/// Header
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Application header (stays always on top)
- * Application header (stays always on top)
- */
 .md-header {
   @include z-depth(2);
 
   position: fixed;
   top: 0;
-  left: 0;
   right: 0;
+  left: 0;
   height: 5.6rem;
-  z-index: 1;
   background: $md-color-primary;
   color: $md-color-white;
+  z-index: 1;
 
-  /*
+  /// Navigation within header
-   * Navigation within header
-   */
   &-nav {
     padding: 0.4rem;
 
-    /*
+    /// Header icon
-     * Icon
-     */
     &__icon {
       display: inline-block;
       position: relative;
-      z-index: 1;
-      font-size: 2.4rem;
-      padding: 0.8rem;
       margin: 0.4rem;
-      cursor: pointer;
+      padding: 0.8rem;
+      transition: background 0.25s;
       border-radius: 100%;
-      transition: background .25s;
+      font-size: 2.4rem;
+      cursor: pointer;
+      z-index: 1;
 
-      /*
+      /// Pushed/clicked icon
-       * Pushed/clicked icon
-       */
       &:active {
         background: $md-color-white--lightest;
       }
 
-      /* [tablet +]: Hide the search icon */
+      /// [tablet +]: Hide the search icon from tablet
       @include break-from-device(tablet) {
 
-        /*
+        /// Search icon
-         * Search icon
-         */
         &.md-icon--search {
           display: none;
         }
       }
     }
 
-    /*
+    /// Header title
-     * Title
-     */
     &__title {
       padding: 0 2.0rem;
       font-size: 1.8rem;

src/assets/stylesheets/layout/_nav.scss

@@ -1,105 +1,84 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Navigation
+/// Navigation
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Nested navigation
- * Nested navigation
- */
 .md-nav {
 
-  /*
+  /// Set font sizes
-   * Set font sizes
+  &,
-   */
+  h3 {
-  &, h3 {
     font-size: ms(-1);
     line-height: 1.2;
   }
 
-  /*
+  /// Table of contents
-   * Table of contents
-   */
   &--toc {
     border-left: px2rem(4px) solid $md-color-primary;
   }
 
-  /*
+  /// List of items
-   * List of items
-   */
   &__list {
     list-style: none;
 
-    /*
+    /// 2nd+ level list
-     * 2nd+ level list
-     */
     & & {
       margin-left: 1.2rem;
     }
 
-    /*
+    /// Hide list by default
-     * Hide list by default
-     */
     .md-nav__toggle ~ & {
       max-height: 0;
       overflow: hidden;
     }
 
-    /*
+    /// Expand list, if toggle is checked
-     * Expand list, if toggle is checked
-     */
     .md-nav__toggle:checked ~ & {
       max-height: 100%;
     }
   }
 
-  /*
+  /// List item
-   * List item
-   */
   &__item {
     margin: 0.8rem 0 0;
     line-height: 1.6rem;
   }
 
-  /*
+  /// Link inside item
-   * Link inside item
-   */
   &__link {
     display: block;
-    overflow: hidden;
+    transition: color 0.125s;
     text-overflow: ellipsis;
-    transition: color .125s;
+    overflow: hidden;
 
-    /*
+    /// Marked item
-     * Marked item
-     */
     &--marked {
       color: $md-color-black--light;
     }
 
-    /*
+    /// Current or hovered item
-     * Current or hovered item
-     */
     &:hover,
     &:active,
     &--active {

src/assets/stylesheets/layout/_search.scss

@@ -1,42 +1,38 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Search
+/// Search
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Application search
- * Application search
- */
 .md-search {
   position: relative;
 
-  /*
+  /// Search overlay
-   * Search overlay
-   */
   &__overlay {
     display: none;
 
-    /* [mobile -]: Only show overlay on mobile */
+    /// [mobile -]: Only show overlay on mobile
     @include break-to-device(mobile) {
       display: block;
       position: absolute;
@@ -44,131 +40,112 @@
       left: 0.4rem;
       width: 4.0rem;
       height: 4.0rem;
+      transform-origin: center;
+      transition: transform 0.3s 0.1s,
+                  opacity   0.2s 0.2s;
+      border-radius: 100%;
+      background: #EEEEEE;
+      opacity: 0;
       overflow: hidden;
       z-index: 0;
-      opacity: 0;
-      background: #EEEEEE;
-      border-radius: 100%;
-      transform-orgin: center;
-      transition: opacity   .2s .2s,
-                  transform .3s .1s;
 
-      /*
+      /// Expanded overlay
-       * Expanded overlay
+      .md-toggle--search:checked ~ .md-header & {
-       */
-      #md-toggle-search:checked ~ .md-header & {
-        z-index: 1;
-        opacity: 1;
         transform: scale(40);
-        transition: opacity   .1s,
+        transition: transform 0.4s,
-                    transform .4s;
+                    opacity   0.1s;
+        opacity: 1;
+        z-index: 1;
       }
     }
   }
 
-  /*
+  /// Inner wrapper
-   * Inner wrapper
-   */
   &__inner {
     padding: 0.8rem 0.8rem 0;
 
-    /* [tablet +]: Header-embedded search */
+    /// [tablet +]: Header-embedded search
     @include break-from-device(tablet) {
       padding: 0.4rem;
     }
   }
 
-  /*
+  /// Search form
-   * Search form
-   */
   &__form {
     position: relative;
-    text-align: right;
     border-radius: px2rem(2px);
+    text-align: right;
 
-    /* [mobile -]: Add drop-shadow on mobile */
+    /// [mobile -]: Add drop-shadow on mobile
     @include break-to-device(mobile) {
       @include z-depth(2);
     }
   }
 
-  /*
+  /// Icon
-   * Icon
-   */
   &__icon {
     position: absolute;
     top: 0.8rem;
     left: 1.2rem;
+    transition: color 0.25s;
     font-size: 2.4rem;
-    transition: color .25s;
     cursor: pointer;
 
-
+    /// [mobile -]: Use back arrow as search icon
-    /* [mobile -]: Use back arrow as search icon */
     @include break-to-device(mobile) {
       top: 1.2rem;
 
-      /* Hack: @extend doesn't work in media queries, so override manually */
+      /// Hack: @extend doesn't work in media queries, so override manually
-      &:before {
+      &::before {
         content: "arrow_back";
       }
     }
   }
 
-  /*
+  /// Search field
-   * Search field
-   */
   &__input {
     padding: 0 0.8rem 0 6.4rem;
     border-radius: px2rem(2px);
 
-    /*
+    /// Placeholder and icon color in active state
-     * Placeholder and icon color in active state
-     */
     + .md-search__icon,
     &::placeholder {
       color: $md-color-black--light;
     }
 
-    /* [mobile -]: Full-screen search bar */
+    /// [mobile -]: Full-screen search bar
     @include break-to-device(mobile) {
       width: 100%;
       height: 4.8rem;
       font-size: 1.8rem;
     }
 
-    /* [tablet +]: Header-embedded search */
+    /// [tablet +]: Header-embedded search
     @include break-from-device(tablet) {
       width: 23.0rem;
       height: 4.0rem;
       padding-left: 4.8rem;
-      font-size: ms(0);
+      transition: width            0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0),
+                  background-color 0.25s,
+                  color            0.25s;
       background: $md-color-white--lightest;
       color: $md-color-white;
-      transition: color            .25s,
+      font-size: ms(0);
-                  background-color .25s,
-                  width            .25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
 
-      /*
+      /// Placeholder color
-       * Placeholder color
-       */
       + .md-search__icon,
       &::placeholder {
+        transition: color 0.25s;
         color: $md-color-white;
-        transition: color .25s;
       }
 
-      /*
+      /// Active search field
-       * Active search field
-       */
       &:focus {
+        width: 40.0rem;
         background: $md-color-white;
         color: $md-color-black;
-        width: 40.0rem;
 
-        /*
+        /// Placeholder and icon color in active state
-         * Placeholder and icon color in active state
-         */
         + .md-search__icon,
         &::placeholder {
           color: $md-color-black--light;

src/assets/stylesheets/layout/_sidebar.scss

@@ -1,78 +1,66 @@
-/*
+////
- * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
- *
+///
- * Permission is hereby granted, free of charge, to any person obtaining a copy
+/// Permission is hereby granted, free of charge, to any person obtaining a
- * of this software and associated documentation files (the "Software"), to
+/// copy of this software and associated documentation files (the "Software"),
- * deal in the Software without restriction, including without limitation the
+/// to deal in the Software without restriction, including without limitation
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * sell copies of the Software, and to permit persons to whom the Software is
+/// and/or sell copies of the Software, and to permit persons to whom the
- * furnished to do so, subject to the following conditions:
+/// Software is furnished to do so, subject to the following conditions:
- *
+///
- * The above copyright notice and this permission notice shall be included in
+/// The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
+/// all copies or substantial portions of the Software.
- *
+///
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// 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
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * IN THE SOFTWARE.
+/// DEALINGS
- */
+////
 
-/* ----------------------------------------------------------------------------
+/// ---------------------------------------------------------------------------
- * Sidebar
+/// Sidebar
- * ------------------------------------------------------------------------- */
+/// ---------------------------------------------------------------------------
 
-/*
+/// Sidebar content
- * Sidebar content
- */
 .md-sidebar {
   position: relative;
   width: 24.2rem;
   float: left;
   overflow: visible;
 
-  /*
+  /// Lock sidebar to container height (account for fixed header)
-   * Lock sidebar to container height (account for fixed header)
-   */
   &.md-js__sidebar--locked {
     position: fixed;
     top: 5.6rem;
   }
 
-  /* [tablet landscape -]: Convert navigation to drawer */
+  /// [tablet landscape -]: Convert navigation to drawer
   @include break-to-device(tablet landscape) {
 
-    /*
+    /// Render primary sidebar as a slideout container
-     * Render primary sidebar as a slideout container
-     */
     &--primary {
       position: fixed;
       top: 0;
       width: 24.2em;
       height: 100%;
-      z-index: 3;
-      background: $md-color-white;
-      transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1.0);
       transform: translate3d(-24.2em, 0, 0);
+      transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0);
+      background: $md-color-white;
+      z-index: 3;
 
-      /*
+      /// Just hide drawer, if browser doesn't support 3D transforms
-       * Just hide drawer, if browser doesn't support 3D transforms
-       */
       .no-csstransforms3d & {
         display: none;
       }
 
-      /*
+      /// Expanded drawer
-       * Expanded drawer
+      .md-toggle--drawer:checked ~ .md-container & {
-       */
-      #md-toggle-drawer:checked ~ .md-container & {
         transform: translate3d(0, 0, 0);
 
-        /*
+        /// Just show drawer, if browser doesn't support 3D transforms
-         * Just show drawer, if browser doesn't support 3D transforms
-         */
         .no-csstransforms3d & {
           display: block;
         }
@@ -80,25 +68,21 @@
     }
   }
 
-  /*
+  /// Secondary sidebar with table of contents
-   * Secondary sidebar with table of contents
-   */
   &--secondary {
     display: none;
 
-    /* [tablet landscape +]: Show table of contents next to body copy */
+    /// [tablet landscape +]: Show table of contents next to body copy
     @include break-from-device(tablet landscape) {
       display: block;
       float: right;
 
-      /*
+      /// Hack to align right in case of locked sidebar
-       * Hack to align right in case of locked sidebar
-       */
       &.md-js__sidebar--locked {
         margin-left: 100%;
         transform: translate(-100%, 0);
 
-        /* [screen small +]: Limit to grid */
+        /// [screen small +]: Limit to grid
         @include break-from-device(screen small) {
           margin-left: 120.0rem;
         }
@@ -106,59 +90,47 @@
     }
   }
 
-  /*
+  /// Wrapper for scrolling on overflow
-   * Wrapper for scrolling on overflow
-   */
   &__scrollwrap {
     margin: 2.4rem 0.4rem;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
 
-    /* [tablet landscape -]: Adjust margins */
+    /// [tablet landscape -]: Adjust margins
     @include break-to-device(tablet landscape) {
 
-      /*
+      /// Adjust margins for primary scrollbar
-       * Adjust margins for primary scrollbar
-       */
       .md-sidebar--primary & {
         margin: 0;
       }
     }
 
-    /*
+    /// Limit height to window, if JavaScript is available
-     * Limit height to window, if JavaScript is available
-     */
     .js & {
       position: absolute;
       top: 0;
-      left: 0;
-      bottom: 0;
       right: 0;
+      bottom: 0;
+      left: 0;
     }
 
-    /*
+    /// Override native scrollbar styles
-     * Override native scrollbar styles
-     */
     &::-webkit-scrollbar {
       width: 0.4rem;
       height: 0.4rem;
 
-      /*
+      /// Style scrollbar thumb
-       * Style scrollbar thumb
-       */
       &-thumb {
         background: $md-color-black--lighter;
       }
     }
   }
 
-  /*
+  /// Actual sidebar content
-   * Actual sidebar content
-   */
   &__inner {
     padding: 1.2rem;
 
-    /* [screen small +]: Add line for reference */
+    /// [screen small +]: Add line for reference
     @include break-from-device(screen small) {
       border-right: px2rem(1px) solid $md-color-black--lightest;
     }

src/base.html

@@ -84,11 +84,11 @@
   <body>
 
     <!-- State toggles -->
-    <input class="md-toggle" type="checkbox" id="md-toggle-drawer" />
+    <input class="md-toggle md-toggle--drawer" type="checkbox" id="drawer" />
-    <input class="md-toggle" type="checkbox" id="md-toggle-search" />
+    <input class="md-toggle md-toggle--search" type="checkbox" id="search" />
 
     <!-- Overlay for expanded drawer -->
-    <label class="md-overlay" for="md-toggle-drawer"></label>
+    <label class="md-overlay" for="drawer"></label>
 
     <!-- Application header -->
     {% include "header.html" %}

src/header.html

@@ -30,7 +30,7 @@
       <!-- Button to toggle drawer -->
       <div class="md-flex__cell md-flex__cell--shrink">
         <label class="md-icon md-icon--menu md-header-nav__icon"
-            for="md-toggle-drawer"></label>
+            for="drawer"></label>
       </div>
 
       <!-- Header title -->
@@ -43,15 +43,15 @@
       <!-- Button to open search dialogue -->
       <div class="md-flex__cell md-flex__cell--shrink md-search">
         <label class="md-icon md-icon--search md-header-nav__icon"
-            for="md-toggle-search"></label>
+            for="search"></label>
         <div class="md-search__overlay"></div>
         <div class="md-search__inner">
           <form class="md-search__form">
             <input type="text" class="md-search__input"
                 placeholder="Search" autocapitalize="off" autocorrect="off"
-                autocomplete="off" spellcheck="false" id="md-search" />
+                autocomplete="off" spellcheck="false" id="query" />
             <label class="md-icon md-icon--search md-search__icon"
-                for="md-search"></label>
+                for="query"></label>
             <div class="md-search__suggest">
               FOO<br />
               FOO<br />