Moving inlined icon SVGs to CSS variables to reduce payload

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.f0062e44.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.af1c26a5.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.f0062e44.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.af1c26a5.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.8ffe16eb.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.8ffe16eb.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.542c1c70.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.542c1c70.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.7668ff3e.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.b8b009d2.min.css",
-  "assets/stylesheets/palette.css": "assets/stylesheets/palette.823cd8cc.min.css"
+  "assets/stylesheets/palette.css": "assets/stylesheets/palette.31180ff2.min.css"
 }

material/base.html

@@ -41,9 +41,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.7668ff3e.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.b8b009d2.min.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.823cd8cc.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.31180ff2.min.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -178,7 +178,7 @@
     {% endblock %}
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.8ffe16eb.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.f0062e44.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.af1c26a5.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/stylesheets/base/_colors.scss

@@ -21,9 +21,10 @@
 ////
 
 // ----------------------------------------------------------------------------
-// Rules: colors
+// Rules
 // ----------------------------------------------------------------------------
 
+// Color definitions
 :root {
 
   // Default color shades

src/assets/stylesheets/base/_typeset.scss

@@ -58,6 +58,7 @@ kbd {
 .md-typeset {
   font-size: ms(0);
   line-height: 1.6;
+  hyphens: auto;
 
   // Colors should be kept when printing
   -webkit-print-color-adjust: exact; // stylelint-disable-line
@@ -167,6 +168,7 @@ kbd {
     color: var(--md-code-fg-color);
     font-size: 85%;
     direction: ltr;
+    hyphens: none;
     background-color: var(--md-code-bg-color);
 
     // Wrap text and hide scollbars

src/assets/stylesheets/extensions/_admonition.scss

@@ -24,6 +24,24 @@
 // Rules
 // ----------------------------------------------------------------------------
 
+// Icon definitions
+:root {
+  --md-admonition-icon--note: url("{{ pencil }}");
+  --md-admonition-icon--abstract: url("{{ text-subject }}");
+  --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 }}");
+}
+
+// ----------------------------------------------------------------------------
+
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
@@ -56,25 +74,23 @@
     }
 
     // Build representational classes
-    @each $names, $appearance in (
+    @each $names, $tint in (
-      abstract summary tldr: $clr-light-blue-a400 "text-subject",
+      abstract summary tldr: $clr-light-blue-a400,
-      info todo: $clr-cyan-a700 "information",
+      info todo: $clr-cyan-a700,
-      tip hint important: $clr-teal-a700 "fire",
+      tip hint important: $clr-teal-a700,
-      success check done: $clr-green-a700 "check-circle",
+      success check done: $clr-green-a700,
-      question help faq: $clr-light-green-a700 "help-circle",
+      question help faq: $clr-light-green-a700,
-      warning caution attention: $clr-orange-a400 "alert",
+      warning caution attention: $clr-orange-a400,
-      failure fail missing: $clr-red-a200 "close-circle",
+      failure fail missing: $clr-red-a200,
-      danger error: $clr-red-a400 "flash-circle",
+      danger error: $clr-red-a400,
-      bug: $clr-pink-a400 "bug",
+      bug: $clr-pink-a400,
-      example: $clr-deep-purple-a400 "format-list-numbered",
+      example: $clr-deep-purple-a400,
-      quote cite: $clr-grey "format-quote-close"
+      quote cite: $clr-grey
     ) {
-      $tint: nth($appearance, 1);
+      $type: #{nth($names, 1)};
-      $icon: nth($appearance, 2);
 
       // Define base class
-      &%#{nth($names, 1)},
+      &.#{$type} {
-      &.#{nth($names, 1)} {
         border-left-color: $tint;
 
         // Title
@@ -84,7 +100,7 @@
           // Icon
           &::before {
             background-color: $tint;
-            mask-image: url("{{ #{$icon} }}");
+            mask-image: var(--md-admonition-icon--#{$type});
           }
         }
       }
@@ -93,7 +109,7 @@
       @if length($names) > 1 {
         @for $n from 2 through length($names) {
           &.#{nth($names, $n)} {
-            @extend %#{nth($names, 1)};
+            @extend .#{nth($names, 1)};
           }
         }
       }
@@ -124,7 +140,7 @@
       height: px2rem(20px);
       margin-left: px2rem(-28px);
       background-color: $clr-blue-a200;
-      mask-image: url("{{ pencil }}");
+      mask-image: var(--md-admonition-icon--note);
       content: "";
 
       // Adjust for right-to-left languages

src/assets/stylesheets/extensions/_footnotes.scss

@@ -24,6 +24,13 @@
 // Rules
 // ----------------------------------------------------------------------------
 
+// Icon definitions
+:root {
+  --md-footnotes-icon: url("{{ keyboard-return }}");
+}
+
+// ----------------------------------------------------------------------------
+
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
@@ -138,7 +145,7 @@
       width: px2rem(16px);
       height: px2rem(16px);
       background-color: currentColor;
-      mask-image: url("{{ keyboard-return }}");
+      mask-image: var(--md-footnotes-icon);
       content: "";
 
       // Adjust for right-to-left languages

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

@@ -24,6 +24,13 @@
 // Rules
 // ----------------------------------------------------------------------------
 
+// Icon definitions
+:root {
+  --md-details-icon: url("{{ chevron-down }}");
+}
+
+// ----------------------------------------------------------------------------
+
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
@@ -82,7 +89,7 @@
       width: px2rem(20px);
       height: px2rem(20px);
       background-color: var(--md-default-fg-color--lighter);
-      mask-image: url("{{ chevron-down }}");
+      mask-image: var(--md-details-icon);
       content: "";
 
       // Adjust for right-to-left languages

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

@@ -32,6 +32,6 @@
   .twemoji,
   .gemoji {
     width: px2rem(20px);
-    vertical-align: text-top;
+    vertical-align: text-bottom;
   }
 }

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

