Implemented basic search modal functionality

.babelrc

@@ -2,8 +2,9 @@
   "presets": ["es2015"],
   "plugins": [
     "add-module-exports",
+    "babel-root-import",
     ["transform-react-jsx", {
       "pragma": "JSX.createElement"
     }]
   ]
-}
+}

.eslintignore

@@ -1,3 +1,4 @@
 /build
 /material
-/site
+/site
+/lib

.eslintrc

@@ -191,9 +191,10 @@
         "virtual": "abstract"
       },
       "requireParamDescription": true,
+      "requireReturn": false,
       "requireReturnDescription": true
     }],
     "yield-star-spacing": 2
   },
   "root": true
-}
+}

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,28 @@
+## Description
+
+[Description of the bug]
+
+### Expected behavior
+
+[What you expected to happen]
+
+### Actual behavior
+
+[What is actually happening]
+
+### Steps to reproduce the bug
+
+1. [First step]
+2. [Second step]
+3. [and so on...]
+
+### Package versions
+
+- Python: `python --version`
+- MkDocs: `mkdocs --version`
+- Material: `pip show mkdocs-material | grep -E ^Version`
+
+### System information
+
+- OS: [The operating system you're running]
+- Browser: [The browser used, if relevant]

.sass-lint.yml

@@ -22,7 +22,7 @@ files:
   ignore:
     - node_modules/**
     - src/assets/stylesheets/_shame.scss
-    - src/assets/stylesheets/extensions/_codehilite.scss # Temporary disabled
+    - src/assets/stylesheets/extensions/_codehilite.scss
 
 options:
   merge-default-rules: true
@@ -122,4 +122,4 @@ rules:
     - 2
     - convention: hyphenatedbem
     - allow-leading-underscore: false
-  zero-unit: 2
+  zero-unit: 2

docs/extensions/codehilite.md

@@ -543,7 +543,7 @@ io.write("\n")
 
 ``` mysql
 SELECT
-  Employees.EmployeeID`,
+  Employees.EmployeeID,
   Employees.Name,
   Employees.Salary,
   Manager.Name AS Manager
@@ -702,4 +702,4 @@ end
 ```
 
 [Pygments]: http://pygments.org
-[300 languages]: http://pygments.org/languages
+[300 languages]: http://pygments.org/languages

docs/extensions/footnotes.md

@@ -8,7 +8,7 @@ sit amet, consectetur adipiscing elit.
 ## Headline on fourth level
 
 Footnotes[^1] have a label[^@#$%] and the footnote's content.
-### 2nd Headline on fourth level
+### Second Headline on fourth level
 
 [^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
       urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
@@ -44,4 +44,4 @@ Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
 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.
+sit amet, consectetur adipiscing elit.

lib/providers/jsx.js

@@ -27,7 +27,7 @@
 export default /* JSX */ {
 
   /**
-   * Create a native DOM node
+   * Create a native DOM node from JSX's intermediate representation
    *
    * @param {string} tag - Tag name
    * @param {object} properties - Properties

lib/tasks/tests/regression/foo.js

@@ -0,0 +1,72 @@
+
+import * as selenium from "./selenium"
+import path from "path"
+import Gemini from "gemini"
+
+export default (gulp, config) => {
+  return done => {
+    selenium.start(() => {
+      // const file = require(
+      //   path.resolve(process.cwd(),
+      //     config.tests.regression.geminiConfigPath,
+      //       ".gemini-local.json"
+      //     ))
+
+      const configx = {
+        "rootUrl": "http://localhost:8000",
+        "gridUrl": "http://localhost:4444/wd/hub",
+        "screenshotsDir": "./tests/regression/baseline/local",
+        "browsers": {
+          "chrome": {
+            "desiredCapabilities": {
+              "browserName": "chrome"
+            }
+          }
+        },
+        "system": {
+          "projectRoot": "../../../",
+          "sourceRoot": "src/assets/stylesheets"
+        }
+      }
+
+      // https://www.npmjs.com/package/gemini-sauce
+
+      console.log("running gemini...")
+      const gemini = new Gemini(configx)
+
+      gemini.test("tests/regression/styleguide.js", {
+        reporters: ["html"]
+      })
+        .then(() => {
+          console.log("success")
+          selenium.stop()
+          done()
+        }, err => {
+          console.log("fail")
+          selenium.stop()
+          throw err
+        })
+    })
+  // selenium.start(() => {
+    //   const geminiConfig = require(
+    //     path.resolve(
+    //       process.cwd(),
+    //       config.tests.regression.geminiConfigPath,
+    //       ".gemini-local.json"
+    //     ))
+    //   geminiConfig.rootUrl = `http://127.0.0.1:${config.patternlabServer.port}`
+    //
+    //   const gemini = new Gemini(geminiConfig)
+    //   gemini.test(config.tests.regression.patternlabToGeminiOutput, {
+    //     reporters: ["html"]
+    //   })
+    //     .then(() => {
+    //       selenium.stop()
+    //       done()
+    //     }, err => {
+    //       selenium.stop()
+    //       throw err
+    //     })
+    // })
+  }
+}

lib/tasks/tests/regression/selenium.js

@@ -20,72 +20,53 @@
  * IN THE SOFTWARE.
  */
 
+import selenium from "selenium-standalone"
+
 /* ----------------------------------------------------------------------------
- * Navigation expander
+ * Locals
  * ------------------------------------------------------------------------- */
 
-class Expander {
+/* Selenium server */
+let server = null
 
-  /**
+/* ----------------------------------------------------------------------------
-   * Constructor
+ * Definition
-   *
+ * ------------------------------------------------------------------------- */
-   * @constructor
-   * @param {(string|HTMLElement)} el - Selector or HTML element
-   */
-  constructor(el) {
-    this.el_ = (typeof el === "string")
-      ? document.querySelector(el)
-      : el
 
-    /* Event listener */
+export const start = done => {
-    this.handler_ = ev => {
+  selenium.start({}, (err, proc) => {
-      this.update(ev)
+    if (err) {
+
+      /* Install selenium, if not present */
+      if (/^Missing(.*)chromedriver$/.test(err.message)) {
+        selenium.install(done)
+
+        /* Start selenium again */
+        selenium.start({}, (err_, proc_) => {
+          server = proc_
+        })
+
+      /* Otherwise, throw error */
+      } else {
+        throw err
+      }
     }
-  }
 
-  /**
+    /* Remember process handle */
-   * Update state of expandable element
+    server = server || proc
-   *
+    done()
-   * @param {Event} ev - Event
+  })
-   * @return {void}
+}
-   */
-  update() {}
 
-  /**
+export const stop = () => {
-   * Reset state of expandable element
+  if (server)
-   *
+    server.kill()
-   * @return {void}
-   */
-  reset() {}
-
-  /**
-   * Register listener for all relevant events
-   *
-   * @return {void}
-   */
-  listen() {
-    ["click"].forEach(name => {
-      window.addEventListener(name, this.handler_, false)
-    })
-  }
-
-  /**
-   * Unregister listener for all relevant events
-   *
-   * @return {void}
-   */
-  unlisten() {
-    ["click"].forEach(name => {
-      window.removeEventListener(name, this.handler_, false)
-    })
-
-    /* Perform reset */
-    this.reset()
-  }
 }
 
 /* ----------------------------------------------------------------------------
- * Exports
+ * Signal handler
  * ------------------------------------------------------------------------- */
 
-export default Expander
+/* Register signal handler for all relevant events */
+for (const signal of ["SIGTERM", "SIGINT", "exit"])
+  process.on(signal, stop)

material/assets/images/icons/bitbucket-black-850dc5f8b2.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448" viewBox="0 0 352 448"><path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875 1.5q-9.75-4.25-13.375-14.5t-.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875 6.875 16.875zm27.75-5.25q-3.5-26.75-28.25-41T154 165.25q-15.75 7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2 38-21t12.5-42zM291.25 74q-5-6.75-14-11.125t-14.5-5.5T245 54.25q-72.75-11.75-141.5.5-10.75 1.75-16.5 3t-13.75 5.5T60.75 74q7.5 7 19 11.375t18.375 5.5T120 93.75Q177 101 232 94q15.75-2 22.375-3t18.125-5.375T291.25 74zm14.25 258.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5 12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5T88.75 412 70.5 401.125t-13-15.375q-6.25-24-14.25-73l1.5-4 4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2 9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875 10T291.75 288q-63 31.5-152.5 22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875T25 232.75q-2.25-12.5-6.625-37.5t-7-40.375T5.5 118 0 78.5Q.75 72 4.375 66.375T12.25 57t11.25-7.5T35 43.875t12-4.625q31.25-11.5 78.25-16 94.75-9.25 169 12.5Q333 47.25 348 66.25q4 5 4.125 12.75t-1.375 13.5z"/></svg>

material/assets/images/icons/bitbucket-black.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448"
+    viewBox="0 0 352 448">
+  <path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875
+        1.5q-9.75-4.25-13.375-14.5t-0.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875
+        6.875 16.875zM231.5 209.5q-3.5-26.75-28.25-41t-49.25-3.25q-15.75
+        7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2
+        38-21t12.5-42zM291.25
+        74q-5-6.75-14-11.125t-14.5-5.5-17.75-3.125q-72.75-11.75-141.5 0.5-10.75
+        1.75-16.5 3t-13.75 5.5-12.5 10.75q7.5 7 19 11.375t18.375 5.5 21.875
+        2.875q57 7.25 112 0.25 15.75-2 22.375-3t18.125-5.375 18.75-11.625zM305.5
+        332.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5
+        12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5t-19.125-6.75-18.25-10.875-13-15.375q-6.25-24-14.25-73l1.5-4
+        4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2
+        9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875
+        10-13.625 7.75q-63 31.5-152.5
+        22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875-1.375-8.75q-2.25-12.5-6.625-37.5t-7-40.375-5.875-36.875-5.5-39.5q0.75-6.5
+        4.375-12.125t7.875-9.375 11.25-7.5 11.5-5.625 12-4.625q31.25-11.5
+        78.25-16 94.75-9.25 169 12.5 38.75 11.5 53.75 30.5 4 5 4.125
+        12.75t-1.375 13.5z" />
+</svg>

material/assets/images/icons/bitbucket-white-42306ad0de.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448" viewBox="0 0 352 448"><path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875 1.5q-9.75-4.25-13.375-14.5t-.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875 6.875 16.875zm27.75-5.25q-3.5-26.75-28.25-41T154 165.25q-15.75 7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2 38-21t12.5-42zM291.25 74q-5-6.75-14-11.125t-14.5-5.5T245 54.25q-72.75-11.75-141.5.5-10.75 1.75-16.5 3t-13.75 5.5T60.75 74q7.5 7 19 11.375t18.375 5.5T120 93.75Q177 101 232 94q15.75-2 22.375-3t18.125-5.375T291.25 74zm14.25 258.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5 12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5T88.75 412 70.5 401.125t-13-15.375q-6.25-24-14.25-73l1.5-4 4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2 9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875 10T291.75 288q-63 31.5-152.5 22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875T25 232.75q-2.25-12.5-6.625-37.5t-7-40.375T5.5 118 0 78.5Q.75 72 4.375 66.375T12.25 57t11.25-7.5T35 43.875t12-4.625q31.25-11.5 78.25-16 94.75-9.25 169 12.5Q333 47.25 348 66.25q4 5 4.125 12.75t-1.375 13.5z" fill="#fff"/></svg>

material/assets/images/icons/bitbucket-white.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448"
+    viewBox="0 0 352 448">
+  <path d="M203.75 214.75q2 15.75-12.625 25.25t-27.875
+        1.5q-9.75-4.25-13.375-14.5t-0.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875
+        6.875 16.875zM231.5 209.5q-3.5-26.75-28.25-41t-49.25-3.25q-15.75
+        7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2
+        38-21t12.5-42zM291.25
+        74q-5-6.75-14-11.125t-14.5-5.5-17.75-3.125q-72.75-11.75-141.5 0.5-10.75
+        1.75-16.5 3t-13.75 5.5-12.5 10.75q7.5 7 19 11.375t18.375 5.5 21.875
+        2.875q57 7.25 112 0.25 15.75-2 22.375-3t18.125-5.375 18.75-11.625zM305.5
+        332.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5
+        12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5t-19.125-6.75-18.25-10.875-13-15.375q-6.25-24-14.25-73l1.5-4
+        4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2
+        9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875
+        10-13.625 7.75q-63 31.5-152.5
+        22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875-1.375-8.75q-2.25-12.5-6.625-37.5t-7-40.375-5.875-36.875-5.5-39.5q0.75-6.5
+        4.375-12.125t7.875-9.375 11.25-7.5 11.5-5.625 12-4.625q31.25-11.5
+        78.25-16 94.75-9.25 169 12.5 38.75 11.5 53.75 30.5 4 5 4.125
+        12.75t-1.375 13.5z" fill="white" />
+</svg>

material/assets/images/icons/github-black-da331b3ec4.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448"><path d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg>

material/assets/images/icons/github-black.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448"
+    viewBox="0 0 416 448">
+  <path d="M160 304q0 10-3.125 20.5t-10.75 19-18.125
+        8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
+        18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
+        19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
+        18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
+        304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
+        2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
+        38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
+        37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
+        82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
+        1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
+        0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
+        30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
+        46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
+        99.5z" />
+</svg>

material/assets/images/icons/github-white-1cfc8ff99e.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448"><path d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z" fill="#fff"/></svg>

material/assets/images/icons/github-white.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448"
+    viewBox="0 0 416 448">
+  <path d="M160 304q0 10-3.125 20.5t-10.75 19-18.125
+        8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
+        18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
+        19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
+        18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
+        304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
+        2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
+        38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
+        37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
+        82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
+        1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
+        0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
+        30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
+        46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
+        99.5z" fill="white" />
+</svg>

material/assets/images/icons/gitlab-black-81ba4a278f.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M249.865 474.507l90.684-279.097H159.18l90.684 279.097z"/><path d="M249.864 474.506L159.18 195.41H32.088l217.776 279.095z" opacity=".7"/><path d="M32.089 195.41l-27.56 84.816a18.773 18.773 0 0 0 6.822 20.99l238.514 173.29L32.089 195.41z" opacity=".5"/><path d="M32.089 195.412H159.18L104.56 27.314c-2.81-8.65-15.046-8.65-17.855 0L32.089 195.412z"/><path d="M249.865 474.506l90.684-279.095H467.64L249.865 474.506z" opacity=".7"/><path d="M467.641 195.41l27.56 84.816a18.772 18.772 0 0 1-6.822 20.99l-238.515 173.29L467.641 195.41z" opacity=".5"/><path d="M467.64 195.412H340.55l54.618-168.098c2.81-8.65 15.047-8.65 17.856 0l54.618 168.098z"/></svg>

material/assets/images/icons/gitlab-black.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"
+    viewBox="0 0 500 500">
+  <g transform="translate(156.197863, 1.160267)">
+  	<path d="M93.667,473.347L93.667,473.347l90.684-279.097H2.983L93.667,
+          473.347L93.667,473.347z" />
+  </g>
+  <g transform="translate(28.531199, 1.160800)" opacity="0.7">
+  	<path d="M221.333,473.345L130.649,194.25H3.557L221.333,473.345L221.333,
+          473.345z" />
+  </g>
+  <g transform="translate(0.088533, 0.255867)" opacity="0.5">
+  	<path d="M32,195.155L32,195.155L4.441,279.97c-2.513,7.735,0.24,16.21,6.821,
+          20.99l238.514,173.29 L32,195.155L32,195.155z" />
+  </g>
+  <g transform="translate(29.421866, 280.255593)">
+  	<path d="M2.667-84.844h127.092L75.14-252.942c-2.811-8.649-15.047-8.649-17.856,
+          0L2.667-84.844 L2.667-84.844z" />
+  </g>
+  <g transform="translate(247.197860, 1.160800)" opacity="0.7">
+  	<path d="M2.667,473.345L93.351,194.25h127.092L2.667,473.345L2.667,
+          473.345z" />
+  </g>
+  <g transform="translate(246.307061, 0.255867)" opacity="0.5">
+  	<path d="M221.334,195.155L221.334,195.155l27.559,84.815c2.514,7.735-0.24,
+          16.21-6.821,20.99 L3.557,474.25L221.334,195.155L221.334,195.155z" />
+  </g>
+  <g transform="translate(336.973725, 280.255593)">
+  	<path d="M130.667-84.844H3.575l54.618-168.098c2.811-8.649,15.047-8.649,
+          17.856,0L130.667-84.844 L130.667-84.844z" />
+  </g>
+</svg>

material/assets/images/icons/gitlab-white-d65054b8fe.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M249.865 474.507l90.684-279.097H159.18l90.684 279.097z" fill="#fff"/><path d="M249.864 474.506L159.18 195.41H32.088l217.776 279.095z" fill="#fff" opacity=".7"/><path d="M32.089 195.41l-27.56 84.816a18.773 18.773 0 0 0 6.822 20.99l238.514 173.29L32.089 195.41z" fill="#fff" opacity=".5"/><path d="M32.089 195.412H159.18L104.56 27.314c-2.81-8.65-15.046-8.65-17.855 0L32.089 195.412z" fill="#fff"/><path d="M249.865 474.506l90.684-279.095H467.64L249.865 474.506z" fill="#fff" opacity=".7"/><path d="M467.641 195.41l27.56 84.816a18.772 18.772 0 0 1-6.822 20.99l-238.515 173.29L467.641 195.41z" fill="#fff" opacity=".5"/><path d="M467.64 195.412H340.55l54.618-168.098c2.81-8.65 15.047-8.65 17.856 0l54.618 168.098z" fill="#fff"/></svg>

material/assets/images/icons/gitlab-white.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"
+    viewBox="0 0 500 500">
+  <g transform="translate(156.197863, 1.160267)">
+  	<path d="M93.667,473.347L93.667,473.347l90.684-279.097H2.983L93.667,
+          473.347L93.667,473.347z" fill="white" />
+  </g>
+  <g transform="translate(28.531199, 1.160800)" opacity="0.7">
+  	<path d="M221.333,473.345L130.649,194.25H3.557L221.333,473.345L221.333,
+          473.345z" fill="white" />
+  </g>
+  <g transform="translate(0.088533, 0.255867)" opacity="0.5">
+  	<path d="M32,195.155L32,195.155L4.441,279.97c-2.513,7.735,0.24,16.21,6.821,
+          20.99l238.514,173.29 L32,195.155L32,195.155z" fill="white" />
+  </g>
+  <g transform="translate(29.421866, 280.255593)">
+  	<path d="M2.667-84.844h127.092L75.14-252.942c-2.811-8.649-15.047-8.649-17.856,
+          0L2.667-84.844 L2.667-84.844z" fill="white" />
+  </g>
+  <g transform="translate(247.197860, 1.160800)" opacity="0.7">
+  	<path d="M2.667,473.345L93.351,194.25h127.092L2.667,473.345L2.667,
+          473.345z" fill="white" />
+  </g>
+  <g transform="translate(246.307061, 0.255867)" opacity="0.5">
+  	<path d="M221.334,195.155L221.334,195.155l27.559,84.815c2.514,7.735-0.24,
+          16.21-6.821,20.99 L3.557,474.25L221.334,195.155L221.334,195.155z"
+        fill="white" />
+  </g>
+  <g transform="translate(336.973725, 280.255593)">
+  	<path d="M130.667-84.844H3.575l54.618-168.098c2.811-8.649,15.047-8.649,
+          17.856,0L130.667-84.844 L130.667-84.844z" fill="white" />
+  </g>
+</svg>

material/base.html

@@ -20,11 +20,11 @@
       <meta name="author" content="{{ site_author }}">
     {% endif %}
     <meta name="generator" content="mkdocs+mkdocs-material#0.2.1">
-    <script src="{{ base_url }}/assets/javascripts/modernizr-dede1352ed.js"></script>
+    <script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-2ebf05d4b7.css">
+    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.css">
     {% for path in extra_css %}
       <link rel="stylesheet" href="{{ path }}">
     {% endfor %}
@@ -87,7 +87,7 @@
       </main>
       {% include "partials/footer.html" %}
     </div>
-    <script src="{{ base_url }}/assets/javascripts/application-2ff8f6a9f1.js"></script>
+    <script src="{{ base_url }}/assets/javascripts/application.js"></script>
     <script>
       /* Configuration for application */
       var config = {

material/partials/search.html

@@ -3,17 +3,16 @@
   <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="query">
-      <label class="md-icon md-search__icon" for="query">
+      <label class="md-icon md-search__icon" for="query"></label>
-        search
+    </form>
-      </label>
+    <div class="md-search__output">
-      <div class="md-search__output">
+      <div class="md-search-result">
-        <div class="md-search-result">
+        <div class="md-search-result__meta">
-          <div class="md-search-result__meta">
+          3 Search results
-            3 Search results
-          </div>
-          <ol class="md-search-result__list">      
-          </ol>
         </div>
+        <ol class="md-search-result__list">      
+        </ol>
       </div>
-      </form></div>
+    </div>
   </div>
+</div>

mkdocs.yml

@@ -53,6 +53,7 @@ markdown_extensions:
   - markdown.extensions.meta
   - markdown.extensions.toc:
       permalink: '¶'
+  - pymdownx.superfences
 
 # Page tree
 pages:
@@ -70,4 +71,4 @@ pages:
       - Meta: index.md
   - Specimen: specimen.md
   - Customization: customization.md
-  - License: license.md
+  - License: license.md

package.json

@@ -46,6 +46,7 @@
     "babel-polyfill": "^6.16.0",
     "babel-preset-es2015": "^6.13.2",
     "babel-register": "^6.16.3",
+    "babel-root-import": "^4.1.3",
     "chai": "^3.5.0",
     "css-mqpacker": "^4.0.0",
     "del": "^2.2.0",
@@ -90,7 +91,7 @@
     "yargs": "^3.32.0"
   },
   "engines": {
-    "node": ">=4.5.0"
+    "node": ">= 4.5.0"
   },
   "private": true
 }

src/assets/javascripts/application.js

@@ -71,19 +71,19 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const query = document.getElementById("query")
   query.addEventListener("focus", () => {
-    document.querySelector(".md-search").classList.add("md-js__search--locked")
+    document.querySelector(".md-search").dataset.mdLocked = ""
   })
 
   /* Intercept click on search mode toggle */
   let offset = 0
   const toggle = document.getElementById("search")
-  toggle.addEventListener("click", ev => {
+  toggle.addEventListener("click", () => {   // TODO: click may be the wrong event...
-    const list = document.body.classList
+    const list = document.body // classList md bla
     const lock = !matchMedia("only screen and (min-width: 960px)").matches
 
     /* Exiting search mode */
-    if (list.contains("md-js__body--locked")) {
+    if (list.dataset.mdLocked) {
-      list.remove("md-js__body--locked")
+      delete list.dataset.mdLocked
 
       /* Scroll to former position, but wait for 100ms to prevent flashes
          on iOS. A short timeout seems to do the trick */
@@ -109,17 +109,28 @@ document.addEventListener("DOMContentLoaded", () => {
 
         /* This additional check is necessary to handle fast subsequent clicks
            on the toggle and the timeout to lock the body must be cancelled */
-        if (ev.target.checked) {
+        // if (ev.target.checked) {
-          if (lock)
+        if (lock)
-            list.add("md-js__body--locked")
+          list.dataset.mdLocked = ""
-          setTimeout(() => {
+        setTimeout(() => {
-            document.getElementById("md-search").focus()
+          document.getElementById("query").focus()
-          }, 200)
+        }, 200)
-        }
+        // }
       }, 450)
     }
   })
 
+  // TODO: only do this on MOBILE and TABLET
+  const toggleSearchClose = document.querySelector(".md-search__icon")
+  toggleSearchClose.setAttribute("for", "search")                               // TODO: override query with search, when on mobile!!!
+  // toggleSearchClose.addEventListener("click", ev => {
+  //   ev.preventDefault()
+  //   // ev.target
+  //
+  //   const search = document.getElementById("search")
+  //   search.checked = false
+  // })
+
   // var toc = new Sidebar('.md-sidebar--secondary');
   // toc.listen();
 
@@ -179,6 +190,7 @@ document.addEventListener("DOMContentLoaded", () => {
       return response.json()
     })
     .then(data => {
+      // console.log(data)
       const stars = data.stargazers_count
       const forks = data.forks_count
       // store in session!!!
@@ -223,7 +235,7 @@ document.addEventListener("DOMContentLoaded", () => {
       // console.log(data)
 
           /* Create index */
-      const index = lunr(() => {
+      const index = lunr(function() {
         /* eslint-disable no-invalid-this, lines-around-comment */
         this.field("title", { boost: 10 })
         this.field("text")
@@ -290,10 +302,21 @@ document.addEventListener("DOMContentLoaded", () => {
           title.innerHTML = article.title
           link.appendChild(title)
 
+          /* Truncate a string after the given number of characters */
+          const truncate = function(string, n) {
+            let i = n
+            if (string.length > i) {
+              while (string[i] !== " " && --i > 0);
+              return `${string.substring(0, i)}…`
+            }
+            return string
+          }
+
               /* Create text element */
           const text = document.createElement("p")
           text.classList.add("md-search-result__description")
-          text.innerHTML = article.text // .truncate(140);
+          text.innerHTML = truncate(article.text) // .truncate(140);
+          text.innerHTML = truncate(article.text, 140) // .truncate(140);
           link.appendChild(text)
 
           container.appendChild(li)
@@ -324,4 +347,13 @@ document.addEventListener("DOMContentLoaded", () => {
     })
 // }, 1000);
 
+  fetch(
+      "https://api.github.com/repos/squidfunk/mkdocs-material/releases/latest")
+    .then(response => {
+      return response.json()
+    })
+    // .then(data => {
+    //   // console.log(data)
+    // })
+
 })

src/assets/javascripts/components/Material/Sidebar/Abstract.js

@@ -24,8 +24,7 @@
  * Definition
  * ------------------------------------------------------------------------- */
 
-export default
+export default class Abstract {
-class Abstract {
 
   /**
    * Dispatch update on next repaint
@@ -33,8 +32,8 @@ class Abstract {
    * @constructor
    */
   constructor() {
-    // if (new.target === this.constructor)
+    if (this === Abstract)
-    //   throw new TypeError("Cannot construct abstract instance")
+      throw new TypeError("Cannot construct abstract instance")
 
     /* Dispatch update on next repaint */
     this.handler_ = ev => {
@@ -48,7 +47,6 @@ class Abstract {
    * Update state
    *
    * @abstract
-   * @return {void}
    */
   update() {
     throw new Error("update(): not implemented")
@@ -58,7 +56,6 @@ class Abstract {
    * Reset state
    *
    * @abstract
-   * @return {void}
    */
   reset() {
     throw new Error("reset(): not implemented")
@@ -66,8 +63,6 @@ class Abstract {
 
   /**
    * Register listener for all relevant events
-   *
-   * @return {void}
    */
   listen() {
     ["scroll", "resize", "orientationchange"].forEach(name => {
@@ -80,8 +75,6 @@ class Abstract {
 
   /**
    * Unregister listener for all relevant events
-   *
-   * @return {void}
    */
   unlisten() {
     ["scroll", "resize", "orientationchange"].forEach(name => {

src/assets/javascripts/components/Material/Sidebar/Marker.js

@@ -26,14 +26,13 @@ import Abstract from "./Abstract"
  * Definition
  * ------------------------------------------------------------------------- */
 
-export default
+export default class Marker extends Abstract {
-class Marker extends Abstract {
 
   /**
    * Mark anchors within the table of contents above current page y-offset
    *
    * @constructor
-   * @param {(string|HTMLCollection)} els - Selector or HTML elements
+   * @param {(string|NodeList<HTMLElement>)} els - Selector or HTML elements
    */
   constructor(els) {
     super()
@@ -57,16 +56,16 @@ class Marker extends Abstract {
    * Update anchor states
    *
    * @param {Event} ev - Event (omitted)
-   * @return {void}
    */
   update() {
+    const offset = window.pageYOffset
 
     /* Scroll direction is down */
-    if (this.offset_ <= window.pageYOffset) {
+    if (this.offset_ <= offset) {
       for (let i = this.index_ + 1; i < this.els_.length; i++) {
-        if (this.anchors_[i].offsetTop <= window.pageYOffset) {
+        if (this.anchors_[i].offsetTop <= offset) {
           if (i > 0)
-            this.els_[i - 1].dataset.mdMarked = true
+            this.els_[i - 1].dataset.mdMarked = ""
           this.index_ = i
         } else {
           break
@@ -76,7 +75,7 @@ class Marker extends Abstract {
     /* Scroll direction is up */
     } else {
       for (let i = this.index_; i >= 0; i--) {
-        if (this.anchors_[i].offsetTop > window.pageYOffset) {
+        if (this.anchors_[i].offsetTop > offset) {
           if (i > 0)
             delete this.els_[i - 1].dataset.mdMarked
         } else {
@@ -87,13 +86,11 @@ class Marker extends Abstract {
     }
 
     /* Remember current offset for next iteration */
-    this.offset_ = window.pageYOffset
+    this.offset_ = offset
   }
 
   /**
    * Reset anchor states
-   *
-   * @return {void}
    */
   reset() {
     [].forEach.call(this.els_, el => {

src/assets/javascripts/components/Material/Sidebar/Position.js

@@ -26,8 +26,7 @@ import Abstract from "./Abstract"
  * Definition
  * ------------------------------------------------------------------------- */
 
-export default
+export default class Position extends Abstract {
-class Position extends Abstract {
 
   /**
    * Set sidebars to locked state and limit height to parent node
@@ -44,8 +43,15 @@ class Position extends Abstract {
       : el
 
     /* Index inner and outer container */
-    this.inner_ = this.el_.parentNode
+    const inner = this.el_.parentNode
-    this.outer_ = this.el_.parentNode.parentNode
+    const outer = this.el_.parentNode.parentNode
+
+    /* Get top and bottom bounds */
+    this.offset_ = outer.offsetTop
+    this.bounds_ = {
+      top: inner.offsetTop,
+      bottom: inner.offsetTop + inner.offsetHeight
+    }
 
     /* Initialize current height */
     this.height_ = 0
@@ -55,45 +61,34 @@ class Position extends Abstract {
    * Update locked state and height
    *
    * @param {Event} ev - Event (omitted)
-   * @return {void}
    */
   update() {
-    const bounds = this.inner_.getBoundingClientRect()                          // TODO: thresholds can be calculated as a function
+    const scroll = window.pageYOffset
-    const parent = this.outer_.offsetTop
+    const expand = window.innerHeight
-
-    /* Determine top and bottom offsets */
-    const top    = bounds.top    + window.pageYOffset,
-          bottom = bounds.bottom + window.pageYOffset
-
-    /* Determine current y-offset at top and bottom of window */
-    const upper  = window.pageYOffset,
-          lower  = window.pageYOffset + window.innerHeight
 
     /* Calculate new bounds */
-    const offset = top - upper
+    const offset = this.bounds_.top - scroll
-    const height = window.innerHeight
+    const height = expand
-                 - Math.max(lower - bottom, 0)
+                 - Math.max(0, scroll + expand - this.bounds_.bottom)
-                 - Math.max(offset, parent)
+                 - Math.max(offset, this.offset_)
 
     /* If height changed, update element */
     if (height !== this.height_)
       this.el_.style.height = `${this.height_ = height}px`
 
     /* Sidebar should be locked, as we're below parent offset */
-    if (offset < parent) {
+    if (offset < this.offset_) {
       if (!this.el_.dataset.mdLocked)
-        this.el_.dataset.mdLocked = true
+        this.el_.dataset.mdLocked = ""
 
     /* Sidebar should be unlocked, if locked */
-    } else if (this.el_.dataset.mdLocked) {
+    } else if (typeof this.el_.dataset.mdLocked === "string") {
       delete this.el_.dataset.mdLocked
     }
   }
 
   /**
    * Reset locked state and height
-   *
-   * @return {void}
    */
   reset() {
     delete this.el_.dataset.mdLocked

src/assets/javascripts/components/Material/Source/Abstract.js

@@ -21,76 +21,18 @@
  */
 
 /* ----------------------------------------------------------------------------
- * Search
+ * Definition
  * ------------------------------------------------------------------------- */
 
-class Search {
+export default
+class Abstract {
 
   /**
-   * Constructor
+   * Dispatch update on next repaint
    *
    * @constructor
-   * @param {(string|HTMLElement)} el - Selector or HTML element
    */
-  constructor(el) {
+  // constructor() {
-    this.el_ = (typeof el === "string") ? document.querySelector(el) : el
+  //
-
+  // }
-    /* Event listener */
-    this.handler_ = ev => {
-      this.update(ev)
-    }
-  }
-
-  /**
-   * Update state and height of sidebar
-   *
-   * @param {Event} ev - Event
-   * @return {void}
-   */
-  update() {
-
-  }
-
-  /**
-   * Reset state and height of sidebar
-   *
-   * @return {void}
-   */
-  reset() {
-
-  }
-
-  /**
-   * Register listener for all relevant events
-   *
-   * @return {void}
-   */
-  listen() {
-    // ['scroll', 'resize', 'orientationchange'].forEach(name => {
-    //   window.addEventListener(name, this.handler_, false);
-    // });
-
-    /* Initial update */
-    this.update()
-  }
-
-  /**
-   * Unregister listener for all relevant events
-   *
-   * @return {void}
-   */
-  unlisten() {
-    // ['scroll', 'resize', 'orientationchange'].forEach(name => {
-    //   window.removeEventListener(name, this.handler_, false);
-    // });
-
-    /* Perform reset */
-    this.reset()
-  }
 }
-
-/* ----------------------------------------------------------------------------
- * Exports
- * ------------------------------------------------------------------------- */
-
-export default Search

src/assets/javascripts/components/scrollspy.js

@@ -1,131 +0,0 @@
-/*
- * 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.
- */
-
-/* ----------------------------------------------------------------------------
- * Sidebar scroll-spy
- * ------------------------------------------------------------------------- */
-
-export default
-class ScrollSpy {
-
-  /**
-   * Constructor
-   *
-   * @constructor
-   * @param {(string|HTMLCollection)} els - Selector or HTML elements
-   */
-  constructor(els) {
-    this.els_ = (typeof els === "string")
-      ? document.querySelectorAll(els)
-      : els
-
-    /* Initialize index for currently active element */
-    this.index_ = 0
-    this.offset_ = window.pageYOffset
-
-    /* Index anchor nodes for fast lookup */
-    this.anchors_ = [].map.call(this.els_, el => {
-      return document.querySelector(el.hash)
-    })
-
-    /* Event listener */
-    this.handler_ = ev => {
-      this.update(ev)
-    }
-  }
-
-  /**
-   * Update state of sidebar
-   *
-   * @param {Event} ev - Event (omitted)
-   * @return {void}
-   */
-  update() {
-
-    /* Scroll direction is down */
-    if (this.offset_ <= window.pageYOffset) {
-      for (let i = this.index_ + 1; i < this.els_.length; i++) {
-        if (this.anchors_[i].offsetTop <= window.pageYOffset) {
-          if (i > 0)
-            this.els_[i - 1].dataset.mdMarked = true
-          this.index_ = i
-        } else {
-          break
-        }
-      }
-
-    /* Scroll direction is up */
-    } else {
-      for (let i = this.index_; i >= 0; i--) {
-        if (this.anchors_[i].offsetTop > window.pageYOffset) {
-          if (i > 0)
-            delete this.els_[i - 1].dataset.mdMarked
-        } else {
-          this.index_ = i
-          break
-        }
-      }
-    }
-
-    /* Remember current offset for next cycle */
-    this.offset_ = window.pageYOffset
-  }
-
-  /**
-   * Reset state of sidebar
-   *
-   * @return {void}
-   */
-  reset() {
-    [].forEach.call(this.els_, el => {
-      delete el.dataset.mdMarked
-    })
-  }
-
-  /**
-   * Register listener for all relevant events
-   *
-   * @return {void}
-   */
-  listen() {
-    ["scroll", "resize", "orientationchange"].forEach(name => {
-      window.addEventListener(name, this.handler_, false)
-    })
-
-    /* Initial update */
-    this.update()
-  }
-
-  /**
-   * Unregister listener for all relevant events
-   *
-   * @return {void}
-   */
-  unlisten() {
-    ["scroll", "resize", "orientationchange"].forEach(name => {
-      window.removeEventListener(name, this.handler_, false)
-    })
-
-    /* Perform reset */
-    this.reset()
-  }
-}

src/assets/javascripts/components/sidebar.js

@@ -1,142 +0,0 @@
-/*
- * 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.
- */
-
-/* ----------------------------------------------------------------------------
- * Sidebar sticky-scroll handler
- * ------------------------------------------------------------------------- */
-
-class Sidebar {
-
-  /**
-   * Constructor
-   *
-   * @constructor
-   * @param {(string|HTMLElement)} el - Selector or HTML element
-   */
-  constructor(el) {
-    this.el_ = (typeof el === "string")
-      ? document.querySelector(el)
-      : el
-
-    /* Grab inner and outer container */
-    this.inner_ = this.el_.parentNode
-    this.outer_ = this.el_.parentNode.parentNode
-
-    /* Initialize parameters */
-    this.height_ = 0
-    this.locked_ = false
-
-    /* Event listener */
-    this.handler_ = ev => {
-      this.update(ev)
-    }
-  }
-
-  /**
-   * Update state and height of sidebar
-   *
-   * @param {Event} ev - Event
-   * @return {void}
-   */
-  update() {
-    const bounds = this.inner_.getBoundingClientRect()
-    const parent = this.outer_.offsetTop
-
-    /* Determine top and bottom offsets */
-    const top    = bounds.top    + window.pageYOffset,
-          bottom = bounds.bottom + window.pageYOffset
-
-    /* Determine current y-offset at top and bottom of window */
-    const upper  = window.pageYOffset,
-          lower  = window.pageYOffset + window.innerHeight
-
-    /* Calculate new bounds */
-    const offset = top - upper
-    const height = window.innerHeight - Math.max(lower - bottom, 0)
-               - Math.max(offset, parent)
-
-    /* If height changed, update element */
-    if (height !== this.height_)
-      this.el_.style.height = `${this.height_ = height}px`
-
-    /* Sidebar should be locked, as we're below parent offset */
-    if (offset < parent) {
-      if (!this.locked_) {
-        this.el_.classList.add("md-js__sidebar--locked")
-        this.locked_ = true
-      }
-
-    /* Sidebar should be unlocked, if locked */
-    } else if (this.locked_) {
-      this.el_.classList.remove("md-js__sidebar--locked")
-      this.locked_ = false
-    }
-  }
-
-  /**
-   * Reset state and height of sidebar
-   *
-   * @return {void}
-   */
-  reset() {
-    this.el_.classList.remove("md-js__sidebar--locked")
-    this.el_.style.height = ""
-
-    /* Reset parameters */
-    this.height_ = 0
-    this.locked_ = false
-  }
-
-  /**
-   * Register listener for all relevant events
-   *
-   * @return {void}
-   */
-  listen() {
-    ["scroll", "resize", "orientationchange"].forEach(name => {
-      window.addEventListener(name, this.handler_, false)
-    })
-
-    /* Initial update */
-    this.update()
-  }
-
-  /**
-   * Unregister listener for all relevant events
-   *
-   * @return {void}
-   */
-  unlisten() {
-    ["scroll", "resize", "orientationchange"].forEach(name => {
-      window.removeEventListener(name, this.handler_, false)
-    })
-
-    /* Perform reset */
-    this.reset()
-  }
-}
-
-/* ----------------------------------------------------------------------------
- * Exports
- * ------------------------------------------------------------------------- */
-
-export default Sidebar

src/assets/stylesheets/_shame.scss

@@ -24,42 +24,85 @@
 // Rules
 // ----------------------------------------------------------------------------
 
-@include break-from-device(screen) {
+// TODO: cleanup redundant data-md-locked,
+// --> use hidden checkbox for reasons of label/button/trigger easyness...
+// TODO: set label for magnifying glasses onto search toggle
+// --> this way we can always use the search toggle and only need the locked state on the body!
+// --> question: how does this play with directly focusing the search field!?
 
-  // .md-search__form {
+.md-search__output {
-  //   background: red;
+  overflow-y: auto; // necessary for rounded borders
-  //   width: 23.0rem;
+  // &::after {
-  //   transition: width 0.6s;
+  //   display: block;
-  //
+  //   content: "";
-  //   .md-js__search--locked & {
+  //   width: 100%;
-  //     background: blue;
+  //   height: 20px;
-  //     width: 66.8rem;
+  //   background: red; // TODO: white shadow overlay to fade out result scrolling
-  //   }
   // }
 
-  // .md-search__input {
+  [data-md-locked] & {
-  //   width: 100% !important;
+    opacity: 1;
-  // }
+  }
 
+  width: 100%;
+
+  opacity: 0;
+  transition: opacity .4s, max-height .4s;
+
+
+  text-align: left;                                        // TODO: wrap with another div for this effect
+
+  z-index: -1; // ??? wherefor? probably not necessary anymore.
+}
+
+@include break-to-device(tablet portrait) {
+  .md-search__output {
+    position: absolute;
+    top: 5.6rem;
+    bottom: 0;
+
+    background:
+  		linear-gradient(white 10%, rgba(255,255,255,0)), // cover
+      linear-gradient(to bottom, rgba(0, 0, 0, 0.25),
+      rgba(0, 0, 0, 0.125) 20%,
+      rgba(0, 0, 0, 0) 60%); // shadow
+  	background-repeat: no-repeat;
+  	background-color: white;
+  	background-size: 100% 20px, 100% 10px;
+
+  	// Opera doesn't support this in the shorthand
+  	background-attachment: local, scroll;
+  }
+  .md-search-result__item {
+    // margin: 0.8rem;
+  }
+  .md-search-result__link {
+    padding: 0 1.6rem;
+    // background: white;
+    // border-radius: 0.2rem;
+    // @include z-depth(2);
+  }
+  .md-search-result__meta {
+    padding-left: 1.6rem;
+    border-top: 0.1rem solid rgba(0, 0, 0, 0.07);
+  }
+}
+
+@include break-from-device(tablet landscape) {
+
+  // Scroll shadow - WIP
   .md-search__output {
     @include z-depth(6);
 
-    width: 100%;
-    max-height: 0vh; // TODO: can this be done in percent!?!?!?
-    opacity: 0;
-    transition: opacity .4s, max-height .4s;
-    [data-md-locked] & {
-      max-height: 75vh;
-      opacity: 1;
-    }
-
-    position: absolute; // must be absolute, or header nav will stretch
     background: $md-color-white;
     // color: red;
     border-top: 0.1rem solid $md-color-black--lightest; // TODO: box-shadow inset!
-    text-align: left;                                        // TODO: wrap with another div for this effect
+    border-radius: 0 0 0.3rem 0.3rem; // ???
-    border-radius: 0 0 0.3rem 0.3rem;
+    position: absolute; // must be absolute, or header nav will stretch
-    z-index: -1;
+    max-height: 0vh; // TODO: can this be done in percent!?!?!?
+    [data-md-locked] & {
+      max-height: 75vh;
+    }
 
     // Override native scrollbar styles
     &::-webkit-scrollbar {
@@ -76,10 +119,6 @@
         }
       }
     }
-  }
-
-  // Scroll shadow!
-  .md-search__output {
 
   	background:
   		linear-gradient(white 10%, rgba(255,255,255,0)), // cover
@@ -91,57 +130,58 @@
   	/* Opera doesn't support this in the shorthand */
   	background-attachment: local, scroll;
   }
+}
 
-  .md-search-result {
+.md-search-result {
 
 
-    &__meta {
+  &__meta {
-      color: $md-color-black--light;
+    color: $md-color-black--light;
-      padding-left: 4.8rem;
+    padding-left: 4.8rem;
-      padding-right: 1.6rem;
+    padding-right: 1.6rem;
-      line-height: 4.0rem;
+    line-height: 4.0rem;
-      font-size: ms(-1);
+    font-size: ms(-1);
 
+  }
+
+  &__list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    border-top: 0.1rem solid $md-color-black--lightest;
+  }
+
+  &__item {
+    // background: yellow;
+
+    // border-top: 0.1rem solid $md-color-black--lightest;
+  }
+
+
+  &__link {
+    overflow: auto;
+    display: block;
+    padding-left: 4.8rem;
+    padding-right: 1.6rem;
+    transition: background 0.25s;
+
+    &:hover {
+      background: transparentize($md-color-accent, 0.9);
     }
+  }
 
-    &__list {
+  &__title {
-      margin: 0;
+    color: $md-color-black;
-      padding: 0;
+    font-size: ms(0);
-      list-style-type: none;
+    line-height: 1.4;
-      border-top: 0.1rem solid $md-color-black--lightest;
+    margin-top: 0.5em;
-    }
+  }
 
-    &__item {
+  &__description {
-      // background: yellow;
+    color: $md-color-black--light;
-
+    font-size: ms(-1);
-      // border-top: 0.1rem solid $md-color-black--lightest;
+    line-height: 1.4;
-    }
+    margin: 0.5em 0;;
-
-
-    &__link {
-      overflow: auto;
-      display: block;
-      padding-left: 4.8rem;
-      padding-right: 1.6rem;
-
-      &:hover {
-        background: yellow;
-      }
-    }
-
-    &__title {
-      color: $md-color-black;
-      font-size: ms(0);
-      line-height: 1.4;
-      margin-top: 0.5em;
-    }
-
-    &__description {
-      color: $md-color-black--light;
-      font-size: ms(-1);
-      line-height: 1.4;
-      margin: 0.5em 0;;
-    }
   }
 }
 
@@ -180,28 +220,12 @@
 //   }
 // }
 
-.md-search__input:focus {
+// TODO: only on tablet and bind to search active state!
-  border-radius: 0.3rem 0.3rem 0 0;
+// .md-search__input:focus {
-}
+//   border-radius: 0.3rem 0.3rem 0 0;
+// }
 
 @include break-to-device(mobile landscape) {
-  .md-search__inner {
-    position: fixed;
-    top: 0;
-    left: 100%;
-    width: 100%;
-    height: 56px;
-    opacity: 0;
-    z-index: 2;
-    transform: translate3d(5%, 0, 0);
-    transition: transform .3s .15s cubic-bezier(0.1, 0.7, 0.1, 1.0), opacity .15s .15s;
-
-    .md-toggle--search:checked ~ .md-header & {
-      transform: translate3d(0, 0, 0);
-      left: 0;
-      opacity: 1;
-    }
-  }
 
   .md-search__suggest {
     position: relative;
@@ -396,8 +420,29 @@ mark {
   padding: 0 16px;
 }
 
-.md-search__output {
+// TODO: integrate stylelint and property order!
-  overflow-y: auto; // necessary for rounded borders
+
+
+.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;
+    }
+  }
 }
 
-// TODO: integrate stylelint and property order!
+// TODO: remove jitter
+// .md-search,
+// .md-search__inner,
+// .md-search__form {
+//   text-align: right;
+// }

src/assets/stylesheets/base/_icons.scss

@@ -58,8 +58,7 @@
   // Build representational classes
   @each $ligature, $name in (
     "arrow_back": "back",
-    "arrow_forward": "forward",
+    "arrow_forward": "forward"
-    "close": "close"
   ) {
     &--#{$name}::before {
       content: $ligature;

src/assets/stylesheets/base/_typeset.scss

@@ -25,7 +25,8 @@
 // ----------------------------------------------------------------------------
 
 // Default fonts
-body {
+body,
+input {
   color: $md-color-black;
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   font-weight: 400;
@@ -160,8 +161,9 @@ kbd {
     background: $md-code-background;
     color: $md-code-color;
     font-size: 85%;
-    box-shadow: 0.4rem 0 0 $md-code-background,
+    box-shadow:
-               -0.4rem 0 0 $md-code-background;
+       0.4rem 0 0 $md-code-background,
+      -0.4rem 0 0 $md-code-background;
     word-break: break-word;
     box-decoration-break: clone;
   }

src/assets/stylesheets/extensions/_footnotes.scss

@@ -48,7 +48,7 @@
     // Make back references visible on hover
     &:hover  .footnote-backref,
     &:target .footnote-backref {
-      transform: translate3d(0, 0, 0);
+      transform: translateX(0);
       opacity: 1;
     }
 
@@ -73,7 +73,7 @@
     @extend %md-icon;
 
     position: absolute;
-    transform: translate3d(0.5rem, 0, 0);
+    transform: translateX(0.5rem);
     transition: transform 0.25s  0.125s,
                 color     0.25s,
                 opacity   0.125s 0.125s;

src/assets/stylesheets/layout/_base.scss

@@ -101,9 +101,10 @@ hr {
   top: 0;
   width: 0;
   height: 0;
-  transition: width   0.0s 0.25s,
+  transition:
-              height  0.0s 0.25s,
+    width   0s 0.25s,
-              opacity 0.25s;
+    height  0s 0.25s,
+    opacity 0.25s;
   background: $md-color-black--light;
   opacity: 0;
   z-index: 2;
@@ -115,9 +116,10 @@ hr {
     .md-toggle--drawer:checked ~ & {
       width: 100%;
       height: 100%;
-      transition: width   0.0s,
+      transition:
-                  height  0.0s,
+        width   0s,
-                  opacity 0.25s;
+        height  0s,
+        opacity 0.25s;
       opacity: 1;
     }
   }

src/assets/stylesheets/layout/_content.scss

@@ -37,7 +37,7 @@
     margin-left: 24.2rem;
   }
 
-  // Define padding
+  // Define spacing
   &__inner {
     margin: 2.4rem 1.6rem;
 

src/assets/stylesheets/layout/_footer.scss

@@ -81,7 +81,7 @@
     }
   }
 
-  // Link icon
+  // Icons
   &__icon {
     @extend %md-icon__button;
 

src/assets/stylesheets/layout/_header.scss

@@ -42,7 +42,7 @@
 .md-header-nav {
   padding: 0.4rem;
 
-  // Header icon
+  // Icons
   &__icon {
     @extend %md-icon__button;
 
@@ -55,8 +55,13 @@
       opacity: 0.7;
     }
 
-    // [tablet +]: Hide the search icon
+    // Hide search icon, if JavaScript is not available.
-    @include break-from-device(tablet) {
+    .no-js &--search {
+      display: none;
+    }
+
+    // [tablet landscape +]: Hide the search icon
+    @include break-from-device(tablet landscape) {
 
       // Search icon
       &--search {

src/assets/stylesheets/layout/_nav.scss

@@ -259,9 +259,10 @@
       // Animate appearance, if browser supports 3D transforms
       .csstransforms3d & {
         display: block;
-        transform: translate3d(100%, 0, 0);
+        transform: translateX(100%);
-        transition: transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0),
+        transition:
-                    opacity   0.125s 0.05s;
+          transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0),
+          opacity   0.125s 0.05s;
         opacity: 0;
       }
     }
@@ -272,9 +273,10 @@
 
       // Animate appearance, if browser supports 3D transforms
       .csstransforms3d & {
-        transform: translate3d(0, 0, 0);
+        transform: translateX(0);
-        transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
+        transition:
-                    opacity   0.125s 0.125s;
+          transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
+          opacity   0.125s 0.125s;
         opacity: 1;
       }
     }

src/assets/stylesheets/layout/_search.scss

@@ -26,66 +26,114 @@
 
 // Search container
 .md-search {
-  padding: 0.8rem 0.8rem 0;
 
-  // Hide search, in case JavaScript is not available.
+  // Hide search, if JavaScript is not available.
   .no-js & {
     display: none;
   }
 
-  // [tablet +]: Header-embedded search
+  // [tablet landscape +]: Header-embedded search
-  @include break-from-device(tablet) {
+  @include break-from-device(tablet landscape) {
     padding: 0.4rem;
     padding-right: 3.2rem;
   }
 
-  // // Search overlay
+  // Search modal overlay
-  // &__overlay {
+  &__overlay {
-  //   display: none;
+    display: none;
-  //
+    pointer-events: none;
-  //   // [mobile -]: Only show overlay on mobile
+
-  //   @include break-to-device(mobile) {
+    // [tablet portrait -]: Show overlay
-  //     display: block;
+    @include break-to-device(tablet portrait) {
-  //     position: absolute;
+      display: block;
-  //     top: 0.4rem;
+      position: absolute;
-  //     left: 0.4rem;
+      top: 0.4rem;
-  //     width: 4.0rem;
+      left: 0.4rem;
-  //     height: 4.0rem;
+      width: 4.0rem;
-  //     transform-origin: center;
+      height: 4.0rem;
-  //     transition: transform 0.3s 0.1s,
+      transform-origin: center;
-  //                 opacity   0.2s 0.2s;
+      transition:
-  //     border-radius: 2.0rem;                                                    // TODO: correct?
+        transform 0.3s 0.1s,
-  //     background: #EEEEEE;
+        opacity   0.2s 0.2s;
-  //     opacity: 0;
+      border-radius: 2.0rem;
-  //     overflow: hidden;
+      background: $md-color-white;
-  //     z-index: 0;
+      opacity: 0;
-  //
+      overflow: hidden;
-  //     // Expanded overlay
+      z-index: 1;
-  //     .md-toggle--search:checked ~ .md-header & {
+
-  //       transform: scale(40);
+      // Expanded overlay
-  //       transition: transform 0.4s,
+      .md-toggle--search:checked ~ .md-header & {
-  //                   opacity   0.1s;
+        transition:
-  //       opacity: 1;
+          transform 0.4s,
-  //       z-index: 1;
+          opacity   0.1s;
-  //     }
+        opacity: 1;
-  //   }
+      }
-  // }
+    }
+
+    // Set scale factors (currently selected by trial)
+    .md-toggle--search:checked ~ .md-header & {
+
+      // [mobile portrait -]: Scale up 45 times
+      @include break-to-device(mobile portrait) {
+        transform: scale(45);
+      }
+
+      // [mobile landscape]: Scale up 60 times
+      @include break-at-device(mobile landscape) {
+        transform: scale(60);
+      }
+
+      // [mobile landscape]: Scale up 75 times
+      @include break-at-device(tablet portrait) {
+        transform: scale(75);
+      }
+    }
+  }
+
+  // Search modal wrapper
+  &__inner {
+    width: 100%;
+
+    // [tablet portrait -]: Put search modal off-canvas by default
+    @include break-to-device(tablet portrait) {
+      position: fixed;
+      top: 0;
+      left: 100%;
+      height: 100%;
+      transform: translateX(5%);
+      transition:
+        left      0s    0.3s,
+        transform 0.15s 0.15s cubic-bezier(0.4, 0.0, 0.2, 1.0),
+        opacity   0.15s 0.15s;
+      opacity: 0;
+      z-index: 2;
+
+      // Active search modal
+      .md-toggle--search:checked ~ .md-header & {
+        left: 0;
+        transform: translateX(0);
+        transition:
+          left      0s    0s,
+          transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1.0),
+          opacity   0.15s 0.15s;
+        opacity: 1;
+      }
+    }
+
+    // [tablet landscape +]: Make relative for inner positioning
+    @include break-from-device(tablet landscape) {
+      position: relative;
+    }
+  }
 
   // Search form
   &__form {
-    position: relative;
-    border-radius: 0.2rem;
-    text-align: right;
 
-    // [mobile -]: Add drop-shadow on mobile
+    // [tablet landscape +]: Header-embedded search
-    @include break-to-device(mobile) {
+    @include break-from-device(tablet landscape) {
-      @include z-depth(2);
-    }
-
-    // [tablet +]: Header-embedded search
-    @include break-from-device(tablet) {
       width: 23.0rem;
       transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
+      border-radius: 0.2rem;
 
       // Active search field
       [data-md-locked] & {
@@ -98,16 +146,23 @@
   &__icon {
     position: absolute;
     top: $md-icon-padding;
-    left: $md-icon-padding + $md-icon-margin;
+    left: $md-icon-padding + $md-icon-margin;                                   // TODO: solve in some other way...
     transition: color 0.25s;
     font-size: $md-icon-size;
     cursor: pointer;
 
-    // [mobile -]: Use back arrow as search icon
+    // Set search icon on pseudo class, so it can be overridden for mobile
-    @include break-to-device(mobile) {
+    // and tablet when the search is rendered in an overlay
-      top: 1.2rem;
+    &::before {
+      content: "search";
+    }
 
-      // Hack: @extend doesn't work in media queries, so override manually
+    // [tablet portrait -]: Use back arrow as search icon
+    @include break-to-device(tablet portrait) {
+      top: 1.6rem;
+      left: 1.6rem;
+
+      // Show back arrow instead of search icon
       &::before {
         content: "arrow_back";
       }
@@ -116,8 +171,7 @@
 
   // Search field
   &__input {
-    padding: 0 1.6rem 0 6.4rem;
+    padding: 0 1.6rem 0 7.2rem;
-    border-radius: 0.2rem;
     text-overflow: ellipsis;
 
     // Placeholder and icon color in active state
@@ -126,20 +180,22 @@
       color: $md-color-black--light;
     }
 
-    // [mobile -]: Full-screen search bar
+    // [tablet portrait -]: Full-screen search bar
-    @include break-to-device(mobile) {
+    @include break-to-device(tablet portrait) {
       width: 100%;
-      height: 4.8rem;
+      height: 5.6rem;
       font-size: 1.8rem;
     }
 
-    // [tablet +]: Header-embedded search
+    // [tablet landscape +]: Header-embedded search
-    @include break-from-device(tablet) {
+    @include break-from-device(tablet landscape) {
       width: 100%;
       height: 4.0rem;
       padding-left: 4.8rem;
-      transition: background-color 0.25s,
+      transition:
-                  color            0.25s;
+        background-color 0.25s,
+        color            0.25s;
+      border-radius: 0.2rem;
       background: $md-color-black--lighter;
       color: $md-color-white;
       font-size: ms(0);
@@ -158,7 +214,7 @@
 
       // Active search field
       [data-md-locked] & {
-        border-radius: 0.3rem 0.3rem 0 0;
+        border-radius: 0.2rem 0.2rem 0 0;
         background: $md-color-white;
         color: $md-color-black;
         text-overflow: none;

src/assets/stylesheets/layout/_sidebar.scss

@@ -53,9 +53,10 @@
       left: -24.2rem;
       width: 24.2rem;
       height: 100%;
-      transform: translate3d(0, 0, 0);
+      transform: translateX(0);
-      transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
+      transition:
-                  box-shadow 0.25s;
+        transform  0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
+        box-shadow 0.25s;
       background: $md-color-white;
       z-index: 2;
 
@@ -68,7 +69,7 @@
       .md-toggle--drawer:checked ~ .md-container & {
         @include z-depth(8);
 
-        transform: translate3d(24.2rem, 0, 0);
+        transform: translateX(24.2rem);
 
         // Just show drawer, if browser doesn't support 3D transforms
         .no-csstransforms3d & {
@@ -146,7 +147,7 @@
     }
   }
 
-  // Actual sidebar content
+  // Sidebar content
   &__inner {
 
     // [screen +]: Add line for reference

src/assets/stylesheets/layout/_source.scss

@@ -105,8 +105,9 @@
   &__fact {
     float: left;
     transform: translateY(0%);
-    transition: opacity   0.25s,
+    transition:
-                transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
+      transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0),
+      opacity   0.25s;
     opacity: 1;
 
     // Facts are hidden by default

src/partials/search.html

@@ -30,61 +30,7 @@
       <input type="text" class="md-search__input"
           placeholder="Search" autocapitalize="off" autocorrect="off"
           autocomplete="off" spellcheck="false" id="query" />
-      <label class="md-icon md-search__icon" for="query">
+      <label class="md-icon md-search__icon" for="query"></label>
-        search
-      </label>
-      <div class="md-search__output">
-        <div class="md-search-result">
-          <div class="md-search-result__meta">
-            3 Search results
-          </div>
-          <ol class="md-search-result__list">      <!-- TODO: use semantic tags -->
-            <!--<li class="md-search-result__item">
-              <a href="#" class="md-search-result__link">
-                <div class="md-search-result__title">
-                  Changing the color palette
-                </div>
-                <p class="md-search-result__description">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
-                  maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
-                  orci. Vestibulum ante ipsum primis in faucibus orci luctus et
-                  ultrices posuere cubilia Curae; Donec pellentesque orci id
-                  sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
-                </p>
-              </a>
-            </li>
-            <li class="md-search-result__item">
-              <a href="#" class="md-search-result__link">
-                <div class="md-search-result__title">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
-                  maximus ante vel tortor lacinia porttitor.
-                </div>
-                <p class="md-search-result__description">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
-                  maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
-                  orci. Vestibulum ante ipsum primis in faucibus orci luctus et
-                  ultrices posuere cubilia Curae; Donec pellentesque orci id
-                  sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
-                </p>
-              </a>
-            </li>
-            <li class="md-search-result__item">
-              <a href="#" class="md-search-result__link">
-                <div class="md-search-result__title">
-                  Admonition
-                </div>
-                <p class="md-search-result__description">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
-                  maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
-                  orci. Vestibulum ante ipsum primis in faucibus orci luctus et
-                  ultrices posuere cubilia Curae; Donec pellentesque orci id
-                  sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
-                </p>
-              </a>
-            </li>-->
-          </ol>
-        </div>
-      </div>
       <!--<div class="md-search__suggest">
         <div class="md-search-term">
           change color
@@ -95,9 +41,60 @@
         <div class="md-search-term">
           contributing
         </div>-->
-      </div>
 
       <!-- TODO: search results! -->
     </form>
+    <div class="md-search__output">
+      <div class="md-search-result">
+        <div class="md-search-result__meta">
+          3 Search results
+        </div>
+        <ol class="md-search-result__list">      <!-- TODO: use semantic tags -->
+          <!--<li class="md-search-result__item">
+            <a href="#" class="md-search-result__link">
+              <div class="md-search-result__title">
+                Changing the color palette
+              </div>
+              <p class="md-search-result__description">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+                maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
+                orci. Vestibulum ante ipsum primis in faucibus orci luctus et
+                ultrices posuere cubilia Curae; Donec pellentesque orci id
+                sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
+              </p>
+            </a>
+          </li>
+          <li class="md-search-result__item">
+            <a href="#" class="md-search-result__link">
+              <div class="md-search-result__title">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+                maximus ante vel tortor lacinia porttitor.
+              </div>
+              <p class="md-search-result__description">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+                maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
+                orci. Vestibulum ante ipsum primis in faucibus orci luctus et
+                ultrices posuere cubilia Curae; Donec pellentesque orci id
+                sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
+              </p>
+            </a>
+          </li>
+          <li class="md-search-result__item">
+            <a href="#" class="md-search-result__link">
+              <div class="md-search-result__title">
+                Admonition
+              </div>
+              <p class="md-search-result__description">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+                maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
+                orci. Vestibulum ante ipsum primis in faucibus orci luctus et
+                ultrices posuere cubilia Curae; Donec pellentesque orci id
+                sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
+              </p>
+            </a>
+          </li>-->
+        </ol>
+      </div>
+    </div>
   </div>
-</div>
+</div>