Simplified font configuration CSS

material/assets/manifest.json

@@ -1,14 +1,16 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.994580cf.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.994580cf.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.18f0862e.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.18f0862e.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.87ed5edf.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.87ed5edf.min.js.map",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.d018e87b.min.js",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.d018e87b.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.9c0e82ba.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.9c0e82ba.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.cb6bc1d0.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.cb6bc1d0.min.css.map",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.0258fc15.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.0258fc15.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.5b7c1fa0.min.css",
   "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.5b7c1fa0.min.css.map",
-  "overrides/assets/stylesheets/main.css": "overrides/assets/stylesheets/main.b1224278.min.css",
-  "overrides/assets/stylesheets/main.css.map": "overrides/assets/stylesheets/main.b1224278.min.css.map"
+  "overrides/assets/javascripts/bundle.js": "overrides/assets/javascripts/bundle.cdb09f69.min.js",
+  "overrides/assets/javascripts/bundle.js.map": "overrides/assets/javascripts/bundle.cdb09f69.min.js.map",
+  "overrides/assets/stylesheets/main.css": "overrides/assets/stylesheets/main.21a5b0f1.min.css",
+  "overrides/assets/stylesheets/main.css.map": "overrides/assets/stylesheets/main.21a5b0f1.min.css.map"
 }

material/base.html

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.cb6bc1d0.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.0258fc15.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.5b7c1fa0.min.css' | url }}">
@@ -61,7 +61,7 @@
             font.text | replace(' ', '+') + ':300,400,400i,700%7C' +
             font.code | replace(' ', '+')
           }}&display=fallback">
-        <style>body,input{font-family:"{{ font.text }}",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"{{ font.code }}",SFMono-Regular,Consolas,Menlo,monospace}</style>
+        <style>:root{--md-text-font-family:"{{ font.text }}",;--md-code-font-family:"{{ font.code }}",}</style>
       {% endif %}
     {% endblock %}
     {% if config.extra.manifest %}
@@ -184,8 +184,8 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.18f0862e.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.994580cf.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.d018e87b.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.87ed5edf.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

material/overrides/assets/javascripts/bundle.cdb09f69.min.js

@@ -0,0 +1,2 @@
+!function(e,t){for(var r in t)e[r]=t[r]}(window,function(e){function t(t){for(var n,i,c=t[0],a=t[1],f=t[2],p=0,s=[];p<c.length;p++)i=c[p],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(l&&l(t);s.length;)s.shift()();return u.push.apply(u,f||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,c=1;c<r.length;c++){var a=r[c];0!==o[a]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={4:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="";var c=window.webpackJsonp=window.webpackJsonp||[],a=c.push.bind(c);c.push=t,c=c.slice();for(var f=0;f<c.length;f++)t(c[f]);var l=a;return u.push([50,0]),r()}({50:function(e,t,r){"use strict";r.r(t);var n=r(53);Object(n.a)(document.body,"click").subscribe(e=>{if(e.target instanceof HTMLElement){var t=e.target.closest("a[href^=http]");t instanceof HTMLLinkElement&&ga("send","event","outbound","click",t.href)}})}}));
+//# sourceMappingURL=bundle.cdb09f69.min.js.map

material/overrides/assets/stylesheets/main.21a5b0f1.min.css

@@ -1,3 +1,3 @@
 @-webkit-keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}@keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}.md-typeset figure>p+figcaption{margin-top:-1.2rem}.md-typeset .twitter{color:#00acee}.md-typeset .tx-video{width:auto}.md-typeset .tx-video__inner{position:relative;width:100%;height:0;padding-bottom:56.138%}.md-typeset .tx-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border:none}.md-typeset .tx-heart{-webkit-animation:tx-heart 1000ms infinite;animation:tx-heart 1000ms infinite}.md-typeset .tx-insiders{color:#e91e63}.md-typeset .tx-insiders-button{font-weight:400}.md-typeset .tx-insiders-count{font-weight:700}.md-typeset .tx-insiders-list{margin:2em 0;overflow:auto}.md-typeset .tx-insiders-list__item{display:block;float:left;width:3rem;height:3rem;margin:.2rem;overflow:hidden;border-radius:100%;transform:scale(1);transition:color 125ms,transform 125ms}.md-typeset .tx-insiders-list__item img{display:block;width:100%;height:auto;-webkit-filter:grayscale(100%);filter:grayscale(100%);transition:-webkit-filter 125ms;transition:filter 125ms;transition:filter 125ms, -webkit-filter 125ms}.md-typeset .tx-insiders-list__item:focus,.md-typeset .tx-insiders-list__item:hover{transform:scale(1.1)}.md-typeset .tx-insiders-list__item:focus img,.md-typeset .tx-insiders-list__item:hover img{-webkit-filter:grayscale(0%);filter:grayscale(0%)}.md-typeset .tx-insiders-list__item--private{color:var(--md-default-fg-color--lighter);font-weight:700;font-size:1.2rem;line-height:3rem;text-align:center;background:var(--md-default-fg-color--lightest)}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:focus,.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns ol,.md-typeset .tx-columns ul{-moz-columns:2;columns:2}@media screen and (max-width: 29.9375em){.md-typeset .tx-columns ol,.md-typeset .tx-columns ul{-moz-columns:initial;columns:initial}}.md-typeset .tx-columns li{-moz-column-break-inside:avoid;break-inside:avoid}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em}.tx-content__footer{margin-top:1rem;text-align:center}.tx-content__footer a{display:inline-block;color:#e91e63;transition:transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),color 125ms}.tx-content__footer a:focus,.tx-content__footer a:hover{transform:scale(1.2)}.tx-content__footer hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}[data-md-color-scheme=slate] .tx-container{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}@media screen and (max-width: 29.9375em){.tx-hero h1{font-size:1.4rem}}.tx-hero__content{padding-bottom:6rem}@media screen and (min-width: 60em){.tx-hero{display:flex;align-items:stretch}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{order:1;width:38rem;transform:translateX(4rem)}}@media screen and (min-width: 76.25em){.tx-hero__image{transform:translateX(8rem)}}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button:focus,.tx-hero .md-button:hover{color:var(--md-default-bg-color);background-color:var(--md-accent-fg-color);border-color:var(--md-accent-fg-color)}.tx-hero .md-button--primary{color:#894da8;background-color:var(--md-primary-bg-color);border-color:var(--md-primary-bg-color)}
 
-/*# sourceMappingURL=main.b1224278.min.css.map*/
+/*# sourceMappingURL=main.21a5b0f1.min.css.map*/

material/overrides/main.html

@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="{{ title }}">
   <meta name="twitter:description" content="{{ config.site_description }}">
   <meta name="twitter:image" content="{{ image }}">
-  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.b1224278.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.21a5b0f1.min.css' | url }}">
 {% endblock %}
 {% block announce %}
   <a href="https://twitter.com/squidfunk">
@@ -51,7 +51,7 @@
     </a>
   </footer>
 {% endblock %}
-{% block analytics %}
+{% block scripts %}
   {{ super() }}
-  <script>document.addEventListener("DOMContentLoaded",function(){document.body.addEventListener("click",function(e){if(e.target instanceof HTMLElement){var t=e.target.closest("a[href^=http]");t&&ga("send","event","outbound","click",t.href)}})})</script>
+  <script src="{{ 'overrides/assets/javascripts/bundle.cdb09f69.min.js' | url }}"></script>
 {% endblock %}

src/assets/stylesheets/main/_typeset.scss

@@ -35,7 +35,9 @@ body,
 input {
   color: var(--md-typeset-color);
   font-feature-settings: "kern", "liga";
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+  font-family:
+    var(--md-text-font-family,)
+    -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
 }
 
 // Define proportionally spaced fonts
@@ -44,7 +46,9 @@ pre,
 kbd {
   color: var(--md-typeset-color);
   font-feature-settings: "kern";
-  font-family: SFMono-Regular, Consolas, Menlo, monospace;
+  font-family:
+    var(--md-code-font-family,)
+    SFMono-Regular, Consolas, Menlo, monospace;
 }
 
 // ----------------------------------------------------------------------------

src/base.html

@@ -119,13 +119,9 @@
           }}&display=fallback"
         />
         <style>
