Refactored code blocks

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.09a66b8b.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.49424ed7.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.09a66b8b.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.49424ed7.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.f6bd1725.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.f6bd1725.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.154a8287.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.7930c394.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.154a8287.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.7930c394.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.f6bd1725.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.09a66b8b.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.49424ed7.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/stylesheets/base/_typeset.scss

@@ -166,10 +166,8 @@ kbd {
   pre,
   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
     @media print {
@@ -179,15 +177,15 @@ kbd {
 
   // Inline code blocks, correct relative ems for smaller font size
   code {
-    $f: 1 / 0.85;
+    margin: 0 px2em(4px, 13.6px);
-
+    padding: px2em(1px, 13.6px) 0;
-    margin: 0 0.25em * $f;
+    font-size: px2em(13.6px);
-    padding: 0.0625em * $f 0;
     word-break: break-word;
+    background-color: var(--md-code-bg-color);
     border-radius: px2rem(2px);
     box-shadow:
-      +0.25em * $f 0 0 var(--md-code-bg-color),
+      px2em( 4px, 13.6px) 0 0 var(--md-code-bg-color),
-      -0.25em * $f 0 0 var(--md-code-bg-color);
+      px2em(-4px, 13.6px) 0 0 var(--md-code-bg-color);
     box-decoration-break: clone;
   }
 
@@ -218,7 +216,6 @@ kbd {
     position: relative;
     margin: 1em 0;
     line-height: 1.4;
-    border-radius: px2rem(2px);
     // Hack: reduce jitter
     backface-visibility: hidden;
     -webkit-overflow-scrolling: touch;
@@ -227,11 +224,9 @@ kbd {
     > code {
       display: block;
       margin: 0;
-      padding: px2rem(10.5px) px2rem(12px);
+      padding: px2rem(10.5px) px2em(16px, 13.6px);
       overflow: auto;
-      font-size: inherit;
       word-break: normal;
-      background-color: transparent;
       box-shadow: none;
       box-decoration-break: slice;
 
@@ -259,22 +254,19 @@ kbd {
     // Stretch top-level containers
     > pre {
       margin: 1em px2rem(-16px);
-      border-radius: 0;
 
-      // Actual container with code, overflowing
+      // Remove rounded borders
-      > code {
+      code {
-        padding: px2rem(10.5px) px2rem(16px);
+        border-radius: 0;
       }
     }
   }
 
   // Keystrokes
   kbd {
-    $f: 1 / 0.85;
-
     display: inline-block;
-    padding: 0 0.5em * $f;
+    padding: 0 px2em(8px, 12px);
-    font-size: 0.75em;
+    font-size: px2em(12px);
     line-height: 1.5;
     vertical-align: text-top;
     word-break: break-word;
@@ -287,14 +279,14 @@ kbd {
 
   // Text highlighting marker
   mark {
-    margin: 0 0.25em;
+    margin: 0 px2em(4px, 16px);
-    padding: 0.0625em 0;
+    padding: px2em(1px, 16px) 0;
     word-break: break-word;
     background-color: transparentize($clr-yellow-500, 0.5);
     border-radius: px2rem(2px);
     box-shadow:
-      +0.25em 0 0 transparentize($clr-yellow-500, 0.5),
+      px2em( 4px, 16px) 0 0 transparentize($clr-yellow-500, 0.5),
-      -0.25em 0 0 transparentize($clr-yellow-500, 0.5);
+      px2em(-4px, 16px) 0 0 transparentize($clr-yellow-500, 0.5);
     box-decoration-break: clone;
   }
 

src/assets/stylesheets/extensions/_codehilite.scss

@@ -194,15 +194,9 @@ $codehilite-whitespace: transparent;
   // Highlighted lines
   .hll {
     display: block;
-    margin: 0 px2rem(-12px);
-    padding: 0 px2rem(12px);
-    background-color: transparentize($clr-yellow-500, 0.5);
-
-    // [mobile -]: Stretch to whole width
-    @include break-to-device(mobile) {
     margin: 0 px2rem(-16px);
     padding: 0 px2rem(16px);
-    }
+    background-color: transparentize($clr-yellow-500, 0.5);
   }
 }
 
@@ -231,29 +225,29 @@ $codehilite-whitespace: transparent;
 
   // The pre tags are nested inside a table, so we need to remove the
   // margin because it collapses below all the overflows
-  pre,
+  pre {
-  .linenodiv {
     margin: 0;
-    border-radius: 0;
-  }
-
-  // Add spacing to line number container
-  .linenodiv {
-    padding: px2rem(10.5px) px2rem(12px);
   }
 
   // Disable user selection, so code can be easily copied without
   // accidentally also copying the line numbers
   .linenos {
-    color: var(--md-default-fg-color--lighter);
+    padding: px2rem(10.5px) px2em(16px, 13.6px);
-    box-shadow: inset 0 0 0 px2rem(1px) var(--md-code-bg-color);
+    padding-right: 0;
+    font-size: px2em(13.6px);
+    background-color: var(--md-code-bg-color);
     user-select: none;
+  }
+
+  // Add spacing to line number container
+  .linenodiv {
+    padding-right: px2em(8px, 13.6px);
+    box-shadow: inset px2rem(-1px) 0 var(--md-default-fg-color--lightest);
 
     // Reset spacings
     pre {
-      color: inherit;
+      color: var(--md-default-fg-color--lighter);
       text-align: right;
-      background-color: transparent;
     }
   }
 
@@ -271,7 +265,12 @@ $codehilite-whitespace: transparent;
   // Block with line numbers
   > .codehilitetable {
     margin: 1em 0;
-    border-radius: 0.2em;
+    border-radius: px2rem(2px);
+
+    // Remove rounded borders
+    code {
+      border-radius: 0;
+    }
   }
 
   // [mobile -]: Stretch to whole width
@@ -281,9 +280,9 @@ $codehilite-whitespace: transparent;
     > .codehilite {
       margin: 1em px2rem(-16px);
 
-      // Actual container with code, overflowing
+      // Remove rounded borders
       code {
-        padding: px2rem(10.5px) px2rem(16px);
+        border-radius: 0;
       }
     }
 
@@ -291,11 +290,6 @@ $codehilite-whitespace: transparent;
     > .codehilitetable {
       margin: 1em px2rem(-16px);
       border-radius: 0;
-
-      // Increase spacing
-      .linenodiv {
-        padding: px2rem(10px) px2rem(16px);
-      }
     }
   }
 }

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

@@ -31,26 +31,15 @@
   @extend .codehilite;
 
   // Inline line numbers
-  [data-linenos] {
+  [data-linenos]::before {
-    &::before {
     position: sticky;
-      left: px2rem(-12px);
+    left: 0;
     display: inline-block;
-      margin-right: px2rem(12px);
+    margin-right: px2em(16px, 13.6px);
-      margin-left: px2rem(-12px);
-      padding-left: px2rem(12px);
     color: var(--md-default-fg-color--lighter);
-      border-right: px2rem(1px) solid var(--md-default-fg-color--lightest);
+    box-shadow: inset px2rem(-1px) 0 var(--md-default-fg-color--lightest);
     content: attr(data-linenos);
     user-select: none;
-
-      // [mobile -]: Stretch to whole width
-      @include break-to-device(mobile) {
-        left: px2rem(-32px);
-        margin-left: px2rem(-32px);
-        padding-left: px2rem(32px);
-      }
-    }
   }
 }
 

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

@@ -1,37 +0,0 @@
-////
-/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
-///
-/// Permission is hereby granted, free of charge, to any person obtaining a
-/// copy of this software and associated documentation files (the "Software"),
-/// to deal in the Software without restriction, including without limitation
-/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
-/// and/or sell copies of the Software, and to permit persons to whom the
-/// Software is furnished to do so, subject to the following conditions:
-///
-/// The above copyright notice and this permission notice shall be included in
-/// all copies or substantial portions of the Software.
-///
-/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
-/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
-/// DEALINGS
-////
-
-// ----------------------------------------------------------------------------
-// Rules
-// ----------------------------------------------------------------------------
-
-// Scoped in typesetted content to match specificity of regular content
-.md-typeset {
-
-  // Qualified class selector to distinguish inline code from code blocks
-  code.codehilite {
-    $correct: 1 / 0.85;
-
-    margin: 0 0.25em * $correct;
-    padding: 0.0625em * $correct 0;
-  }
-}

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

@@ -27,28 +27,31 @@
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
-  // Tabbed code block content
+  // Tabbed block content
   .tabbed-content {
     display: none;
     order: 99;
     width: 100%;
     overflow: auto;
-    background-color: var(--md-code-bg-color);
 
     // Actual content
     pre {
       margin: 0;
-      border-radius: 0
+    }
+
+    // Remove rounded borders at the top
+    code {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
     }
   }
 
-  // Tabbed code block container
+  // Tabbed block container
   .tabbed-set {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     margin: 1em 0;
-    border: px2rem(1px) solid var(--md-default-fg-color--lightest);
     border-radius: px2rem(2px);
 
     // Hide radio buttons
@@ -60,34 +63,9 @@
         color: var(--md-accent-fg-color);
         border-color: var(--md-accent-fg-color);
 
-        // Show code tab content
+        // Show tabbed block content
         & + .tabbed-content {
           display: block;
-          padding: 0 px2rem(12px);
-
-          // Adjust spacing on last element
-          > :last-child {
-            margin-bottom: px2rem(12px);
-          }
-
-          // Emulate original pymdownx.superfences behavior and stretch to full
-          // width and height when a code block is the only child of a tab
-          > {
-            pre,
-            .highlight,
-            .highlighttable,
-            .codehilite,
-            .codehilitetable {
-              &:only-child {
-                margin: 0 px2rem(-12px);
-
-                // Remove double background
-                pre {
-                  background: transparent;
-                }
-              }
-            }
-          }
         }
       }
     }
@@ -95,8 +73,7 @@
     // Tab label
     > label {
       width: auto;
-      padding: px2rem(12px);
+      padding: px2rem(12px) 1.25em px2rem(10px);
-      padding-bottom: px2rem(10px);
       color: var(--md-default-fg-color--light);
       font-weight: 700;
       font-size: ms(-1);
@@ -112,26 +89,4 @@
       }
     }
   }
-
-  // Full-width container on top-level
-  > .tabbed-set {
-
-    // [mobile -]: Stretch to whole width
-    @include break-to-device(mobile) {
-      margin: 1em px2rem(-16px);
-      border: 0;
-      border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
-      border-radius: 0;
-
-      // Actual container with code, overflowing
-      code {
-        padding: px2rem(10.5px) px2rem(16px);
-      }
-
-      // First tab label
-      input:first-child + label {
-        margin-left: px2rem(4px);
-      }
-    }
-  }
 }

src/assets/stylesheets/main.scss

@@ -66,7 +66,6 @@
 @import "extensions/pymdown/details";
 @import "extensions/pymdown/emoji";
 @import "extensions/pymdown/highlight";
-@import "extensions/pymdown/inlinehilite";
 @import "extensions/pymdown/tabbed";
 @import "extensions/pymdown/tasklist";