From f81a42045e29cc396af78b5d87ead874ba26fa18 Mon Sep 17 00:00:00 2001
From: Jieiku
Date: Mon, 22 May 2023 23:12:14 -0700
Subject: All Variables Easy Override

---
 sass/abridge.scss | 1407 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 1397 insertions(+), 10 deletions(-)

(limited to 'sass/abridge.scss')

diff --git a/sass/abridge.scss b/sass/abridge.scss
index cd35c7a..3c7236e 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -1,18 +1,1405 @@
-@use "includes";
+@use "sass:meta";
+@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
+
+$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
+
+$syntax-dark: #191919 #e65 #f91 #eb6 #ac3 #8db #6ae #d6e !default;
+$syntax-light: #f7f7f7 #a21 #930 #a50 #350 #286 #059 #a3c !default;
+
+$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-mastodon: true !default;
+$icon-element: true !default;
+$icon-matrix: false !default;
+$icon-buymeacoffee: true !default;
+$icon-twitter: true !default;
+$icon-facebook: true !default;
+$icon-linkedin: true !default;
+$icon-codeberg: true !default;
+$icon-gitlab: true !default;
+$icon-github: true !default;
+$icon-github-sponsor: true !default;
+$icon-bitbucket: true !default;
+$icon-python: true !default;
+$icon-docker: true !default;
+$icon-stack: true !default;
+$icon-instagram: true !default;
+$icon-pinterest: true !default;
+$icon-discord: true !default;
+$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-ffolder: false !default;
+$icon-folder: false !default;// categories folder
+$icon-ftag: false !default;
+$icon-tag: false !default;// tag
+$icon-check: false !default;// check mark
+$icon-chevron: false !default;// chevron down
+$icon-clock: false !default;// time analog clock
+$icon-date: false !default;// calendar
+$icon-globe: false !default;
+$icon-home: false !default;
+$icon-minus: false !default;// minus symbol
+$icon-moon: false !default;// dark moon
+$icon-sun: false !default;// light sun
+
+/// 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
+$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  : 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;
+
+/// Enable <header>, <main>, <footer> inside <body> as a container
+$enable-semantic-container: true !default;
+
+/// Enable responsive typography, Fixed root element size if disabled
+$enable-responsive-typography: true !default;
+
+/// Enable responsive spacings for <header>, <main>, <footer>, <section>
+$enable-responsive-spacings: false !default;
+
+/// Enable a centered viewport for <header>, <main>, <footer> inside <body>
+/// This option will only work if $enable-maxwidth: false
+$enable-viewport: false !default;
+
+/// xs: Extra small (portrait phones)
+/// sm: Small(landscape phones)
+/// md: Medium(tablets)
+/// lg: Large(desktops)
+/// xl: Extra large (large desktops)
+
+/// Breakpoints
+$breakpoints: (
+  /// 'null' disable the breakpoint
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+/// Viewports
+$viewports: (
+  /// 'null' disable the viewport on a breakpoint
+  sm: 510px,
+  md: 700px,
+  lg: 920px,
+  xl: 1130px
+) !default;
+
+$document: true !default;//Content-box & Responsive typography
+$typography: true !default;//a, headings, p, ul, blockquote
+$sectioning: true !default;//responsive Container, header, main, footer
+$nav: true !default;//Horizontal Navigation at top of page
+$embedded: true !default;//Embedded content, iframe, video, images, etc.
+$table: true !default;//table specific elements
+$code: true !default;//codeblocks, code, pre, kbd
+$hr: true !default;//Horizontal Rule
+$scroller: true !default;//Horizontal scroller (<figure>)
+$button: true !default;//Form elements (button)
+$form: true !default;//Form elements (non-button)
+$top: true !default;//back to top button using CSS
+$search: true !default;//search feature
+$toc: true !default;//Table of Contents, page index / recent posts block
+$zola: true !default;//Zola Specific
+$misc: false !default;
+$grid: false !default;//Infinity Grid, column based layouts.
+$syntax: true !default;//syntax highlighting for code blocks
+
+/******************************************************************************
+ *   Root element
+ *****************************************************************************/
+@mixin root {
+  // Spacings
+  --s1: .5rem;
+  --s2: 1rem;
+  --rc: .5rem; //radius corners
+
+  // Borders
+  --br: 0.25rem; //border radius
+  --bw: 0.0625rem; //border width
+  --ow: 0.1875rem; //outline width
+
+  --fs: 1rem; //font-size
+  --lh: 1.5; //line-height
+  --lhh: 1.2; //line-height headers
+  --fw: 400; //font-weight
+  --fh: 700; //font-weight h1-h6
+
+  // Responsive typography
+  @if $enable-responsive-typography {
+    @if map-get($breakpoints, "sm") {
+      @media (min-width: map-get($breakpoints, "sm")) {
+        --fs: 1rem;
+      }
+    }
+    @if map-get($breakpoints, "md") {
+      @media (min-width: map-get($breakpoints, "md")) {
+        --fs: 1.04rem;
+      }
+    }
+    @if map-get($breakpoints, "lg") {
+      @media (min-width: map-get($breakpoints, "lg")) {
+        --fs: 1.08rem;
+      }
+    }
+    @if map-get($breakpoints, "xl") {
+      @media (min-width: map-get($breakpoints, "xl")) {
+        --fs: 1.12rem;
+      }
+    }
+  }
+
+  // Responsives spacings
+  @if $enable-responsive-spacings {
+    // Sectionning
+    header, main, footer,
+    section {
+      @if map-get($breakpoints, "sm") {
+        @media (min-width: map-get($breakpoints, "sm")) {
+          --s1: .5rem;
+        }
+      }
+      @if map-get($breakpoints, "md") {
+        @media (min-width: map-get($breakpoints, "md")) {
+          --s1: .6rem;
+        }
+      }
+      @if map-get($breakpoints, "lg") {
+        @media (min-width: map-get($breakpoints, "lg")) {
+          --s1: .7rem;
+        }
+      }
+      @if map-get($breakpoints, "xl") {
+        @media (min-width: map-get($breakpoints, "xl")) {
+          --s1: .8rem;
+        }
+      }
+    }
+  }
+}
+
+@mixin font {
+  // convert space separated list to comma separated list
+  $font: list.join($font, "", $separator: comma);
+  $font: functions.remove($font, "");
+  $font-mono: list.join($font-mono, "", $separator: comma);
+  $font-mono: functions.remove($font-mono, "");
+
+  $font: functions.font-var($font, $fontExt-Main, $findFont-Main);
+  $font-mono: functions.font-var($font-mono, $fontExt-Code, $findFont-Code);
+
+  #{--ff}: $font;
+  #{--fm}: $font-mono;//code
+}
 :root {
-  @include includes.var-root;
+  @include font;
+  @include root;
+}
+
+@if $abridgeMode == "auto" {
+  :root {
+    @include colors.dark($dark...);
+    @if $syntax {
+      @include syntax.dark($syntax-dark...);
+    }
+  }
+  @media (prefers-color-scheme: light) {
+    :root {
+      @include colors.light($light...);
+      @if $syntax {
+        @include syntax.light($syntax-light...);
+      }
+    }
+  }
+} @else if $abridgeMode == "dark" {
+  :root {
+    @include colors.dark($dark...);
+    @if $syntax {
+      @include syntax.dark($syntax-dark...);
+    }
+  }
+} @else if $abridgeMode == "light" {
+  :root {
+    @include colors.light($light...);
+    @if $syntax {
+      @include syntax.light($syntax-light...);
+    }
+  }
+} @else {//switcher (default)
+  :root:not(.light) {
+    @include colors.dark($dark...);
+    @if $syntax {
+      @include syntax.dark($syntax-dark...);
+    }
+  }
+  :root.light {
+    @include colors.light($light...);
+    @if $syntax {
+      @include syntax.light($syntax-light...);
+    }
+  }
+}
+
+
+/******************************************************************************
+ *   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`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box; // 1
+  }
+
+  // 1. Add text decoration inheritance in all browsers (opinionated)
+  // 2. Add vertical alignment inheritance in all browsers (opinionated)
+  //::before,
+  //::after {
+  //  text-decoration: inherit; // 1
+  //  vertical-align: inherit; // 2
+  //}
+
+  // 1. Correct the line height in all browsers
+  // 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
+  // 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
+  // 4. Change the default tap highlight to be completely transparent in iOS
+  // 5. Use the default cursor in all browsers (opinionated)
+  // 6. Use a 4-space tab width in all browsers (opinionated)
+  html {
+    text-rendering: optimizeLegibility;
+    background-color: var(--c1);
+    color: var(--f1);
+    font-family: var(--ff);
+    font-weight: var(--fw);
+    font-size: var(--fs);
+    line-height: var(--lh); // 1
+  //  -ms-text-size-adjust: 100%; // 2
+  //  -webkit-text-size-adjust: 100%; // 3
+  //  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
+  //  cursor: default; // 5
+  //  tab-size: 4; // 6
+  }
+}
+@if $typography {
+  .c {
+    text-align: center;// The <center> does not pass validation, use: <div class="c"></div>
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    padding-left: 0;
+    color: var(--f2);
+    margin-bottom: var(--s1);
+    margin-top: var(--s2);
+    font-weight: var(--fh);
+    font-size: var(--fs);
+    line-height: var(--lhh);
+  }
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.75rem;
+  }
+  h3 {
+    font-size: 1.5rem;
+  }
+  h4 {
+    font-size: 1.25rem;
+  }
+  h5 {
+    font-size: 1.125rem;
+  }
+  header h1 {
+    margin-top: 0;
+  }
+  a {
+    color: var(--a1);
+    text-decoration: none;
+  }
+  a:hover {
+    color: var(--a2);
+    text-decoration: underline;
+  }
+  h1 a, h2 a, main nav a {
+    color: var(--f2);
+    text-decoration: none;
+    &:hover {
+      color: var(--a3);
+      text-decoration: none;
+    }
+  }
+  article {
+    padding-bottom: .2rem;
+  }
+
+  // Abbreviations
+  // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
+  abbr[title] {
+    border-bottom: var(--bw) dotted;
+    text-decoration: none; // 1
+    cursor: help;
+  }
+
+  // Highlighted text
+  mark {
+    background-color: var(--c4);
+    color: var(--c1);
+    vertical-align: baseline;
+    padding: .1rem .4rem;
+  }
+  blockquote {
+    margin-left: 0;
+    padding: .5rem 0 .5rem 1.5rem;
+    border-left: .25rem solid var(--c3);
+  }
+  blockquote > :last-child {
+    margin-bottom: 0;
+  }
+  small {
+    font-size: .875rem;
+  }
+
+  .footnote-definition sup, .footnote-definition p {
+    display: inline;
+  }
+  // Prevent sub and sup elements from affecting the line height in all browsers.
+  sub,
+  sup {
+    font-size: .75em;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -.25em;
+  }
+  sup {
+    top: -.5em;
+  }
+
+  address,
+  blockquote,
+  dl,
+  figure,
+  form,
+  ol,
+  p,
+  pre,
+  table,
+  ul {
+    margin: .7rem 0;
+    color: var(--f1);
+    font-style: normal;
+    font-weight: var(--fw);
+    font-size: var(--fs);
+  }
+
+  // Lists
+  ul,
+  ol {
+    padding-right: 0;
+    padding-left: var(--s2);
+  }
+  li {
+    margin-bottom: var(--s1);
+  }
+
+  ul li {
+    list-style: square;
+  }
+
+  // Ins
+  ins {
+    color: var(--cg);
+    text-decoration: none;
+  }
+
+  // del
+  del {
+    color: var(--cr);
+  }
+}
+@if $sectioning {
+  // https://github.com/picocss/pico
+  // Render the `main` element consistently in IE
+  main {
+    display: flex;
+    // should always have a single div that holds all content below main.
+    // TOC or Recent Posts are the only other sections that would be directly under main.
+    article, div {
+      flex: 1 1 0;
+      min-width: 0;
+    }
+  }
+
+  body {
+    width: 100%;
+    margin: 0;
+  }
+
+  header,
+  main,
+  footer {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+
+    // Semantic container
+    @if $enable-semantic-container {
+      padding: var(--s1);
+
+      // Centered viewport max-width only
+      @if $enable-maxwidth {
+        @media (min-width: $mb) {
+            min-width: $mb;
+            max-width: $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");
+            //padding-right: 0;
+            //padding-left: 0;
+            .toc {
+              display: none;
+            }
+          }
+        }
+        @if map-get($breakpoints, "md") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "md")) {
+            max-width: map-get($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($breakpoints, "xl") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "xl")) {
+            max-width: map-get($viewports, "xl");
+          }
+        }
+      }
+    }
+    // Semantic container
+    @else {
+      padding: var(--s1) 0;
+    }
+  }
+  header, main {
+    padding-top: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+    hr {
+      margin:0.1rem 0;
+    }
+  }
+  footer{
+    line-height: var(--lhh);
+    hr, p {
+      margin: 0.1rem 0 .3rem;
+    }
+  }
+}
+@if $nav {
+  //https://github.com/raj457036/attriCSS
+  main nav a,
+  main nav a:visited {//pagination link styling
+    font-weight: var(--fh);
+    border: .1rem solid var(--c4);
+    border-radius: var(--br);
+    padding: .1rem var(--s1);
+  }
+  main nav a:hover {//makes border of pagination links hover color
+    border-color: var(--a3);
+    .svgh {
+      background: var(--a3);
+      opacity: 1;
+    }
+  }
+  header > nav > div:first-of-type {//Keep the logo from wrapping
+    display: inline;
+    min-width: fit-content;
+    padding-right: var(--s1);//add some spacing between nav divs
+  }
+  header > nav > div:nth-child(2) {//puts logo on left and menu/search on right
+    margin-left: auto;
+    padding-right: var(--s1);//add some spacing between nav divs
+  }
+  nav > div {
+    ul, h2 {
+      line-height: 1.9;
+      margin: 0;
+      padding: 0;
+    }
+    margin: var(--s1) 0;
+  }
+  nav {
+    align-items: center;
+    justify-content: center;//center pagination horizontally
+    display: flex;
+    div h2 {
+      font-size: 1rem;
+      &:hover {
+        color: var(--a3);
+      }
+    }
+    h1 {
+      margin-bottom: 0;
+      margin-top: 0.2rem;
+    }
+    li {
+      display: inline-block;
+      margin: 0 .3rem;
+    }
+  }
+  main nav {
+    ul {
+      display: flex;
+      padding-left: 0;
+    }
+    margin-top: var(--s2);//pagination margin
+    li {
+      margin: .2rem;
+    }
+    li.inp {
+      padding-top: .1rem;
+    }
+  }
+  .outp {
+    padding: 0 .26rem .2rem;
+  }
+  .off {
+    color: var(--c4);
+    font-weight: var(--fh);
+    border: .1rem solid var(--c3);
+    border-radius: var(--br);
+    .svgh {
+      background: var(--c3);
+      opacity: 1;
+    }
+  }
+  .on {
+    font-weight: var(--fh);
+    border: .1rem solid var(--c4);
+    border-radius: var(--br);
+  }
+  .mode:hover, .cnav {
+    color: var(--a1);//pagination color current page
+  }
+  footer nav {
+    ul {
+      margin: 0;
+      padding: 0;
+    }
+    li {
+      margin: 0 .2rem .4rem;
+    }
+  }
+  //dropdown menu used for lang, etc.
+  .dropdown {
+    display: inline-block;
+    position: relative;
+    vertical-align: -3px;
+    font-weight: var(--fh);
+    font-size: 1.3rem;
+  }
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    z-index: 9;
+    font-weight: var(--fh);
+    font-size: 1.3rem;
+  }
+  .dropdown:hover .dropdown-content {
+    display: block;
+    a {
+      text-decoration: none;
+    }
+  }
+  // breakpoint makes header responsive for mobile layouts
+  @if map-get($breakpoints, "md") {
+    @media (max-width: map-get($breakpoints, "md")) {
+      header nav {
+        display: flex;
+        flex-direction: column;
+        h1 {
+          margin: var(--s2) 0 var(--s1);
+        }
+        div {
+          margin: auto; // keeps top menu/search centered in mobile view
+        }
+      }
+    }
+  }
+}
+@if $embedded {
+  .yvi {//youtube and vimeo iframe
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .yv {//youtube and vimeo div
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+  }
+  img,
+  video,
+  svg {
+    max-width: 100%;
+    height: auto;
+  }
+  embed,
+  iframe,
+  object {
+    max-width: 100%;
+  }
+  iframe {
+    border-style: none;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    overflow: hidden;
+  }
+}
+@if $table {
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    text-indent: 0; // Remove text indentation from table contents in Chrome, Edge, and Safari.
+    caption {
+      margin-bottom: .5rem;
+    }
+  }
+  tr {
+    border-bottom: var(--bw) solid var(--c3);
+  }
+  td,
+  th {
+    padding: var(--s1);
+  }
+  th {
+    text-align: left;
+  }
+  // Striped
+  tbody tr:nth-child(even) {
+    background-color: var(--c2);
+  }
+  thead tr {
+    border-top: var(--bw) solid var(--c3);
+    background-color: var(--c2);
+  }
+}
+@if $code {
+  pre,
+  code,
+  kbd,
+  samp,
+  tt,
+  var {
+    border-radius: var(--br);
+    background: var(--c2);
+    font-family: var(--fm);
+    line-height: initial;
+    font-size: .8rem;
+    padding: .3rem .2rem;
+  }
+  pre {
+    display: block;
+    overflow-x: auto;
+    -ms-overflow-style: scrollbar;
+    white-space: pre;
+    > code {
+      display: block;
+      background: transparent;
+    }
+  }
+
+  // kbd
+  kbd {
+    background-color: var(--f2);
+    color: var(--c1);
+    vertical-align: baseline;
+    font-size: 1rem;
+    padding: .2rem;
+  }
+}
+@if $hr {
+  // https://github.com/picocss/pico
+  hr {
+    box-sizing: content-box; // Add the correct box sizing in Firefox
+    height: 0;               // Add the correct box sizing in Firefox
+    overflow: visible; // Show the overflow in Edge and IE
+    border: none;
+    border-top: 1px solid var(--f1);
+  }
+  header hr, footer hr {border-top: 1px solid var(--c4)}
+}
+@if $scroller {
+  // https://github.com/picocss/pico
+  // Wrapper to make any content responsive across all viewports
+  figure {
+    display: block;
+    margin: 0;
+    padding: 0;
+    overflow-x: auto;
+
+    figcaption {
+      padding: var(--s1) 0;
+      color: var(--c4);
+    }
+  }
+}
+@if $button {
+  button,
+  input,
+  select,
+  textarea {
+    margin: 0;
+    padding: .2rem var(--s1);
+    max-width: 100%;
+    background: var(--c2);
+    border: 0;
+    border-radius: .25rem;
+    font: inherit;
+    line-height: var(--fs);
+    color: var(--f1);
+  }
+  button.del {
+    color: var(--cr);
+  }
+  button,
+  [type="button" i],
+  [type="submit" i],
+  [type="reset" i] {
+    //-webkit-appearance: button;
+    display: inline-block;
+    text-align: center;
+    white-space: nowrap;
+    //background: var(--c2);
+    color: var(--f1);
+    border: 0;
+    cursor: pointer;
+    transition: opacity .25s;
+  }
+  button:hover,
+  [type="button" i]:hover,
+  [type="submit" i]:hover,
+  [type="reset" i]:hover {
+    opacity: .75;
+  }
+  button[disabled],
+  [type="button" i][disabled],
+  [type="submit" i][disabled],
+  [type="reset" i][disabled] {
+    opacity: .5;
+  }
+}
+@if $form {
+  fieldset {
+    padding: .5rem .75rem;
+    border: var(--bw) solid var(--c3);
+    border-radius: .25rem;
+  }
+  legend {
+    padding: 0 .25rem;
+  }
+  label {
+    cursor: pointer;
+    display: block;
+    margin-bottom: .25rem;
+  }
+  select,
+  input:not([size]):not([type="button" i]):not([type="submit" i]):not([type="reset" i]):not([type="checkbox" i]):not([type="radio" i]) {
+    width: 100%;
+  }
+  [type="color" i] {
+    min-height: 2.125rem;
+  }
+  select:not([multiple]):not([size]) {
+    padding-right: 1.5rem;
+    background-repeat: no-repeat;
+    background-position: right .5rem center;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  textarea {
+    width: 100%;
+    resize: vertical;
+  }
+  textarea:not([rows]) {
+    height: 8rem;
+  }
+}
+@if $top {
+  .topout {
+    position: sticky;
+    bottom: 1px;
+    padding: 20px;
+    place-self: end;
+    margin-top: 110vh;
+    pointer-events: none;
+  }
+  .topleft {
+    margin-left: calc(100% - 80px);
+  }
+  .top {
+    pointer-events: all;
+    padding: 9px;
+    border-radius: 9px;
+    font-weight:700;
+    color: var(--a1);
+    background: var(--c2);
+  }
+  .top:hover {
+    text-decoration: none;
+    color: var(--c2);
+    background: var(--a1);
+    .svgh {
+      background: var(--c2);
+      opacity: 1;
+    }
+  }
+}
+@if $search {
+  div:empty {
+    display: none;
+  }
+  .stork-close-button {
+    display: none;
+  }
+  .stork-title p {
+    color: var(--a1);
+    font-weight: var(--fh);
+  }
+  #suggestions {
+    z-index: 9;
+    background: var(--c1);
+    border: 2px solid var(--c3);
+    position: absolute;
+    right: 0;
+    margin-top: var(--s1);
+    width: 500px;
+    max-height: 500px;
+    overflow: auto;
+  }
+  #suggestions a, #results a {
+    display: block;
+    text-decoration: none;
+    padding: var(--s1);
+    margin: 0 var(--s1);
+  }
+  #suggestions a:hover,
+  #suggestions a:focus,
+  #results a:hover,
+  #results a:focus {
+    background: var(--c2);
+  }
+  #suggestions span, #results span {
+    line-height: 1.5;
+    display: block;
+  }
+  #suggestions span:first-child, #results span:first-child {
+    font-weight: var(--fh);
+  }
+  #suggestions span:nth-child(2), #results span:nth-child(2) {
+    color: var(--f1);
+  }
+  nav > div > form > div:last-of-type {//parent div of suggestions div
+    display: block;
+    position: relative;
+    width: 100%;
+  }
+  .searchd {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+  .searchd > input {
+    max-width: 15.3rem;
+    padding-right:2.4rem;//inlayed search icon
+  }
+  .searchd > button {
+    margin-left: -2.4rem;//inlayed search icon
+  }
+  @if map-get($breakpoints, "md") {
+    @media (max-width: map-get($breakpoints, "md")) {
+      .searchd > input {
+        max-width: 100%;
+        flex-grow: 1;
+      }
+      #suggestions {
+        position: static;
+        left: 0;
+        width: 100%;
+      }
+    }
+  }
 }
+@if $toc {
+  main {
+    .toc {
+      max-width: 15rem;
+      min-width: 14rem;
+      margin-left: var(--s1);
+    }
+    .toc-item {
+      padding: .4rem 0;
+      color: var(--f1);
+    }
+    .toc-item a, .toc-item-child a {
+      color: var(--f1);
+      &:hover {
+        cursor: pointer;
+        color: var(--a2);
+        text-decoration: underline;
+      }
+    }
+    .toc-item a.active, .toc-item-child a.active {
+      color: var(--a2);
+    }
+    .toc-item-child {
+      padding: 0 var(--s1);
+      color: var(--f1);
+    }
+  }
+  .toc-sticky {
+    border-radius: var(--br);
+    border-top: 5px solid var(--a1);
+    background-color: var(--c2);
+    position: sticky;
+    top: var(--s2);
+    margin-top: var(--s2);
+    padding: 0 var(--s2) var(--s2);
+    max-height: 100vh;
+    overflow: auto;
+  }
+  @if map-get($breakpoints, "md") {
+    @media (max-width: map-get($breakpoints, "md")) {
+      .toc {
+        display: none;
+      }
+    }
+  }
+}
+@if $zola {
+  .sum, .sum p {margin: .2rem 0}
+  .s95 {font-size: .95em}
+  .s90 {font-size: .90em}
+  .s85 {font-size: .85em}
+  .s80 {font-size: .80em}
+  .s75 {font-size: .75em}
+  .s70 {font-size: .70em}
+  .hpad {padding: 0 .2rem}
+  .rpad {padding-right: .2rem}
+  .si {font-size: 1.5em}
+  pre code[data-lang]::before {
+    color: var(--f1);
+    text-transform: uppercase;
+    content: ' [' attr(data-lang) '] ' "\a\a";
+  }
+  // code copy wrapper
+  .ccw {
+    position: relative;
+  }
+  .ccw:hover {
+    .cc {
+      opacity: 1;
+    }
+  }
+  // code copy button
+  .cc {
+    opacity: 0;
+    z-index: 9;
+    position: absolute;
+    right: 9px;
+    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 {
+      font-size: .8rem;
+      margin: 0;
+      // Highlighted text
+      mark {
+        display: block;
+        background-color: var(--c2);
+        color: unset;
+        padding: 0;
+      }
+    }
+    td, th, tr {
+      padding: 0;
+      border-bottom: none;
+    }
+    tbody td:first-child {
+      text-align: center;
+      user-select: none;
+      min-width: 60px;
+    }
+    tbody tr:nth-child(even), thead tr {
+      background-color: unset;
+    }
+  }
+}
+@if $misc {
+  // https://github.com/picocss/pico
+  // Add the correct display in IE 10+
+  [hidden],
+  template {
+    display: none;
+  }
 
-:root:not(.light) {
-  @include includes.colors-dark;
-  @if includes.$var-syntax {
-    @include includes.syntax-dark;
+  // Add the correct display in IE 9-
+  canvas {
+    display: inline-block;
+  }
+}
+@if $grid {
+  // https://github.com/vladocar/Basic.css
+  [style*="--c:"], section>section {
+    color: var(--f2);
+    padding: var(--s1);
+    margin: var(--s1);
+    text-align: center;
+  }
+  section {
+    display: flex;
+    flex-flow: row wrap;
+  }
+  [style*="--c:"], section>section {
+    flex:var(--c,1);
+    margin:var(--s1);
   }
 }
-:root.light {
-  @include includes.colors-light;
-  @if includes.$var-syntax {
-    @include includes.syntax-light;
+@if $syntax {
+  // Unstyled Text Color, and background color
+  .z-code {
+    color: var(--f1);//#ccc
+    background-color: var(--bg);
+  }
+  // This is a comment
+  .z-comment {//, .z-punctuation.z-definition.z-comment
+    color: var(--c4);//#888
+    font-style: italic;
+  }
+  // a  (int a;)
+  .z-variable {
+    color: var(--f1);
+  }
+  // "This is a string"
+  .z-string {//, .z-constant.z-other.z-symbol
+    color: var(--h4);
+  }
+  // 10  (a = 10;)
+  .z-constant.z-numeric {
+    color: var(--h2);
+  }
+  // /n
+  .z-constant.z-character.z-escape {//, .z-string.z-regexp
+    color: var(--h5);
+  }
+  // false, true, etc...
+  .z-constant.z-language {
+    color: var(--h2);
+  }
+  // BUF  (const BUF: usize = 10 * 1024;)
+  .z-constant.z-other {//, .z-constant.z-character
+    color: var(--h2);
+  }
+  // Figure out how to reproduce in code block otherwise don't include
+  //.z-variable.z-member {
+  //    color: var(--h1);
+  //}
+  // use, crate, let, etc.
+  .z-keyword {//, .z-keyword.z-operator.z-word
+    color: var(--h6);
+  }
+  // = * - + /
+  .z-keyword.z-operator {
+    color: var(--h7);
+  }
+  // separators: commas, colons, etc.  terminator:  endline semicolon, etc.
+  .z-punctuation.z-separator, .z-punctuation.z-terminator {
+    color: var(--f1);
+  }
+  // () [] {}
+  .z-punctuation.z-section {
+    color: var(--f1);
+  }
+  //  .  ::
+  .z-punctuation.z-accessor {
+    color: var(--h2);
+  }
+  //  #  (#[cfg(test)])
+  .z-punctuation.z-definition.z-annotation {
+    color: var(--f1);
+  }
+  // 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);
+  //}
+  // const, pub, mut, Self, fn
+  .z-storage {
+    color: var(--h6);
+  }
+  // const, struct
+  .z-storage.z-type {
+    color: var(--h6);
+  }
+  // new, function names
+  .z-entity.z-name.z-function {
+    color: var(--h3);
+  }
+  // key in toml entries
+  .z-entity.z-name {//, .z-entity.z-name.z-label
+    color: var(--h3);
+  }
+  // Figure out how to reproduce in code block otherwise don't include
+  //.z-entity.z-other.z-inherited-class {
+  //    color: var(--h6);
+  //    text-decoration: underline;
+  //}
+  //  v1   (fn lookup(v1))
+  .z-variable.z-parameter {
+    color: var(--h2);
+  }
+  //  self  (self.html.push(c))
+  .z-variable.z-language {
+    color: var(--h3);
+    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);
+  }
+  // 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);
+  }
+  // html attribute name, eg: lang, charset
+  .z-entity.z-other.z-attribute-name {
+    color: var(--h3);
+  }
+  // function name as variable value, and annotation:  derive  (#[derive(Debug)])
+  .z-variable.z-function, .z-variable.z-annotation {
+    color: var(--h3);
+  }
+  // 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);
+  }
+  // Figure out how to reproduce in code block otherwise don't include
+  //.z-support.z-constant {
+  //    color: var(--h2);
+  //    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);
+    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);
+  //}
+  // 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);
+  //}
+  // property name, eg css: font-size, text-align, etc.
+  .z-support.z-type.z-property-name {
+    color: var(--h6);
+  }
+  //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);
+    }
   }
+  // Figure out how to reproduce in code block otherwise don't include
+  //.z-constant.z-numeric.z-line-number.z-match {
+  //    color: var(--h6);
+  //}
+  // 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);
+  //}
+  // Figure out how to reproduce in code block otherwise don't include
+  //.z-message.z-error {
+  //    color: var(--h1);
+  //}
+  // 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);
+  //    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);
+  //}
+  // Figure out how to reproduce in code block otherwise don't include
+  //.z-meta.z-separator {
+  //    color: var(--f1);
+  //    background-color: var(--f1);
+  //    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);
+  //}
+  // 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);
+  //}
+  // 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);
+  //}
+  // 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);
+  //}
+  // 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);
+  //}
+  // Figure out how to reproduce in code block otherwise don't include
+  //.z-variable.z-language.z-fenced.z-markdown {
+  //    color: var(--f1);
+  //}
 }
-- 
cgit v1.3.1