diff --git a/docs/extensions/admonition.md b/docs/extensions/admonition.md
index 10684410c..8144d5238 100644
--- a/docs/extensions/admonition.md
+++ b/docs/extensions/admonition.md
@@ -1,57 +1,312 @@
 # Admonition
 
-## Variations
+[Admonition][] is an extension included in the standard Markdown library that
+makes it possible to add block-styled side content to your documentation, for
+example summaries, hints, notes or warnings.
+
+## Installation
+
+Add the following lines to your `mkdocs.yml`:
+
+``` yaml
+markdown_extensions:
+  - admonition
+```
+
+## Usage
+
+Admonition blocks follow a simple syntax: every block is started with `!!!`,
+followed by a single keyword which is used as the [type qualifier](#types) of
+the block. The content of the block then follows on the next line, indented by
+four spaces.
+
+Example:
+
+``` markdown
+!!! hint
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
 
 !!! hint
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
 
-!!! hint "Failure with custom name"
+### Change the title
 
-!!! hint
-    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.
+By default, the block title will equal the type qualifier. However, it can
+easily be changed by adding a quoted string after the type qualifier.
 
-    Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
-    sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
-    Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
+Example:
+
+``` markdown
+!!! hint "Phasellus posuere in sem ut cursus"
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+!!! hint "Phasellus posuere in sem ut cursus"
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+### Remove the title
+
+Similar to setting a [custom title](#change-the-title), the icon and title can
+be omitted by providing an empty string after the type qualifier:
+
+Example:
+
+``` markdown
+!!! hint ""
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
 
 !!! hint ""
-    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.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+### Embedded code blocks
+
+Blocks can contain all kinds of text content, including headlines, lists,
+paragraphs and other blocks – except code blocks, because the parser from the
+standard Markdown library does not account for those.
+
+However, the [PyMdown Extensions][] package adds an extension called
+`superfences`, which makes it possible to nest code blocks within other blocks.
+
+Example:
 
 !!! hint
-    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.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
 
-    > Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere
-    > sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
+    ``` mysql
+    SELECT
+      Employees.EmployeeID,
+      Employees.Name,
+      Employees.Salary,
+      Manager.Name AS Manager
+    FROM
+      Employees
+    LEFT JOIN
+      Employees AS Manager
+    ON
+      Employees.ManagerID = Manager.EmployeeID
+    WHERE
+      Employees.EmployeeID = '087652';
+    ```
 
     Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
     sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
     Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
 
-TODO: NESTED...
+## Types
 
-## Specimen
+Admonition supports user-defined type qualifiers which may influence the style
+of the inserted block. Following is a list of type qualifiers supported by the
+Material theme, whereas the default type, and thus fallback for unknown type
+qualifiers, is [hint](#hint).
 
-!!! hint "hint, note <small>default</small>"
+### Hint
 
-!!! summary "summary, tldr"
-    This is a very long text, yes. I'm so sorry.
+Example:
 
-!!! tip "tip, idea"
+``` markdown
+!!! hint
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
 
-!!! success "success, check, done"
+Result:
 
-!!! warning "warning, warn"
+!!! hint
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
 
-!!! failure "failure, fail, missing"
+Qualifiers:
 
-!!! fatal "danger, fatal"
+* `hint`
+* `note`
 
-!!! bug "error, bug"
\ No newline at end of file
+### Summary
+
+Example:
+
+``` markdown
+!!! summary
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+!!! summary
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+Qualifiers:
+
+* `summary`
+* `tldr`
+
+### Tip
+
+Example:
+
+``` markdown
+!!! tip
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+!!! tip
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+Qualifiers:
+
+* `tip`
+* `idea`
+
+### Success
+
+Example:
+
+``` markdown
+!!! success
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+!!! success
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+Qualifiers:
+
+* `success`
+* `check`
+* `done`
+
+### Warning
+
+Example:
+
+``` markdown
+!!! warning
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+!!! warning
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+Qualifiers:
+
+* `warning`
+* `attention`
+* `important`
+
+### Failure
+
+Example:
+
+``` markdown
+!!! failure
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+!!! failure
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+Qualifiers:
+
+* `failure`
+* `fail`
+* `missing`
+
+### Danger
+
+Example:
+
+``` markdown
+!!! danger
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+!!! danger
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+Qualifiers:
+
+* `danger`
+* `caution`
+
+### Error
+
+Example:
+
+``` markdown
+!!! error
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+```
+
+Result:
+
+!!! error
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
+    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
+    massa, nec semper lorem quam in massa.
+
+Qualifiers:
+
+* `error`
+* `bug`
+
+[Admonition]: https://pythonhosted.org/Markdown/extensions/admonition.html
+[PyMdown Extensions]: https://facelessuser.github.io/pymdown-extensions
diff --git a/src/assets/stylesheets/_config.scss b/src/assets/stylesheets/_config.scss
index bb777f41e..551bffa85 100644
--- a/src/assets/stylesheets/_config.scss
+++ b/src/assets/stylesheets/_config.scss
@@ -79,7 +79,7 @@ $md-icon-padding:                     $ms-base * 0.5;
 $md-icon-margin:                      $ms-base * 0.25;
 
 // Code blocks
-$md-code-background:                  #F7F7F7;
+$md-code-background:                  hsla(0, 0%, 0%, 0.035);
 $md-code-color:                       #37474F;
 
 // Keystrokes
diff --git a/src/assets/stylesheets/_shame.scss b/src/assets/stylesheets/_shame.scss
index 149df7d3e..3922c1906 100644
--- a/src/assets/stylesheets/_shame.scss
+++ b/src/assets/stylesheets/_shame.scss
@@ -48,7 +48,7 @@
     max-height: 0vh; // TODO: can this be done in percent!?!?!?
     opacity: 0;
     transition: opacity .4s, max-height .4s;
-    .md-js__search--locked & {
+    [data-md-locked] & {
       max-height: 75vh;
       opacity: 1;
     }
@@ -56,9 +56,9 @@
     position: absolute; // must be absolute, or header nav will stretch
     background: $md-color-white;
     // color: red;
-    border-top: px2rem(1px) solid $md-color-black--lightest; // TODO: box-shadow inset!
+    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 px2rem(3px) px2rem(3px);
+    border-radius: 0 0 0.3rem 0.3rem;
     z-index: -1;
 
     // Override native scrollbar styles
@@ -108,13 +108,13 @@
       margin: 0;
       padding: 0;
       list-style-type: none;
-      border-top: px2rem(1px) solid $md-color-black--lightest;
+      border-top: 0.1rem solid $md-color-black--lightest;
     }
 
     &__item {
       // background: yellow;
 
-      // border-top: px2rem(1px) solid $md-color-black--lightest;
+      // border-top: 0.1rem solid $md-color-black--lightest;
     }
 
 
@@ -161,10 +161,10 @@
 //
 //
 //   background: $md-color-white;
-//   border-radius: 0 0 px2rem(3px) px2rem(3px);
+//   border-radius: 0 0 0.3rem 0.3rem;
 //   color: #000000;
 //   text-align: left;
-//   border-top: px2rem(1px) solid $md-color-black--lightest;
+//   border-top: 0.1rem solid $md-color-black--lightest;
 //   display: none; // TODO: doesnt work due to display: none;
 //   opacity: 0;
 //
@@ -181,7 +181,7 @@
 // }
 
 .md-search__input:focus {
-  border-radius: px2rem(3px) px2rem(3px) 0 0;
+  border-radius: 0.3rem 0.3rem 0 0;
 }
 
 @include break-to-device(mobile landscape) {
@@ -398,4 +398,6 @@ mark {
 
 .md-search__output {
   overflow-y: auto; // necessary for rounded borders
-}
\ No newline at end of file
+}
+
+// TODO: integrate stylelint and property order!
diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss
index d747c9340..8e1abbfdb 100644
--- a/src/assets/stylesheets/base/_typeset.scss
+++ b/src/assets/stylesheets/base/_typeset.scss
@@ -132,7 +132,7 @@ kbd {
   // Horizontal separators
   hr {
     margin: 2.4rem 0;
-    border-bottom: px2rem(1px) dotted $md-color-black--lighter;
+    border-bottom: 0.1rem dotted $md-color-black--lighter;
   }
 
   // Links
@@ -223,14 +223,14 @@ kbd {
   kbd {
     display: inline-block;
     padding: 0.4rem 0.5rem 0.5rem;
-    border: px2rem(1px) solid darken($md-keyboard-background, 20%);
-    border-radius: px2rem(3px);
+    border: 0.1rem solid darken($md-keyboard-background, 20%);
+    border-radius: 0.2rem;
     border-bottom-color: darken($md-keyboard-background, 25%);
     background-color: $md-keyboard-background;
     color: $md-keyboard-color;
     font-size: 85%;
     line-height: 1.0rem;
-    box-shadow: 0 #{-(px2rem(1px))} 0
+    box-shadow: 0 -0.1rem 0
       darken($md-keyboard-background, 30%) inset;
     vertical-align: 0.1rem;
     word-break: break-word;
@@ -250,7 +250,7 @@ kbd {
   // Blockquotes, possibly nested
   blockquote {
     padding-left: 1.2rem;
-    border-left: px2rem(4px) solid $md-color-black--lighter;
+    border-left: 0.4rem solid $md-color-black--lighter;
     color: $md-color-black--light;
   }
 
diff --git a/src/assets/stylesheets/extensions/_admonition.scss b/src/assets/stylesheets/extensions/_admonition.scss
index 6440f2cc8..929fa471a 100644
--- a/src/assets/stylesheets/extensions/_admonition.scss
+++ b/src/assets/stylesheets/extensions/_admonition.scss
@@ -26,28 +26,12 @@
 
 // Admonition extension
 .admonition {
-  position: relative;
   margin: 2.0rem 0;
-  padding: 0.8rem 1.6rem;
-  border-left: px2rem(32px) solid $clr-blue-a200;
-  border-radius: px2rem(2px);
+  padding: 0.8rem 1.2rem;
+  border-left: 0.4rem solid $clr-blue-a200;
+  border-radius: 0 0.2rem 0.2rem 0;
   background: transparentize($clr-blue-a200, 0.95);
 
-  // Icon
-  &::before {
-    display: block;
-    position: absolute;     // TODO: inherit icon!
-    top: 0.2rem;
-    left: -2.6rem;
-    float: left;
-    color: $md-color-white;
-    font-family: "Material Icons";
-    font-size: 2.0rem;
-    font-weight: normal;
-    content: "edit";
-    vertical-align: -0.1em;
-  }
-
   // Title
   &-title {
     color: $clr-blue-a400;
@@ -56,14 +40,24 @@
     line-height: 2;
     text-transform: uppercase;
 
-    // Ensure smaller spacing to next element
+    // Remove bottom spacing for title
     html & {
-      margin-bottom: 1.6rem;
+      margin-bottom: 0;
     }
 
-    // Ensure smaller spacing to next element
+    // Remove top spacing for first element following title
     html & + * {
-      margin-top: 1.6rem;
+      margin-top: 0;
+    }
+
+    // Icon
+    &::before {
+      @extend %md-icon;
+
+      margin-right: 0.45em;
+      font-size: 2.0rem;
+      content: "edit";
+      vertical-align: -0.25em;
     }
   }
 
@@ -82,9 +76,9 @@
     summary tldr: $clr-light-blue-a400 "subject",
     tip idea: $clr-teal-a700 "whatshot",
     success check done: $clr-green-a400 "done",
-    warning warn: $clr-orange-a400 "warning",
+    warning attention important: $clr-orange-a400 "warning",
     failure fail missing: $clr-red-a200 "clear",
-    danger fatal: $clr-red-a400 "flash_on",
+    danger caution: $clr-red-a400 "flash_on",
     error bug: $clr-pink-a400 "bug_report"
   ) {
     $tint: nth($appearance, 1);
@@ -96,14 +90,14 @@
       border-color: $tint;
       background: transparentize($tint, 0.95);
 
-      // Icon
-      &::before {
-        content: $icon;
-      }
-
       // Set color for title
       .admonition-title {
         color: $tint;
+
+        // Icon
+        &::before {
+          content: $icon;
+        }
       }
     }
 
diff --git a/src/assets/stylesheets/extensions/_codehilite.scss b/src/assets/stylesheets/extensions/_codehilite.scss
index dfa800f91..baadf50ac 100644
--- a/src/assets/stylesheets/extensions/_codehilite.scss
+++ b/src/assets/stylesheets/extensions/_codehilite.scss
@@ -20,6 +20,60 @@
 /// DEALINGS
 ////
 
+// ----------------------------------------------------------------------------
+// Variables
+// ----------------------------------------------------------------------------
+
+// Keywords
+$codehilite-keyword: #3B78E7;
+$codehilite-keyword-declaration: #3B78E7;
+$codehilite-keyword-namespace: #3B78E7;
+$codehilite-keyword-reserved: #3E61A2;
+$codehilite-keyword-type: #3E61A2;
+
+// Comments
+$codehilite-comment: #999999;
+$codehilite-comment-multiline: #999999;
+$codehilite-comment-preproc: #666666;
+$codehilite-comment-single: #999999;
+$codehilite-comment-special: #999999;
+
+// Names
+$codehilite-name-attribute: #C2185B;
+$codehilite-name-builtin: #C2185B;
+$codehilite-name-builtin-pseudo: #3E61A2;
+$codehilite-name-class: #C2185B;
+$codehilite-name-constant: #3E61A2;
+$codehilite-name-decorator: #666666;
+$codehilite-name-entity: #666666;
+$codehilite-name-exception: #C2185B;
+$codehilite-name-function: #C2185B;
+$codehilite-name-label: #3B5179;
+$codehilite-name-namespace: #EC407A;
+$codehilite-name-tag: #3B78E7;
+$codehilite-name-variable: #3E61A2;
+$codehilite-name-variable-class: #3E61A2;
+$codehilite-name-variable-instance: #3E61A2;
+$codehilite-name-variable-global: #3E61A2;
+$codehilite-name-extension: #EC407A;
+
+// Literals
+$codehilite-literal-string: #0D904F; // #1eec86 for dark background
+$codehilite-literal-string-backticks: #0D904F;
+$codehilite-literal-string-char: #0D904F;
+$codehilite-literal-string-doc: #999999;
+$codehilite-literal-string-double: #0D904F;
+$codehilite-literal-string-single: #0D904F;
+$codehilite-literal-string-symbol: #0D904F;
+
+// Numbers
+$codehilite-literal-number: #E74C3C;
+$codehilite-literal-number-float: #E74C3C;
+$codehilite-literal-number-hex: #E74C3C;
+$codehilite-literal-number-integer: #E74C3C;
+$codehilite-literal-number-integer-long: #E74C3C;
+$codehilite-literal-number-oct: #E74C3C;
+
 // ----------------------------------------------------------------------------
 // Rules
 // ----------------------------------------------------------------------------
@@ -45,62 +99,62 @@
   .gt { color: #AA0000; } // Generic.Traceback
 
   // Keywords
-  .k  { color: #A71D5D; } // Keyword
+  .k  { color: $codehilite-keyword; }
   .kc { color: #A71D5D; } // Keyword.Constant
-  .kd { color: #A71D5D; } // Keyword.Declaration
-  .kn { color: #A71D5D; } // Keyword.Namespace
+  .kd { color: $codehilite-keyword-declaration; }
+  .kn { color: $codehilite-keyword-namespace; }
   .kp { color: #A71D5D; } // Keyword.Pseudo
-  .kr { color: #0086B3; } // Keyword.Reserved
-  .kt { color: #0086B3; } // Keyword.Type
+  .kr { color: $codehilite-keyword-reserved; }
+  .kt { color: $codehilite-keyword-type; }
 
   // Comments
-  .c  { color: #969896; } // Comment
-  .cm { color: #969896; } // Comment.Multiline
-  .cp { color: #666666; } // Comment.Preproc
-  .c1 { color: #969896; } // Comment.Single
-  .cs { color: #969896; } // Comment.Special
+  .c  { color: $codehilite-comment; }
+  .cm { color: $codehilite-comment-multiline; }
+  .cp { color: $codehilite-comment-preproc; }
+  .c1 { color: $codehilite-comment-single; }
+  .cs { color: $codehilite-comment-special; }
 
   // Names
-  .na { color: #795DA3; } // Name.Attribute
-  .na { color: #795DA3; } // Name.Attribute
-  .nb { color: #795DA3; } // Name.Builtin
-  .bp { color: #795DA3; } // Name.Builtin.Pseudo
-  .nc { color: #795DA3; } // Name.Class
-  .no { color: #795DA3; } // Name.Constant
-  .nd { color: #795DA3; } // Name.Decorator
-  .ni { color: #795DA3; } // Name.Entity
-  .ne { color: #795DA3; } // Name.Exception
-  .nf { color: #795DA3; } // Name.Function
-  .nl { color: #795DA3; } // Name.Label
-  .nn { color: #795DA3; } // Name.Namespace
-  .nt { color: #795DA3; } // Name.Tag
-  .nv { color: #795DA3; } // Name.Variable
-  .vc { color: #795DA3; } // Name.Variable.Class
-  .vg { color: #795DA3; } // Name.Variable.Global
-  .vi { color: #795DA3; } // Name.Variable.Instance
-  .ow { color: inherit; } // Operator.Word
+  .na { color: $codehilite-name-attribute; }
+  .nb { color: $codehilite-name-builtin; }
+  .bp { color: $codehilite-name-builtin-pseudo; }
+  .nc { color: $codehilite-name-class; }
+  .no { color: $codehilite-name-constant; }
+  .nd { color: $codehilite-name-entity; }
+  .ni { color: $codehilite-name-entity; }
+  .ne { color: $codehilite-name-exception; }
+  .nf { color: $codehilite-name-function; }
+  .nl { color: $codehilite-name-label; }
+  .nn { color: $codehilite-name-namespace; }
+  .nt { color: $codehilite-name-tag; }
+  .nv { color: $codehilite-name-variable; }
+  .vc { color: $codehilite-name-variable-class; }
+  .vg { color: $codehilite-name-variable-global; }
+  .vi { color: $codehilite-name-variable-instance; }
+  .nx { color: $codehilite-name-extension; }
+  .ow { color: inherit; }
 
   // Numbers
-  .m  { color: #0086B3; } // Literal.Number
-  .mf { color: #0086B3; } // Literal.Number.Float
-  .mh { color: #0086B3; } // Literal.Number.Hex
-  .mi { color: #0086B3; } // Literal.Number.Integer
-  .mo { color: #0086B3; } // Literal.Number.Oct
-  .il { color: #0086B3; } // Literal.Number.Integer.Long
+  .m  { color: $codehilite-literal-number; }
+  .mf { color: $codehilite-literal-number-float; }
+  .mh { color: $codehilite-literal-number-hex; }
+  .mi { color: $codehilite-literal-number-integer; }
+  .il { color: $codehilite-literal-number-integer-long; }
+  .mo { color: $codehilite-literal-number-oct; }
 
   // Strings
-  .s  { color: #183691; } // Literal.String
-  .sb { color: #183691; } // Literal.String.Backtick
-  .sc { color: #183691; } // Literal.String.Char
-  .sd { color: #183691; } // Literal.String.Doc
-  .s2 { color: #183691; } // Literal.String.Double
+  .s  { color: $codehilite-literal-string; }
+  .sb { color: $codehilite-literal-string-backticks; }
+  .sc { color: $codehilite-literal-string-char; }
+  .sd { color: $codehilite-literal-string-doc; }
+  .s2 { color: $codehilite-literal-string-double; }
   .se { color: #183691; } // Literal.String.Escape
   .sh { color: #183691; } // Literal.String.Heredoc
   .si { color: #183691; } // Literal.String.Interpol
   .sx { color: #183691; } // Literal.String.Other
   .sr { color: #009926; } // Literal.String.Regex
-  .s1 { color: #D01040; } // Literal.String.Single
-  .ss { color: #990073; } // Literal.String.Symbol
+  .s1 { color: $codehilite-literal-string-single; }
+  .ss { color: $codehilite-literal-string-symbol; }
 
   // Diffs
   .gd { background-color: #FFDDDD; } // Generic.Deleted
diff --git a/src/assets/stylesheets/helpers/_px2em.scss b/src/assets/stylesheets/helpers/_px2em.scss
index 46a49f963..55fee3366 100644
--- a/src/assets/stylesheets/helpers/_px2em.scss
+++ b/src/assets/stylesheets/helpers/_px2em.scss
@@ -44,24 +44,3 @@
     @error "Invalid size: #{$size} - unit must be 'px'";
   }
 }
-
-///
-/// Convert font size in px to rem.
-///
-/// @group  helpers
-/// @access public
-/// @param  {Number} $size Font size in px
-/// @param  {Number} $base Base font size
-/// @return {Number}       Font size in rem
-///
-@function px2rem($size, $base: 10px) {
-  @if unit($size) == px {
-    @if unit($base) == px {
-      @return ($size / $base) * 1.0rem;
-    } @else {
-      @error "Invalid base: #{$base} - unit must be 'px'";
-    }
-  } @else {
-    @error "Invalid size: #{$size} - unit must be 'px'";
-  }
-}
diff --git a/src/assets/stylesheets/layout/_base.scss b/src/assets/stylesheets/layout/_base.scss
index e97c6c80b..62b428104 100644
--- a/src/assets/stylesheets/layout/_base.scss
+++ b/src/assets/stylesheets/layout/_base.scss
@@ -47,7 +47,7 @@ body {
   min-height: 100%;
 
   // Lock body to viewport height (e.g. in search mode)
-  &.md-js__body--locked {
+  &[data-md-locked] {
     height: 100%;
     overflow: hidden;
   }
@@ -56,7 +56,7 @@ body {
 // Horizontal separators
 hr {
   display: block;
-  height: px2rem(1px);
+  height: 0.1rem;
   padding: 0;
   border: 0;
 }
diff --git a/src/assets/stylesheets/layout/_nav.scss b/src/assets/stylesheets/layout/_nav.scss
index 959b146fb..1b11db213 100644
--- a/src/assets/stylesheets/layout/_nav.scss
+++ b/src/assets/stylesheets/layout/_nav.scss
@@ -31,7 +31,7 @@
 
   // Table of contents
   &--secondary {
-    border-left: px2rem(4px) solid $md-color-primary;
+    border-left: 0.4rem solid $md-color-primary;
   }
 
   // List title
diff --git a/src/assets/stylesheets/layout/_search.scss b/src/assets/stylesheets/layout/_search.scss
index 28b32429a..88d0bcfc3 100644
--- a/src/assets/stylesheets/layout/_search.scss
+++ b/src/assets/stylesheets/layout/_search.scss
@@ -74,7 +74,7 @@
   // Search form
   &__form {
     position: relative;
-    border-radius: px2rem(2px);
+    border-radius: 0.2rem;
     text-align: right;
 
     // [mobile -]: Add drop-shadow on mobile
@@ -88,7 +88,7 @@
       transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
 
       // Active search field
-      .md-js__search--locked & {
+      [data-md-locked] & {
         width: 66.8rem;
       }
     }
@@ -117,7 +117,7 @@
   // Search field
   &__input {
     padding: 0 1.6rem 0 6.4rem;
-    border-radius: px2rem(2px);
+    border-radius: 0.2rem;
     text-overflow: ellipsis;
 
     // Placeholder and icon color in active state
@@ -157,8 +157,8 @@
       }
 
       // Active search field
-      .md-js__search--locked & {
-        border-radius: px2rem(3px) px2rem(3px) 0 0;
+      [data-md-locked] & {
+        border-radius: 0.3rem 0.3rem 0 0;
         background: $md-color-white;
         color: $md-color-black;
         text-overflow: none;
diff --git a/src/assets/stylesheets/layout/_sidebar.scss b/src/assets/stylesheets/layout/_sidebar.scss
index 4a0703e73..6e608fc1c 100644
--- a/src/assets/stylesheets/layout/_sidebar.scss
+++ b/src/assets/stylesheets/layout/_sidebar.scss
@@ -37,8 +37,8 @@
     top: 5.6rem;
   }
 
-  // Omit repaint of whole page by promoting primary sidebar - not the
-  // secondary sidebar, because then the thick line becomes jittery
+  // Omit repaint of whole page by promoting primary sidebar to a separate
+  // layer, but not the secondary sidebar to omit jittering
   &--primary {
     backface-visibility: hidden;
   }
@@ -151,7 +151,7 @@
 
     // [screen +]: Add line for reference
     @include break-from-device(screen) {
-      border-right: px2rem(1px) solid $md-color-black--lightest;
+      border-right: 0.1rem solid $md-color-black--lightest;
     }
   }
 }