Replace import with use

23 files changed, 191 insertions, 127 deletions

diff --git a/config.toml b/config.toml
index 09a7c0d..c2f6e26 100644
--- a/config.toml
+++ b/config.toml
@@ -83,6 +83,7 @@ flag.en = "🇬🇧"
 flag.fr = "🇫🇷"
 #flag.es = "🇪🇸"
 
+
 ###############################################################################
 ### Layout & Format
 ### position: top, bottom, both, false(hidden)
@@ -187,7 +188,7 @@ js_copycode = true # The copy button on code blocks that allows you to copy them
 
 search_library = 'elasticlunr'
 
-js_search_index = "search_index.en.json" # Separate Always, generated each build
+#js_search_index = "search_index.en.json" # Separate Always, generated each build
 #js_theme = "theme.min.js" # Separate Always, comment out if using -auto/-light/-dark stylesheet. (required for switcher)
 #js_themeButton = "theme_button.js"# Bundleable - light/dark switcher button
 #js_prestyle = "prestyle.js"# Bundleable - used to preload: FontAwesome, Katex, external Google Fonts
@@ -195,12 +196,12 @@ js_search_index = "search_index.en.json" # Separate Always, generated each build
 #js_email = "email.js"# Bundleable - obfuscates email address in footer
 
 ########## Switcher ########## (comment this block out if NOT using switcher):
