Fixed unnecessary nesting in SCSS, reducing final CSS by 20kb

material/assets/manifest.json

@@ -1,8 +1,8 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.262abba4.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.a9b5ac61.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.262abba4.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.a9b5ac61.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
-  "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.865ff948.min.css",
+  "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.c0cd5d4d.min.css",
-  "assets/stylesheets/app.scss": "assets/stylesheets/app.bdffa146.min.css"
+  "assets/stylesheets/app.scss": "assets/stylesheets/app.55d3176a.min.css"
 }

material/base.html

@@ -43,9 +43,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.bdffa146.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.55d3176a.min.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.865ff948.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.c0cd5d4d.min.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -195,7 +195,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.262abba4.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.a9b5ac61.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/stylesheets/app.scss

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

src/assets/stylesheets/extensions/_admonition.scss

@@ -27,7 +27,7 @@
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
-  // Admonition extension
+  // Admonition
   .admonition {
     margin: 1.5625em 0;
     padding: 0 px2rem(12px);
@@ -58,41 +58,6 @@
       margin: 1em 0;
     }
 
-    // Title
-    > .admonition-title {
-      margin: 0 px2rem(-12px);
-      padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
-      background-color: transparentize($clr-blue-a200, 0.9);
-      font-weight: 700;
-
-      // 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
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      // Icon
-      &::before {
-        position: absolute;
-        width: px2rem(20px);
-        height: px2rem(20px);
-        margin-left: px2rem(-28px);
-        background-color: $clr-blue-a200;
-        mask-image: url("{{ pencil }}");
-        content: "";
-
-        // Adjust for right-to-left languages
-        [dir="rtl"] & {
-          margin-right: px2rem(-28px);
-          margin-left: initial;
-        }
-      }
-    }
-
     // Build representational classes
     @each $names, $appearance in (
       abstract summary tldr: $clr-light-blue-a400 "text-subject",
@@ -127,7 +92,7 @@
         }
 
         // Title
-        > .admonition-title {
+        > :first-child {
           background-color: transparentize($tint, 0.9);
 
           // Icon
@@ -148,4 +113,39 @@
       }
     }
   }
+
+  // Admonition title
+  .admonition-title {
+    margin: 0 px2rem(-12px);
+    padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
+    background-color: transparentize($clr-blue-a200, 0.9);
+    font-weight: 700;
+
+    // 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
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    // Icon
+    &::before {
+      position: absolute;
+      width: px2rem(20px);
+      height: px2rem(20px);
+      margin-left: px2rem(-28px);
+      background-color: $clr-blue-a200;
+      mask-image: url("{{ pencil }}");
+      content: "";
+
+      // Adjust for right-to-left languages
+      [dir="rtl"] & {
+        margin-right: px2rem(-28px);
+        margin-left: initial;
+      }
+    }
+  }
 }

src/assets/stylesheets/extensions/_codehilite.scss

@@ -210,62 +210,58 @@ $codehilite-whitespace: transparent;
 // Rules: layout
 // ----------------------------------------------------------------------------
 
-// Scoped in typesetted content to match specificity of regular content
+// Block with line numbers
-.md-typeset {
+.codehilitetable {
+  display: block;
+  overflow: hidden;
 
-  // Block with line numbers
+  // Set table elements to block layout, because otherwise the whole flexbox
-  .codehilitetable {
+  // hacking won't work correctly
+  tbody,
+  td {
     display: block;
+    padding: 0;
+  }
+
+  // We need to use flexbox layout, because otherwise it's not possible to
+  // make the code container scroll while keeping the line numbers static
+  tr {
+    display: flex;
+  }
+
+  // The pre tags are nested inside a table, so we need to remove the
+  // margin because it collapses below all the overflows
+  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: $md-color-black--lighter;
+    box-shadow: inset 0 0 0 px2rem(1px) $md-code-background;
+    user-select: none;
+
+    // Reset spacings
+    pre {
+      background-color: transparent;
+      color: inherit;
+      text-align: right;
+    }
+  }
+
+  // The table cell containing the code container wrapper and code should
+  // stretch horizontally to the remaining space
+  .code {
+    flex: 1;
     overflow: hidden;
-
-    // Set table elements to block layout, because otherwise the whole flexbox
-    // hacking won't work correctly
-    tbody,
-    td {
-      display: block;
-      padding: 0;
-    }
-
-    // We need to use flexbox layout, because otherwise it's not possible to
-    // make the code container scroll while keeping the line numbers static
-    tr {
-      display: flex;
-    }
-
-    // The pre tags are nested inside a table, so we need to remove the
-    // margin because it collapses below all the overflows
-    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: $md-color-black--lighter;
-      box-shadow: inset 0 0 0 px2rem(1px) $md-code-background;
-      user-select: none;
-
-      // Reset spacings
-      pre {
-        background-color: transparent;
-        color: inherit;
-        text-align: right;
-      }
-    }
-
-    // The table cell containing the code container wrapper and code should
-    // stretch horizontally to the remaining space
-    .code {
-      flex: 1;
-      overflow: hidden;
-    }
   }
 
   // TODO: refactor
@@ -290,6 +286,10 @@ $codehilite-whitespace: transparent;
       }
     }
   }
