From 3af6d9131f6dfc138856d718ec96626344095ec8 Mon Sep 17 00:00:00 2001
From: Jieiku
Date: Mon, 22 May 2023 23:24:44 -0700
Subject: Optimizations and Fixes

---
 sass/abridge.scss | 461 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 273 insertions(+), 188 deletions(-)

(limited to 'sass/abridge.scss')

diff --git a/sass/abridge.scss b/sass/abridge.scss
index 3c7236e..1e20079 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -2,38 +2,34 @@
 @use "sass:list";
 
 @use "functions";
-@use "colors";
-@use "syntax";
 
 /******************************************************************************
  *   Variables
  *****************************************************************************/
 
-$abridgeMode: "switcher" !default;//valid values: switcher, auto, dark, light
-
 /// Enable a centered viewport for <header>, <main>, <footer> inside <body>
 /// Fluid layout until a defined size, then becomes centered viewport
 $enable-maxwidth: true !default;
-$mw:60% !default;// max-width
-$mb:1200px !default;// value at which to switch from fluid layout to max-width
+$mw: 60% !default;// max-width
+$mb: 1200px !default;// value at which to switch from fluid layout to max-width
 
-$dark: #ccc #ddd #111 #222 #333 #888 #f90 #fb0 #f90 #593 #e33 !default;//orange
-//$dark: #ccc #ddd #111 #222 #333 #888 #09f #0bf #0af #593 #e33 !default;//blue
-//$dark: #ccc #ddd #111 #123 #345 #789 #09f #0bf #0af #593 #e33 !default;//blueshade
-
-$light: #333 #222 #fff #eee #ddd #555 #c40 #e60 #f90 #373 #d33 !default;//orange
-//$light: #333 #222 #fff #eee #ddd #555 #06e #09f #07f #373 #d33 !default;//blue
-//$light: #333 #222 #fff #def #137 #013 #06e #09f #07f #373 #d33 !default;//blueshade
+$abridgeMode: "switcher" !default;//valid values: switcher, auto, dark, light
+$syntax-mode: "auto" !default;// Force syntax mode: auto, dark, light
 
