Replaced mask-image wherever possible to improve print styles

material/.icons/logo.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89" style="fill:#FFFFFF">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
   <path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" />
-  <path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity:0.5" />
+  <path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity: 0.5" />
   <path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" />
-  <path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity:0.25" />
+  <path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity: 0.25" />
 </svg>

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.c56f44eb.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.773bc13f.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.c56f44eb.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.773bc13f.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.0c35f0aa.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.0c35f0aa.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2613054f.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.2613054f.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.b463eb70.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.dfb60779.min.css",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.31180ff2.min.css"
 }

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.b463eb70.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.dfb60779.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.31180ff2.min.css' | url }}">
       {% endif %}
@@ -178,7 +178,7 @@
     {% endblock %}
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.0c35f0aa.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.c56f44eb.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.773bc13f.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

mkdocs.yml

@@ -57,8 +57,8 @@ theme:
     text: Roboto
     code: Roboto Mono
   icon:
+    logo: logo
   favicon: assets/favicon.png
-  logo: assets/images/icon.svg
 
 # Plugins
 plugins:

package-lock.json

@@ -2805,12 +2805,6 @@
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
       "dev": true
     },
-    "deep-get-set": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/deep-get-set/-/deep-get-set-1.1.0.tgz",
-      "integrity": "sha1-R7uiAIo/3px1PcvmGjYkFgbZg28=",
-      "dev": true
-    },
     "defaults": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
@@ -6645,67 +6639,6 @@
         }
       }
     },
-    "postcss-replace": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-replace/-/postcss-replace-1.1.0.tgz",
-      "integrity": "sha512-uhfI50AsXVlrNMEAqcPX9wcmSxUCifYFGkq+kiA/dPGZrF99OuVP322L2KR8PgndpLKubvZ+7TNWxAEUwckM0Q==",
-      "dev": true,
-      "requires": {
-        "deep-get-set": "^1.1.0",
-        "kind-of": "^6.0.2",
-        "postcss": "^7.0.14"
-      },
-      "dependencies": {
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "5.5.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
-          }
-        },
-        "kind-of": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
-        },
-        "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2",
-            "source-map": "^0.6.1",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
     "postcss-reporter": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz",

src/.icons/logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
+  <path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" />
+  <path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity: 0.5" />
+  <path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" />
+  <path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity: 0.25" />
+</svg>

src/assets/stylesheets/extensions/_admonition.scss

@@ -20,24 +20,37 @@
 /// DEALINGS
 ////
 
+// ----------------------------------------------------------------------------
+// Variables
+// ----------------------------------------------------------------------------
+
+///
+/// Admonition flavours
+///
+$admonitions: (
+  note:                       pencil $clr-blue-a200,
+  abstract summary tldr:      text-subject $clr-light-blue-a400,
+  info todo:                  information $clr-cyan-a700,
+  tip hint important:         fire $clr-teal-a700,
+  success check done:         check-circle $clr-green-a700,
+  question help faq:          help-circle $clr-light-green-a700,
+  warning caution attention:  alert $clr-orange-a400,
+  failure fail missing:       close-circle $clr-red-a200,
+  danger error:               flash-circle $clr-red-a400,
+  bug:                        bug $clr-pink-a400,
+  example:                    format-list-numbered $clr-deep-purple-a400,
+  quote cite:                 format-quote-close $clr-grey
+) !default;
+
 // ----------------------------------------------------------------------------
 // Rules: layout
 // ----------------------------------------------------------------------------
 
 // Icon definitions
 :root {
-  --md-admonition-icon--note: url("{{ pencil }}");
+  @each $names, $props in $admonitions {
-  --md-admonition-icon--abstract: url("{{ text-subject }}");
+    --md-admonition-icon--#{nth($names, 1)}: url("{{ #{$props} }}");
-  --md-admonition-icon--info: url("{{ information }}");
+  }
-  --md-admonition-icon--tip: url("{{ fire }}");
-  --md-admonition-icon--success: url("{{ check-circle }}");
-  --md-admonition-icon--question: url("{{ help-circle }}");
-  --md-admonition-icon--warning: url("{{ alert }}");
-  --md-admonition-icon--failure: url("{{ close-circle }}");
-  --md-admonition-icon--danger: url("{{ flash-circle }}");
-  --md-admonition-icon--bug: url("{{ bug }}");
-  --md-admonition-icon--example: url("{{ format-list-numbered }}");
-  --md-admonition-icon--quote: url("{{ format-quote-close }}");
 }
 
 // ----------------------------------------------------------------------------
@@ -114,8 +127,7 @@
       left: px2rem(12px);
       width: px2rem(20px);
       height: px2rem(20px);
-      background-color: $clr-blue-a200;
+      background-image: var(--md-admonition-icon--note);
-      mask-image: var(--md-admonition-icon--note);
       content: "";
 
       // Adjust for right-to-left languages
@@ -123,11 +135,6 @@
         right: px2rem(12px);
         left: initial;
       }