@@ -24,6 +24,14 @@
 // Rules
 // ----------------------------------------------------------------------------
 
+// Icon definitions
+:root {
+  --md-tasklist-icon: url("{{ checkbox-blank-circle }}");
+  --md-tasklist-icon--checked: url("{{ check-circle }}");
+}
+
+// ----------------------------------------------------------------------------
+
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
@@ -58,7 +66,7 @@
       width: px2em(20px);
       height: px2em(20px);
       background-color: var(--md-default-fg-color--lightest);
-      mask-image: url("{{ checkbox-blank-circle }}");
+      mask-image: var(--md-tasklist-icon);
       content: "";
 
       // Adjust for right-to-left languages
@@ -71,7 +79,7 @@
     // Checkbox icon in checked state
     [type="checkbox"]:checked + .task-list-indicator::before {
       background-color: $clr-green-a400;
-      mask-image: url("{{ check-circle }}");
+      mask-image: var(--md-tasklist-icon--checked);
     }
 
     // Hide original checkbox behind icon

src/assets/stylesheets/palette.scss

@@ -53,7 +53,7 @@
   "green":       $clr-green-500       $clr-green-200       $clr-green-700,
   "light-green": $clr-light-green-500 $clr-light-green-200 $clr-light-green-700,
   "lime":        $clr-lime-500        $clr-lime-200        $clr-lime-700,
-  "yellow":      $clr-yellow-400      $clr-yellow-200      $clr-yellow-600,
+  "yellow":      $clr-yellow-500      $clr-yellow-200      $clr-yellow-700,
   "amber":       $clr-amber-500       $clr-amber-200       $clr-amber-700,
   "orange":      $clr-orange-400      $clr-orange-200      $clr-orange-600,
   "deep-orange": $clr-deep-orange-400 $clr-deep-orange-200 $clr-deep-orange-600,
@@ -72,6 +72,9 @@
     @if index("lime" "yellow" "amber" "orange", $name) {
       --md-primary-bg-color:           var(--md-default-fg-color);
       --md-primary-bg-color--light:    var(--md-default-fg-color--light);
+    } @else {
+      --md-primary-bg-color:           var(--md-default-bg-color);
+      --md-primary-bg-color--light:    var(--md-default-bg-color--light);
     }
   }
 }
@@ -82,6 +85,11 @@
 
 // Color palette
 [data-md-color-primary="white"] {
+  --md-primary-fg-color:               hsla(#{hex2hsl($clr-indigo-500)}, 1);
+  --md-primary-fg-color--light:        hsla(#{hex2hsl($clr-indigo-300)}, 1);
+  --md-primary-fg-color--dark:         hsla(#{hex2hsl($clr-indigo-700)}, 1);
+  --md-primary-bg-color:               var(--md-default-bg-color);
+  --md-primary-bg-color--light:        var(--md-default-bg-color--light);
 
   // Application header (stays always on top)
   .md-header {
@@ -162,6 +170,11 @@
 
 // Color palette
 [data-md-color-primary="black"] {
+  --md-primary-fg-color:               hsla(#{hex2hsl($clr-indigo-500)}, 1);
+  --md-primary-fg-color--light:        hsla(#{hex2hsl($clr-indigo-300)}, 1);
+  --md-primary-fg-color--dark:         hsla(#{hex2hsl($clr-indigo-700)}, 1);
+  --md-primary-bg-color:               var(--md-default-bg-color);
+  --md-primary-bg-color--light:        var(--md-default-bg-color--light);
 
   // Application header (stays always on top)
   .md-header {
@@ -242,6 +255,9 @@
     @if index("lime" "yellow" "amber" "orange", $name) {
       --md-accent-bg-color:            var(--md-default-fg-color);
       --md-accent-bg-color--light:     var(--md-default-fg-color--light);
+    } @else {
+      --md-accent-bg-color:            var(--md-default-bg-color);
+      --md-accent-bg-color--light:     var(--md-default-bg-color--light);
     }
   }
 }