Replaced SASS Lint with Stylelint

.sass-lint.yml

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

.stylelintrc

@@ -0,0 +1,191 @@
+{
+  "extends": "stylelint-config-standard",
+  "plugins": [
+    "stylelint-order",
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": null,
+    "at-rule-no-vendor-prefix": true,
+    "block-opening-brace-space-before": null,
+    "block-closing-brace-newline-after": ["always", {
+      "ignoreAtRules": [
+        "if",
+        "else",
+        "elseif"
+      ]
+    }],
+    "color-hex-case": "upper",
+    "color-hex-length": "long",
+    "color-named": "never",
+    "comment-empty-line-before": ["always", {
+      "ignore": ["stylelint-commands"]
+    }],
+    "font-family-name-quotes": "always-where-recommended",
+    "font-weight-notation": "numeric",
+    "function-url-quotes": "always",
+    "no-unknown-animations": true,
+    "order/declaration-block-order": [
+      "custom-properties",
+      "declarations"
+    ],
+    "order/declaration-block-properties-specified-order": [
+      "display",
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+
+      "flex",
+      "flex-basis",
+      "flex-direction",
+      "flex-flow",
+      "flex-grow",
+      "flex-shrink",
+      "flex-wrap",
+      "align-content",
+      "align-items",
+      "align-self",
+      "justify-content",
+      "order",
+
+      "width",
+      "min-width",
+      "max-width",
+
+      "height",
+      "min-height",
+      "max-height",
+
+      "margin",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+
+      "padding",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+
+      "float",
+      "clear",
+      "clip",
+
+      "columns",
+      "column-gap",
+      "column-fill",
+      "column-rule",
+      "column-span",
+      "column-count",
+      "column-width",
+
+      "transform",
+      "transform-box",
+      "transform-origin",
+      "transform-style",
+
+      "transition",
+      "transition-delay",
+      "transition-duration",
+      "transition-property",
+      "transition-timing-function",
+
+      "border",
+      "border-top",
+      "border-right",
+      "border-bottom",
+      "border-left",
+      "border-width",
+      "border-top-width",
+      "border-right-width",
+      "border-bottom-width",
+      "border-left-width",
+
+      "border-style",
+      "border-top-style",
+      "border-right-style",
+      "border-bottom-style",
+      "border-left-style",
+
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-left-radius",
+      "border-bottom-right-radius",
+
+      "border-color",
+      "border-top-color",
+      "border-right-color",
+      "border-bottom-color",
+      "border-left-color",
+
+      "outline",
+      "outline-color",
+      "outline-offset",
+      "outline-style",
+      "outline-width",
+
+      "background",
+      "background-attachment",
+      "background-clip",
+      "background-color",
+      "background-image",
+      "background-repeat",
+      "background-position",
+      "background-size",
+
+      "color",
+
+      "font",
+      "font-family",
+      "font-size",
+      "font-smoothing",
+      "font-style",
+      "font-variant",
+      "font-weight",
+
+      "letter-spacing",
+      "line-height",
+      "list-style",
+
+      "text-align",
+      "text-decoration",
+      "text-indent",
+      "text-overflow",
+      "text-rendering",
+      "text-shadow",
+      "text-transform",
+      "text-wrap",
+
+      "white-space",
+      "word-spacing",
+
+      "border-collapse",
+      "border-spacing",
+      "box-shadow",
+      "caption-side",
+      "content",
+      "cursor",
+      "empty-cells",
+      "opacity",
+      "overflow",
+      "quotes",
+      "speak",
+      "table-layout",
+      "vertical-align",
+      "visibility",
+      "z-index"
+    ],
+    "property-no-vendor-prefix": true,
+    "root-no-standard-properties": true,
+    "selector-class-pattern": "^[a-z0-9]+(-[a-z0-9]+)*(__[a-z]+)?(--[a-z]+)?$",
+    "selector-descendant-combinator-no-non-space": null,
+    "string-quotes": "double",
+    "unit-whitelist": ["rem", "em", "deg", "s", "%", "mm", "vh"],
+    "value-keyword-case": "lower",
+    "value-no-vendor-prefix": true
+  }
+}

CHANGELOG