-
-      // Hack: mask-image is not supported in PDFs
-      @media print {
-        background: var(--md-admonition-icon--note);
-      }
     }
 
     // Reset code inside Admonition titles
@@ -143,42 +150,25 @@
 }
 
 // ----------------------------------------------------------------------------
-// Rules: different flavours
+// Rules: flavours
 // ----------------------------------------------------------------------------
 
-@each $names, $tint in (
+@each $names, $props in $admonitions {
-  abstract summary tldr: $clr-light-blue-a400,
+  $name: nth($names, 1);
-  info todo: $clr-cyan-a700,
+  $tint: nth($props, 2);
-  tip hint important: $clr-teal-a700,
-  success check done: $clr-green-a700,
-  question help faq: $clr-light-green-a700,
-  warning caution attention: $clr-orange-a400,
-  failure fail missing: $clr-red-a200,
-  danger error: $clr-red-a400,
-  bug: $clr-pink-a400,
-  example: $clr-deep-purple-a400,
-  quote cite: $clr-grey
-) {
-  $type: #{nth($names, 1)};
 
   // Define base class
-  .md-typeset .admonition.#{$type} {
+  .md-typeset .admonition.#{$name} {
     border-color: $tint;
   }
 
   // Define base class
-  .md-typeset .#{$type} > .admonition-title {
+  .md-typeset .#{$name} > .admonition-title {
     background-color: transparentize($tint, 0.9);
 
     // Icon
     &::before {
-      background-color: $tint;
+      background-image: var(--md-admonition-icon--#{$name});
-      mask-image: var(--md-admonition-icon--#{$type});
-
-      // Hack: mask-image is not supported in PDFs
-      @media print {
-        background: var(--md-admonition-icon--#{$type});
-      }
     }
   }
 
@@ -186,7 +176,7 @@
   @if length($names) > 1 {
     @for $n from 2 through length($names) {
       .#{nth($names, $n)} {
-        @extend .#{nth($names, 1)};
+        @extend .#{$name};
       }
     }
   }

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

@@ -63,7 +63,6 @@
   summary {
     @extend .admonition-title;
 
-    box-sizing: border-box;
     min-height: px2rem(20px);
     padding: px2rem(8px) px2rem(36px) px2rem(8px) px2rem(40px);
     cursor: pointer;

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

@@ -27,7 +27,7 @@
 // Icon definitions
 :root {
   --md-tasklist-icon: url("{{ checkbox-blank-circle }}");
-  --md-tasklist-icon--checked: url("{{ check-circle }}");
+  --md-tasklist-icon--checked: url("{{ check-circle #{$clr-green-a400} }}");
 }
 
 // ----------------------------------------------------------------------------
@@ -65,8 +65,8 @@
       left: px2em(-24px);
       width: px2em(20px);
       height: px2em(20px);
-      background-color: var(--md-default-fg-color--lightest);
+      background-image: var(--md-tasklist-icon);
-      mask-image: var(--md-tasklist-icon);
+      opacity: 0.1;
       content: "";
 
       // Adjust for right-to-left languages
@@ -74,22 +74,12 @@
         right: px2em(-24px);
         left: initial;
       }
-
-      // Hack: mask-image is not supported in PDFs
-      @media print {
-        background: var(--md-tasklist-icon);
-      }
     }
 
     // Checkbox icon in checked state
     [type="checkbox"]:checked + .task-list-indicator::before {
-      background-color: $clr-green-a400;
+      background-image: var(--md-tasklist-icon--checked);
-      mask-image: var(--md-tasklist-icon--checked);
+      opacity: 1;
-
-      // Hack: mask-image is not supported in PDFs
-      @media print {
-        background: var(--md-tasklist-icon--checked);
-      }
     }
 
     // Hide original checkbox behind icon

webpack.config.ts

@@ -109,12 +109,20 @@ function config(args: Configuration): Configuration {
               options: {
                 multiple: [
                   {
-                    search: "\\{{2}([^}]+)\\}{2}",
+                    search: "\\{{2}\\s+?([^}]+)\\s+?\\}{2}",
-                    replace(_: string, name: string) {
+                    replace(_: string, props: string) {
-                      return `data:image/svg+xml;utf8,${
+                      const [name, color] = props.split(" ")
-                          icon.getSVG(path.basename(name.trim(), ".json"))
+
-                            .replace(/"/g, "\\\"")
+                      /* Load icon and set color, if given */
-                        }`
+                      const svg = icon.getSVG(
+                        path.basename(name, ".json"),
+                        color ? ` style="fill: ${color}"` : undefined
+                      )
+                        .replace(/"/g, "'")
+                        .replace(/#/g, "%23")
+
+                      /* Return encoded icon */
+                      return `data:image/svg+xml;utf8,${svg}`
                     },
                     flags: "g"
                   }
@@ -271,6 +279,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
 
         /* Template files */
         new CopyPlugin([
+          { from: ".icons/*.svg" },
           { from: "assets/images/*" },
           { from: "**/*.{py,yml}" },
           {