ImageHover Shortcode, Font Resources

36 files changed, 458 insertions, 178 deletions

diff --git a/sass/abridge-blue.scss b/sass/abridge-blue.scss
index 8d796a6..ea2ed2a 100644
--- a/sass/abridge-blue.scss
+++ b/sass/abridge-blue.scss
@@ -14,6 +14,7 @@
 
 @import "variables"; //config
 
-@import "skins/blueauto"; // Light Theme
+@import "skins/blue-auto"; // Blue Automatic Dark/Light Theme based on browser/system preference
+@import "skins/abridge_fonts.scss"; // Local Fonts
 
 @import "imports"; // html
diff --git a/sass/abridge-bluelight.scss b/sass/abridge-bluelight.scss
index c0203f0..6730b11 100644
--- a/sass/abridge-bluelight.scss
+++ b/sass/abridge-bluelight.scss
@@ -14,6 +14,7 @@
 
 @import "variables"; //config
 
-@import "skins/bluelight"; // Light Theme
+@import "skins/blue-light"; // Blue Light Theme
+@import "skins/abridge_fonts.scss"; // Local Fonts
 
 @import "imports"; // html
diff --git a/sass/abridge-bluenight.scss b/sass/abridge-bluenight.scss
index a54f53e..0b2f680 100644
--- a/sass/abridge-bluenight.scss
+++ b/sass/abridge-bluenight.scss
@@ -14,6 +14,7 @@
 
 @import "variables"; //config
 
-@import "skins/bluenight"; // Light Theme
+@import "skins/blue-dark"; // Blue Dark Theme
+@import "skins/abridge_fonts.scss"; // Local Fonts
 
 @import "imports"; // html
diff --git a/sass/abridge-dark.scss b/sass/abridge-dark.scss
index 279554d..961e7ac 100644
--- a/sass/abridge-dark.scss
+++ b/sass/abridge-dark.scss
@@ -14,6 +14,7 @@
 
 @import "variables"; //config
 
-@import "skins/dark"; // Dark Theme
+@import "skins/abridge-dark"; // Dark Theme
+@import "skins/abridge_fonts.scss"; // Local Fonts
 
 @import "imports"; // html
diff --git a/sass/abridge-light.scss b/sass/abridge-light.scss
index 6910018..49a065c 100644
--- a/sass/abridge-light.scss
+++ b/sass/abridge-light.scss
@@ -14,6 +14,7 @@
 
 @import "variables"; //config
 
-@import "skins/light"; // Light Theme
+@import "skins/abridge-light"; // Light Theme
+@import "skins/abridge_fonts.scss"; // Local Fonts
 
 @import "imports"; // html
diff --git a/sass/abridge.scss b/sass/abridge.scss
index 8cda9cf..8d3aa25 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -14,6 +14,7 @@
 
 @import "variables"; //config
 
-@import "skins/auto"; // Automatic Dark/Light Theme based on browser/system preference.
+@import "skins/abridge-auto"; // Automatic Dark/Light Theme based on browser/system preference
+@import "skins/abridge_fonts.scss"; // Local Fonts
 
 @import "imports"; // html