-stylesheets = [ "abridge.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference with switcher
+stylesheets = [ "abridge.css" ] # Automatic Dark/Light Theme based on browser/system preference with switcher
 
 ########## No Switcher ##########
-#stylesheets = [ "abridge-auto.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference
-#stylesheets = [ "abridge-dark.css" ] # Orange Dark Theme
-#stylesheets = [ "abridge-light.css" ] # Orange Light Theme
+#stylesheets = [ "abridge-auto.css" ] # Automatic Dark/Light Theme based on browser/system preference
+#stylesheets = [ "abridge-dark.css" ] # Dark Theme
+#stylesheets = [ "abridge-light.css" ] # Light Theme
 
 
 ###############################################################################
diff --git a/sass/_imports.scss b/sass/_imports.scss
index d4d2e5d..6fd04b1 100644
--- a/sass/_imports.scss
+++ b/sass/_imports.scss
@@ -1,4 +1,4 @@
-/*
+/**
  * Forked from Bamboo: https://github.com/rilwis/bamboo (MIT)
  * which was forked from new.css (MIT)
  * Supplemented code from Pico.css: https://github.com/picocss/pico (MIT)
@@ -13,41 +13,40 @@
  */
 
 // Config
-@import "variables";
+@use "variables";
 
-@import "colors/orange"
-//@import "colors/blue"
-//@import "colors/blueshade"
+// Includes - Sorted by importance/category (includes at top are needed most frequently)
+@use "include/document"; // html
+@use "include/typography"; // a, headings, p, ul, blockquote, ...
+@use "include/sectioning"; // body, header, main, footer
+@use "include/nav"; // Nav
 
-//@import "fonts/Roboto";
-//@import "fonts/Roboto-Mono"; // Monospaced
-//@import "fonts/Arimo";
-//@import "fonts/Lato";
-//@import "fonts/FiraCode"; // Monospaced
-//@import "fonts/Abridge"; // Icon Font (don't recommend, CSS only icons are in my opinion better.)
+@use "include/embedded"; // iframe(youtube/vimeo), audio, canvas, img, svg, video
+@use "include/table"; // table, tr, td, ...
+@use "include/code"; // pre, code, ...
+@use "include/hr"; // hr
 
-// Includes - Sorted by importance/category (includes at top are needed most frequently)
-@import "include/document"; // html
-@import "include/typography"; // a, headings, p, ul, blockquote, ...
-@import "include/sectioning"; // body, header, main, footer
-@import "include/nav"; // Nav
+@use "include/scroller"; // figure
+@use "include/button"; // button, a[role=button], type=button, type=submit ...
+@use "include/form"; // input, select, textarea, label, fieldset, legend (If you import this, you should also import button)
+@use "include/top"; // back to top button using only CSS
 
-@import "include/embedded"; // iframe(youtube/vimeo), audio, canvas, img, svg, video
-@import "include/table"; // table, tr, td, ...
-@import "include/code"; // pre, code, ...
-@import "include/hr"; // hr
+@use "include/search"; // Zola Search - elasticlunr site-wide search
+@use "include/toc"; // Zola TOC - Table of Content Menu (recent posts & index), sticky (floats top right)
 
-@import "include/scroller"; // figure
-@import "include/button"; // button, a[role=button], type=button, type=submit ...
-@import "include/form"; // input, select, textarea, label, fieldset, legend (If you import this, you should also import button)
-@import "include/top"; // back to top button using only CSS
+@use "include/icons"; // svg icons
 
-@import "include/search"; // Zola Search - elasticlunr site-wide search
-@import "include/toc"; // Zola TOC - Table of Content Menu (recent posts & index), sticky (floats top right)
+@use "include/zola"; // Zola spacing and layout classes
 
-@import "include/icons"; // svg icons
+//@use "include/grid"; // section infinite grid -- test/rework this similar to hnav and milligram in that it should collapse to a single column as the page becomes narrow
+//@use "include/misc"; // template, [hidden], dialog, canvas
 
-@import "include/zola"; // Zola spacing and layout classes
+//@use "fonts/Roboto";
+//@use "fonts/Roboto-Mono"; // Monospaced
+//@use "fonts/Arimo";
+//@use "fonts/FiraCode"; // Monospaced
+//@use "fonts/Abridge"; // Icon Font (don't recommend, CSS only icons are in my opinion better.)
 
-//@import "include/grid"; // section infinite grid -- test/rework this similar to hnav and milligram in that it should collapse to a single column as the page becomes narrow
-//@import "include/misc"; // template, [hidden], dialog, canvas
+@import "colors/orange";
+//@import "colors/blue";
+//@import "colors/blueshade";
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 839528a..dcadf82 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -1,4 +1,4 @@
-/*
+/**
  * Forked from Bamboo: https://github.com/rilwis/bamboo (MIT)
  * which was forked from new.css (MIT)
  * Supplemented code from Pico.css: https://github.com/picocss/pico (MIT)
@@ -113,12 +113,12 @@ $icon-moon: false !default;// dark moon
 $icon-sun: false !default;// light sun
 // add an icon link to an html template like this:  <a href="#"><span class="svg home"></span></a>
 
-$font-main	: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif                                                                                      	!default;
-$font-code	: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace	!default;
+$font: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif !default;
+$font-mono: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace !default;
 
 :root {
-  #{--ff}: $font-main;
-  #{--fm}: $font-code;
+  #{--ff}: $font;
+  #{--fm}: $font-mono;//code
 
   // Spacings
   --s1: .5rem;
diff --git a/sass/include/_button.scss b/sass/include/_button.scss
index d725120..974502f 100644
--- a/sass/include/_button.scss
+++ b/sass/include/_button.scss
@@ -1,4 +1,6 @@
-// Form elements (button)
+/**
+ * Form elements (button)
+ */
 button,
 input,
 select,
diff --git a/sass/include/_code.scss b/sass/include/_code.scss
index fd9eb97..85bedf1 100644
--- a/sass/include/_code.scss
+++ b/sass/include/_code.scss
@@ -1,4 +1,6 @@
-// Code
+/**
+ * Code
+ */
 pre,
 code,
 kbd,
diff --git a/sass/include/_document.scss b/sass/include/_document.scss
index a5f91db..de2701f 100644
--- a/sass/include/_document.scss
+++ b/sass/include/_document.scss
@@ -1,4 +1,6 @@
-// Document: Content-box & Responsive typography
+/**
+ * Document: Content-box & Responsive typography
+ */
 
 // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
 *,
diff --git a/sass/include/_embedded.scss b/sass/include/_embedded.scss
index fc1dd3c..cff161e 100644
--- a/sass/include/_embedded.scss
+++ b/sass/include/_embedded.scss
@@ -1,4 +1,6 @@
-// Embedded content
+/**
+ * Embedded content
+ */
 .yvi {//youtube and vimeo iframe
   position: absolute;
   top: 0;
diff --git a/sass/include/_form.scss b/sass/include/_form.scss
index 3087ad6..1eca892 100644
--- a/sass/include/_form.scss
+++ b/sass/include/_form.scss
@@ -1,4 +1,6 @@
-// Form elements (non-button)
+/**
+ * Form elements (non-button)
+ */
 fieldset {
   padding: .5rem .75rem;
   border: var(--bw) solid var(--c3);
diff --git a/sass/include/_grid.scss b/sass/include/_grid.scss
index 1ced06b..a8d46e1 100644
--- a/sass/include/_grid.scss
+++ b/sass/include/_grid.scss
@@ -1,4 +1,5 @@
-/* Infinity Grid
+/**
+ * Infinity Grid
  * https://github.com/vladocar/Basic.css
  */
 
diff --git a/sass/include/_hr.scss b/sass/include/_hr.scss
index aaa9f4e..d6215dc 100644
--- a/sass/include/_hr.scss
+++ b/sass/include/_hr.scss
@@ -1,5 +1,5 @@
 /**
- * HR
+ * HR - Horizontal Rule
  * https://github.com/picocss/pico
  */
 
diff --git a/sass/include/_icons.scss b/sass/include/_icons.scss
index df0f5d3..511905d 100644
--- a/sass/include/_icons.scss
+++ b/sass/include/_icons.scss
@@ -7,10 +7,11 @@
  * https://jakearchibald.github.io/svgomg/
  * https://codepen.io/yoksel/pen/MWKeKK
  */
+@use "../variables" as variables;
 
 @function icon($icon-name,$stroke,$stroke-width: 1,$fill:'none'){
   $sc:"%23888";//stroke color
-  @if $ic {
+  @if variables.$ic {
     $sc: $stroke
   }
   $p: (
@@ -67,49 +68,49 @@
   $icon: map-get($icons, $icon-name);
   @return url("data:image/svg+xml,#{$icon}");
 }
-@if $enable-icons {
-  @if $icon-adjust {.adjust { -webkit-mask: icon(adjust, "none", 1, "%23000") ; background: var(--f2) }}//theme switcher
-  @if $icon-angl {.angl { -webkit-mask: icon(angl, "%23000", 3, "none") ; background: var(--f2) }}//angle left
-  @if $icon-angll {.angll { -webkit-mask: icon(angll, "%23000", 3, "none") ; background: var(--f2) }}//angle left left
-  @if $icon-angr {.angr { -webkit-mask: icon(angr, "%23000", 3, "none") ; background: var(--f2) }}//angle right
-  @if $icon-angrr {.angrr { -webkit-mask: icon(angrr, "%23000", 3, "none") ; background: var(--f2) }}//angle right right
-  @if $icon-angu {.angu { -webkit-mask: icon(angu, "%23000", 3, "none") ; background: var(--f2) }}//angle up
-  @if $icon-search {.search { -webkit-mask: icon(search, "%23000", 3, "none") ; background: var(--f2) }}//search
-  @if $icon-bitbucket {.bitbucket { background-image: icon(bitbucket, "%2328f", 2, "none") }}
-  @if $icon-buymeacoffee {.buymeacoffee { background-image: icon(buymeacoffee, "%23777", 1, "%23fd0") }}
-  @if $icon-check {.check { background-image: icon(check, "%23888", 2, "none") }}
-  @if $icon-chevron {.chevron { background-image: icon(chevron, "%23888", 2, "none") }}
-  @if $icon-clock {.clock { background-image: icon(clock, "%23888", 2, "none") }}
-  @if $icon-codeberg {.codeberg { background-image: icon(codeberg, "%23555", 2, "%23aaa") }}
-  @if $icon-date {.date { background-image: icon(date, "%23888", 2, "none") }}
-  @if $icon-discord {.discord { background-image: icon(discord, "none", 1, "%2356f") }}
-  @if $icon-docker {.docker { background-image: icon(docker, "%2329e", 2, "none") }}
-  @if $icon-element {.element { background-image: icon(element, "none", 1, "%231c8") }}
-  @if $icon-facebook {.facebook { background-image: icon(facebook, "%23359", 2, "none") }}
-  @if $icon-folder {.folder { background-image: icon(folder, "%23888", 2, "none") }}
-  @if $icon-github {.github { background-image: icon(github, "%23888", 2, "none") }}
-  @if $icon-github-sponsor {.github-sponsor { background-image: icon(github-sponsor, "%23c49", 2, "none") }}
-  @if $icon-gitlab {.gitlab { background-image: icon(gitlab, "%23e62", 2, "none") }}
-  @if $icon-globe {.globe { background-image: icon(globe, "%23888", 2, "none") }}
-  @if $icon-home {.home { background-image: icon(home, "%23888", 2, "none") }}
-  @if $icon-instagram {.instagram { background-image: icon(instagram, "%23e07", 2, "none") }}
-  @if $icon-linkedin {.linkedin { background-image: icon(linkedin, "%2326a", 2, "none") }}
-  @if $icon-mail {.mail { background-image: icon(mail, "%23888", 2, "none") }}
-  @if $icon-mastodon {.mastodon { background-image: icon(mastodon, "none", 1, "%2328c") }}
-  @if $icon-matrix {.matrix { background-image: icon(matrix, "%23888", 2, "none") }}
-  @if $icon-minus {.minus { background-image: icon(minus, "%23888", 2, "none") }}
-  @if $icon-moon {.moon { background-image: icon(moon, "%23888", 2, "none") }}
-  @if $icon-pinterest {.pinterest { background-image: icon(pinterest, "%23b01", 2, "none") }}
-  @if $icon-python {.python { background-image: icon(python, "%23fc1", 2, "%2326a") }}
-  @if $icon-researchgate {.researchgate { background-image: icon(researchgate, "none", 2, "%230db") }}
-  @if $icon-rss {.rss { background-image: icon(rss, "%23e94", 2, "none") }}
-  @if $icon-stack {.stack { background-image: icon(stack, "%23e72", 2, "none") }}
-  @if $icon-sun {.sun { background-image: icon(sun, "%23888", 2, "none") }}
-  @if $icon-tag {.tag { background-image: icon(tag, "%23888", 2, "none") }}
-  @if $icon-twitch {.twitch { background-image: icon(twitch, "%23a7f", 2, "none") }}
-  @if $icon-twitter {.twitter { background-image: icon(twitter, "%232ad", 2, "none") }}
-  @if $icon-x {.x { background-image: icon(x, "%23f00", 3, "none") }}
-  @if $icon-youtube {.youtube { background-image: icon(youtube, "%23f00", 2, "none") }}
+@if variables.$enable-icons {
+  @if variables.$icon-adjust {.adjust { -webkit-mask: icon(adjust, "none", 1, "%23000") ; background: var(--f2) }}//theme switcher
+  @if variables.$icon-angl {.angl { -webkit-mask: icon(angl, "%23000", 3, "none") ; background: var(--f2) }}//angle left
+  @if variables.$icon-angll {.angll { -webkit-mask: icon(angll, "%23000", 3, "none") ; background: var(--f2) }}//angle left left
+  @if variables.$icon-angr {.angr { -webkit-mask: icon(angr, "%23000", 3, "none") ; background: var(--f2) }}//angle right
+  @if variables.$icon-angrr {.angrr { -webkit-mask: icon(angrr, "%23000", 3, "none") ; background: var(--f2) }}//angle right right
+  @if variables.$icon-angu {.angu { -webkit-mask: icon(angu, "%23000", 3, "none") ; background: var(--f2) }}//angle up
+  @if variables.$icon-search {.search { -webkit-mask: icon(search, "%23000", 3, "none") ; background: var(--f2) }}//search
+  @if variables.$icon-bitbucket {.bitbucket { background-image: icon(bitbucket, "%2328f", 2, "none") }}
+  @if variables.$icon-buymeacoffee {.buymeacoffee { background-image: icon(buymeacoffee, "%23777", 1, "%23fd0") }}
+  @if variables.$icon-check {.check { background-image: icon(check, "%23888", 2, "none") }}
+  @if variables.$icon-chevron {.chevron { background-image: icon(chevron, "%23888", 2, "none") }}
+  @if variables.$icon-clock {.clock { background-image: icon(clock, "%23888", 2, "none") }}
+  @if variables.$icon-codeberg {.codeberg { background-image: icon(codeberg, "%23555", 2, "%23aaa") }}
+  @if variables.$icon-date {.date { background-image: icon(date, "%23888", 2, "none") }}
+  @if variables.$icon-discord {.discord { background-image: icon(discord, "none", 1, "%2356f") }}
+  @if variables.$icon-docker {.docker { background-image: icon(docker, "%2329e", 2, "none") }}
+  @if variables.$icon-element {.element { background-image: icon(element, "none", 1, "%231c8") }}
+  @if variables.$icon-facebook {.facebook { background-image: icon(facebook, "%23359", 2, "none") }}
+  @if variables.$icon-folder {.folder { background-image: icon(folder, "%23888", 2, "none") }}
+  @if variables.$icon-github {.github { background-image: icon(github, "%23888", 2, "none") }}
+  @if variables.$icon-github-sponsor {.github-sponsor { background-image: icon(github-sponsor, "%23c49", 2, "none") }}
+  @if variables.$icon-gitlab {.gitlab { background-image: icon(gitlab, "%23e62", 2, "none") }}
+  @if variables.$icon-globe {.globe { background-image: icon(globe, "%23888", 2, "none") }}
+  @if variables.$icon-home {.home { background-image: icon(home, "%23888", 2, "none") }}
+  @if variables.$icon-instagram {.instagram { background-image: icon(instagram, "%23e07", 2, "none") }}
+  @if variables.$icon-linkedin {.linkedin { background-image: icon(linkedin, "%2326a", 2, "none") }}
+  @if variables.$icon-mail {.mail { background-image: icon(mail, "%23888", 2, "none") }}
+  @if variables.$icon-mastodon {.mastodon { background-image: icon(mastodon, "none", 1, "%2328c") }}
+  @if variables.$icon-matrix {.matrix { background-image: icon(matrix, "%23888", 2, "none") }}
+  @if variables.$icon-minus {.minus { background-image: icon(minus, "%23888", 2, "none") }}
+  @if variables.$icon-moon {.moon { background-image: icon(moon, "%23888", 2, "none") }}
+  @if variables.$icon-pinterest {.pinterest { background-image: icon(pinterest, "%23b01", 2, "none") }}
+  @if variables.$icon-python {.python { background-image: icon(python, "%23fc1", 2, "%2326a") }}
+  @if variables.$icon-researchgate {.researchgate { background-image: icon(researchgate, "none", 2, "%230db") }}
+  @if variables.$icon-rss {.rss { background-image: icon(rss, "%23e94", 2, "none") }}
+  @if variables.$icon-stack {.stack { background-image: icon(stack, "%23e72", 2, "none") }}
+  @if variables.$icon-sun {.sun { background-image: icon(sun, "%23888", 2, "none") }}
+  @if variables.$icon-tag {.tag { background-image: icon(tag, "%23888", 2, "none") }}
+  @if variables.$icon-twitch {.twitch { background-image: icon(twitch, "%23a7f", 2, "none") }}
+  @if variables.$icon-twitter {.twitter { background-image: icon(twitter, "%232ad", 2, "none") }}
+  @if variables.$icon-x {.x { background-image: icon(x, "%23f00", 3, "none") }}
+  @if variables.$icon-youtube {.youtube { background-image: icon(youtube, "%23f00", 2, "none") }}
   .svg {
     width: 1.8rem;
     height: 1.8rem;
diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss
index be98892..efad0ec 100644
--- a/sass/include/_nav.scss
+++ b/sass/include/_nav.scss
@@ -2,6 +2,7 @@
  * Horizontal Nav
  * https://github.com/raj457036/attriCSS
  */
+@use "../variables" as variables;
 
 main nav a,
 main nav a:visited {//pagination link styling
@@ -118,8 +119,8 @@ footer nav {
   }
 }
 // breakpoint makes header responsive for mobile layouts
-@if map-get($breakpoints, "md") {
-  @media (max-width: map-get($breakpoints, "md")) {
+@if map-get(variables.$breakpoints, "md") {
+  @media (max-width: map-get(variables.$breakpoints, "md")) {
     header nav {
       display: flex;
       flex-direction: column;
diff --git a/sass/include/_search.scss b/sass/include/_search.scss
index ccc403e..c0e3a8d 100644
--- a/sass/include/_search.scss
+++ b/sass/include/_search.scss
@@ -1,3 +1,8 @@
+/**
+ * Search - Zola Search - elasticlunr site-wide search
+ */
+@use "../variables" as variables;
+
 div:empty {
   display: none;
 }
@@ -58,8 +63,8 @@ nav > div > form > div:last-of-type {//parent div of suggestions div
 .searchd > button {
   margin-left: -2.4rem;//inlayed search icon
 }
-@if map-get($breakpoints, "md") {
-  @media (max-width: map-get($breakpoints, "md")) {
+@if map-get(variables.$breakpoints, "md") {
+  @media (max-width: map-get(variables.$breakpoints, "md")) {
     .searchd > input {
       max-width: 100%;
       flex-grow: 1;
diff --git a/sass/include/_sectioning.scss b/sass/include/_sectioning.scss
index dd1026e..36b0a8e 100644
--- a/sass/include/_sectioning.scss
+++ b/sass/include/_sectioning.scss
@@ -2,7 +2,7 @@
  * Sectioning: Container and responsive spacings for header, main, footer
  * https://github.com/picocss/pico
  */
-
+@use "../variables" as variables;
 // Render the `main` element consistently in IE
 main {
   display: flex;
@@ -27,21 +27,21 @@ footer {
   margin-left: auto;
 
   // Semantic container
-  @if $enable-semantic-container {
+  @if variables.$enable-semantic-container {
     padding: var(--s1);
 
     // Centered viewport max-width only
-    @if $enable-maxwidth {
-      @media (min-width: $mb) {
-          min-width: $mb;
-          max-width: $mw;
+    @if variables.$enable-maxwidth {
+      @media (min-width: variables.$mb) {
+          min-width: variables.$mb;
+          max-width: variables.$mw;
       }
     }
     // Centered viewport
-    @else if $enable-viewport {
-      @if map-get($breakpoints, "sm") and $enable-viewport {
-        @media (min-width: map-get($breakpoints, "sm")) {
-          max-width: map-get($viewports, "sm");
+    @else if variables.$enable-viewport {
+      @if map-get(variables.$breakpoints, "sm") and variables.$enable-viewport {
+        @media (min-width: map-get(variables.$breakpoints, "sm")) {
+          max-width: map-get(variables.$viewports, "sm");
           //padding-right: 0;
           //padding-left: 0;
           .toc {
@@ -49,19 +49,19 @@ footer {
           }
         }
       }
-      @if map-get($breakpoints, "md") and $enable-viewport {
-        @media (min-width: map-get($breakpoints, "md")) {
-          max-width: map-get($viewports, "md");
+      @if map-get(variables.$breakpoints, "md") and variables.$enable-viewport {
+        @media (min-width: map-get(variables.$breakpoints, "md")) {
+          max-width: map-get(variables.$viewports, "md");
         }
       }
-      @if map-get($breakpoints, "lg") and $enable-viewport {
-        @media (min-width: map-get($breakpoints, "lg")) {
-          max-width: map-get($viewports, "lg");
+      @if map-get(variables.$breakpoints, "lg") and variables.$enable-viewport {
+        @media (min-width: map-get(variables.$breakpoints, "lg")) {
+          max-width: map-get(variables.$viewports, "lg");
         }
       }
-      @if map-get($breakpoints, "xl") and $enable-viewport {
-        @media (min-width: map-get($breakpoints, "xl")) {
-          max-width: map-get($viewports, "xl");
+      @if map-get(variables.$breakpoints, "xl") and variables.$enable-viewport {
+        @media (min-width: map-get(variables.$breakpoints, "xl")) {
+          max-width: map-get(variables.$viewports, "xl");
         }
       }
     }
@@ -85,4 +85,4 @@ footer{
   hr, p {
     margin: 0.1rem 0 .3rem
   }
-}
\ No newline at end of file
+}
diff --git a/sass/include/_table.scss b/sass/include/_table.scss
index 0ed3eea..e91c483 100644
--- a/sass/include/_table.scss
+++ b/sass/include/_table.scss
@@ -1,8 +1,10 @@
-// Table
+/**
+ * Table - table specific elements
+ */
 table {
   border-collapse: collapse;
   width: 100%;
-  text-indent: 0; /* Remove text indentation from table contents in Chrome, Edge, and Safari. */
+  text-indent: 0; // Remove text indentation from table contents in Chrome, Edge, and Safari.
   caption {
     margin-bottom: .5rem;
   }
@@ -24,4 +26,4 @@ tbody tr:nth-child(even) {
 thead tr {
   border-top: var(--bw) solid var(--c3);
   background-color: var(--c2);
-}
\ No newline at end of file
+}
diff --git a/sass/include/_toc.scss b/sass/include/_toc.scss
index 5d37a64..b3ad2c4 100644
--- a/sass/include/_toc.scss
+++ b/sass/include/_toc.scss
@@ -1,3 +1,9 @@
+/**
+ * TOC - Table of Contents
+ * used as a page index, recent posts block
+ */
+@use "../variables" as variables;
+
 main {
   .toc {
     max-width: 15rem;
@@ -35,8 +41,8 @@ main {
   max-height: 100vh;
   overflow: auto;
 }
-@if map-get($breakpoints, "md") {
-  @media (max-width: map-get($breakpoints, "md")) {
+@if map-get(variables.$breakpoints, "md") {
+  @media (max-width: map-get(variables.$breakpoints, "md")) {
     .toc {
       display: none;
     }
diff --git a/sass/include/_top.scss b/sass/include/_top.scss
index 5d09238..0c1f729 100644
--- a/sass/include/_top.scss
+++ b/sass/include/_top.scss
@@ -1,3 +1,6 @@
+/**
+ * Top - back to top button using only CSS
+ */
 .topout {
   position: sticky;
   bottom: 1px;
@@ -25,4 +28,4 @@
     background: var(--c2);
     opacity: 1;
   }
-}
\ No newline at end of file
+}
diff --git a/sass/include/_typography.scss b/sass/include/_typography.scss
index ede2aa0..8eaa7f9 100644
--- a/sass/include/_typography.scss
+++ b/sass/include/_typography.scss
@@ -1,4 +1,6 @@
-// Typography
+/**
+ * Typography - a, headings, p, ul, blockquote
+ */
 .c {
   text-align: center;// The <center> does not pass validation, use: <div class="c"></div>
 }
@@ -84,7 +86,7 @@ small {
 .footnote-definition sup, .footnote-definition p {
   display: inline;
 }
-/* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
+// Prevent sub and sup elements from affecting the line height in all browsers.
 sub,
 sup {
   font-size: .75em;
@@ -116,7 +118,7 @@ ul {
   font-size: var(--fs);
 }
 
-/* Lists */
+// Lists
 ul,
 ol {
   padding-right: 0;
diff --git a/sass/include/_zola.scss b/sass/include/_zola.scss
index 301ce61..2dd0b70 100644
--- a/sass/include/_zola.scss
+++ b/sass/include/_zola.scss
@@ -1,3 +1,6 @@
+/**
+ * Zola Specific
+ */
 .sum, .sum p {margin: .2rem 0}
 .s95 {font-size: .95em}
 .s90 {font-size: .90em}
diff --git a/templates/categories/list.html b/templates/categories/list.html
index a237591..eca6da3 100644
--- a/templates/categories/list.html
+++ b/templates/categories/list.html
@@ -19,7 +19,7 @@
     <div>
       <div class="c">
         <h1>{{ terms | length }} {%- if lang != config.default_language %} {{ trans(key="Categories" | safe, lang=lang) }} {% else %} Categories {% endif %}</h1>
-        <p>{% for term in terms %} [<a href="#{{ term.name }}">{{ term.name }}</a>] {% endfor %}</p>
+        <p>{% for term in terms %} [<a href="#{{ term.name }}">{{ term.name }}</a>]<sup>{{ term.pages | length }}</sup> {% endfor %}</p>
       </div>
       {%- for term in terms %}
       <h2 id="{{ term.name }}"><a href="{{ term.permalink | safe }}">{{ term.name }}</a></h2>
diff --git a/templates/macros/head.html b/templates/macros/head.html
index 0690bc1..88c9781 100644
--- a/templates/macros/head.html
+++ b/templates/macros/head.html
@@ -96,7 +96,7 @@
   {%- if js_theme %}
   {%- set js_themeButton=config.extra.js_themeButton | default(value="theme_button.js") -%}
   {%- if js_themeButton %}
-  <script defer src="{{ get_url(path=js_themeButton, trailing_slash=false) | safe }}"{%- if config.extra.integrity | default(value=true) %} integrity="sha384-{{ get_hash(path=js_themeButton, sha_type=384, base64=true) | safe }}"{%- endif %}></script>
+  <script defer src="{{ get_url(path=js_themeButton, trailing_slash=false, cachebust=true) | safe }}"{%- if config.extra.integrity | default(value=true) %} integrity="sha384-{{ get_hash(path=js_themeButton, sha_type=384, base64=true) | safe }}"{%- endif %}></script>
   {%- endif %}
   {%- endif %}
   {%- endif %}
diff --git a/templates/shortcodes/note.html b/templates/shortcodes/note.html
new file mode 100644
index 0000000..b2420e9
--- /dev/null
+++ b/templates/shortcodes/note.html
@@ -0,0 +1,30 @@
+{#  note shortcode with icon and border
+
+    type: ok / info / warning / error / neutral / other
+    display: block / icon / both
+    size: small / medium / large
+    markdown: true / false
+
+    example:
+
+    {% note(type="ok", display="block", size="small" markdown=true) %}
+    *Sample* "ok" note. With display "block"
+    And **markdown** content.
+    {% end %}
+#}
+
+{# define defaults #}
+{% if not type %}{% set type="neutral" %}{% endif %}
+{% if not display %}{% set display="block" %}{% endif %}
+{% if not size %}{% set size="small" %}{% endif %}
+{% if not markdown %}{% set markdown=true %}{% endif %}
+
+<div class="note
+{%- if display == 'icon' %} note-icon note-icon-{{size}} note-icon-{{type}}
+{%- elif display == 'block' %} note-block note-{{type}}
+{%- elif display == 'both' %} note-icon note-icon-{{size}} note-icon-{{type}} note-block note-{{type}}
+{%- endif %}">
+{% if markdown %}{{ body | markdown | safe }}
+{% else %}{{ body | safe }}
+{% endif %}
+</div>
diff --git a/templates/tags/list.html b/templates/tags/list.html
index 2184cba..c703761 100644
--- a/templates/tags/list.html
+++ b/templates/tags/list.html
@@ -19,7 +19,7 @@
     <div>
       <div class="c">
         <h1>{{ terms | length }} {%- if lang != config.default_language %} {{ trans(key="Tags" | safe, lang=lang) }} {% else %} Tags {% endif %}</h1>
-        <p>{% for term in terms %} #<a href="#{{ term.name }}">{{ term.name }}</a> {% endfor %}</p>
+        <p>{% for term in terms %} #<a href="#{{ term.name }}">{{ term.name }}</a><sup>{{ term.pages | length }}</sup> {% endfor %}</p>
       </div>
       {%- for term in terms %}
       <h2 id="{{ term.name }}">#<a href="{{ term.permalink | safe }}">{{ term.name }}</a></h2>