-$syntax-dark: #191919 #e65 #f91 #eb6 #ac3 #8db #6ae #d6e !default;
-$syntax-light: #f7f7f7 #a21 #930 #a50 #350 #286 #059 #a3c !default;
+$path: "colors/" !default;
+$color: "orange" !default;// color template to use/override: orange, blue, blueshade
+@include meta.load-css(#{$path}#{$color});
 
+$spath: "colors-syntax/" !default;
+$color-syntax: "abridge" !default;// syntax color template to use/override: abridge,
+@include meta.load-css(#{$spath}#{$color-syntax});
 $syntax: true !default;//syntax highlighting for Code Blocks.
 
 $enable-icons: true !default; // false disables ALL icons
 $ic: true !default; // true for colorized icons, otherwise #888 is used.
+
 $icon-rss: true !default;
-$icon-mail: true !default;// email mail envelope
+$icon-mail: true !default;// e-mail
 $icon-mastodon: true !default;
 $icon-element: true !default;
 $icon-matrix: false !default;
@@ -56,14 +52,14 @@ $icon-twitch: true !default;
 $icon-youtube: true !default;
 $icon-researchgate: true !default;
 
-$icon-x: true !default;// x symbol
-$icon-search: true !default;//search
-$icon-adjust: true !default;//theme switcher
-$icon-angll: true !default;//first page
-$icon-angl: true !default;//previous page
-$icon-angr: true !default;//next page
-$icon-angrr: true !default;//last page
-$icon-angu: true !default;//back to top
+$icon-x: true !default;// x symbol, used to close search results page.
+$icon-search: true !default;//search, spyglass search button in search box.
+$icon-adjust: true !default;//theme switcher dark/light toggle button.
+$icon-angll: true !default;//pagination, goto first page
+$icon-angl: true !default;//pagination, goto previous page
+$icon-angr: true !default;//pagination, goto next page
+$icon-angrr: true !default;//pagination, goto last page
+$icon-angu: true !default;//back to top button, appears after scrolling down.
 
 $icon-ffolder: false !default;
 $icon-folder: false !default;// categories folder
@@ -79,6 +75,60 @@ $icon-minus: false !default;// minus symbol
 $icon-moon: false !default;// dark moon
 $icon-sun: false !default;// light sun
 
+/// Dark Colors
+$f1d: #ccc !default;// Font Color Primary
+$f2d: #ddd !default;// Font Color Headers
+$c1d: #111 !default;// Background Color Primary
+$c2d: #222 !default;// Background Color Secondary
+$c3d: #333 !default;// Table Rows, Block quote edge, Borders
+$c4d: #777 !default;// Disabled Buttons, Borders, mark background
+$a1d: #f90 !default;// link color
+$a2d: #fb0 !default;// link hover/focus color
+$a3d: #f90 !default;// link h1-h2 hover/focus color
+$cgd: #593 !default;// ins green, success
+$crd: #e33 !default;// del red, errors
+$dark: $f1d $f2d $c1d $c2d $c3d $c4d $a1d $a2d $a3d $cgd $crd;
+
+/// Light Colors
+$f1: #333 !default;// Font Color Primary
+$f2: #222 !default;// Font Color Headers
+$c1: #fff !default;// Background Color Primary
+$c2: #eee !default;// Background Color Secondary
+$c3: #ddd !default;// Table Rows, Block quote edge, Borders
+$c4: #555 !default;// Disabled Buttons, Borders, mark background
+$a1: #c40 !default;// link color
+$a2: #e60 !default;// link hover/focus color
+$a3: #f90 !default;// link h1-h2 hover/focus color
+$cg: #373 !default;// ins green, success
+$cr: #d33 !default;// del red, errors
+$light: $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $cg $cr;
+
+/// Dark Syntax Colors
+$h0d: #191919 !default;// background color
+$h1d: #ddd !default;// unstyled text
+$h2d: #888 !default;// comments
+$h3d: #e65 !default;// red, support function
+$h4d: #e83 !default;// orange, punctuation, constant, variable, json-key
+$h5d: #eb6 !default;// tan, entity/function name
+$h6d: #ac3 !default;// green, string
+$h7d: #8db !default;// teal, escape character
+$h8d: #6ae !default;// blue, declaration, tag, property
+$h9d: #d6e !default;// purple, operators
+$syntax-dark: $h0d $h1d $h2d $h3d $h4d $h5d $h6d $h7d $h8d $h9d;
+
+/// Light Syntax Colors
+$h0: #f7f7f7 !default;// background color
+$h1: #222 !default;// unstyled text
+$h2: #666 !default;// comments
+$h3: #a21 !default;// red, support function
+$h4: #930 !default;// orange, punctuation, constant, variable, json-key
+$h5: #a50 !default;// tan, entity/function name
+$h6: #350 !default;// green, string
+$h7: #286 !default;// teal, escape character
+$h8: #059 !default;// blue, declaration, tag, property
+$h9: #a3c !default;// purple, operators
+$syntax-light: $h0 $h1 $h2 $h3 $h4 $h5 $h6 $h7 $h8 $h9;
+
 /// These lines find the spot at which to insert your appended fonts.
 //$findFont-Main : "Segoe UI";     // ← append custom MAIN font(s) AFTER this
 //$findFont-Code : "Segoe UI Mono";// ← append custom CODE font(s) AFTER this
@@ -86,13 +136,13 @@ $findFont-Main : null !default;
 $findFont-Code : null !default;
 
 /// These lines specify the fonts to add.
-//$fontExt-Main  : ("Example Font 1", "Example Font 2") // MAIN font(s) to add
-//$fontExt-Code  : ("Example Code 1", "Example Code 2") // CODE font(s) to add
+//$fontExt-Main  : (ExampleFont1, "Example Font 2");// MAIN font(s) to add
+//$fontExt-Code  : (ExampleCode1, "Example Code 2");// CODE font(s) to add
 $fontExt-Main  : null !default;
 $fontExt-Code  : null !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;
+$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;
 
 /// Enable <header>, <main>, <footer> inside <body> as a container
 $enable-semantic-container: true !default;
@@ -237,51 +287,74 @@ $syntax: true !default;//syntax highlighting for code blocks
   #{--ff}: $font;
   #{--fm}: $font-mono;//code
 }
-:root {
-  @include font;
-  @include root;
-}
 
 @if $abridgeMode == "auto" {
   :root {
-    @include colors.dark($dark...);
+    @include font;
+    @include root;
+    @include dark($dark...);
     @if $syntax {
-      @include syntax.dark($syntax-dark...);
+      @if $syntax-mode == "light" {
+        @include synlight($syntax-light...);
+      } @else {
+        @include syndark($syntax-dark...);
+      }
     }
   }
   @media (prefers-color-scheme: light) {
     :root {
-      @include colors.light($light...);
+      @include light($light...);
       @if $syntax {
-        @include syntax.light($syntax-light...);
+        @if $syntax-mode == "auto" {
+          @include synlight($syntax-light...);
+        }
       }
     }
   }
 } @else if $abridgeMode == "dark" {
   :root {
-    @include colors.dark($dark...);
+    @include font;
+    @include root;
+    @include dark($dark...);
     @if $syntax {
-      @include syntax.dark($syntax-dark...);
+      @include syndark($syntax-dark...);
     }
   }
 } @else if $abridgeMode == "light" {
   :root {
-    @include colors.light($light...);
+    @include font;
+    @include root;
+    @include light($light...);
     @if $syntax {
-      @include syntax.light($syntax-light...);
+      @include synlight($syntax-light...);
     }
   }
 } @else {//switcher (default)
+  :root {
+    @include font;
+    @include root;
+    @if $syntax {
+      @if $syntax-mode == "light" {
+        @include synlight($syntax-light...);
+      } @else if $syntax-mode == "dark" {
+        @include syndark($syntax-dark...);
+      }
+    }
+  }
   :root:not(.light) {
-    @include colors.dark($dark...);
+    @include dark($dark...);
     @if $syntax {
-      @include syntax.dark($syntax-dark...);
+      @if $syntax-mode == "auto" {
+        @include syndark($syntax-dark...);
+      }
     }
   }
   :root.light {
-    @include colors.light($light...);
+    @include light($light...);
     @if $syntax {
-      @include syntax.light($syntax-light...);
+      @if $syntax-mode == "auto" {
+        @include synlight($syntax-light...);
+      }
     }
   }
 }
@@ -290,70 +363,6 @@ $syntax: true !default;//syntax highlighting for code blocks
 /******************************************************************************
  *   Optional SCSS Blocks
  *****************************************************************************/
-@if $enable-icons {
-  @if $icon-adjust {.adjust { -webkit-mask: functions.icon(adjust, "none", 1, "%23000", $ic) ; background: var(--f2) }}//theme switcher
-  @if $icon-angl {.angl { -webkit-mask: functions.icon(angl, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle left
-  @if $icon-angll {.angll { -webkit-mask: functions.icon(angll, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle left left
-  @if $icon-angr {.angr { -webkit-mask: functions.icon(angr, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle right
-  @if $icon-angrr {.angrr { -webkit-mask: functions.icon(angrr, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle right right
-  @if $icon-angu {.angu { -webkit-mask: functions.icon(angu, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle up
-  @if $icon-search {.search { -webkit-mask: functions.icon(search, "%23000", 3, "none", $ic) ; background: var(--f2) }}//search
-  @if $icon-bitbucket {.bitbucket { background-image: functions.icon(bitbucket, "%2328f", 2, "none", $ic) }}
-  @if $icon-buymeacoffee {.buymeacoffee { background-image: functions.icon(buymeacoffee, "%23777", 1, "%23fd0", $ic) }}
-  @if $icon-check {.check { background-image: functions.icon(check, "%23888", 2, "none", $ic) }}
-  @if $icon-chevron {.chevron { background-image: functions.icon(chevron, "%23888", 2, "none", $ic) }}
-  @if $icon-clock {.clock { background-image: functions.icon(clock, "%23888", 2, "none", $ic) }}
-  @if $icon-codeberg {.codeberg { background-image: functions.icon(codeberg, "%23555", 2, "%23aaa", $ic) }}
-  @if $icon-date {.date { background-image: functions.icon(date, "%23888", 2, "none", $ic) }}
-  @if $icon-discord {.discord { background-image: functions.icon(discord, "none", 1, "%2356f", $ic) }}
-  @if $icon-docker {.docker { background-image: functions.icon(docker, "%2329e", 2, "none", $ic) }}
-  @if $icon-element {.element { background-image: functions.icon(element, "none", 1, "%231c8", $ic) }}
-  @if $icon-facebook {.facebook { background-image: functions.icon(facebook, "%23359", 2, "none", $ic) }}
-  @if $icon-folder {.folder { background-image: functions.icon(folder, "%23888", 2, "none", $ic) }}
-  @if $icon-github {.github { background-image: functions.icon(github, "%23888", 2, "none", $ic) }}
-  @if $icon-github-sponsor {.github-sponsor { background-image: functions.icon(github-sponsor, "%23c49", 2, "none", $ic) }}
-  @if $icon-gitlab {.gitlab { background-image: functions.icon(gitlab, "%23e62", 2, "none", $ic) }}
-  @if $icon-globe {.globe { background-image: functions.icon(globe, "%23888", 2, "none", $ic) }}
-  @if $icon-home {.home { background-image: functions.icon(home, "%23888", 2, "none", $ic) }}
-  @if $icon-instagram {.instagram { background-image: functions.icon(instagram, "%23e07", 2, "none", $ic) }}
-  @if $icon-linkedin {.linkedin { background-image: functions.icon(linkedin, "%2326a", 2, "none", $ic) }}
-  @if $icon-mail {.mail { background-image: functions.icon(mail, "%23888", 2, "none", $ic) }}
-  @if $icon-mastodon {.mastodon { background-image: functions.icon(mastodon, "none", 1, "%2328c", $ic) }}
-  @if $icon-matrix {.matrix { background-image: functions.icon(matrix, "%23888", 2, "none", $ic) }}
-  @if $icon-minus {.minus { background-image: functions.icon(minus, "%23888", 2, "none", $ic) }}
-  @if $icon-moon {.moon { background-image: functions.icon(moon, "%23888", 2, "none", $ic) }}
-  @if $icon-pinterest {.pinterest { background-image: functions.icon(pinterest, "%23b01", 2, "none", $ic) }}
-  @if $icon-python {.python { background-image: functions.icon(python, "%23fc1", 2, "%2326a", $ic) }}
-  @if $icon-researchgate {.researchgate { background-image: functions.icon(researchgate, "none", 2, "%230db", $ic) }}
-  @if $icon-rss {.rss { background-image: functions.icon(rss, "%23e94", 2, "none", $ic) }}
-  @if $icon-stack {.stack { background-image: functions.icon(stack, "%23e72", 2, "none", $ic) }}
-  @if $icon-sun {.sun { background-image: functions.icon(sun, "%23888", 2, "none", $ic) }}
-  @if $icon-tag {.tag { background-image: functions.icon(tag, "%23888", 2, "none", $ic) }}
-  @if $icon-twitch {.twitch { background-image: functions.icon(twitch, "%23a7f", 2, "none", $ic) }}
-  @if $icon-twitter {.twitter { background-image: functions.icon(twitter, "%232ad", 2, "none", $ic) }}
-  @if $icon-x {.x { background-image: functions.icon(x, "%23f00", 3, "none", $ic) }}
-  @if $icon-youtube {.youtube { background-image: functions.icon(youtube, "%23f00", 2, "none", $ic) }}
-  .svg {
-    width: 1.8rem;
-    height: 1.8rem;
-    display: inline-block;
-    //overflow: hidden;
-    text-align: center;
-    vertical-align: middle;
-  }
-  .svgs {
-    width: var(--fs);
-    height: var(--fs);
-    display: inline-block;
-    //overflow: hidden;
-    text-align: center;
-    vertical-align: middle;
-  }
-  .fa-a:hover {
-    color: var(--a3);
-    opacity: 1;
-  }
-}
 @if $document {
   // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
   *,
@@ -645,6 +654,16 @@ $syntax: true !default;//syntax highlighting for code blocks
     margin-left: auto;
     padding-right: var(--s1);//add some spacing between nav divs
   }
+  // mobile first layout.
+  header nav {
+    flex-direction: column;// column layout for mobile view
+    h1 {
+      margin: var(--s2) 0 var(--s1);//adds more padding above for mobile view
+    }
+    div {
+      margin: auto; // keeps top menu/search centered in mobile view
+    }
+  }
   nav > div {
     ul, h2 {
       line-height: 1.9;
@@ -669,7 +688,7 @@ $syntax: true !default;//syntax highlighting for code blocks
     }
     li {
       display: inline-block;
-      margin: 0 .3rem;
+      margin: 0 .2rem;
     }
   }
   main nav {
@@ -719,6 +738,7 @@ $syntax: true !default;//syntax highlighting for code blocks
   .dropdown {
     display: inline-block;
     position: relative;
+    z-index: 99;
     vertical-align: -3px;
     font-weight: var(--fh);
     font-size: 1.3rem;
@@ -726,27 +746,28 @@ $syntax: true !default;//syntax highlighting for code blocks
   .dropdown-content {
     display: none;
     position: absolute;
-    z-index: 9;
+    z-index: 99;
     font-weight: var(--fh);
     font-size: 1.3rem;
   }
   .dropdown:hover .dropdown-content {
     display: block;
+    z-index: 99;
     a {
       text-decoration: none;
     }
   }
-  // breakpoint makes header responsive for mobile layouts
+  // breakpoint makes header responsive for desktop layouts
+  // mobile first is min-width for desktop instead of max-width for mobile
   @if map-get($breakpoints, "md") {
-    @media (max-width: map-get($breakpoints, "md")) {
+    @media (min-width: map-get($breakpoints, "md")) {
+      header > nav > div {
+        margin: var(--s1) 0;// desktop layout
+      }
       header nav {
-        display: flex;
-        flex-direction: column;
+        flex-direction: row;// row layout for desktop view
         h1 {
-          margin: var(--s2) 0 var(--s1);
-        }
-        div {
-          margin: auto; // keeps top menu/search centered in mobile view
+          margin: var(--s1) 0;// desktop layout
         }
       }
     }
@@ -998,10 +1019,10 @@ $syntax: true !default;//syntax highlighting for code blocks
     z-index: 9;
     background: var(--c1);
     border: 2px solid var(--c3);
-    position: absolute;
-    right: 0;
+    position: static;
+    left: 0;
+    width: 100%;
     margin-top: var(--s1);
-    width: 500px;
     max-height: 500px;
     overflow: auto;
   }
@@ -1038,22 +1059,25 @@ $syntax: true !default;//syntax highlighting for code blocks
     white-space: nowrap;
   }
   .searchd > input {
-    max-width: 15.3rem;
+    max-width: 100%;
+    flex-grow: 1;
     padding-right:2.4rem;//inlayed search icon
   }
   .searchd > button {
     margin-left: -2.4rem;//inlayed search icon
   }
+  // mobile first is min-width for desktop instead of max-width for mobile
   @if map-get($breakpoints, "md") {
-    @media (max-width: map-get($breakpoints, "md")) {
+    @media (min-width: map-get($breakpoints, "md")) {
       .searchd > input {
-        max-width: 100%;
-        flex-grow: 1;
+        max-width: 15.3rem;
+        flex-grow: 0;
       }
       #suggestions {
-        position: static;
-        left: 0;
-        width: 100%;
+        position: absolute;
+        right: 0;
+        left: unset;
+        width: 500px;
       }
     }
   }
@@ -1085,6 +1109,9 @@ $syntax: true !default;//syntax highlighting for code blocks
       color: var(--f1);
     }
   }
+  .toc {
+    display: none;
+  }
   .toc-sticky {
     border-radius: var(--br);
     border-top: 5px solid var(--a1);
@@ -1097,9 +1124,10 @@ $syntax: true !default;//syntax highlighting for code blocks
     overflow: auto;
   }
   @if map-get($breakpoints, "md") {
-    @media (max-width: map-get($breakpoints, "md")) {
+    // mobile first is min-width for desktop instead of max-width for mobile
+    @media (min-width: map-get($breakpoints, "md")) {
       .toc {
-        display: none;
+        display: unset;
       }
     }
   }
@@ -1116,7 +1144,7 @@ $syntax: true !default;//syntax highlighting for code blocks
   .rpad {padding-right: .2rem}
   .si {font-size: 1.5em}
   pre code[data-lang]::before {
-    color: var(--f1);
+    color: var(--h1);
     text-transform: uppercase;
     content: ' [' attr(data-lang) '] ' "\a\a";
   }
@@ -1138,12 +1166,6 @@ $syntax: true !default;//syntax highlighting for code blocks
     top: 9px;
     font-size: .8rem;
   }
-  // Mark Override, this is used for Zola's linenos and hl_lines
-  :root:not(.light) code table {
-    mark {
-      filter: brightness(120%);
-    }
-  }
   // Table Override, this is used for Zola's linenos and hl_lines
   code {
     table {
@@ -1152,7 +1174,6 @@ $syntax: true !default;//syntax highlighting for code blocks
       // Highlighted text
       mark {
         display: block;
-        background-color: var(--c2);
         color: unset;
         padding: 0;
       }
@@ -1201,205 +1222,269 @@ $syntax: true !default;//syntax highlighting for code blocks
     margin:var(--s1);
   }
 }
+@if $enable-icons {
+  @if $icon-adjust {.adjust { -webkit-mask: functions.icon(adjust, "none", 1, "%23000", $ic) ; background: var(--f2) }}//theme switcher
+  @if $icon-angl {.angl { -webkit-mask: functions.icon(angl, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle left
+  @if $icon-angll {.angll { -webkit-mask: functions.icon(angll, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle left left
+  @if $icon-angr {.angr { -webkit-mask: functions.icon(angr, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle right
+  @if $icon-angrr {.angrr { -webkit-mask: functions.icon(angrr, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle right right
+  @if $icon-angu {.angu { -webkit-mask: functions.icon(angu, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle up
+  @if $icon-search {.search { -webkit-mask: functions.icon(search, "%23000", 3, "none", $ic) ; background: var(--f2) }}//search
+  @if $icon-bitbucket {.bitbucket { background-image: functions.icon(bitbucket, "%2328f", 2, "none", $ic) }}
+  @if $icon-buymeacoffee {.buymeacoffee { background-image: functions.icon(buymeacoffee, "%23777", 1, "%23fd0", $ic) }}
+  @if $icon-check {.check { background-image: functions.icon(check, "%23888", 2, "none", $ic) }}
+  @if $icon-chevron {.chevron { background-image: functions.icon(chevron, "%23888", 2, "none", $ic) }}
+  @if $icon-clock {.clock { background-image: functions.icon(clock, "%23888", 2, "none", $ic) }}
+  @if $icon-codeberg {.codeberg { background-image: functions.icon(codeberg, "%23555", 2, "%23aaa", $ic) }}
+  @if $icon-date {.date { background-image: functions.icon(date, "%23888", 2, "none", $ic) }}
+  @if $icon-discord {.discord { background-image: functions.icon(discord, "none", 1, "%2356f", $ic) }}
+  @if $icon-docker {.docker { background-image: functions.icon(docker, "%2329e", 2, "none", $ic) }}
+  @if $icon-element {.element { background-image: functions.icon(element, "none", 1, "%231c8", $ic) }}
+  @if $icon-facebook {.facebook { background-image: functions.icon(facebook, "%23359", 2, "none", $ic) }}
+  @if $icon-folder {.folder { background-image: functions.icon(folder, "%23888", 2, "none", $ic) }}
+  @if $icon-github {.github { background-image: functions.icon(github, "%23888", 2, "none", $ic) }}
+  @if $icon-github-sponsor {.github-sponsor { background-image: functions.icon(github-sponsor, "%23c49", 2, "none", $ic) }}
+  @if $icon-gitlab {.gitlab { background-image: functions.icon(gitlab, "%23e62", 2, "none", $ic) }}
+  @if $icon-globe {.globe { background-image: functions.icon(globe, "%23888", 2, "none", $ic) }}
+  @if $icon-home {.home { background-image: functions.icon(home, "%23888", 2, "none", $ic) }}
+  @if $icon-instagram {.instagram { background-image: functions.icon(instagram, "%23e07", 2, "none", $ic) }}
+  @if $icon-linkedin {.linkedin { background-image: functions.icon(linkedin, "%2326a", 2, "none", $ic) }}
+  @if $icon-mail {.mail { background-image: functions.icon(mail, "%23888", 2, "none", $ic) }}
+  @if $icon-mastodon {.mastodon { background-image: functions.icon(mastodon, "none", 1, "%2328c", $ic) }}
+  @if $icon-matrix {.matrix { background-image: functions.icon(matrix, "%23888", 2, "none", $ic) }}
+  @if $icon-minus {.minus { background-image: functions.icon(minus, "%23888", 2, "none", $ic) }}
+  @if $icon-moon {.moon { background-image: functions.icon(moon, "%23888", 2, "none", $ic) }}
+  @if $icon-pinterest {.pinterest { background-image: functions.icon(pinterest, "%23b01", 2, "none", $ic) }}
+  @if $icon-python {.python { background-image: functions.icon(python, "%23fc1", 2, "%2326a", $ic) }}
+  @if $icon-researchgate {.researchgate { background-image: functions.icon(researchgate, "none", 2, "%230db", $ic) }}
+  @if $icon-rss {.rss { background-image: functions.icon(rss, "%23e94", 2, "none", $ic) }}
+  @if $icon-stack {.stack { background-image: functions.icon(stack, "%23e72", 2, "none", $ic) }}
+  @if $icon-sun {.sun { background-image: functions.icon(sun, "%23888", 2, "none", $ic) }}
+  @if $icon-tag {.tag { background-image: functions.icon(tag, "%23888", 2, "none", $ic) }}
+  @if $icon-twitch {.twitch { background-image: functions.icon(twitch, "%23a7f", 2, "none", $ic) }}
+  @if $icon-twitter {.twitter { background-image: functions.icon(twitter, "%232ad", 2, "none", $ic) }}
+  @if $icon-x {.x { background-image: functions.icon(x, "%23f00", 3, "none", $ic) }}
+  @if $icon-youtube {.youtube { background-image: functions.icon(youtube, "%23f00", 2, "none", $ic) }}
+  .svg {
+    width: 1.8rem;
+    height: 1.8rem;
+    display: inline-block;
+    //overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+  }
+  .svgs {
+    width: var(--fs);
+    height: var(--fs);
+    display: inline-block;
+    //overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+  }
+  .fa-a:hover {
+    color: var(--a3);
+    opacity: 1;
+  }
+}
 @if $syntax {
   // Unstyled Text Color, and background color
   .z-code {
-    color: var(--f1);//#ccc
-    background-color: var(--bg);
+    color: var(--h1);//#ccc
+    background-color: var(--h0);
   }
   // This is a comment
   .z-comment {//, .z-punctuation.z-definition.z-comment
-    color: var(--c4);//#888
+    color: var(--h2);//#888
     font-style: italic;
   }
   // a  (int a;)
   .z-variable {
-    color: var(--f1);
+    color: var(--h1);
   }
   // "This is a string"
   .z-string {//, .z-constant.z-other.z-symbol
-    color: var(--h4);
+    color: var(--h6);
   }
   // 10  (a = 10;)
   .z-constant.z-numeric {
-    color: var(--h2);
+    color: var(--h4);
   }
   // /n
   .z-constant.z-character.z-escape {//, .z-string.z-regexp
-    color: var(--h5);
+    color: var(--h7);
   }
   // false, true, etc...
   .z-constant.z-language {
-    color: var(--h2);
+    color: var(--h4);
   }
   // BUF  (const BUF: usize = 10 * 1024;)
   .z-constant.z-other {//, .z-constant.z-character
-    color: var(--h2);
+    color: var(--h4);
   }
   // Figure out how to reproduce in code block otherwise don't include
   //.z-variable.z-member {
-  //    color: var(--h1);
+  //    color: var(--h3);
   //}
   // use, crate, let, etc.
   .z-keyword {//, .z-keyword.z-operator.z-word
-    color: var(--h6);
+    color: var(--h8);
   }
   // = * - + /
   .z-keyword.z-operator {
-    color: var(--h7);
+    color: var(--h9);
   }
   // separators: commas, colons, etc.  terminator:  endline semicolon, etc.
   .z-punctuation.z-separator, .z-punctuation.z-terminator {
-    color: var(--f1);
+    color: var(--h1);
   }
   // () [] {}
   .z-punctuation.z-section {
-    color: var(--f1);
+    color: var(--h1);
   }
   //  .  ::
   .z-punctuation.z-accessor {
-    color: var(--h2);
+    color: var(--h4);
   }
   //  #  (#[cfg(test)])
   .z-punctuation.z-definition.z-annotation {
-    color: var(--f1);
+    color: var(--h1);
   }
   // Figure out how to reproduce in code block otherwise don't include
   //.z-variable.z-other.z-dollar.z-only.z-js, .z-variable.z-other.z-object.z-dollar.z-only.z-js, .z-variable.z-type.z-dollar.z-only.z-js, .z-support.z-class.z-dollar.z-only.z-js {
-  //    color: var(--h4);
+  //    color: var(--h6);
   //}
   // const, pub, mut, Self, fn
   .z-storage {
-    color: var(--h6);
+    color: var(--h8);
   }
   // const, struct
   .z-storage.z-type {
-    color: var(--h6);
+    color: var(--h8);
   }
   // new, function names
   .z-entity.z-name.z-function {
-    color: var(--h3);
+    color: var(--h5);
   }
   // key in toml entries
   .z-entity.z-name {//, .z-entity.z-name.z-label
-    color: var(--h3);
+    color: var(--h5);
   }
   // Figure out how to reproduce in code block otherwise don't include
   //.z-entity.z-other.z-inherited-class {
-  //    color: var(--h6);
+  //    color: var(--h8);
   //    text-decoration: underline;
   //}
   //  v1   (fn lookup(v1))
   .z-variable.z-parameter {
-    color: var(--h2);
+    color: var(--h4);
   }
   //  self  (self.html.push(c))
   .z-variable.z-language {
-    color: var(--h3);
+    color: var(--h5);
     font-style: italic;
   }
   // html tag name, eg:  html, head, meta, title, body, etc.
   .z-entity.z-name.z-tag {//, .z-meta.z-tag.z-sgml
-    color: var(--h6);
+    color: var(--h8);
   }
   // html tag brackets <>
   .z-punctuation.z-definition.z-tag.z-end, .z-punctuation.z-definition.z-tag.z-begin, .z-punctuation.z-definition.z-tag {
-    color: var(--h6);
+    color: var(--h8);
   }
   // html attribute name, eg: lang, charset
   .z-entity.z-other.z-attribute-name {
-    color: var(--h3);
+    color: var(--h5);
   }
   // function name as variable value, and annotation:  derive  (#[derive(Debug)])
   .z-variable.z-function, .z-variable.z-annotation {
-    color: var(--h3);
+    color: var(--h5);
   }
   // support function, eg:   extend  (self.html.extend(b"<span");)
   // macros, eg:  println!  print!  format!
   .z-support.z-function, .z-support.z-macro {
-    color: var(--h1);
+    color: var(--h3);
   }
   // Figure out how to reproduce in code block otherwise don't include
   //.z-support.z-constant {
-  //    color: var(--h2);
+  //    color: var(--h4);
   //    font-style: italic;
   //}
   // type: Vec, Some, str, int
   // class:  Config  ($CONF = Config::getInstance()->getAll();)
   .z-support.z-type, .z-support.z-class {
-    color: var(--h6);
+    color: var(--h8);
     font-style: italic;
   }
   // Figure out how to reproduce in code block otherwise don't include
   //.z-source.z-ruby .z-variable.z-other.z-readwrite {
-  //    color: var(--h3);
+  //    color: var(--h5);
   //}
   // superfluous, already have .z-entity.z-name.z-tag
   //.z-source.z-css .z-entity.z-name.z-tag, .z-source.z-sass .z-entity.z-name.z-tag, .z-source.z-scss .z-entity.z-name.z-tag, .z-source.z-less .z-entity.z-name.z-tag, .z-source.z-stylus .z-entity.z-name.z-tag {
-  //    color: var(--h6);
+  //    color: var(--h8);
   //}
   // property name, eg css: font-size, text-align, etc.
   .z-support.z-type.z-property-name {
-    color: var(--h6);
+    color: var(--h8);
   }
   //json
   .z-meta.z-mapping.z-key.z-json {
     .z-punctuation.z-definition.z-string.z-begin.z-json, .z-punctuation.z-definition.z-string.z-end.z-json, .z-string.z-quoted.z-double.z-json {
-        color: var(--h2);
+        color: var(--h4);
     }
   }
   // Figure out how to reproduce in code block otherwise don't include
   //.z-constant.z-numeric.z-line-number.z-match {
-  //    color: var(--h6);
+  //    color: var(--h8);
   //}
   // Figure out how to reproduce in code block otherwise don't include
   //.z-entity.z-name.z-filename.z-find-in-files {
-  //    color: var(--h4);
+  //    color: var(--h6);
   //}
   // Figure out how to reproduce in code block otherwise don't include
   //.z-message.z-error {
-  //    color: var(--h1);
+  //    color: var(--h3);
   //}
   // Figure out how to reproduce in code block otherwise don't include
   //.z-string.z-other.z-link, .z-markup.z-underline.z-link {
-  //    color: var(--h5);
+  //    color: var(--h7);
   //    text-decoration: underline;
   //    font-style: italic;
   //}
   // Figure out how to reproduce in code block otherwise don't include
   //.z-punctuation.z-definition.z-image {
-  //    color: var(--h3);
+  //    color: var(--h5);
   //}
   // Figure out how to reproduce in code block otherwise don't include
   //.z-meta.z-separator {
-  //    color: var(--f1);
-  //    background-color: var(--f1);
+  //    color: var(--h1);
+  //    background-color: var(--h1);
   //    font-weight: bold;
   //}
   // Figure out how to reproduce in code block otherwise don't include
   //.z-markup.z-list.z-numbered.z-bullet, .z-markup.z-list .z-punctuation.z-definition.z-list_item {
-  //    color: var(--h5);
+  //    color: var(--h7);
   //}
   // Figure out how to reproduce in code block otherwise don't include
   //.z-text.z-html.z-markdown .z-markup.z-raw.z-inline {
-  //    color: var(--h2);
+  //    color: var(--h4);
   //}
   // Figure out how to reproduce in code block otherwise don't include
   //.z-text.z-html.z-markdown .z-meta.z-dummy.z-line-break {
-  //    color: var(--f1);
+  //    color: var(--h1);
   //}
   // Figure out how to reproduce in code block otherwise don't include
   //.z-markup.z-raw.z-block.z-fenced.z-markdown {
-  //    color: var(--f1);
-  //    background-color: var(--f1);
+  //    color: var(--h1);
+  //    background-color: var(--h1);
   //}
   // Figure out how to reproduce in code block otherwise don't include
   //.z-punctuation.z-definition.z-fenced.z-markdown, .z-variable.z-language.z-fenced.z-markdown {
-  //    color: var(--f1);
-  //    background-color: var(--f1);
+  //    color: var(--h1);
+  //    background-color: var(--h1);
   //}
   // Figure out how to reproduce in code block otherwise don't include
   //.z-variable.z-language.z-fenced.z-markdown {
-  //    color: var(--f1);
+  //    color: var(--h1);
   //}
 }
-- 
cgit v1.3.1