diff --git a/sass/fonts/_Arimo.scss b/sass/fonts/_Arimo.scss
new file mode 100644
index 0000000..8e72d3a
--- /dev/null
+++ b/sass/fonts/_Arimo.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Arimo';
+    src: local("Arimo"), url("/font/Arimo.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Arimo';
+    src: local("Arimo"), url("/font/Arimo-italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Arimo';
+    src: local("Arimo"), url("/font/Arimo-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_Bitter.scss b/sass/fonts/_Bitter.scss
new file mode 100644
index 0000000..aacf2d9
--- /dev/null
+++ b/sass/fonts/_Bitter.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Bitter';
+    src: local("Bitter"), url("/font/Bitter.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Bitter';
+    src: local("Bitter"), url("/font/Bitter-italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Bitter';
+    src: local("Bitter"), url("/font/Bitter-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_DroidSans.scss b/sass/fonts/_DroidSans.scss
new file mode 100644
index 0000000..8e69a6e
--- /dev/null
+++ b/sass/fonts/_DroidSans.scss
@@ -0,0 +1,11 @@
+@font-face {
+    font-family: 'DroidSans';
+    src: local("DroidSans"), url("/font/DroidSans.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'DroidSans';
+    src: local("DroidSans"), url("/font/DroidSans-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_FiraCode.scss b/sass/fonts/_FiraCode.scss
new file mode 100644
index 0000000..8053db9
--- /dev/null
+++ b/sass/fonts/_FiraCode.scss
@@ -0,0 +1,5 @@
+@font-face {
+    font-family: 'Fira Code';
+    src: local("Fira Code"), url("/font/FiraCode.woff2");//latin regular
+    font-display: swap;
+}
diff --git a/sass/fonts/_Jost.scss b/sass/fonts/_Jost.scss
new file mode 100644
index 0000000..5d7ef0e
--- /dev/null
+++ b/sass/fonts/_Jost.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Jost';
+    src: local("Jost"), url("/font/Jost.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Jost';
+    src: local("Jost"), url("/font/Jost-italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Jost';
+    src: local("Jost"), url("/font/Jost-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_Lato.scss b/sass/fonts/_Lato.scss
new file mode 100644
index 0000000..a1a6f27
--- /dev/null
+++ b/sass/fonts/_Lato.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Lato';
+    src: local("Lato"), url("/font/Lato.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Lato';
+    src: local("Lato"), url("/font/Lato-italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Lato';
+    src: local("Lato"), url("/font/Lato-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_Montserrat.scss b/sass/fonts/_Montserrat.scss
new file mode 100644
index 0000000..35f58ce
--- /dev/null
+++ b/sass/fonts/_Montserrat.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Montserrat';
+    src: local("Montserrat"), url("/font/Montserrat.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Montserrat';
+    src: local("Montserrat"), url("/font/Montserrat-italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Montserrat';
+    src: local("Montserrat"), url("/font/Montserrat-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_OpenSans.scss b/sass/fonts/_OpenSans.scss
new file mode 100644
index 0000000..36efb36
--- /dev/null
+++ b/sass/fonts/_OpenSans.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'OpenSans';
+    src: local("OpenSans"), url("/font/OpenSans.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'OpenSans';
+    src: local("OpenSans"), url("/font/OpenSans-italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'OpenSans';
+    src: local("OpenSans"), url("/font/OpenSans-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_OpenSansCondensed.scss b/sass/fonts/_OpenSansCondensed.scss
new file mode 100644
index 0000000..28b9cce
--- /dev/null
+++ b/sass/fonts/_OpenSansCondensed.scss
@@ -0,0 +1,5 @@
+@font-face {
+    font-family: 'OpenSansCondensed';
+    src: local("OpenSansCondensed"), url("/font/OpenSansCondensed.woff2");//latin regular
+    font-display: swap;
+}
diff --git a/sass/fonts/_PTSans.scss b/sass/fonts/_PTSans.scss
new file mode 100644
index 0000000..5aa2a54
--- /dev/null
+++ b/sass/fonts/_PTSans.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'PTSans';
+    src: local("PTSans"), url("/font/PTSans.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'PTSans';
+    src: local("PTSans"), url("/font/PTSans-italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'PTSans';
+    src: local("PTSans"), url("/font/PTSans-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_PTSansNarrow.scss b/sass/fonts/_PTSansNarrow.scss
new file mode 100644
index 0000000..a295eb2
--- /dev/null
+++ b/sass/fonts/_PTSansNarrow.scss
@@ -0,0 +1,11 @@
+@font-face {
+    font-family: 'PTSansNarrow';
+    src: local("PTSansNarrow"), url("/font/PTSansNarrow.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'PTSansNarrow';
+    src: local("PTSansNarrow"), url("/font/PTSansNarrow-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_Roboto.scss b/sass/fonts/_Roboto.scss
new file mode 100644
index 0000000..3490e75
--- /dev/null
+++ b/sass/fonts/_Roboto.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Roboto';
+    src: local("Roboto"), url("/font/Roboto.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Roboto';
+    src: local("Roboto"), url("/font/Roboto-italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Roboto';
+    src: local("Roboto"), url("/font/Roboto-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_RobotoCondensed.scss b/sass/fonts/_RobotoCondensed.scss
new file mode 100644
index 0000000..d314d6b
--- /dev/null
+++ b/sass/fonts/_RobotoCondensed.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'RobotoCondensed';
+    src: local("RobotoCondensed"), url("/font/RobotoCondensed.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'RobotoCondensed';
+    src: local("RobotoCondensed"), url("/font/RobotoCondensed-italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'RobotoCondensed';
+    src: local("RobotoCondensed"), url("/font/RobotoCondensed-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_RobotoSlab.scss b/sass/fonts/_RobotoSlab.scss
new file mode 100644
index 0000000..0578e11
--- /dev/null
+++ b/sass/fonts/_RobotoSlab.scss
@@ -0,0 +1,11 @@
+@font-face {
+    font-family: 'RobotoSlab';
+    src: local("RobotoSlab"), url("/font/RobotoSlab.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'RobotoSlab';
+    src: local("RobotoSlab"), url("/font/RobotoSlab-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_SourceSansPro.scss b/sass/fonts/_SourceSansPro.scss
new file mode 100644
index 0000000..64e156b
--- /dev/null
+++ b/sass/fonts/_SourceSansPro.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'SourceSansPro';
+    src: local("SourceSansPro"), url("/font/SourceSansPro.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'SourceSansPro';
+    src: local("SourceSansPro"), url("/font/SourceSansPro-italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'SourceSansPro';
+    src: local("SourceSansPro"), url("/font/SourceSansPro-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/fonts/_Ubuntu.scss b/sass/fonts/_Ubuntu.scss
new file mode 100644
index 0000000..ab3229f
--- /dev/null
+++ b/sass/fonts/_Ubuntu.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Ubuntu';
+    src: local("Ubuntu"), url("/font/Ubuntu.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Ubuntu';
+    src: local("Ubuntu"), url("/font/Ubuntu-italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Ubuntu';
+    src: local("Ubuntu"), url("/font/Ubuntu-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss
index 19f421d..c203ed4 100644
--- a/sass/include/_nav.scss
+++ b/sass/include/_nav.scss
@@ -3,33 +3,33 @@
  * https://github.com/raj457036/attriCSS
  */
 .cnav {
-  color: var(--a3);
+  color: var(--a3);//pagination color current page
 }
 main nav {
-  margin-top: var(--s2);
+  margin-top: var(--s2);//pagination margin
 }
 main nav a,
-main nav a:visited {
+main nav a:visited {//pagination link styling
   font-weight: var(--fh);
   border: .1rem solid var(--f2);
   border-radius: var(--br);
-  padding: .3rem var(--s1);
-  margin: var(--s1);
+  padding: .1rem var(--s1);
+  margin: .1rem;
 }
-main nav a:hover {
+main nav a:hover {//makes border of pagination links hover color
   border-color: var(--a3);
 }
-nav > div:first-of-type {
+header > nav > div:first-of-type {//puts logo on left and menu/search on right
   margin-left: auto
 }
 nav > div {
   ul {
-    line-height: 0;
+    line-height: 2;
     margin-top: 0;
     padding-bottom: var(--s1);
   }
   display: block;
-  margin-left: var(--s1);
+  margin-left: var(--s1);//add some spacing between nav divs
 }
 nav {
   align-items: center;
@@ -53,6 +53,7 @@ nav {
     text-align: left;
   }
 }
+// breakpoint makes header responsive for mobile layouts
 @if map-get($breakpoints, "md") {
   @media (max-width: map-get($breakpoints, "md")) {
     header nav {
@@ -62,7 +63,7 @@ nav {
         text-align: center
       }
       div {
-        margin: auto
+        margin: auto // keeps top menu/search centered in mobile view
       }
     }
   }
diff --git a/sass/skins/_abridge-auto.scss b/sass/skins/_abridge-auto.scss
new file mode 100644
index 0000000..07ed824
--- /dev/null
+++ b/sass/skins/_abridge-auto.scss
@@ -0,0 +1,41 @@
+:root {
+  // Regular Fonts used by default:
+  --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
+  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
+  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+
+  // Monospace Fonts used for code:
+  --fm: 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;
+  // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/
+
+  // Colors
+  --f1: #555; //font color 1
+  --f2: #333; //font color 2
+
+  --c1: #fff; //color 1
+  --c2: #eee; //color 2
+  --c3: #ddd; //color 3
+  --c4: #777; //color 4
+
+  --a1: #c40; //accent color 1 link
+  --a2: #e60; //accent color 2 hover,focus
+  --a3: #e60; //accent color 3 h1-h2 hover,focus
+
+  --cg: #483; //ins green
+  --cr: #d33; //del red
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --f1: #ccc; //font color 1
+    --f2: #ddd; //font color 2
+
+    --c1: #111; //color 1
+    --c2: #222; //color 2
+    --c3: #333; //color 3
+    --c4: #888; //color 4
+
+    --a1: #f90; //accent color 1 link
+    --a2: #fb0; //accent color 2 hover,focus
+    --a3: #fb0; //accent color 3 h1-h2 hover,focus
+  }
+}
diff --git a/sass/skins/_abridge-dark.scss b/sass/skins/_abridge-dark.scss
new file mode 100644
index 0000000..39eb4a9
--- /dev/null
+++ b/sass/skins/_abridge-dark.scss
@@ -0,0 +1,26 @@
+:root {
+  // Regular Fonts used by default:
+  --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
+  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
+  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+
+  // Monospace Fonts used for code:
+  --fm: 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;
+  // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/
+
+  // Colors
+  --f1: #ccc; //font color 1
+  --f2: #ddd; //font color 2
+
+  --c1: #111; //color 1
+  --c2: #222; //color 2
+  --c3: #333; //color 3
+  --c4: #888; //color 4
+
+  --a1: #f90; //accent color 1 link
+  --a2: #fb0; //accent color 2 hover,focus
+  --a3: #fb0; //accent color 3 h1-h2 hover,focus
+
+  --cg: #483; //ins green
+  --cr: #d33; //del red
+}
diff --git a/sass/skins/_abridge-light.scss b/sass/skins/_abridge-light.scss
new file mode 100644
index 0000000..a2192ff
--- /dev/null
+++ b/sass/skins/_abridge-light.scss
@@ -0,0 +1,26 @@
+:root {
+  // Regular Fonts used by default:
+  --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
+  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
+  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+
+  // Monospace Fonts used for code:
+  --fm: 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;
+  // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/
+
+  // Colors
+  --f1: #555; //font color 1
+  --f2: #333; //font color 2
+
+  --c1: #fff; //color 1
+  --c2: #eee; //color 2
+  --c3: #ddd; //color 3
+  --c4: #777; //color 4
+
+  --a1: #c40; //accent color 1 link
+  --a2: #e60; //accent color 2 hover,focus
+  --a3: #e60; //accent color 3 h1-h2 hover,focus
+
+  --cg: #483; //ins green
+  --cr: #d33; //del red
+}
diff --git a/sass/skins/_abridge_fonts.scss b/sass/skins/_abridge_fonts.scss
new file mode 100644
index 0000000..c079490
--- /dev/null
+++ b/sass/skins/_abridge_fonts.scss
@@ -0,0 +1,19 @@
+// ## Local Fonts ##
+//@import "../fonts/Arimo";
+//@import "../fonts/Bitter";
+//@import "../fonts/DroidSans";
+//@import "../fonts/Jost";
+//@import "../fonts/Lato";
+//@import "../fonts/Montserrat";
+//@import "../fonts/OpenSans";
+//@import "../fonts/OpenSansCondensed";
+//@import "../fonts/PTSans";
+//@import "../fonts/PTSansNarrow";
+@import "../fonts/Roboto";
+//@import "../fonts/RobotoCondensed";
+//@import "../fonts/RobotoSlab";
+//@import "../fonts/SourceSansPro";
+//@import "../fonts/Ubuntu";
+
+// ## Local Fonts Monospaced ##
+//@import "../fonts/FiraCode";
diff --git a/sass/skins/_auto.scss b/sass/skins/_auto.scss
deleted file mode 100644
index 7c6109a..0000000
--- a/sass/skins/_auto.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-:root {
-  // Regular Fonts used by default:
-  --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
-  // Monospace Fonts used for code:
-  --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
-
-  // Colors
-  --f1: #555; //font color 1
-  --f2: #333; //font color 2
-
-  --c1: #fff; //color 1
-  --c2: #eee; //color 2
-  --c3: #ddd; //color 3
-  --c4: #777; //color 4
-
-  --a1: #c40; //accent color 1 link
-  --a2: #e60; //accent color 2 hover,focus
-  --a3: #e60; //accent color 3 h1-h2 hover,focus
-
-  --cg: #483; //ins green
-  --cr: #d33; //del red
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --f1: #ccc; //font color 1
-    --f2: #ddd; //font color 2
-
-    --c1: #111; //color 1
-    --c2: #222; //color 2
-    --c3: #333; //color 3
-    --c4: #888; //color 4
-
-    --a1: #f90; //accent color 1 link
-    --a2: #fb0; //accent color 2 hover,focus
-    --a3: #fb0; //accent color 3 h1-h2 hover,focus
-    }
-}
diff --git a/sass/skins/_blue-auto.scss b/sass/skins/_blue-auto.scss
new file mode 100644
index 0000000..7879b06
--- /dev/null
+++ b/sass/skins/_blue-auto.scss
@@ -0,0 +1,41 @@
+:root {
+  // Regular Fonts used by default:
+  --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
+  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
+  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+
+  // Monospace Fonts used for code:
+  --fm: 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;
+  // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/
+
+  // Colors
+  --f1: #111; //font color 1
+  --f2: #222; //font color 2
+
+  --c1: #fafafa; //color 1
+  --c2: #dbe7f5; //color 2
+  --c3: #062671; //color 3
+  --c4: #03143c; //color 4
+
+  --a1: #3b7ed0; //accent color 1 link
+  --a2: #004faf; //accent color 2 hover,focus
+  --a3: #004faf; //accent color 3 h1-h2 hover,focus
+
+  --cg: #483; //ins green
+  --cr: #d33; //del red
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --f1: #ccc; //font color 1
+    --f2: #ddd; //font color 2
+
+    --c1: #111; //color 1
+    --c2: #1a274a; //color 2
+    --c3: #404d69; //color 3
+    --c4: #2c3957; //color 4
+
+    --a1: #2f7ddb; //accent color 1 link
+    --a2: #4d9dff; //accent color 2 hover,focus
+    --a3: #4d9dff; //accent color 3 h1-h2 hover,focus
+  }
+}
diff --git a/sass/skins/_blue-dark.scss b/sass/skins/_blue-dark.scss
new file mode 100644
index 0000000..1c29f55
--- /dev/null
+++ b/sass/skins/_blue-dark.scss
@@ -0,0 +1,26 @@
+:root {
+  // Regular Fonts used by default:
+  --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
+  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
+  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+
+  // Monospace Fonts used for code:
+  --fm: 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;
+  // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/
+
+  // Colors
+  --f1: #ccc; //font color 1
+  --f2: #ddd; //font color 2
+
+  --c1: #111; //color 1
+  --c2: #1a274a; //color 2
+  --c3: #404d69; //color 3
+  --c4: #2c3957; //color 4
+
+  --a1: #2f7ddb; //accent color 1 link
+  --a2: #4d9dff; //accent color 2 hover,focus
+  --a3: #4d9dff; //accent color 3 h1-h2 hover,focus
+
+  --cg: #483; //ins green
+  --cr: #d33; //del red
+}
diff --git a/sass/skins/_blue-light.scss b/sass/skins/_blue-light.scss
new file mode 100644
index 0000000..ea87f7e
--- /dev/null
+++ b/sass/skins/_blue-light.scss
@@ -0,0 +1,26 @@
+:root {
+  // Regular Fonts used by default:
+  --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
+  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
+  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+
+  // Monospace Fonts used for code:
+  --fm: 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;
+  // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/
+
+  // Colors
+  --f1: #111; //font color 1
+  --f2: #222; //font color 2
+
+  --c1: #fafafa; //color 1
+  --c2: #dbe7f5; //color 2
+  --c3: #062671; //color 3
+  --c4: #03143c; //color 4
+
+  --a1: #3b7ed0; //accent color 1 link
+  --a2: #004faf; //accent color 2 hover,focus
+  --a3: #004faf; //accent color 3 h1-h2 hover,focus
+
+  --cg: #483; //ins green
+  --cr: #d33; //del red
+}
diff --git a/sass/skins/_blueauto.scss b/sass/skins/_blueauto.scss
deleted file mode 100644
index 1c4a55a..0000000
--- a/sass/skins/_blueauto.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-:root {
-    // Regular Fonts used by default:
-    --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
-    // Monospace Fonts used for code:
-    --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
-
-    // Colors
-    --f1: #111; //font color 1
-    --f2: #222; //font color 2
-
-    --c1: #fafafa; //color 1
-    --c2: #dbe7f5; //color 2
-    --c3: #062671; //color 3
-    --c4: #03143c; //color 4
-
-    --a1: #3b7ed0; //accent color 1 link
-    --a2: #004faf; //accent color 2 hover,focus
-    --a3: #004faf; //accent color 3 h1-h2 hover,focus
-
-    --cg: #483; //ins green
-    --cr: #d33; //del red
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --f1: #ccc; //font color 1
-    --f2: #ddd; //font color 2
-
-    --c1: #111; //color 1
-    --c2: #1a274a; //color 2
-    --c3: #404d69; //color 3
-    --c4: #2c3957; //color 4
-
-    --a1: #2f7ddb; //accent color 1 link
-    --a2: #4d9dff; //accent color 2 hover,focus
-    --a3: #4d9dff; //accent color 3 h1-h2 hover,focus
-    }
-}
diff --git a/sass/skins/_bluelight.scss b/sass/skins/_bluelight.scss
deleted file mode 100644
index a9b5315..0000000
--- a/sass/skins/_bluelight.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-:root {
-    // Regular Fonts used by default:
-    --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
-    // Monospace Fonts used for code:
-    --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
-
-    // Colors
-    --f1: #111; //font color 1
-    --f2: #222; //font color 2
-
-    --c1: #fafafa; //color 1
-    --c2: #dbe7f5; //color 2
-    --c3: #062671; //color 3
-    --c4: #03143c; //color 4
-
-    --a1: #3b7ed0; //accent color 1 link
-    --a2: #004faf; //accent color 2 hover,focus
-    --a3: #004faf; //accent color 3 h1-h2 hover,focus
-
-    --cg: #483; //ins green
-    --cr: #d33; //del red
-}
diff --git a/sass/skins/_bluenight.scss b/sass/skins/_bluenight.scss
deleted file mode 100644
index def62dd..0000000
--- a/sass/skins/_bluenight.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-:root {
-    // Regular Fonts used by default:
-    --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
-    // Monospace Fonts used for code:
-    --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
-
-    // Colors
-    --f1: #ccc; //font color 1
-    --f2: #ddd; //font color 2
-
-    --c1: #111; //color 1
-    --c2: #1a274a; //color 2
-    --c3: #404d69; //color 3
-    --c4: #2c3957; //color 4
-
-    --a1: #2f7ddb; //accent color 1 link
-    --a2: #4d9dff; //accent color 2 hover,focus
-    --a3: #4d9dff; //accent color 3 h1-h2 hover,focus
-
-    --cg: #483; //ins green
-    --cr: #d33; //del red
-}
diff --git a/sass/skins/_dark.scss b/sass/skins/_dark.scss
deleted file mode 100644
index 9c4519b..0000000
--- a/sass/skins/_dark.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-:root {
-  // Regular Fonts used by default:
-  --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
-  // Monospace Fonts used for code:
-  --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
-
-  // Colors
-  --f1: #ccc; //font color 1
-  --f2: #ddd; //font color 2
-
-  --c1: #111; //color 1
-  --c2: #222; //color 2
-  --c3: #333; //color 3
-  --c4: #888; //color 4
-
-  --a1: #f90; //accent color 1 link
-  --a2: #fb0; //accent color 2 hover,focus
-  --a3: #fb0; //accent color 3 h1-h2 hover,focus
-
-  --cg: #483; //ins green
-  --cr: #d33; //del red
-}
diff --git a/sass/skins/_light.scss b/sass/skins/_light.scss
deleted file mode 100644
index 0a51439..0000000
--- a/sass/skins/_light.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-:root {
-  // Regular Fonts used by default:
-  --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
-  // Monospace Fonts used for code:
-  --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
-
-  // Colors
-  --f1: #555; //font color 1
-  --f2: #333; //font color 2
-
-  --c1: #fff; //color 1
-  --c2: #eee; //color 2
-  --c3: #ddd; //color 3
-  --c4: #777; //color 4
-
-  --a1: #c40; //accent color 1 link
-  --a2: #e60; //accent color 2 hover,focus
-  --a3: #e60; //accent color 3 h1-h2 hover,focus
-
-  --cg: #483; //ins green
-  --cr: #d33; //del red
-}