-          body, input {
-            font-family: "{{ font.text }}",
-              -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
-          }
-          pre, code, kbd {
-            font-family: "{{ font.code }}",
-              SFMono-Regular, Consolas, Menlo, monospace;
+          :root {
+            --md-text-font-family: "{{ font.text }}",;
+            --md-code-font-family: "{{ font.code }}",;
           }
         </style>
       {% endif %}

src/overrides/assets/javascripts/index.ts

@@ -0,0 +1,11 @@
+import { fromEvent } from "rxjs"
+
+// Track click events
+fromEvent(document.body, "click")
+  .subscribe(ev => {
+    if (ev.target instanceof HTMLElement) {
+      var el = ev.target.closest("a[href^=http]")
+      if (el instanceof HTMLLinkElement)
+        ga("send", "event", "outbound", "click", el.href)
+    }
+  })

src/overrides/main.html

@@ -92,20 +92,10 @@
   </footer>
 {% endblock %}
 
-<!-- Analytics -->
-{% block analytics %}
+<!-- Theme-related JavaScript -->
+{% block scripts %}
   {{ super() }}
 
-  <!-- Track external links -->
-  <script>
-    document.addEventListener("DOMContentLoaded", function() {
-      document.body.addEventListener("click", function(ev) {
-        if (ev.target instanceof HTMLElement) {
-          var el = ev.target.closest("a[href^=http]")
-          if (el)
-            ga("send", "event", "outbound", "click", el.href)
-        }
-      })
-    })
-  </script>
+  <!-- Extra JavaScript -->
+  <script src="{{ 'overrides/assets/javascripts/bundle.js' | url }}"></script>
 {% endblock %}

webpack.config.ts

@@ -203,6 +203,8 @@ export default (_env: never, args: Configuration): Configuration[] => {
         "assets/javascripts/bundle":    "src/assets/javascripts",
         "assets/stylesheets/main":      "src/assets/stylesheets/main.scss",
         "assets/stylesheets/palette":   "src/assets/stylesheets/palette.scss",
+        "overrides/assets/javascripts/bundle":
+          "src/overrides/assets/javascripts",
         "overrides/assets/stylesheets/main":
           "src/overrides/assets/stylesheets/main.scss"
       },