+}
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
 
   // Block with line numbers
   > .codehilitetable {
@@ -321,16 +321,4 @@ $codehilite-whitespace: transparent;
       }
     }
   }
-
-  // When pymdownx.superfences is enabled but codehilite is disabled,
-  // pymdownx.highlight will be used. When this happens, the outer
-  // container and tables get this class names by default
-  .highlight {
-    @extend .codehilite;
-  }
-
-  // Same as above, but for code blocks with line numbers enabled
-  .highlighttable {
-    @extend .codehilitetable;
-  }
 }

src/assets/stylesheets/extensions/_permalinks.scss

@@ -59,16 +59,34 @@
     }
   }
 
+  // Make permalink visible on hover
+  :hover  .headerlink,
+  :target .headerlink,
+  .headerlink:focus {
+    transform: translate(0, 0);
+    transition:
+      transform  250ms 250ms,
+      color      250ms,
+      opacity    125ms 250ms;
+      // visibility   0ms;
+    opacity: 1;
+    // visibility: visible;
+  }
+
+  // Active or targeted permalink
+  .headerlink:focus,
+  .headerlink:hover,
+  :target .headerlink {
+    color: $md-color-accent;
+  }
+
   // Correct anchor offset for link blurring
   @each $level, $delta in (
-    h1: 8px,
+    h1 h2 h3: 8px,
-    h2: 8px,
-    h3: 8px,
     h4: 9px,
-    h5: 11px,
+    h5 h6: 12px,
-    h6: 11px
   ) {
-    #{$level}[id] {
+    %#{nth($level, 1)} {
 
       // Un-targeted anchor
       &::before {
@@ -83,26 +101,12 @@
         margin-top: -1 * px2rem(48px + 12px + $delta);
         padding-top: px2rem(48px + 12px + $delta);
       }
+    }
 
-      // Make permalink visible on hover
+    // Define levels
-      &:hover  .headerlink,
+    @for $n from 1 through length($level) {
-      &:target .headerlink,
+      #{nth($level, $n)}[id] {
-      & .headerlink:focus {
+        @extend %#{nth($level, 1)};
-        transform: translate(0, 0);
-        transition:
-          transform  250ms 250ms,
-          color      250ms,
-          opacity    125ms 250ms;
-          // visibility   0ms;
-        opacity: 1;
-        // visibility: visible;
-      }
-
-      // Active or targeted permalink
-      &:hover  .headerlink:hover,
-      &:target .headerlink,
-      & .headerlink:focus {
-        color: $md-color-accent;
       }
     }
   }

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

@@ -0,0 +1,37 @@
+////
+/// 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
+// ----------------------------------------------------------------------------
+
+// When pymdownx.superfences is enabled but codehilite is disabled,
+// pymdownx.highlight will be used. When this happens, the outer container
+// and tables get this class names by default
+.highlight {
+  @extend .codehilite;
+}
+
+// Same as above, but for code blocks with line numbers enabled
+.highlighttable {
+  @extend .codehilitetable;
+}

src/assets/stylesheets/layout/_clipboard.scss

@@ -51,16 +51,13 @@
   }
 
   // Show on container hover
-  pre:hover &,
+  pre:hover & {
-  .codehilite:hover & {
     color: $md-color-black--light;
   }
 
   // Focused or hovered icon
   pre &:focus,
-  pre &:hover,
+  pre &:hover {
-  .codehilite &:focus,
-  .codehilite &:hover {
     color: $md-color-accent;
   }
 }