@@ -1,12 +1,9 @@
-mkdocs-material-1.0.0 (2016-12-18)
+mkdocs-material-1.0.0 (2017-01-12)
 
-  The theme has been entirely rewritten from scratch to better reflect the
+  The theme has been entirely rewritten from scratch.
-  idea of what a documentation theme using the Material Design guidelines
-  should look like. It is heavily inspired by Google's own documentation
-  theme, but doesn't copy it blindly.
 
   * Introduced Webpack for more sophisticated JavaScript bundling
-  * Introduced ESLint and SassLint for code style checks
+  * Introduced ESLint and Stylelint for code style checks
   * Introduced more accurate Material Design colors and shadows
   * Introduced modular scales for harmonic font sizing
   * Introduced git-hooks for better development workflow

lib/tasks/assets/javascripts/lint.js

@@ -33,7 +33,7 @@ const eslint = new CLIEngine
 const format = eslint.getFormatter()
 
 /* ----------------------------------------------------------------------------
- * Task: lint SASS sources
+ * Task: lint JavaScript
  * ------------------------------------------------------------------------- */
 
 export default (gulp, config) => {

lib/tasks/assets/stylesheets/lint.js

@@ -20,10 +20,7 @@
  * IN THE SOFTWARE.
  */
 
-import path from "path"
+import stylelint from "gulp-stylelint"
-import sasslint from "sass-lint"
-import through from "through2"
-import util from "gulp-util"
 
 /* ----------------------------------------------------------------------------
  * Task: lint SASS sources
@@ -32,65 +29,11 @@ import util from "gulp-util"
 export default (gulp, config) => {
   return () => {
     return gulp.src(`${config.assets.src}/stylesheets/**/*.scss`)
-
-      /* Linting */
       .pipe(
-        through.obj(function(file, enc, done) {
+        stylelint({
-          if (file.isNull() || file.isStream())
+          reporters: [
-            return done()
+            { formatter: "string", console: true }
-
+          ]
-          /* Lint file using .sass-lint.yml */
-          file.sasslint = sasslint.lintFileText({
-            text: file.contents,
-            format: path.extname(file.path).replace(".", ""),
-            filename: path.relative(process.cwd(), file.path)
-          })
-
-          /* Push file to next stage */
-          this.push(file)
-          done()
         }))
-
-      /* Print errors */
-      .pipe(
-        through.obj(function(file, enc, done) {
-          sasslint.outputResults([file.sasslint])
-
-          /* Push file to next stage */
-          this.push(file)
-          done()
-        }))
-
-      /* Terminate on error */
-      .pipe(
-        (() => {
-          const errors = []
-
-          /* Gather errors */
-          return through.obj(function(file, enc, done) {
-            const results = file.sasslint
-
-            /* Consider warnings as errors during clean compilation */
-            if (results.errorCount || results.warningCount)
-              errors.push(file)
-
-            /* Push file to next stage */
-            this.push(file)
-            done()
-
-          /* Format errors and terminate */
-          }, function(done) {
-            if (errors.length > 0) {
-              const message = errors.map(file => {
-                return file.relative
-              }).join(", ")
-
-              /* Emit error */
-              this.emit("error", new util.PluginError("eslint",
-                `Terminated with errors in files: ${message}`))
-            }
-            done()
-          })
-        })())
   }
 }

material/base.html

@@ -36,7 +36,7 @@
       {% include "partials/fonts.html" %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-f676ef69b7.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-a736c18f69.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-0352baa348.palette.css">
       {% endif %}

package.json

@@ -65,6 +65,7 @@
     "gulp-rev-replace": "^0.4.3",
     "gulp-sass": "^2.2.0",
     "gulp-sourcemaps": "^1.6.0",
+    "gulp-stylelint": "^3.7.0",
     "gulp-svgmin": "^1.2.2",
     "gulp-uglify": "^1.5.2",
     "gulp-util": "^3.0.7",
@@ -83,8 +84,11 @@
     "mocha": "^3.1.0",
     "modularscale-sass": "^2.1.1",
     "node-notifier": "^4.5.0",
-    "sass-lint": "^1.9.1",
     "selenium-standalone": "^5.7.2",
+    "stylelint": "^7.7.1",
+    "stylelint-config-standard": "^15.0.1",
+    "stylelint-order": "^0.2.2",
+    "stylelint-scss": "^1.4.1",
     "through2": "^2.0.1",
     "vinyl-paths": "^2.1.0",
     "webpack": "^1.13.1",

scripts/lint

@@ -31,12 +31,12 @@ fi
 `npm bin`/eslint .
 ESLINT=$?
 
-# Run Sass-Lint
+# Run Stylelint
-`npm bin`/sass-lint -c .sass-lint.yml -vq
+`npm bin`/stylelint `find src/assets -name *.scss`
-SASSLINT=$?
+STYLELINT=$?
 
 # If one command failed, exit with error
-if [ $ESLINT == 1 ] || [ $SASSLINT == 1 ]; then
+if [ $ESLINT -gt 0 ] || [ $STYLELINT -gt 0 ]; then
   exit 1
 fi;
 

src/assets/stylesheets/_config.scss

@@ -32,6 +32,8 @@ $ms-ratio: $major-third;
 // Variables: breakpoints
 // ----------------------------------------------------------------------------
 
+// stylelint-disable unit-whitelist
+
 // Device-specific breakpoints
 $break-devices: (
   mobile: (
@@ -49,6 +51,8 @@ $break-devices: (
   )
 );
 
+// stylelint-enable unit-whitelist
+
 // ----------------------------------------------------------------------------
 // Variables: base colors
 // ----------------------------------------------------------------------------
@@ -65,9 +69,9 @@ $md-color-black--lightest:            hsla(0, 0%, 0%, 0.07);
 $md-color-black--transparent:         hsla(0, 0%, 0%, 0);
 
 // Shades of white
-$md-color-white:                      hsla(0, 0%, 100%, 1.00);
+$md-color-white:                      hsla(0, 0%, 100%, 1);
-$md-color-white--light:               hsla(0, 0%, 100%, 0.70);
+$md-color-white--light:               hsla(0, 0%, 100%, 0.7);
-$md-color-white--lighter:             hsla(0, 0%, 100%, 0.30);
+$md-color-white--lighter:             hsla(0, 0%, 100%, 0.3);
 $md-color-white--lightest:            hsla(0, 0%, 100%, 0.12);
 $md-color-white--transparent:         hsla(0, 0%, 100%, 0);
 

src/assets/stylesheets/application.palette.scss

@@ -44,7 +44,7 @@
 // Color tile
 button[data-md-color-primary],
 button[data-md-color-accent] {
-  width: 13.0rem;
+  width: 13rem;
   margin-bottom: 0.4rem;
   padding: 2.4rem 0.8rem 0.4rem;
   transition:

src/assets/stylesheets/base/.stylelintrc

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../../.stylelintrc",
+  "rules": {
+    "font-weight-notation": null,
+    "property-no-vendor-prefix": null
+  }
+}

src/assets/stylesheets/base/_icons.scss

@@ -37,10 +37,6 @@
   word-wrap: normal;
   direction: ltr;
 
-  // Enable font-smoothing in Webkit and FF
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
   // Icon rendered as button
   &__button {
     display: inline-block;

src/assets/stylesheets/base/_reset.scss

@@ -52,18 +52,6 @@ hr {
   box-sizing: content-box;
 }
 
-// Reset link styles
-a {
-  color: inherit;
-  text-decoration: none;
-
-  // Remove outline on focused or active links
-  &:active,
-  &:hover {
-    outline-width: 0;
-  }
-}
-
 // Remove gaps in underlined links in iOS >= 8 and Safari >= 8
 a {
   -webkit-text-decoration-skip: objects;
@@ -77,6 +65,18 @@ input {
   -webkit-tap-highlight-color: transparent;
 }
 
+// Reset link styles
+a {
+  color: inherit;
+  text-decoration: none;
+
+  // Remove outline on focused or active links
+  &:active,
+  &:hover {
+    outline-width: 0;
+  }
+}
+
 // Correct font-size in all browsers
 small {
   font-size: 80%;

src/assets/stylesheets/base/_typeset.scss

@@ -24,17 +24,19 @@
 // Rules: font definitions
 // ----------------------------------------------------------------------------
 
+// Enable font-smoothing in Webkit and FF
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 // Default fonts
 body,
 input {
   color: $md-color-black;
   // font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 400;
   font-feature-settings: "kern", "onum", "liga";
-
+  font-weight: 400;
-  // Enable font-smoothing in Webkit and FF
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 
   // Use system fonts, if browser doesn't support webfonts
   .no-fontface & {
@@ -48,8 +50,8 @@ code,
 kbd {
   color: $md-color-black;
   // font-family: "Roboto Mono", "Courier New", Courier, monospace;
-  font-weight: 400;
   font-feature-settings: "kern", "onum", "liga";
+  font-weight: 400;
 
   // Use system fonts, if browser doesn't support webfonts
   .no-fontface & {
@@ -74,12 +76,12 @@ kbd {
   ul,
   ol,
   blockquote {
-    margin: 1.0em 0;
+    margin: 1em 0;
   }
 
   // 1st level headline
   h1 {
-    margin: 0 0 4.0rem;
+    margin: 0 0 4rem;
     color: $md-color-black--light;
     font-size: ms(3);
     font-weight: 300;
@@ -89,7 +91,7 @@ kbd {
 
   // 2nd level headline
   h2 {
-    margin: 4.0rem 0 1.6rem;
+    margin: 4rem 0 1.6rem;
     font-size: ms(2);
     font-weight: 300;
     letter-spacing: -0.01em;
@@ -182,7 +184,7 @@ kbd {
     padding: 0.0625em * $correct 0;
     border-radius: 0.2rem;
     box-shadow:
-       0.25em * $correct 0 0 $md-code-background,
+      +0.25em * $correct 0 0 $md-code-background,
       -0.25em * $correct 0 0 $md-code-background;
     word-break: break-word;
     box-decoration-break: clone;
@@ -218,8 +220,8 @@ kbd {
 
   // Unformatted code blocks
   pre {
-    margin: 1.0em 0;
+    margin: 1em 0;
-    padding: 1.0rem 1.2rem;
+    padding: 1rem 1.2rem;
     border-radius: 0.2rem;
     line-height: 1.4;
     overflow: auto;
@@ -227,8 +229,8 @@ kbd {
 
     // [mobile -]: Stretch to whole width
     @include break-to-device(mobile) {
-      margin: 1.0em -1.6rem;
+      margin: 1em -1.6rem;
-      padding: 1.0rem 1.6rem;
+      padding: 1rem 1.6rem;
       border-radius: 0;
     }
 
@@ -280,7 +282,7 @@ kbd {
     border-radius: 0.2rem;
     background-color: transparentize($clr-yellow-500, 0.5);
     box-shadow:
-       0.25em 0 0 transparentize($clr-yellow-500, 0.5),
+      +0.25em 0 0 transparentize($clr-yellow-500, 0.5),
       -0.25em 0 0 transparentize($clr-yellow-500, 0.5);
     word-break: break-word;
     box-decoration-break: clone;
@@ -309,22 +311,22 @@ kbd {
     list-style-type: disc;
   }
 
-  // Ordered lists
-  ol ol {
-    list-style-type: lower-alpha;
-
-    // Triply nested ordered list
-    ol {
-      list-style-type: lower-roman;
-    }
-  }
-
   // Unordered and ordered lists
   ul,
   ol {
     margin-left: 0.625em;
     padding: 0;
 
+    // Nested ordered lists
+    ol {
+      list-style-type: lower-alpha;
+
+      // Triply nested ordered list
+      ol {
+        list-style-type: lower-roman;
+      }
+    }
+
     // List elements
     li {
       margin-bottom: 0.5em;
@@ -358,7 +360,7 @@ kbd {
   table:not([class]) {
     @include z-depth(2);
 
-    margin: 2.0em 0;
+    margin: 2em 0;
     border-radius: 0.2rem;
     font-size: ms(-1);
     overflow: hidden;
@@ -389,7 +391,7 @@ kbd {
 
     // Table headings
     th {
-      min-width: 10.0rem;
+      min-width: 10rem;
       padding: 1.2rem 1.6rem;
       background-color: $md-color-black--light;
       color: $md-color-white;

src/assets/stylesheets/extensions/_admonition.scss

@@ -41,7 +41,7 @@
     position: absolute;
     left: -2.6rem;
     color: $md-color-white;
-    font-size: 2.0rem;
+    font-size: 2rem;
     content: "edit";
     vertical-align: -0.25em;
   }

src/assets/stylesheets/extensions/_codehilite.scss

@@ -112,7 +112,7 @@ $codehilite-whitespace: transparent;
 .codehilite {
 
   // Operators
-  .o { color: $codehilite-operator; }
+  .o  { color: $codehilite-operator; }
   .ow { color: $codehilite-operator-word; }
 
   // Generics
@@ -216,8 +216,8 @@ $codehilite-whitespace: transparent;
   // 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;
+    margin: 1em 0;
-    padding: 1.0rem 1.2rem 0.8rem;
+    padding: 1rem 1.2rem 0.8rem;
     border-radius: 0.2rem;
     background-color: $md-code-background;
     color: $md-code-color;
@@ -257,7 +257,7 @@ $codehilite-whitespace: transparent;
   // Block with line numbers
   .codehilitetable {
     display: block;
-    margin: 1.0em 0;
+    margin: 1em 0;
     border-radius: 0.2em;
     font-size: ms(0);
     overflow: hidden;
@@ -286,7 +286,7 @@ $codehilite-whitespace: transparent;
 
     // Add spacing to line number container
     .linenodiv {
-      padding: 1.0rem 1.2rem 0.8rem;
+      padding: 1rem 1.2rem 0.8rem;
 
       // Stretch the line number container vertically, so it always aligns with
       // the code container, even when there's a scrollbar.
@@ -326,8 +326,8 @@ $codehilite-whitespace: transparent;
 
     // [mobile -]: Stretch to whole width
     @include break-to-device(mobile) {
-      margin: 1.0em -1.6rem;
+      margin: 1em -1.6rem;
-      padding: 1.0rem 1.6rem 0.8rem;
+      padding: 1rem 1.6rem 0.8rem;
       border-radius: 0;
     }
   }
@@ -338,13 +338,13 @@ $codehilite-whitespace: transparent;
 
     // [mobile -]: Stretch to whole width
     @include break-to-device(mobile) {
-      margin: 1.0em -1.6rem;
+      margin: 1em -1.6rem;
       border-radius: 0;
 
       // Increase spacing
       .codehilite,
       .linenodiv {
-        padding: 1.0rem 1.6rem;
+        padding: 1rem 1.6rem;
       }
     }
   }

src/assets/stylesheets/extensions/_permalinks.scss

@@ -30,7 +30,7 @@
   // Permalinks extension
   .headerlink {
     display: inline-block;
-    margin-left: 1.0rem;
+    margin-left: 1rem;
     transform: translate(0, 0.5rem);
     transition:
       transform 0.25s  0.25s,
@@ -84,8 +84,8 @@
     h2: 0.2rem,
     h3: 0.4rem,
     h4: 0.6rem,
-    h5: 1.0rem,
+    h5: 1rem,
-    h6: 1.0rem
+    h6: 1rem
   ) {
 
     // Un-targeted anchor

src/assets/stylesheets/extensions/pymdown/_arithmatex.scss

@@ -20,6 +20,8 @@
 /// DEALINGS
 ////
 
+// stylelint-disable selector-class-pattern
+
 // ----------------------------------------------------------------------------
 // Rules
 // ----------------------------------------------------------------------------

src/assets/stylesheets/extensions/pymdown/_critic.scss

@@ -41,7 +41,7 @@
   del.critic {
     background-color: $codehilite-diff-deleted;                                 // TODO: dependent on order of inclusion
     box-shadow:
-       0.25em 0 0 $codehilite-diff-deleted,
+      +0.25em 0 0 $codehilite-diff-deleted,
       -0.25em 0 0 $codehilite-diff-deleted;
   }
 
@@ -49,7 +49,7 @@
   ins.critic {
     background-color: $codehilite-diff-inserted;
     box-shadow:
-       0.25em 0 0 $codehilite-diff-inserted,
+      +0.25em 0 0 $codehilite-diff-inserted,
       -0.25em 0 0 $codehilite-diff-inserted;
   }
 
@@ -58,7 +58,7 @@
     background-color: $md-code-background;                                      // TODO: rename, centralize somehow
     color: $md-code-color;
     box-shadow:
-       0.25em 0 0 $md-code-background,
+      +0.25em 0 0 $md-code-background,
       -0.25em 0 0 $md-code-background;
 
     // Icon

src/assets/stylesheets/extensions/pymdown/_tasklist.scss

@@ -37,7 +37,7 @@
     [type="checkbox"] {
       position: absolute;
       top: 0.45em;
-      left: -2.0em;
+      left: -2em;
     }
   }
 

src/assets/stylesheets/helpers/_break.scss

@@ -107,8 +107,7 @@ $break-devices: () !default;
       @error "Invalid device map: #{$devices}";
     }
   }
-  @if type-of($current) == list or
+  @if type-of($current) == list or type-of($current) == number {
-      type-of($current) == number {
     $current: (default: $current);
   }
   @return break-select-min-max($current);
@@ -158,7 +157,7 @@ $break-devices: () !default;
       @content;
     }
   } @else {
-   @error "Invalid breakpoint: #{$breakpoint}";
+    @error "Invalid breakpoint: #{$breakpoint}";
   }
 }
 
@@ -175,7 +174,7 @@ $break-devices: () !default;
       @content;
     }
   } @else {
-   @error "Invalid breakpoint: #{$breakpoint}";
+    @error "Invalid breakpoint: #{$breakpoint}";
   }
 }
 

src/assets/stylesheets/helpers/_px2em.scss

@@ -36,7 +36,7 @@
 @function px2em($size, $base: 16px) {
   @if unit($size) == px {
     @if unit($base) == px {
-      @return ($size / $base) * 1.0em;
+      @return ($size / $base) * 1em;
     } @else {
       @error "Invalid base: #{$base} - unit must be 'px'";
     }

src/assets/stylesheets/layout/_base.scss

@@ -76,7 +76,7 @@ hr {
 
 // Template-wide grid
 .md-grid {
-  max-width: 120.0rem;
+  max-width: 120rem;
   margin-right: auto;
   margin-left: auto;
 }
@@ -109,12 +109,14 @@ hr {
 
     // If the browser supports calc(), no JavaScript is necessary
     .csscalc & {
-      min-height: calc(100% - #{5.6rem - 3.0rem});
+      min-height: calc(100% - #{5.6rem - 3rem});
 
       // Hack: Firefox doesn't correctly calculate min-height, as it takes the
       // top margin into account which leads to the container overflowing its
       // parent. For this reason we use this hack here to target only Firefox
       // and see if we can find a better solution later.
+
+      // stylelint-disable-next-line function-url-quotes
       @-moz-document url-prefix() {
         & {
           min-height: calc(100% - 5.6rem);

src/assets/stylesheets/layout/_footer.scss

@@ -93,7 +93,7 @@
   // Link title - set line height to match icon for correct alignment
   &__title {
     position: relative;
-    padding: 0 2.0rem;
+    padding: 0 2rem;
     font-size: 1.8rem;
     line-height: 4.8rem;
   }
@@ -103,8 +103,8 @@
     position: absolute;
     right: 0;
     left: 0;
-    margin-top: -2.0rem;
+    margin-top: -2rem;
-    padding: 0 2.0rem;
+    padding: 0 2rem;
     color: $md-color-white--light;
     font-size: 1.5rem;
   }
@@ -169,7 +169,7 @@
 
     // Adjust line-height to match height for correct alignment
     &::before {
-      line-height: 2.0;
+      line-height: 2;
     }
   }
 }

src/assets/stylesheets/layout/_header.scss

@@ -96,7 +96,7 @@
 
   // Header title - set line height to match icon for correct alignment
   &__title {
-    padding: 0 2.0rem;
+    padding: 0 2rem;
     font-size: 1.8rem;
     line-height: 4.8rem;
   }
@@ -125,8 +125,8 @@
     // [tablet landscape +]: Show the reposistory from tablet
     @include break-from-device(tablet landscape) {
       display: block;
-      width: 23.0rem;
+      width: 23rem;
-      max-width: 23.0rem;
+      max-width: 23rem;
       padding-right: 1.2rem;
     }
   }

src/assets/stylesheets/layout/_nav.scss

@@ -20,6 +20,8 @@
 /// DEALINGS
 ////
 
+// postcss-bem-linter: define nav
+
 // ----------------------------------------------------------------------------
 // Rules
 // ----------------------------------------------------------------------------
@@ -183,7 +185,7 @@
       html & .md-nav__title {
         position: relative;
         height: 11.2rem;
-        padding: 6.0rem 1.6rem 0.4rem;
+        padding: 6rem 1.6rem 0.4rem;
         background-color: $md-color-black--lightest;
         color: $md-color-black--light;
         font-weight: 400;
@@ -197,8 +199,8 @@
           position: absolute;
           top: 0.4rem;
           left: 0.4rem;
-          width: 4.0rem;
+          width: 4rem;
-          height: 4.0rem;
+          height: 4rem;
           color: $md-color-black--light;
         }
 
@@ -211,17 +213,20 @@
             linear-gradient(
               to bottom,
               $md-color-white 10%,
-              $md-color-white--transparent),
+              $md-color-white--transparent
+            ),
             linear-gradient(
               to bottom,
               $md-color-black--lighter,
               $md-color-black--lightest 35%,
-              $md-color-black--transparent 60%);
+              $md-color-black--transparent 60%
+            );
           background-attachment: local, scroll;
           background-color: $md-color-white;
           background-repeat: no-repeat;
-          background-size: 100% 2.0rem, 100% 1.0rem;
+          background-size: 100% 2rem, 100% 1rem;
 
+          // End of scrolling shadow definition
           box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
 
           // Remove border for first list item
@@ -306,7 +311,7 @@
 
         // 4th level link
         .md-nav .md-nav__link {
-          padding-left: 4.0rem;
+          padding-left: 4rem;
         }
 
         // 5th level link
@@ -330,7 +335,7 @@
         display: flex;
         transform: translateX(100%);
         transition:
-          transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0),
+          transform 0.25s cubic-bezier(0.8, 0, 0.6, 1),
           opacity   0.125s 0.05s;
         opacity: 0;
       }
@@ -344,7 +349,7 @@
       .csstransforms3d & {
         transform: translateX(0);
         transition:
-          transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
+          transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
           opacity   0.125s 0.125s;
         opacity: 1;
       }
@@ -403,7 +408,7 @@
     // Animation is only possible if JavaScript is available, as the max-height
     // property must be calculated before transitioning
     &[data-md-state="animate"] {
-      transition: max-height 0.25s cubic-bezier(0.86, 0.0, 0.07, 1.0);
+      transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1);
     }
 
     // Hide nested navigation by default

src/assets/stylesheets/layout/_search.scss

@@ -49,13 +49,13 @@
       position: absolute;
       top: 0.4rem;
       left: 0.4rem;
-      width: 4.0rem;
+      width: 4rem;
-      height: 4.0rem;
+      height: 4rem;
       transform-origin: center;
       transition:
         transform 0.3s 0.1s,
         opacity   0.2s 0.2s;
-      border-radius: 2.0rem;
+      border-radius: 2rem;
       background-color: $md-color-white;
       opacity: 0;
       overflow: hidden;
@@ -103,7 +103,7 @@
       transform: translateX(5%);
       transition:
         left      0s    0.3s,
-        transform 0.15s 0.15s cubic-bezier(0.4, 0.0, 0.2, 1.0),
+        transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1),
         opacity   0.15s 0.15s;
       opacity: 0;
       z-index: 2;
@@ -114,7 +114,7 @@
         transform: translateX(0);
         transition:
           left      0s    0s,
-          transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1.0),
+          transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
           opacity   0.15s 0.15s;
         opacity: 1;
       }
@@ -134,12 +134,10 @@
 
     // [tablet landscape +]: Header-embedded search
     @include break-from-device(tablet landscape) {
-      width: 23.0rem;
+      width: 23rem;
-
       // Hack: omit jitter when form is resized
       float: right;
-
+      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.0);
       border-radius: 0.2rem;
     }
 
@@ -186,7 +184,7 @@
     // [tablet landscape +]: Header-embedded search
     @include break-from-device(tablet landscape) {
       width: 100%;
-      height: 4.0rem;
+      height: 4rem;
       padding-left: 4.8rem;
       transition:
         background-color 0.25s,
@@ -269,7 +267,7 @@
     @include break-from-device(tablet landscape) {
       @include z-depth(6);
 
-      top: 4.0rem;
+      top: 4rem;
       transition: opacity 0.4s;
       opacity: 0;
 
@@ -287,20 +285,23 @@
     // Pure CSS scrolling shadows, taken from
     // http://lea.verou.me/2012/04/background-attachment-local/
     background:
-  		linear-gradient(
+      linear-gradient(
         to bottom,
         $md-color-white 10%,
-        $md-color-white--transparent),
+        $md-color-white--transparent
+      ),
       linear-gradient(
         to bottom,
         $md-color-black--lighter,
         $md-color-black--lightest 35%,
-        $md-color-black--transparent 60%);
+        $md-color-black--transparent 60%
+      );
     background-attachment: local, scroll;
     background-color: $md-color-white;
     background-repeat: no-repeat;
-    background-size: 100% 2.0rem, 100% 1.0rem;
+    background-size: 100% 2rem, 100% 1rem;
 
+    // End of scrolling shadow definition
     box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -352,7 +353,7 @@
     background-color: $md-color-black--lightest;
     color: $md-color-black--light;
     font-size: ms(-1);
-    line-height: 4.0rem;
+    line-height: 4rem;
 
     // [tablet landscape +]: Increase left indent
     @include break-from-device(tablet landscape) {
@@ -393,7 +394,7 @@
 
   // Search result content
   &__article {
-    margin: 1.0em 0;
+    margin: 1em 0;
   }
 
   // Search result title
@@ -408,7 +409,7 @@
 
   // Search result teaser
   &__teaser {
-    margin: 0.5em 0;;
+    margin: 0.5em 0;
     color: $md-color-black--light;
     font-size: ms(-1);
     line-height: 1.4;

src/assets/stylesheets/layout/_sidebar.scss

@@ -54,7 +54,7 @@
       height: 100%;
       transform: translateX(0);
       transition:
-        transform  0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
+        transform  0.25s cubic-bezier(0.4, 0, 0.2, 1),
         box-shadow 0.25s;
       background-color: $md-color-white;
       z-index: 2;
@@ -99,7 +99,7 @@
 
         // [screen +]: Limit to grid
         @include break-from-device(screen) {
-          margin-left: 120.0rem;
+          margin-left: 120rem;
         }
       }
     }
@@ -109,7 +109,6 @@
   &__scrollwrap {
     margin: 2.4rem 0.4rem;
     overflow-y: scroll;
-    // -webkit-overflow-scrolling: touch;                                       // TODO: problems with iOS
 
     // [tablet -]: Adjust margins
     @include break-to-device(tablet) {

src/assets/stylesheets/layout/_source.scss

@@ -26,7 +26,6 @@
 
 // Show source facts
 @keyframes md-source__facts--done {
-
   0% {
     height: 0;
   }
@@ -38,7 +37,6 @@
 
 // Show source fact
 @keyframes md-source__fact--done {
-
   0% {
     transform: translateY(100%);
     opacity: 0;
@@ -98,7 +96,7 @@
     // Correct alignment, if icon is present
     + .md-source__repository {
       margin-left: -4.4rem;
-      padding-left: 4.0rem;
+      padding-left: 4rem;
     }
   }
 
@@ -119,9 +117,9 @@
     padding: 0;
     font-size: 1.1rem;
     font-weight: 700;
+    list-style-type: none;
     opacity: 0.75;
     overflow: auto;
-    list-style-type: none;
 
     // Show after the data was loaded
     [data-md-state="done"] & {

src/partials/nav-item.html

@@ -54,7 +54,7 @@
     </nav>
   </li>
 
-<!-- Main navigation item with nested items -->
+<!-- Currently active page -->
 {% elif nav_item == page %}
   <li class="md-nav__item">
     {% set toc = page.toc %}
@@ -68,7 +68,7 @@
       {% set toc = (toc | first).children %}
     {% endif %}
 
-    <!-- Expand active pages -->
+    <!-- Render table of contents, if not empty -->
     {% if toc and (toc | first) %}
       <label class="md-nav__link md-nav__link--active" for="toc">
         {{ nav_item.title }}