Fixed some errors for print media

material/assets/manifest.json

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

src/assets/stylesheets/base/_typeset.scss

@@ -147,16 +147,6 @@ kbd {
     &:hover {
       color: var(--md-accent-fg-color);
     }
-
-    // Add URLs for print
-    @media print {
-
-      // Show link URL
-      &::after {
-        color: var(--md-default-fg-color--light);
-        content: " [" attr(href) "]";
-      }
-    }
   }
 
   // Code blocks

src/assets/stylesheets/extensions/_admonition.scss

@@ -51,6 +51,7 @@
     padding: 0 px2rem(12px);
     overflow: hidden;
     font-size: ms(-1);
+    page-break-inside: avoid;
     border-left: px2rem(4px) solid $clr-blue-a200;
     border-radius: px2rem(2px);
     box-shadow:
@@ -63,6 +64,11 @@
       border-left: none;
     }
 
+    // Omit rendering errors for print
+    @media print {
+      box-shadow: none;
+    }
+
     // Adjust spacing on last element
     html & > :last-child {
       margin-bottom: px2rem(12px);
@@ -112,6 +118,11 @@
         margin-right: initial;
         margin-left: px2rem(8px);
       }
+
+      // Hack: mask-image is not supported in PDFs
+      @media print {
+        background: var(--md-admonition-icon--note);
+      }
     }
 
     // Reset code inside Admonition titles
@@ -158,6 +169,11 @@
     &::before {
       background-color: $tint;
       mask-image: var(--md-admonition-icon--#{$type});
+
+      // Hack: mask-image is not supported in PDFs
+      @media print {
+        background: var(--md-admonition-icon--#{$type});
+      }
     }
   }
 

src/assets/stylesheets/extensions/_footnotes.scss

@@ -77,7 +77,7 @@
 
     // Footnote
     li {
-      transition: color 250ms;
+      transition: color 125ms;
 
       // Darken color for targeted footnote
       &:target {
@@ -89,16 +89,15 @@
         margin-top: 0;
       }
 
-      // Make back references visible on hover
+      // Make back references visible on container hover
       &:hover  .footnote-backref,
       &:target .footnote-backref {
         transform: translateX(0);
         opacity: 1;
       }
 
-      // Active or targeted back reference
-      &:hover  .footnote-backref:hover,
-      &:target .footnote-backref {
+      // Hovered back reference
+      &:hover  .footnote-backref:hover {
         color: var(--md-accent-fg-color);
       }
     }
@@ -113,7 +112,7 @@
   // Footnote back reference
   .footnote-backref {
     display: inline-block;
-    color: var(--md-default-fg-color--lighter);
+    color: var(--md-primary-fg-color);
     // Hack: remove Unicode arrow for icon
     font-size: 0;
     vertical-align: text-bottom;
@@ -147,5 +146,17 @@
         }
       }
     }
+
+    // Always show for print
+    @media print {
+      color: var(--md-primary-fg-color);
+      transform: translateX(0);
+      opacity: 1;
+
+      // Hack: mask-image is not supported in PDFs
+      &::before {
+        background: var(--md-footnotes-icon);
+      }
+    }
   }
 }

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

@@ -74,12 +74,22 @@
         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;
       mask-image: var(--md-tasklist-icon--checked);
+
+      // Hack: mask-image is not supported in PDFs
+      @media print {
+        background: var(--md-tasklist-icon--checked);
+      }
     }
 
     // Hide original checkbox behind icon

src/assets/stylesheets/layout/_clipboard.scss

@@ -35,7 +35,7 @@
   color: var(--md-default-fg-color--lightest);
   border-radius: px2rem(2px);
   cursor: pointer;
-  transition: color 250ms;
+  transition: color 125ms;
 
   // Hide for print
   @media print {

src/assets/stylesheets/layout/_footer.scss

@@ -193,7 +193,6 @@
     width: px2rem(32px);
     height: px2rem(32px);
     text-align: center;
-    transition: color 250ms;
 
     // Adjust line-height to match height for correct alignment
     &::before {