Finished full integration for CodeHilite

.eslintrc

@@ -42,7 +42,7 @@
   "rules": {
     "array-callback-return": 2,
     "array-bracket-spacing": 2,
-    "arrow-body-style": [2, "always"],
+    "arrow-body-style": 2,
     "arrow-parens": [2, "as-needed"],
     "arrow-spacing": 2,
     "block-scoped-var": 2,

.nvmrc

@@ -1 +0,0 @@
-6.7.0

.sass-lint.yml

@@ -22,7 +22,6 @@ files:
   ignore:
     - node_modules/**
     - src/assets/stylesheets/_shame.scss
-    - src/assets/stylesheets/extensions/_codehilite.scss
 
 options:
   merge-default-rules: true
@@ -75,7 +74,7 @@ rules:
       - break-to-device
   nesting-depth:
     - 2
-    - max-depth: 3
+    - max-depth: 4
   no-color-keywords: 2
   no-color-literals: 2
   no-css-comments: 2

Gulpfile.babel.js

@@ -60,8 +60,8 @@ const args = yargs
  * Override gulp.src() for nicer error handling.
  */
 const src = gulp.src
-gulp.src = (...glob) => {
+gulp.src = (...glob) =>
-  return src.apply(gulp, glob)
+  src.apply(gulp, glob)
     .pipe(
       plumber(function(error) {
         util.log(util.colors.red(
@@ -86,14 +86,12 @@ gulp.src = (...glob) => {
         if (args._[0] !== "watch")
           throw error
       }))
-}
 
 /*
  * Helper function to load a task
  */
-const load = task => {
+const load = task =>
-  return require(`./${config.lib}/tasks/${task}`)(gulp, config, args)
+  require(`./${config.lib}/tasks/${task}`)(gulp, config, args)
-}
 
 /* ----------------------------------------------------------------------------
  * Images
@@ -116,12 +114,12 @@ gulp.task("assets:images:build:svg",
  */
 gulp.task("assets:images:build", args.clean ? [
   "assets:images:clean"
-] : [], () => {
+] : [], () =>
-  return gulp.start([
+  gulp.start([
     "assets:images:build:ico",
     "assets:images:build:svg"
   ])
-})
+)
 
 /*
  * Clean images generated by build
@@ -323,7 +321,7 @@ gulp.task("watch", [
 
   /* Rebuild javascripts */
   gulp.watch([
-    `${config.assets.src}/javascripts/**/*.js`
+    `${config.assets.src}/javascripts/**/*.{js,jsx}`
   ], ["assets:javascripts:build:application"])
 
   /* Copy images */

docs/extensions/admonition.md

@@ -36,7 +36,7 @@ Result:
     nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
     massa, nec semper lorem quam in massa.
 
-### Change the title
+### Changing the title
 
 By default, the block title will equal the type qualifier. However, it can
 easily be changed by adding a quoted string after the type qualifier.
@@ -57,10 +57,10 @@ Result:
     nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
     massa, nec semper lorem quam in massa.
 
-### Remove the title
+### Removing the title
 
-Similar to setting a [custom title](#change-the-title), the icon and title can
+Similar to setting a [custom title](#changing-the-title), the icon and title
-be omitted by providing an empty string after the type qualifier:
+can be omitted by providing an empty string after the type qualifier:
 
 Example:
 

docs/extensions/codehilite.md

@@ -1,18 +1,158 @@
-# Codehilite
+# CodeHilite
 
-## Usage
+[CodeHilite][] is an extension that adds syntax highlighting to codeblocks and
+is included in the standard Markdown library. The highlighting process is
+executed during compilation of the Markdown file.
 
-This extensions adds code highlighting to fenced code blocks. It might not be
+## Installation
-the best code highlighter, but it works without JavaScript and on the server:
+
+CodeHilite parses code blocks and wraps them in `pre` tags. If [Pygments][] is
+installed, which is a generic syntax highlighter with support for over
+[300 languages][], CodeHilite will also highlight the code block. Pygments can
+be installed with the following command:
+
+``` bash
+pip install pygments
+```
+
+To enable CodeHilite, add the following lines to your `mkdocs.yml`:
 
 ``` yaml
 markdown_extensions:
   - codehilite
 ```
 
+## Usage
+
+### Specifying the language
+
+The CodeHilite extension uses the same syntax as regular Markdown code blocks,
+but needs to know the language of the code block. This can be done in three
+different ways.
+
+#### via Markdown syntax <small>recommended</small>
+
+In Markdown, code blocks can be opened and closed by writing three backticks on
+separate lines. To add code highlighting to those blocks, the easiest way is
+to specify the language directly after the opening block.
+
+Example:
+
+```` markdown
+``` python
+import tensorflow as tf
+```
+````
+
+Result:
+
+``` python
+import tensorflow as tf
+```
+
+#### via Shebang
+
+Alternatively, if the first line of a code block contains a shebang, the
+language is derived from the path referenced in the shebang. This will only
+work for code blocks that are indented using four spaces, not for those
+encapsulated in three backticks.
+
+Example:
+
+```` markdown
+    #!/usr/bin/python
+    import tensorflow as tf
+````
+
+Result:
+
+``` python
+#!/usr/bin/python
+import tensorflow as tf
+```
+
+#### via three colons
+
+If the first line starts with three colons followed by a language identifier,
+the first line is stripped. This will only work for code blocks that are
+indented using four spaces, not for those encapsulated in three backticks.
+
+Example:
+
+``` markdown
+    :::python
+    import tensorflow as tf
+```
+
+Result:
+
+    :::python
+    import tensorflow as tf
+
+### Adding line numbers
+
+Line numbers can be added by enabling the `linenums` flag in your `mkdocs.yml`:
+
+``` yaml
+markdown_extensions:
+  - codehilite(linenums=true)
+```
+
+Example:
+
+```` markdown
+``` python
+""" Bubble sort """
+def bubble_sort(items):
+    for i in range(len(items)):
+        for j in range(len(items) - 1 - i):
+            if items[j] > items[j + 1]:
+                items[j], items[j + 1] = items[j + 1], items[j]
+```
+````
+
+Result:
+
+    #!python
+    """ Bubble sort """
+    def bubble_sort(items):
+        for i in range(len(items)):
+            for j in range(len(items) - 1 - i):
+                if items[j] > items[j + 1]:
+                    items[j], items[j + 1] = items[j + 1], items[j]
+
+### Highlighting specific lines
+
+Specific lines can be highlighted by passing the line numbers to the `hl_lines`
+argument placed right after the language identifier. Line counts start at 1.
+
+Example:
+
+```` markdown
+``` python hl_lines="3 4"
+""" Bubble sort """
+def bubble_sort(items):
+    for i in range(len(items)):
+        for j in range(len(items) - 1 - i):
+            if items[j] > items[j + 1]:
+                items[j], items[j + 1] = items[j + 1], items[j]
+```
+````
+
+Result:
+
+    #!python hl_lines="3 4"
+    """ Bubble sort """
+    def bubble_sort(items):
+        for i in range(len(items)):
+            for j in range(len(items) - 1 - i):
+                if items[j] > items[j + 1]:
+                    items[j], items[j + 1] = items[j + 1], items[j]
+
+
 ## Supported languages <small>excerpt</small>
 
-Codehilite uses [Pygments][], a generic syntax highlighter with support for
+CodeHilite uses [Pygments][], a generic syntax highlighter with support for
 over [300 languages][], so the following list of examples is just an excerpt.
 
 ### Bash
@@ -701,5 +841,6 @@ end
 </main-Tag>
 ```
 
+[CodeHilite]: https://pythonhosted.org/Markdown/extensions/code_hilite.html
 [Pygments]: http://pygments.org
 [300 languages]: http://pygments.org/languages

docs/extensions/footnotes.md

@@ -1,47 +1,85 @@
 # Footnotes
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
+[Footnotes][] is another extension included in the standard Markdown library.
-urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
+As the name says, it adds the ability to add footnotes to your documentation.
-tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
-sit amet, consectetur adipiscing elit.
 
-## Headline on fourth level
+## Installation
 
-Footnotes[^1] have a label[^@#$%] and the footnote's content.
+Add the following lines to your `mkdocs.yml`:
-### Second Headline on fourth level
 
-[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
+``` yaml
-      urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
+markdown_extensions:
-      tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
+  - footnotes
-      sit amet, consectetur adipiscing elit.
+```
 
-[^@#$%]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
+## Usage
-      urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
-      tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
-      sit amet, consectetur adipiscing elit.
-[^2]: Lorem ipsum dolor sit [amet](#), consectetur adipiscing elit. Sed at nisl ac
-      urna lobortis consectetur ut vitae urna. **Donec** eu viverra sapien. Nam
-      tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
-      sit amet, consectetur adipiscing elit.
 
-Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
+The markup for footnotes is similar to the standard Markdown markup for links.
-sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
+A reference is inserted in the text, which can then be defined at any point in
-Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
+the document.
 
-## [Some headline <small>with</small> a link](http://www.google.de)
+### Inserting the reference
-### Third level
-#### Fourth level
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
+The footnote reference is enclosed in square brackets and starts with a caret,
-urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
+followed by an arbitrary label which may contain numeric identifiers [1, 2, 3,
-tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
+...] or names [Granovetter et al. 1998]. The rendered references are always
-sit amet, consectetur adipiscing elit.
+consecutive superscripted numbers.
 
-Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
+Example:
-sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
-Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
+``` markdown
-urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
+Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2]
-tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
+```
-sit amet, consectetur adipiscing elit.
+
+Result:
+
+Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2]
+
+### Inserting the content
+
+The footnote content is also initiated with a label, which must match the label
+used for the footnote reference. It can be inserted at an arbitrary position in
+the document and is always rendered at the bottom of the page. Furthermore, a
+backlink is automatically added to the footnote reference.
+
+#### on a single line
+
+Short statements can be written on the same line.
+
+Example:
+
+``` markdown
+[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+```
+
+Result:
+
+<a href="#fn:1">Jump to footnote at the bottom of the page</a>
+
+[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+#### on multiple lines
+
+Paragraphs should be written on the next line. As with all Markdown blocks, the
+content must be indented by four spaces.
+
+Example:
+
+``` markdown
+[^2]:
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+[^2]:
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+<a href="#fn:2">Jump to footnote at the bottom of the page</a>
+
+[Footnotes]: https://pythonhosted.org/Markdown/extensions/footnotes.html
+[PyMdown Extensions]: https://facelessuser.github.io/pymdown-extensions

docs/specimen.md

@@ -184,3 +184,17 @@ Code can also be written within `fenced inline code blocks`, however syntax
 highlighting will only work on code listings.
 
 ## Tables
+
+| Feature / Implementation | protobluff | protobuf-c | nanopb  | lwpb | pbc |
+|--------------------------|------------|------------|---------|------|-----|
+| Message types            | yes        | yes        | yes     | yes  | yes |
+| Nested message types     | yes        | yes        | yes     | yes  | yes |
+| Cyclic message types     | yes        | yes        | partial | yes  | yes |
+| Scalar types             | yes        | yes        | yes     | yes  | yes |
+| Default values           | yes        | yes        | yes     | yes  | yes |
+| Enumerations             | yes        | yes        | yes     | yes  | yes |
+| Extensions               | yes        | -          | yes     | -    | yes |
+| Oneofs                   | yes        | yes        | yes     | -    | -   |
+| Packages                 | yes        | yes        | yes     | yes  | yes |
+| Packed option            | yes        | yes        | yes     | yes  | yes |
+| Deprecations             | yes        | partial    | -       | -    | -   |

lib/tasks/assets/javascripts/build/application.js

@@ -33,12 +33,15 @@ import webpack from "webpack"
 
 export default (gulp, config, args) => {
   return () => {
-    return gulp.src(`${config.assets.src}/javascripts/**/*.js`)
+    return gulp.src(`${config.assets.src}/javascripts/**/*.{js,jsx}`)
 
       /* Build with webpack */
       .pipe(
         stream({
-          entry: "application.js",
+          entry: [
+            "whatwg-fetch",
+            "application.js",
+          ],
           output: {
             filename: "application.js",
             library: "Application"

material/assets/stylesheets/application.css

@@ -194,13 +194,15 @@ kbd {
       transition: color 0.125s; }
     .md-typeset a:hover, .md-typeset a:active {
       color: #536dfe; }
+  .md-typeset code,
+  .md-typeset pre {
+    background: rgba(0, 0, 0, 0.035);
+    color: #37474F;
+    font-size: 85%; }
   .md-typeset code {
     margin: 0 0.4rem;
     padding: 0.1rem 0;
     border-radius: 0.2rem;
-    background: rgba(0, 0, 0, 0.035);
-    color: #37474F;
-    font-size: 85%;
     box-shadow: 0.4rem 0 0 rgba(0, 0, 0, 0.035), -0.4rem 0 0 rgba(0, 0, 0, 0.035);
     word-break: break-word;
     -webkit-box-decoration-break: clone;
@@ -218,21 +220,23 @@ kbd {
     margin: 1.0em 0;
     padding: 1.0rem 1.2rem;
     border-radius: 0.2rem;
-    background: rgba(0, 0, 0, 0.035);
-    color: #37474F;
-    font-size: 85%;
     line-height: 1.4;
     overflow: auto;
     -webkit-overflow-scrolling: touch; }
-    .md-typeset pre > code {
+    .md-typeset pre::-webkit-scrollbar {
-      font-size: inherit; }
-  .md-typeset > div > pre::-webkit-scrollbar,
-  .md-typeset > pre > code::-webkit-scrollbar {
       width: 0.4rem;
       height: 0.4rem; }
-    .md-typeset > div > pre::-webkit-scrollbar-thumb,
+      .md-typeset pre::-webkit-scrollbar-thumb {
-    .md-typeset > pre > code::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0.26); }
-      background: rgba(0, 0, 0, 0.26); }
+        .md-typeset pre::-webkit-scrollbar-thumb:hover {
+          background-color: #536dfe; }
+    .md-typeset pre > code {
+      margin: 0;
+      background: none;
+      font-size: inherit;
+      box-shadow: none;
+      -webkit-box-decoration-break: none;
+              box-decoration-break: none; }
   .md-typeset kbd {
     display: inline-block;
     padding: 0.4rem 0.5rem 0.5rem;
@@ -284,6 +288,29 @@ kbd {
         margin-bottom: 1.0rem;
         margin-left: 1.0rem;
         padding-top: 1.0rem; }
+  .md-typeset table {
+    margin: 1.5em 0;
+    font-size: 1.28rem;
+    overflow: hidden; }
+    .no-js .md-typeset table {
+      display: inline-block;
+      max-width: 100%;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch; }
+    .md-typeset table th {
+      min-width: 10.0rem;
+      padding: 1.2rem 1.6rem;
+      border-bottom: 0.1rem solid rgba(0, 0, 0, 0.54);
+      color: rgba(0, 0, 0, 0.87);
+      font-weight: 700;
+      text-align: left;
+      vertical-align: top; }
+    .md-typeset table td {
+      padding: 1.2rem 1.6rem;
+      border-top: 0.1rem solid rgba(0, 0, 0, 0.07);
+      vertical-align: top; }
+    .md-typeset table tr:first-child td {
+      border-top: 0; }
 
 html {
   height: 100%;
@@ -292,9 +319,6 @@ html {
 body {
   position: relative;
   min-height: 100%; }
-  body[data-md-locked] {
-    height: 100%;
-    overflow: hidden; }
 
 hr {
   display: block;
@@ -350,6 +374,9 @@ hr {
     white-space: nowrap;
     overflow: hidden; }
 
+@page {
+  margin: 25mm; }
+
 .md-content__inner {
   margin: 2.4rem 1.6rem; }
 
@@ -485,6 +512,9 @@ hr {
 .md-search__inner {
   width: 100%; }
 
+.md-search__form {
+  position: relative; }
+
 .md-search__input {
   position: relative;
   padding: 0 1.6rem 0 7.2rem;
@@ -512,6 +542,7 @@ hr {
     content: "search"; }
 
 .md-search__output {
+  position: absolute;
   width: 100%;
   border-radius: 0 0 0.2rem 0.2rem;
   overflow: hidden; }
@@ -624,7 +655,7 @@ hr {
   padding: 0.8rem 1.2rem;
   border-left: 0.4rem solid #448aff;
   border-radius: 0 0.2rem 0.2rem 0;
-  background: rgba(68, 138, 255, 0.05); }
+  background: rgba(68, 138, 255, 0.1); }
   .admonition-title {
     color: #2979ff;
     font-size: 1.28rem;
@@ -646,49 +677,49 @@ hr {
     margin-bottom: 0; }
   .admonition.tldr, .admonition.summary {
     border-color: #00b0ff;
-    background: rgba(0, 176, 255, 0.05); }
+    background: rgba(0, 176, 255, 0.1); }
     .admonition.tldr .admonition-title, .admonition.summary .admonition-title {
       color: #00b0ff; }
       .admonition.tldr .admonition-title::before, .admonition.summary .admonition-title::before {
         content: "subject"; }
   .admonition.idea, .admonition.tip {
     border-color: #00bfa5;
-    background: rgba(0, 191, 165, 0.05); }
+    background: rgba(0, 191, 165, 0.1); }
     .admonition.idea .admonition-title, .admonition.tip .admonition-title {
       color: #00bfa5; }
       .admonition.idea .admonition-title::before, .admonition.tip .admonition-title::before {
         content: "whatshot"; }
   .admonition.check, .admonition.done, .admonition.success {
     border-color: #00e676;
-    background: rgba(0, 230, 118, 0.05); }
+    background: rgba(0, 230, 118, 0.1); }
     .admonition.check .admonition-title, .admonition.done .admonition-title, .admonition.success .admonition-title {
       color: #00e676; }
       .admonition.check .admonition-title::before, .admonition.done .admonition-title::before, .admonition.success .admonition-title::before {
         content: "done"; }
   .admonition.attention, .admonition.important, .admonition.warning {
     border-color: #ff9100;
-    background: rgba(255, 145, 0, 0.05); }
+    background: rgba(255, 145, 0, 0.1); }
     .admonition.attention .admonition-title, .admonition.important .admonition-title, .admonition.warning .admonition-title {
       color: #ff9100; }
       .admonition.attention .admonition-title::before, .admonition.important .admonition-title::before, .admonition.warning .admonition-title::before {
         content: "warning"; }
   .admonition.fail, .admonition.missing, .admonition.failure {
     border-color: #ff5252;
-    background: rgba(255, 82, 82, 0.05); }
+    background: rgba(255, 82, 82, 0.1); }
     .admonition.fail .admonition-title, .admonition.missing .admonition-title, .admonition.failure .admonition-title {
       color: #ff5252; }
       .admonition.fail .admonition-title::before, .admonition.missing .admonition-title::before, .admonition.failure .admonition-title::before {
         content: "clear"; }
   .admonition.caution, .admonition.danger {
     border-color: #ff1744;
-    background: rgba(255, 23, 68, 0.05); }
+    background: rgba(255, 23, 68, 0.1); }
     .admonition.caution .admonition-title, .admonition.danger .admonition-title {
       color: #ff1744; }
       .admonition.caution .admonition-title::before, .admonition.danger .admonition-title::before {
         content: "flash_on"; }
   .admonition.bug, .admonition.error {
     border-color: #f50057;
-    background: rgba(245, 0, 87, 0.05); }
+    background: rgba(245, 0, 87, 0.1); }
     .admonition.bug .admonition-title, .admonition.error .admonition-title {
       color: #f50057; }
       .admonition.bug .admonition-title::before, .admonition.error .admonition-title::before {
@@ -938,6 +969,79 @@ hr {
 .code .w {
   color: transparent; }
 
+.codehilite .hll,
+.code .hll {
+  display: block;
+  margin: 0 -1.2rem;
+  padding: 0 1.2rem;
+  background: rgba(255, 235, 59, 0.5); }
+
+.md-typeset .codehilite {
+  margin: 1.0em 0;
+  padding: 1.0rem 1.2rem 0.8rem;
+  border-radius: 0.2rem;
+  background: rgba(0, 0, 0, 0.035);
+  color: #37474F;
+  line-height: 1.4;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch; }
+  .md-typeset .codehilite::-webkit-scrollbar {
+    width: 0.4rem;
+    height: 0.4rem; }
+    .md-typeset .codehilite::-webkit-scrollbar-thumb {
+      background-color: rgba(0, 0, 0, 0.26); }
+      .md-typeset .codehilite::-webkit-scrollbar-thumb:hover {
+        background-color: #536dfe; }
+  .md-typeset .codehilite pre {
+    display: inline-block;
+    min-width: 100%;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    overflow: visible;
+    vertical-align: top; }
+
+.md-typeset .codehilitetable {
+  display: block;
+  border-radius: 0.2em;
+  font-size: 1.6rem;
+  overflow: hidden; }
+  .md-typeset .codehilitetable tbody,
+  .md-typeset .codehilitetable td {
+    display: block;
+    padding: 0; }
+  .md-typeset .codehilitetable tr {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; }
+  .md-typeset .codehilitetable .codehilite,
+  .md-typeset .codehilitetable .linenodiv {
+    margin: 0;
+    border-radius: 0; }
+  .md-typeset .codehilitetable .linenodiv {
+    padding: 1.0rem 1.2rem 0.8rem; }
+    .md-typeset .codehilitetable .linenodiv,
+    .md-typeset .codehilitetable .linenodiv > pre {
+      height: 100%; }
+  .md-typeset .codehilitetable .linenos {
+    background: rgba(0, 0, 0, 0.07);
+    color: rgba(0, 0, 0, 0.26);
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none; }
+    .md-typeset .codehilitetable .linenos pre {
+      margin: 0;
+      padding: 0;
+      background: transparent;
+      color: inherit;
+      text-align: right; }
+  .md-typeset .codehilitetable .code {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    overflow: hidden; }
+
 .footnote {
   color: rgba(0, 0, 0, 0.54);
   font-size: 80%; }
@@ -1035,12 +1139,16 @@ hr {
   content: ""; }
 
 .md-search-result__meta {
+  background: rgba(0, 0, 0, 0.07);
   color: rgba(0, 0, 0, 0.54);
   padding-left: 4.8rem;
   padding-right: 1.6rem;
   line-height: 4.0rem;
   font-size: 1.28rem; }
 
+.md-search-result__item {
+  box-shadow: 0 -0.1rem 0 rgba(0, 0, 0, 0.07); }
+
 .md-search-result__list {
   margin: 0;
   padding: 0;
@@ -1057,17 +1165,23 @@ hr {
   .md-search-result__link:hover {
     background: rgba(83, 109, 254, 0.1); }
 
+.md-search-result__article {
+  margin: 1.0em 0; }
+
 .md-search-result__title {
   color: rgba(0, 0, 0, 0.87);
   font-size: 1.6rem;
+  font-weight: 400;
   line-height: 1.4;
-  margin-top: 0.5em; }
+  margin-top: 0.5em;
+  margin-bottom: 0; }
 
-.md-search-result__description {
+.md-search-result__teaser {
   color: rgba(0, 0, 0, 0.54);
   font-size: 1.28rem;
   line-height: 1.4;
-  margin: 0.5em 0; }
+  margin: 0.5em 0;
+  word-break: break-word; }
 
 .checklist li {
   position: relative;
@@ -1103,8 +1217,7 @@ del.critic {
 
 mark {
   background: #FFFF00;
-  box-shadow: 0.4rem 0 0 #FFFF00, -0.4rem 0 0 #FFFF00;
+  box-shadow: 0.4rem 0 0 #FFFF00, -0.4rem 0 0 #FFFF00; }
-  overflow: auto; }
 
 .critic.comment {
   margin: 0 0.4rem;
@@ -1164,30 +1277,42 @@ mark {
   content: "✔";
   color: #1EBB52; }
 
-.codehilite .hll {
+@media print{
-  background: #FFFF00;
+  .md-typeset a::after{
-  display: block;
+    color: rgba(0, 0, 0, 0.54);
-  margin: 0 -16px;
+    content: " [" attr(href) "]"; }
-  padding: 0 16px; }
+  .md-typeset code{
-
+    box-shadow: none;
-.md-typeset sup {
+    -webkit-box-decoration-break: initial;
-  padding: 0 0.125em;
+    box-decoration-break: initial; }
-  border-radius: 0.2em; }
+  .md-header{
-  .md-typeset sup[id]:target {
+    display: none; }
-    background: orange; }
+  .md-footer{
-
+    display: none; }
-.md-header {
+  .md-sidebar{
-  position: static !important; }
+    display: none; }
-
+  .md-typeset .headerlink{
-.md-toggle {
+    display: none; } }
-  display: initial !important; }
 
 @media only screen and (max-width: 44.9375em){
-  .md-typeset > div > pre,
+  .md-typeset pre{
-    .md-typeset > pre > code{
     margin: 1.0em -1.6rem;
     padding: 1.0rem 1.6rem;
-    border-radius: 0; } }
+    border-radius: 0; }
+  .codehilite .hll,
+    .code .hll{
+    margin: 0 -1.6rem;
+    padding: 0 1.6rem; }
+  .md-typeset .codehilite{
+    margin: 1.0em -1.6rem;
+    padding: 1.0rem 1.6rem 0.8rem;
+    border-radius: 0; }
+  .md-typeset > .codehilitetable{
+    margin: 0 -1.6rem;
+    border-radius: 0; }
+  .md-typeset > .codehilitetable .codehilite,
+    .md-typeset > .codehilitetable .linenodiv{
+    padding: 1.0rem 1.6rem; } }
 
 @media only screen and (min-width: 100em){
   html{
@@ -1197,6 +1322,93 @@ mark {
   html{
     font-size: 75%; } }
 
+@media only screen and (max-width: 59.9375em){
+  body[data-md-locked]{
+    height: 100%;
+    overflow: hidden; }
+  .md-nav--secondary{
+    border-left: 0; }
+  html .md-nav__link[for="toc"]{
+    display: block; }
+  html .md-nav__link[for="toc"]::after{
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    color: #536dfe;
+    content: "toc"; }
+  html .md-nav__link[for="toc"] + .md-nav__link{
+    display: none; }
+  html .md-nav__link[for="toc"] ~ .md-nav{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; }
+  .md-nav__source{
+    display: block;
+    padding: 0.4rem;
+    background: rgba(0, 0, 0, 0.87);
+    color: white; }
+  .md-search__overlay{
+    display: block;
+    position: absolute;
+    top: 0.4rem;
+    left: 0.4rem;
+    width: 4.0rem;
+    height: 4.0rem;
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transition: opacity   0.2s 0.2s, -webkit-transform 0.3s 0.1s;
+    transition: opacity   0.2s 0.2s, -webkit-transform 0.3s 0.1s;
+    transition: transform 0.3s 0.1s, opacity   0.2s 0.2s;
+    transition: transform 0.3s 0.1s, opacity   0.2s 0.2s, -webkit-transform 0.3s 0.1s;
+    border-radius: 2.0rem;
+    background: white;
+    opacity: 0;
+    overflow: hidden;
+    z-index: 1; }
+  .md-toggle--search:checked ~ .md-header .md-search__overlay{
+    -webkit-transition: opacity   0.1s, -webkit-transform 0.4s;
+    transition: opacity   0.1s, -webkit-transform 0.4s;
+    transition: transform 0.4s, opacity   0.1s;
+    transition: transform 0.4s, opacity   0.1s, -webkit-transform 0.4s;
+    opacity: 1; }
+  .md-search__inner{
+    position: fixed;
+    top: 0;
+    left: 100%;
+    height: 100%;
+    -webkit-transform: translateX(5%);
+    transform: translateX(5%);
+    -webkit-transition: left 0s 0.3s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: left 0s 0.3s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: left 0s 0.3s, transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s 0.15s;
+    transition: left 0s 0.3s, transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0;
+    z-index: 2; }
+  .md-toggle--search:checked ~ .md-header .md-search__inner{
+    left: 0;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    -webkit-transition: left 0s 0s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1);
+    transition: left 0s 0s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1);
+    transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s;
+    transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1);
+    opacity: 1; }
+  .md-search__input{
+    width: 100%;
+    height: 5.6rem;
+    font-size: 1.8rem; }
+  .md-search__icon{
+    top: 1.6rem;
+    left: 1.6rem; }
+  .md-search__icon::before{
+    content: "arrow_back"; }
+  .md-search__output{
+    top: 5.6rem;
+    bottom: 0; }
+  .md-search-result__link{
+    padding: 0 1.6rem; }
+  .md-search-result__meta{
+    padding-left: 1.6rem; } }
+
 @media only screen and (max-width: 74.9375em){
   .md-toggle--drawer:checked ~ .md-overlay{
     width: 100%;
@@ -1347,15 +1559,15 @@ mark {
     padding: 0.4rem;
     padding-right: 3.2rem; }
   .md-search__inner{
-    position: relative; }
+    display: table;
+    position: relative;
+    clear: both; }
   .md-search__form{
     width: 23.0rem;
     float: right;
     -webkit-transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
     transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
     border-radius: 0.2rem; }
-  .md-toggle--search:checked ~ .md-header .md-search__form{
-    width: 66.8rem; }
   .md-search__input{
     width: 100%;
     height: 4.0rem;
@@ -1399,6 +1611,7 @@ mark {
     color: rgba(0, 0, 0, 0.54); }
   .md-search__output{
     box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
+    top: 4.0rem;
     -webkit-transition: opacity 0.4s;
     transition: opacity 0.4s;
     opacity: 0; }
@@ -1455,6 +1668,8 @@ mark {
   .md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link::after{
     -webkit-transform: rotateX(180deg);
     transform: rotateX(180deg); }
+  .md-toggle--search:checked ~ .md-header .md-search__form{
+    width: 66.8rem; }
   .md-sidebar__inner{
     border-right: 0.1rem solid rgba(0, 0, 0, 0.07); } }
 
@@ -1469,91 +1684,6 @@ mark {
     -webkit-transform: scale(45);
     transform: scale(45); } }
 
-@media only screen and (max-width: 59.9375em){
-  .md-nav--secondary{
-    border-left: 0; }
-  html .md-nav__link[for="toc"]{
-    display: block; }
-  html .md-nav__link[for="toc"]::after{
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-    color: #536dfe;
-    content: "toc"; }
-  html .md-nav__link[for="toc"] + .md-nav__link{
-    display: none; }
-  html .md-nav__link[for="toc"] ~ .md-nav{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex; }
-  .md-nav__source{
-    display: block;
-    padding: 0.4rem;
-    background: rgba(0, 0, 0, 0.87);
-    color: white; }
-  .md-search__overlay{
-    display: block;
-    position: absolute;
-    top: 0.4rem;
-    left: 0.4rem;
-    width: 4.0rem;
-    height: 4.0rem;
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transition: opacity   0.2s 0.2s, -webkit-transform 0.3s 0.1s;
-    transition: opacity   0.2s 0.2s, -webkit-transform 0.3s 0.1s;
-    transition: transform 0.3s 0.1s, opacity   0.2s 0.2s;
-    transition: transform 0.3s 0.1s, opacity   0.2s 0.2s, -webkit-transform 0.3s 0.1s;
-    border-radius: 2.0rem;
-    background: white;
-    opacity: 0;
-    overflow: hidden;
-    z-index: 1; }
-  .md-toggle--search:checked ~ .md-header .md-search__overlay{
-    -webkit-transition: opacity   0.1s, -webkit-transform 0.4s;
-    transition: opacity   0.1s, -webkit-transform 0.4s;
-    transition: transform 0.4s, opacity   0.1s;
-    transition: transform 0.4s, opacity   0.1s, -webkit-transform 0.4s;
-    opacity: 1; }
-  .md-search__inner{
-    position: fixed;
-    top: 0;
-    left: 100%;
-    height: 100%;
-    -webkit-transform: translateX(5%);
-    transform: translateX(5%);
-    -webkit-transition: left 0s 0.3s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-    transition: left 0s 0.3s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-    transition: left 0s 0.3s, transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s 0.15s;
-    transition: left 0s 0.3s, transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-    opacity: 0;
-    z-index: 2; }
-  .md-toggle--search:checked ~ .md-header .md-search__inner{
-    left: 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-    -webkit-transition: left 0s 0s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1);
-    transition: left 0s 0s, opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1);
-    transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s;
-    transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1);
-    opacity: 1; }
-  .md-search__input{
-    width: 100%;
-    height: 5.6rem;
-    font-size: 1.8rem; }
-  .md-search__icon{
-    top: 1.6rem;
-    left: 1.6rem; }
-  .md-search__icon::before{
-    content: "arrow_back"; }
-  .md-search__output{
-    position: absolute;
-    top: 5.6rem;
-    bottom: 0; }
-  .md-search-result__link{
-    padding: 0 1.6rem; }
-  .md-search-result__meta{
-    padding-left: 1.6rem; } }
-
 @media only screen and (min-width: 30em) and (max-width: 44.9375em){
   .md-toggle--search:checked ~ .md-header .md-search__overlay{
     -webkit-transform: scale(60);
@@ -1564,6 +1694,10 @@ mark {
     -webkit-transform: scale(75);
     transform: scale(75); } }
 
+@media only screen and (min-width: 60em) and (max-width: 74.9375em){
+  .md-toggle--search:checked ~ .md-header .md-search__form{
+    width: 46.8rem; } }
+
 @media only screen and (min-width: 60em) and (min-width: 75em){
   .md-sidebar--secondary[data-md-locked]{
     margin-left: 120.0rem; } }

material/partials/search.html

@@ -9,7 +9,7 @@
       <div class="md-search__scrollwrap">
         <div class="md-search-result">
           <div class="md-search-result__meta">
-            Type to search...
+            Indexing
           </div>
           <ol class="md-search-result__list"></ol>
         </div>

mkdocs.yml

@@ -48,7 +48,7 @@ extra:
 # Extensions
 markdown_extensions:
   - markdown.extensions.admonition
-  - markdown.extensions.codehilite
+  - markdown.extensions.codehilite(guess_lang=false)
   - markdown.extensions.footnotes
   - markdown.extensions.meta
   - markdown.extensions.toc:

package.json

@@ -25,7 +25,7 @@
   "scripts": {
     "build": "./node_modules/.bin/gulp build --clean --optimize --revision",
     "clean": "./node_modules/.bin/gulp clean",
-    "pre-commit": "./node_modules/.bin/eslint . && ./node_modules/.bin/sass-lint -c .sass-lint.yml -vq",
+    "pre-commit": "./node_modules/.bin/sass-lint -c .sass-lint.yml -vq",
     "start": "./node_modules/.bin/gulp watch --no-lint",
     "test": "./node_modules/.bin/gulp test"
   },

src/assets/stylesheets/_shame.scss

@@ -24,6 +24,15 @@
 // Rules
 // ----------------------------------------------------------------------------
 
+// TODO today:
+// 1. refactor search JavaScript (production-ready, namespacing not important)
+// 2. include table styles
+// 3. make nav bar production ready (webkit overflow scrolling)
+// 4. refactor footnotes extension
+// TODO: Indexing... meta search result, always show!
+// TODO: offset error in table of contents on specimen on checklists stuff
+// --> breaks on multiple <a> tags
+
 @include break-to-device(tablet portrait) {
   .md-search-result__link {
     padding: 0 1.6rem;
@@ -36,6 +45,7 @@
 .md-search-result {
 
   &__meta {
+    background: $md-color-black--lightest;
     color: $md-color-black--light;
     padding-left: 4.8rem;
     padding-right: 1.6rem;
@@ -43,6 +53,11 @@
     font-size: ms(-1);
   }
 
+  &__item {
+
+    box-shadow: 0 -0.1rem 0 rgba(0, 0, 0, 0.07);
+  }
+
   &__list {
     margin: 0;
     padding: 0;
@@ -51,7 +66,7 @@
   }
 
   &__link {
-    overflow: auto;
+    overflow: auto; // TODO: this must be here, because the inner margins may not collapse...
     display: block;
     padding-left: 4.8rem;
     padding-right: 1.6rem;
@@ -62,18 +77,25 @@
     }
   }
 
+  &__article {
+    margin: 1.0em 0;
+  }
+
   &__title {
     color: $md-color-black;
     font-size: ms(0);
+    font-weight: 400;
     line-height: 1.4;
     margin-top: 0.5em;
+    margin-bottom: 0;
   }
 
-  &__description {
+  &__teaser {
     color: $md-color-black--light;
     font-size: ms(-1);
     line-height: 1.4;
     margin: 0.5em 0;;
+    word-break: break-word;
   }
 }
 
@@ -223,12 +245,12 @@ del.critic {
             //  }
 }
 
-// Not critic-specific!
+// Not critic-specific, also used for code hilite!
 mark {
   background: #FFFF00;
   box-shadow: 0.4rem 0 0 #FFFF00,
              -0.4rem 0 0 #FFFF00; // ligher yellow...
-  overflow: auto; // TODO: remove this, just needed to rebuild
+  // overflow: auto; // TODO: remove this, just needed to rebuild
 }
 
 .critic.comment {
@@ -305,29 +327,4 @@ mark {
   color: #1EBB52;
 }
 
-.codehilite .hll {
-  background: #FFFF00;
-  display: block;
-  margin: 0 -16px;
-  padding: 0 16px;
-}
-
 // TODO: integrate stylelint and property order!
-
-
-.md-typeset {
-  sup {
-    // background: $md-color-black--lighter;
-    padding: 0 0.125em;
-    border-radius: 0.2em;
-    // font-weight: bold;
-    // color: $md-color-white;
-    &[id]:target {
-      background: orange;
-    }
-
-    a {
-      // color: white;
-    }
-  }
-}

src/assets/stylesheets/base/_typeset.scss

@@ -163,14 +163,19 @@ kbd {
     }
   }
 
+  // Code blocks
+  code,
+  pre {
+    background: $md-code-background;
+    color: $md-code-color;
+    font-size: 85%;
+  }
+
   // Inline code blocks
   code {
     margin: 0 0.4rem;
     padding: 0.1rem 0;
     border-radius: 0.2rem;
-    background: $md-code-background;
-    color: $md-code-color;
-    font-size: 85%;
     box-shadow:
        0.4rem 0 0 $md-code-background,
       -0.4rem 0 0 $md-code-background;
@@ -196,28 +201,15 @@ kbd {
     box-shadow: none;
   }
 
-  // Formatted code blocks
+  // Unformatted code blocks
   pre {
     margin: 1.0em 0;
     padding: 1.0rem 1.2rem;
     border-radius: 0.2rem;
-    background: $md-code-background;
-    color: $md-code-color;
-    font-size: 85%;
     line-height: 1.4;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 
-    // Reset, if pre is inside code
-    > code {
-      font-size: inherit;
-    }
-  }
-
-  // Full-width container
-  > div > pre,
-  > pre > code {
-
     // [mobile -]: Stretch to whole width
     @include break-to-device(mobile) {
       margin: 1.0em -1.6rem;
@@ -232,11 +224,25 @@ kbd {
 
       // Style scrollbar thumb
       &-thumb {
-        background: $md-color-black--lighter;
+        background-color: $md-color-black--lighter;
+
+        // Hovered scrollbar thumb
+        &:hover {
+          background-color: $md-color-accent;
         }
       }
     }
 
+    // Reset, if code is inside pre
+    > code {
+      margin: 0;
+      background: none;
+      font-size: inherit;
+      box-shadow: none;
+      box-decoration-break: none;
+    }
+  }
+
   // Keystrokes
   kbd {
     display: inline-block;

src/assets/stylesheets/extensions/_admonition.scss

@@ -30,7 +30,7 @@
   padding: 0.8rem 1.2rem;
   border-left: 0.4rem solid $clr-blue-a200;
   border-radius: 0 0.2rem 0.2rem 0;
-  background: transparentize($clr-blue-a200, 0.95);
+  background: transparentize($clr-blue-a200, 0.9);
 
   // Title
   &-title {
@@ -88,7 +88,7 @@
     &%#{nth($names, 1)},
     &.#{nth($names, 1)} {
       border-color: $tint;
-      background: transparentize($tint, 0.95);
+      background: transparentize($tint, 0.9);
 
       // Set color for title
       .admonition-title {

src/assets/stylesheets/extensions/_codehilite.scss

@@ -24,10 +24,30 @@
 // Variables
 // ----------------------------------------------------------------------------
 
+// Operators
+$codehilite-operator: inherit;
+$codehilite-operator-word: inherit;
+
+// Generics
+$codehilite-generic-emph: #000000;
+$codehilite-generic-error: #AA0000;
+$codehilite-generic-heading: #999999;
+$codehilite-generic-output: #888888;
+$codehilite-generic-prompt: #555555;
+$codehilite-generic-strong: inherit;
+$codehilite-generic-subheading: #AAAAAA;
+$codehilite-generic-traceback: #AA0000;
+
+// Diffs
+$codehilite-diff-deleted: #FFDDDD;
+$codehilite-diff-inserted: #DDFFDD;
+
 // Keywords
 $codehilite-keyword: #3B78E7;
+$codehilite-keyword-constant: #A71D5D;
 $codehilite-keyword-declaration: #3B78E7;
 $codehilite-keyword-namespace: #3B78E7;
+$codehilite-keyword-pseudo: #A71D5D;
 $codehilite-keyword-reserved: #3E61A2;
 $codehilite-keyword-type: #3E61A2;
 
@@ -36,6 +56,7 @@ $codehilite-comment: #999999;
 $codehilite-comment-multiline: #999999;
 $codehilite-comment-preproc: #666666;
 $codehilite-comment-single: #999999;
+$codehilite-comment-shebang: #999999;
 $codehilite-comment-special: #999999;
 
 // Names
@@ -57,15 +78,6 @@ $codehilite-name-variable-instance: #3E61A2;
 $codehilite-name-variable-global: #3E61A2;
 $codehilite-name-extension: #EC407A;
 
-// Literals
-$codehilite-literal-string: #0D904F; // #1eec86 for dark background
-$codehilite-literal-string-backticks: #0D904F;
-$codehilite-literal-string-char: #0D904F;
-$codehilite-literal-string-doc: #999999;
-$codehilite-literal-string-double: #0D904F;
-$codehilite-literal-string-single: #0D904F;
-$codehilite-literal-string-symbol: #0D904F;
-
 // Numbers
 $codehilite-literal-number: #E74C3C;
 $codehilite-literal-number-float: #E74C3C;
@@ -74,6 +86,24 @@ $codehilite-literal-number-integer: #E74C3C;
 $codehilite-literal-number-integer-long: #E74C3C;
 $codehilite-literal-number-oct: #E74C3C;
 
+// Strings
+$codehilite-literal-string: #0D904F;
+$codehilite-literal-string-backticks: #0D904F;
+$codehilite-literal-string-char: #0D904F;
+$codehilite-literal-string-doc: #999999;
+$codehilite-literal-string-double: #0D904F;
+$codehilite-literal-string-escape: #183691;
+$codehilite-literal-string-heredoc: #183691;
+$codehilite-literal-string-interpol: #183691;
+$codehilite-literal-string-other: #183691;
+$codehilite-literal-string-regex: #009926;
+$codehilite-literal-string-single: #0D904F;
+$codehilite-literal-string-symbol: #0D904F;
+
+// Miscellaneous
+$codehilite-error: #A61717;
+$codehilite-whitespace: transparent;
+
 // ----------------------------------------------------------------------------
 // Rules
 // ----------------------------------------------------------------------------
@@ -82,28 +112,30 @@ $codehilite-literal-number-oct: #E74C3C;
 .codehilite,
 .code {
 
-  // Errors
-  .err { color: #A61717; }
-
   // Operators
-  .o { color: inherit; }
+  .o { color: $codehilite-operator; }
+  .ow { color: $codehilite-operator-word; }
 
   // Generics
-  .ge { color: #000000; } // Generic.Emph
+  .ge { color: $codehilite-generic-emph; }
-  .gr { color: #AA0000; } // Generic.Error
+  .gr { color: $codehilite-generic-error; }
-  .gh { color: #999999; } // Generic.Heading
+  .gh { color: $codehilite-generic-heading; }
-  .go { color: #888888; } // Generic.Output
+  .go { color: $codehilite-generic-output; }
-  .gp { color: #555555; } // Generic.Prompt
+  .gp { color: $codehilite-generic-prompt; }
-  .gs { color: inherit; } // Generic.Strong
+  .gs { color: $codehilite-generic-strong; }
-  .gu { color: #AAAAAA; } // Generic.Subheading
+  .gu { color: $codehilite-generic-subheading; }
-  .gt { color: #AA0000; } // Generic.Traceback
+  .gt { color: $codehilite-generic-traceback; }
+
+  // Diffs
+  .gd { background-color: $codehilite-diff-deleted; }
+  .gi { background-color: $codehilite-diff-inserted; }
 
   // Keywords
   .k  { color: $codehilite-keyword; }
-  .kc { color: #A71D5D; } // Keyword.Constant
+  .kc { color: $codehilite-keyword-constant; }
   .kd { color: $codehilite-keyword-declaration; }
   .kn { color: $codehilite-keyword-namespace; }
-  .kp { color: #A71D5D; } // Keyword.Pseudo
+  .kp { color: $codehilite-keyword-pseudo; }
   .kr { color: $codehilite-keyword-reserved; }
   .kt { color: $codehilite-keyword-type; }
 
@@ -112,6 +144,7 @@ $codehilite-literal-number-oct: #E74C3C;
   .cm { color: $codehilite-comment-multiline; }
   .cp { color: $codehilite-comment-preproc; }
   .c1 { color: $codehilite-comment-single; }
+  .ch { color: $codehilite-comment-shebang; }
   .cs { color: $codehilite-comment-special; }
 
   // Names
@@ -132,7 +165,6 @@ $codehilite-literal-number-oct: #E74C3C;
   .vg { color: $codehilite-name-variable-global; }
   .vi { color: $codehilite-name-variable-instance; }
   .nx { color: $codehilite-name-extension; }
-  .ow { color: inherit; }
 
   // Numbers
   .m  { color: $codehilite-literal-number; }
@@ -148,18 +180,163 @@ $codehilite-literal-number-oct: #E74C3C;
   .sc { color: $codehilite-literal-string-char; }
   .sd { color: $codehilite-literal-string-doc; }
   .s2 { color: $codehilite-literal-string-double; }
-  .se { color: #183691; } // Literal.String.Escape
+  .se { color: $codehilite-literal-string-escape; }
-  .sh { color: #183691; } // Literal.String.Heredoc
+  .sh { color: $codehilite-literal-string-heredoc; }
-  .si { color: #183691; } // Literal.String.Interpol
+  .si { color: $codehilite-literal-string-interpol; }
-  .sx { color: #183691; } // Literal.String.Other
+  .sx { color: $codehilite-literal-string-other; }
-  .sr { color: #009926; } // Literal.String.Regex
+  .sr { color: $codehilite-literal-string-regex; }
   .s1 { color: $codehilite-literal-string-single; }
   .ss { color: $codehilite-literal-string-symbol; }
 
-  // Diffs
-  .gd { background-color: #FFDDDD; } // Generic.Deleted
-  .gi { background-color: #DDFFDD; } // Generic.Inserted
-
   // Miscellaneous
-  .w { color: transparent; } // Text.Whitespace
+  .err { color: $codehilite-error; }
+  .w { color: $codehilite-whitespace; }
+
+  // Highlighted lines
+  .hll {
+    display: block;
+    margin: 0 -1.2rem;
+    padding: 0 1.2rem;
+    background: transparentize($clr-yellow-500, 0.5);
+
+    // [mobile -]: Stretch to whole width
+    @include break-to-device(mobile) {
+      margin: 0 -1.6rem;
+      padding: 0 1.6rem;
+    }
+  }
+}
+
+// Scoped in typesetted content for greater specificity
+.md-typeset {
+
+  // If code blocks are wrapped with codehilite, the styles must be adjusted
+  // so the marker stretches to the whole width and the padding is respected
+  .codehilite {
+    margin: 1.0em 0;
+    padding: 1.0rem 1.2rem 0.8rem;
+    border-radius: 0.2rem;
+    background: $md-code-background;
+    color: $md-code-color;
+    line-height: 1.4;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    // [mobile -]: Stretch to whole width
+    @include break-to-device(mobile) {
+      margin: 1.0em -1.6rem;
+      padding: 1.0rem 1.6rem 0.8rem;
+      border-radius: 0;
+    }
+
+    // Override native scrollbar styles
+    &::-webkit-scrollbar {
+      width: 0.4rem;
+      height: 0.4rem;
+
+      // Style scrollbar thumb
+      &-thumb {
+        background-color: $md-color-black--lighter;
+
+        // Hovered scrollbar thumb
+        &:hover {
+          background-color: $md-color-accent;
+        }
+      }
+    }
+
+    // Hack: set pre-tag to inline-block, in order to stetch the content on
+    // overflow correctly to the whole width
+    pre {
+      display: inline-block;
+      min-width: 100%;
+      margin: 0;
+      padding: 0;
+      background: transparent;
+      overflow: visible;
+      vertical-align: top;
+    }
+  }
+
+  // Block with line numbers
+  .codehilitetable {
+    display: block;
+    border-radius: 0.2em;
+    font-size: ms(0);
+    overflow: hidden;
+
+    // Set table elements to block layout, because otherwise the whole flexbox
+    // hacking won't work correctly
+    tbody,
+    td {
+      display: block;
+      padding: 0;
+    }
+
+    // We need to use flexbox layout, because otherwise it's not possible to
+    // make the code container scroll while keeping the line numbers static
+    tr {
+      display: flex;
+    }
+
+    // The pre tags are nested inside a table, so we need to remove the
+    // margin because it collapses below all the overflows
+    .codehilite,
+    .linenodiv {
+      margin: 0;
+      border-radius: 0;
+    }
+
+    // Add spacing to line number container
+    .linenodiv {
+      padding: 1.0rem 1.2rem 0.8rem;
+
+      // Stretch the line number container vertically, so it always aligns with
+      // the code container, even when there's a scrollbar.
+      &,
+      & > pre {
+        height: 100%;
+      }
+    }
+
+    // Disable pointer-events, so code can be easily copied without
+    // accidentally also copying the line numbers
+    .linenos {
+      background: $md-color-black--lightest;
+      color: $md-color-black--lighter;
+      user-select: none;
+
+      // Reset spacings
+      pre {
+        margin: 0;
+        padding: 0;
+        background: transparent;
+        color: inherit;
+        text-align: right;
+      }
+    }
+
+    // The table cell containing the code container wrapper and code should
+    // stretch horizontally to the remaining space
+    .code {
+      flex: 1;
+      overflow: hidden;
+    }
+  }
+
+  // Full-width container
+  > .codehilitetable {
+
+    // [mobile -]: Stretch to whole width
+    @include break-to-device(mobile) {
+      margin: 0 -1.6rem;
+      border-radius: 0;
+
+      // Increase spacing
+      .codehilite,
+      .linenodiv {
+        padding: 1.0rem 1.6rem;
+      }
+    }
+  }
 }

src/assets/stylesheets/layout/_search.scss

@@ -122,12 +122,15 @@
 
     // [tablet landscape +]: Make relative for inner layout
     @include break-from-device(tablet landscape) {
+      display: table;
       position: relative;
+      clear: both;
     }
   }
 
   // Search form
   &__form {
+    position: relative;
 
     // [tablet landscape +]: Header-embedded search
     @include break-from-device(tablet landscape) {
@@ -138,9 +141,18 @@
 
       transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
       border-radius: 0.2rem;
+    }
 
-      // Enlarge search field when active
+    // Set maximum width
     .md-toggle--search:checked ~ .md-header & {
+
+      // [tablet landscape]: Do not overlay title
+      @include break-at-device(tablet landscape) {
+        width: 46.8rem;
+      }
+
+      // [screen +]: Match content width
+      @include break-from-device(screen) {
         width: 66.8rem;
       }
     }
@@ -237,13 +249,13 @@
 
   // Search output container
   &__output {
+    position: absolute;
     width: 100%;
     border-radius: 0 0 0.2rem 0.2rem;
     overflow: hidden;
 
     // [tablet portrait -]: Full-screen search bar
     @include break-to-device(tablet portrait) {
-      position: absolute;
       top: 5.6rem;
       bottom: 0;
     }
@@ -252,6 +264,7 @@
     @include break-from-device(tablet landscape) {
       @include z-depth(6);
 
+      top: 4.0rem;
       transition: opacity 0.4s;
       opacity: 0;
 
@@ -278,8 +291,6 @@
         $md-color-black--lighter,
         $md-color-black--lightest 35%,
         $md-color-black--transparent 60%);
-
-    // Hack: Opera doesn't support this in the shorthand
     background-attachment: local, scroll;
     background-color: $md-color-white;
     background-repeat: no-repeat;

src/partials/search.html

@@ -34,7 +34,7 @@
       <div class="md-search__scrollwrap">
         <div class="md-search-result">
           <div class="md-search-result__meta">
-            Type to search...
+            Indexing
           </div>
           <ol class="md-search-result__list"></ol>
         </div>