Cleaned up SCSS codebase

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.038078fb.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.e03ee9c3.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.9204c3b2.min.css' | url }}">

src/assets/stylesheets/main.scss

@@ -36,8 +36,8 @@
 
 @import "config";
 
-@import "main/reset";
+@import "main/resets";
-@import "main/colors";
+@import "main/variables";
 @import "main/icons";
 @import "main/typeset";
 
@@ -73,4 +73,3 @@
 @import "main/extensions/pymdownx/tasklist";
 
 @import "main/modifiers";
-@import "main/shame";

src/assets/stylesheets/main/_shame.scss

@@ -1,25 +0,0 @@
-////
-/// Copyright (c) 2016-2021 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
-////
-
-// ----------------------------------------------------------------------------
-// Nothing to see here, move along
-// ----------------------------------------------------------------------------

src/assets/stylesheets/main/extensions/markdown/_toc.scss

@@ -34,8 +34,8 @@
     color: var(--md-default-fg-color--lighter);
     opacity: 0;
     transition:
-      color      250ms,
+      color   250ms,
-      opacity    125ms;
+      opacity 125ms;
 
     // [print]: Hide headerlinks
     @media print {
@@ -54,8 +54,8 @@
   .headerlink:focus {
     opacity: 1;
     transition:
-      color      250ms,
+      color   250ms,
-      opacity    125ms;
+      opacity 125ms;
   }
 
   // Adjust color on parent target or focus/hover
@@ -81,15 +81,15 @@
     }
   }
 
-  // Adjust scroll offset for headlines of level 1-3
+  // Adjust scroll offset for headlines
-  :is(h1, h2, h3):target {
+  :is(h1, h2, h3, h4, h5, h6):target {
     scroll-margin-top: initial;
 
     // Anchor correction hack
     &::before {
       display: block;
-      margin-top: -1 * px2rem(48px + 24px - 4px);
+      margin-top: calc(#{px2rem(-48px + 24px)} - var(--md-hx-offset));
-      padding-top: px2rem(48px + 24px - 4px);
+      padding-top: calc(#{px2rem(48px + 24px)} - var(--md-hx-offset));
       content: "";
     }
 
@@ -102,66 +102,20 @@
 
         // Anchor correction hack
         &::before {
-          margin-top: -1 * px2rem(96px + 24px - 4px);
+          margin-top: calc(#{px2rem(-96px + 24px)} - var(--md-hx-offset));
-          padding-top: px2rem(96px + 24px - 4px);
+          padding-top: calc(#{px2rem(96px + 24px)} - var(--md-hx-offset));
         }
       }
     }
   }
 
+  // Adjust scroll offset for headlines of level 1-3
+  :is(h1, h2, h3) {
+    --md-hx-offset: #{px2rem(4px)};
+  }
+
   // Adjust scroll offset for headlines of level 4
-  h4:target {
+  h4 {
-    scroll-margin-top: initial;
+    --md-hx-offset: #{px2rem(3px)};
-
-    // Anchor correction hack
-    &::before {
-      display: block;
-      margin-top: -1 * px2rem(48px + 24px - 3px);
-      padding-top: px2rem(48px + 24px - 3px);
-      content: "";
-    }
-
-    // [screen +]: Sticky navigation tabs
-    @include break-from-device(screen) {
-
-      // Adjust scroll offset for sticky navigation tabs
-      .md-header--lifted ~ .md-container & {
-        scroll-margin-top: initial;
-
-        // Anchor correction hack
-        &::before {
-          margin-top: -1 * px2rem(96px + 24px - 3px);
-          padding-top: px2rem(96px + 24px - 3px);
-        }
-      }
-    }
-  }
-
-  // Adjust scroll offset for headlines of level 5-6
-  :is(h5, h6):target {
-    scroll-margin-top: initial;
-
-    // Anchor correction hack
-    &::before {
-      display: block;
-      margin-top: -1 * px2rem(48px + 24px);
-      padding-top: px2rem(48px + 24px);
-      content: "";
-    }
-
-    // [screen +]: Sticky navigation tabs
-    @include break-from-device(screen) {
-
-      // Adjust scroll offset for sticky navigation tabs
-      .md-header--lifted ~ .md-container & {
-        scroll-margin-top: initial;
-
-        // Anchor correction hack
-        &::before {
-          margin-top: -1 * px2rem(96px + 24px);
-          padding-top: px2rem(96px + 24px);
-        }
-      }
-    }
   }
 }

src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss

@@ -104,8 +104,7 @@
       white-space: nowrap;
       border-bottom: px2rem(2px) solid transparent;
       scroll-snap-align: start;
-      border-top-left-radius: px2rem(2px);
+      border-radius: px2rem(2px) px2rem(2px) 0 0;
-      border-top-right-radius: px2rem(2px);
       cursor: pointer;
       transition:
         background-color 250ms,
@@ -137,25 +136,6 @@
     @media print {
       display: contents;
     }
-
-    // Code block is the first child of a tab - remove margin and mirror
-    // previous (now deprecated) SuperFences code block grouping behavior
-    > pre:first-child,
-    > .highlight:first-child pre,
-    > .highlighttable:first-child {
-      margin: 0;
-
-      // Omit rounded borders
-      > code {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    }
-
-    // Adjust spacing for nested tab
-    > .tabbed-set {
-      margin: 0;
-    }
   }
 
   // Tabbed block

src/assets/stylesheets/main/layout/_footer.scss

@@ -157,6 +157,8 @@
   }
 }
 
+// ----------------------------------------------------------------------------
+
 // Copyright and theme information
 .md-copyright {
   width: 100%;
@@ -177,6 +179,8 @@
   }
 }
 
+// ----------------------------------------------------------------------------
+
 // Social links
 .md-social {
   margin: 0 px2rem(8px);