Reverted Admonition flex layout

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.906bc732.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.c56f44eb.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.906bc732.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.c56f44eb.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.5aea94d2.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.b463eb70.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.5aea94d2.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.b463eb70.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.906bc732.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.c56f44eb.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

package-lock.json

@@ -7928,6 +7928,16 @@
       "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=",
       "dev": true
     },
+    "string-replace-loader": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/string-replace-loader/-/string-replace-loader-2.2.0.tgz",
+      "integrity": "sha512-Ukt4ZC8+xVWdBRut3/iwnPJCNL1yV8AbVKXn8UcWdYrHgtuW4UDDAbBSi/J/CQDEWQBt824AJvPYahF23eJLRg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.3",
+        "schema-utils": "^1.0.0"
+      }
+    },
     "string-width": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",

package.json

@@ -69,12 +69,12 @@
     "material-shadows": "^3.0.1",
     "modularscale-sass": "^3.0.10",
     "postcss-loader": "^3.0.0",
-    "postcss-replace": "^1.1.0",
     "preact": "^10.3.4",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.2",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
+    "string-replace-loader": "^2.2.0",
     "stylelint": "^13.2.1",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^20.0.0",

src/assets/stylesheets/extensions/_admonition.scss

@@ -45,7 +45,7 @@
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
-  // Admonition
+  // Admonition extension
   .admonition {
     margin: 1.5625em 0;
     padding: 0 px2rem(12px);
@@ -64,7 +64,7 @@
       border-left: none;
     }
 
-    // Omit rendering errors for print
+    // Hack: omit rendering errors for print
     @media print {
       box-shadow: none;
     }
@@ -92,12 +92,17 @@
 
   // Admonition title
   .admonition-title {
-    display: flex;
+    position: relative;
     margin: 0 px2rem(-12px);
-    padding: px2rem(8px) px2rem(12px);
+    padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
     font-weight: 700;
     background-color: transparentize($clr-blue-a200, 0.9);
 
+    // Adjust for right-to-left languages
+    [dir="rtl"] & {
+      padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
+    }
+
     // Reset spacing, if title is the only element
     html &:last-child {
       margin-bottom: 0;
@@ -105,18 +110,18 @@
 
     // Icon
     &::before {
-      flex-shrink: 0;
+      position: absolute;
+      left: px2rem(12px);
       width: px2rem(20px);
       height: px2rem(20px);
-      margin-right: px2rem(8px);
       background-color: $clr-blue-a200;
       mask-image: var(--md-admonition-icon--note);
       content: "";
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
-        margin-right: initial;
+        right: px2rem(12px);
-        margin-left: px2rem(8px);
+        left: initial;
       }
 
       // Hack: mask-image is not supported in PDFs

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

@@ -40,6 +40,7 @@
 
     display: block;
     padding-top: 0;
+    overflow: visible;
 
     // Rotate title icon
     &[open] > summary::after {
@@ -50,17 +51,28 @@
     &:not([open]) {
       padding-bottom: 0;
     }
+
+    // Hack: omit margin collapse
+    &::after {
+      display: table;
+      content: "";
+    }
   }
 
-  // Title
+  // Details title
   summary {
     @extend .admonition-title;
 
     box-sizing: border-box;
     min-height: px2rem(20px);
-    outline: none;
+    padding: px2rem(8px) px2rem(36px) px2rem(8px) px2rem(40px);
     cursor: pointer;
 
+    // Adjust for right-to-left languages
+    [dir="rtl"] & {
+      padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(36px);
+    }
+
     // Remove default details marker
     &::-webkit-details-marker {
       display: none;
@@ -68,10 +80,11 @@
 
     // Details marker
     &::after {
-      flex-shrink: 0;
+      position: absolute;
+      top: px2rem(8px);
+      right: px2rem(8px);
       width: px2rem(20px);
       height: px2rem(20px);
-      margin-left: auto;
       background-image: var(--md-details-icon);
       transform: rotate(0deg);
       transition: transform 250ms;
@@ -79,48 +92,10 @@
 
       // Adjust for right-to-left languages
       [dir="rtl"] & {
-        margin-right: auto;
+        right: initial;
-        margin-left: initial;
+        left: px2rem(8px);
         transform: rotate(180deg);
       }
     }
-
-    // Hack: absolute positioning for summary elements in Safari 9+ because,
-    // of course, they cannot be flex containers: https://bit.ly/2IW5g4O
-    _:default:not(:root:root), & { // stylelint-disable-line
-      position: relative;
-      padding: px2rem(8px) px2rem(40px);
-
-      // Icon and details marker
-      &::before,
-      &::after {
-        position: absolute;
-        flex-shrink: initial;
-        margin: initial;
-      }
-
-      // Icon
-      &::before {
-        margin-left: px2rem(-28px);
-
-        // Adjust for right-to-left languages
-        [dir="rtl"] & {
-          margin-right: px2rem(-28px);
-          margin-left: initial;
-        }
-      }
-
-      // Details marker
-      &::after {
-        top: px2rem(8px);
-        right: px2rem(12px);
-
-        // Adjust for right-to-left languages
-        [dir="rtl"] & {
-          right: initial;
-          left: px2rem(12px);
-        }
-      }
-    }
   }
 }

webpack.config.ts

@@ -104,23 +104,30 @@ function config(args: Configuration): Configuration {
                 sourceMap: args.mode !== "production"
               }
             },
+            {
+              loader: "string-replace-loader",
+              options: {
+                multiple: [
+                  {
+                    search: "\\{{2}([^}]+)\\}{2}",
+                    replace(_: string, name: string) {
+                      return `data:image/svg+xml;utf8,${
+                          icon.getSVG(path.basename(name.trim(), ".json"))
+                            .replace(/"/g, "\\\"")
+                        }`
+                    },
+                    flags: "g"
+                  }
+                ]
+              }
+            },
             {
               loader: "postcss-loader",
               options: {
                 ident: "postcss",
                 plugins: () => [
                   require("autoprefixer")(),
-                  require("css-mqpacker"),
+                  require("css-mqpacker")
-                  require("postcss-replace")({
-                    data: new Proxy(data, {
-                      get(_, name: string) {
-                        return `data:image/svg+xml;utf8,${
-                          icon.getSVG(path.basename(name, ".json"))
-                            .replace(/"/g, "\\\"")
-                        }`
-                      }
-                    })
-                  })
                 ],
                 sourceMap: args.mode !== "production"
               }