Replace import with use

16 files changed, 118 insertions, 84 deletions

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}