Really nice optimizations.

 Changes to be committed:
        modified:   config.toml
        modified:   sass/_predefined.scss
        modified:   sass/style.scss
        modified:   static/js/main.js
        renamed:    static/auto-render.min.js -> static/katex/auto-render.min.js
        renamed:    static/katex.min.css -> static/katex/katex.min.css
        renamed:    static/katex.min.js -> static/katex/katex.min.js
        modified:   templates/index.html
        modified:   templates/page.html

9 files changed, 77 insertions, 142 deletions

diff --git a/config.toml b/config.toml
index 968ca17..bb4b773 100644
--- a/config.toml
+++ b/config.toml
@@ -52,6 +52,7 @@ taxonomies = [
 highlight_code = true
 #highlight_theme = "base16-ocean-dark"
 highlight_theme = "material-dark"
+# try more syntax highlighting themes
 
 # Use emojis like :smile: and :shrug:
 render_emoji = true
diff --git a/sass/_predefined.scss b/sass/_predefined.scss
index 105172d..977e7f7 100644
--- a/sass/_predefined.scss
+++ b/sass/_predefined.scss
@@ -1,25 +1,8 @@
 // Colors
 //
 
-//bkup hermit colors
-//$theme: #018574; // links // green
-//$text: #c6cddb; // general text // white grey
-//$light-grey: #494f5c; // bg // all below are grey darkish
-//$dark-grey: #3b3e48;
-//$highlight-grey: #7d828a;
-//$midnightblue: #2b303b; //#31333d; // to fix code syntax highlighting
-
-// Alphara banner pic colors
-
-//$theme: #8dabd0; // links // green
-//$text: #8dabd0; // fg // general text // white
-//$light-grey: #4e6695; // bg // blue
-//$dark-grey: #4e6695;
-//$highlight-grey: #4e6695;
-//$midnightblue: #2b303b; // to fix code syntax highlighting
-
 // My X11 colors
-
+//
 $theme: #e94c80;
 $text: #ace6f0; // fg // general text // white
 $light-grey: #0a001f; // bg // blue
diff --git a/sass/style.scss b/sass/style.scss
index 8ffaa86..0ac9a88 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -47,7 +47,6 @@ pre {
   letter-spacing: normal;
   white-space: pre-wrap;
   word-wrap: break-word;
-  color: #eee;
   border-radius: 4px;
   -webkit-overflow-scrolling: touch; // For iOS improved scrolling
 
@@ -55,11 +54,12 @@ pre {
     padding: 0;
     margin: 0;
     background: $midnightblue;
+    color: $text;
   }
 }
 
 code {
-  color: #eee;
+  color: $dark-grey;
   background: $highlight-grey;
   border-radius: 3px;
   padding: 0 3px;
@@ -93,7 +93,6 @@ a {
   transition-timing-function: ease-out;
 
   &:hover {
-    //color: #fff;
     color: $theme;
   }
 
@@ -246,7 +245,7 @@ table {
   cursor: pointer;
 
   &:hover {
-    color: #fff;
+    color: $theme;
   }
 
 }
diff --git a/static/js/main.js b/static/js/main.js
index 18316e0..b4bcc4f 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,75 +1,22 @@
 /*
- * Utils
+ * Minimal JS for Mobile Menu and Table of Contents Toggle
  */
 
-// Throttle Helper
-const throttle = (callback, limit) => {
-    let timeoutHandler = null;
-    return () => {
-        if (timeoutHandler === null) {
-            timeoutHandler = setTimeout(() => {
-                callback();
-                timeoutHandler = null;
-            }, limit);
-        }
-    };
-};
-
-// addEventListener Helper
-const listen = (selector, eventType, callback) => {
-    const element = document.querySelector(selector);
-    if (element) {
-        element.addEventListener(eventType, callback);
-    }
-};
-
-// Auto Hide Header
-const header = document.getElementById('site-header');
-let lastScrollPosition = window.scrollY;
-
-const autoHideHeader = () => {
-    const currentScrollPosition = window.scrollY;
-
-    header.classList.toggle('slideInUp', currentScrollPosition <= lastScrollPosition);
-    header.classList.toggle('slideOutDown', currentScrollPosition > lastScrollPosition);
-
-    lastScrollPosition = currentScrollPosition;
-};
-
-// Mobile Menu Toggle
-let mobileMenuVisible = false;
-const mobileMenu = document.getElementById('mobile-menu');
-
-const toggleMobileMenu = () => {
-    const animationName = mobileMenuVisible ? 'bounceOutRight' : 'bounceInRight';
-    mobileMenu.style.animationName = animationName;
-    mobileMenu.style.display = mobileMenuVisible ? 'none' : 'block';
-    mobileMenuVisible = !mobileMenuVisible;
-};
-
-// Featured Image Toggle
-const toggleImg = () => {
-    document.querySelector('.bg-img').classList.toggle('show-bg-img');
-};
-
 // Table of Contents Toggle
 const toggleToc = () => {
     document.getElementById('toc').classList.toggle('show-toc');
 };
 
-// Event Listeners
-const setupEventListeners = () => {
-    if (header) {
-        const throttledAutoHideHeader = throttle(autoHideHeader, 250);
-
-        listen('#menu-btn', 'click', toggleMobileMenu);
-        listen('#toc-btn', 'click', toggleToc);
-        listen('#img-btn', 'click', toggleImg);
-        listen('.bg-img', 'click', toggleImg);
-
-        window.addEventListener('scroll', throttledAutoHideHeader);
+// Mobile Menu Toggle
+let mobileMenuVisible = false;
+const toggleMobileMenu = () => {
+    const mobileMenu = document.getElementById('mobile-menu');
+    if (mobileMenu) {
+        mobileMenu.style.display = mobileMenuVisible ? 'none' : 'block';
+        mobileMenuVisible = !mobileMenuVisible;
     }
 };
 
-// Execute setup function when DOM is fully loaded
-document.addEventListener('DOMContentLoaded', setupEventListeners);
+// Event Listeners
+document.querySelector('#toc-btn')?.addEventListener('click', toggleToc);
+document.querySelector('#menu-btn')?.addEventListener('click', toggleMobileMenu);
diff --git a/static/auto-render.min.js b/static/katex/auto-render.min.js
index 46d62af..46d62af 100644
--- a/static/auto-render.min.js
+++ b/static/katex/auto-render.min.js
diff --git a/static/katex.min.css b/static/katex/katex.min.css
index 975b828..975b828 100644
--- a/static/katex.min.css
+++ b/static/katex/katex.min.css
diff --git a/static/katex.min.js b/static/katex/katex.min.js
index b69360c..b69360c 100644
--- a/static/katex.min.js
+++ b/static/katex/katex.min.js
diff --git a/templates/index.html b/templates/index.html
index 746f8ab..a14a2d0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,72 +4,81 @@
 
 <html lang="{{ config.default_language }}">
 
-  <meta charset="UTF-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+  <head>
 
-  <!-- Instructions for web crawlers -->
-  <meta name="robots" content="index, follow">
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
 
+    <!-- Instructions for web crawlers -->
+    <meta name="robots" content="index, follow">
 
 
-  <!--- Below are the meta tags that are important for SEO \\ they are also important for social media sharing embeds --->
-  <meta name="description" content="{{ config.description }}">
-  <meta name="keywords" content="{{ config.extra.meta.keywords }}">
-  <meta name="title" content="{{ config.title }}">
-  <meta name="author" content="{{ config.extra.author.name }}">
 
-  <!--- Many websites use Open Graph so it has become standard to include --->
-  <meta property="og:title" content="{{ config.title }}">
-  <meta property="og:site_name" content="{{ config.title }}">
-  <meta property="og:description" content="{{ config.description }}">
-  <meta property="og:image" content="{{ config.extra.meta.preview_image_src }}">
-  <meta property="og:image:alt" content="{{ config.extra.meta.preview_image_alt }}">
+    <!--- Below are the meta tags that are important for SEO \\ they are also important for social media sharing embeds --->
+    <meta name="description" content="{{ config.description }}">
+    <meta name="keywords" content="{{ config.extra.meta.keywords }}">
+    <meta name="title" content="{{ config.title }}">
+    <meta name="author" content="{{ config.extra.author.name }}">
 
-  <meta property="og:url" content="{{ config.base_url }}">
-  <meta property="og:type" content="{{ config.extra.meta.website_type }}">
+    <!--- Many websites use Open Graph so it has become standard to include --->
+    <meta property="og:title" content="{{ config.title }}">
+    <meta property="og:site_name" content="{{ config.title }}">
+    <meta property="og:description" content="{{ config.description }}">
+    <meta property="og:image" content="{{ config.extra.meta.preview_image_src }}">
+    <meta property="og:image:alt" content="{{ config.extra.meta.preview_image_alt }}">
 
-  <!--- Below is for twitter general info --->
-  <meta name="twitter:domain" content="{{ config.base_url }}">
-  <meta name="twitter:description" content="{{ config.description }}">
-  <meta name="twitter:title" content="{{ config.title }}">
+    <meta property="og:url" content="{{ config.base_url }}">
+    <meta property="og:type" content="{{ config.extra.meta.website_type }}">
 
-  <!--- Below is for twitter sharing previews \\ you can test this at https://threadcreator.com/tools/twitter-card-validator --->
-  <meta name="twitter:card" content="{{ config.extra.meta.twitter_card }}">
-  <meta name="twitter:image" content="{{ config.extra.meta.preview_image_src }}">
-  <meta name="twitter:image:src" content="{{ config.extra.meta.preview_image_src }}">
-  <meta name="twitter:image:alt" content="{{ config.extra.meta.preview_image_alt }}">
+    <!--- Below is for twitter general info --->
+    <meta name="twitter:domain" content="{{ config.base_url }}">
+    <meta name="twitter:description" content="{{ config.description }}">
+    <meta name="twitter:title" content="{{ config.title }}">
 
-  <!--- If you have accounts on twitter that are relevant to your site --->
-  <meta name="twitter:site" content="{{ config.extra.meta.twitter_creator }}">
-  <meta name="twitter:creator" content="{{ config.extra.meta.twitter_creator }}">
+    <!--- Below is for twitter sharing previews \\ you can test this at https://threadcreator.com/tools/twitter-card-validator --->
+    <meta name="twitter:card" content="{{ config.extra.meta.twitter_card }}">
+    <meta name="twitter:image" content="{{ config.extra.meta.preview_image_src }}">
+    <meta name="twitter:image:src" content="{{ config.extra.meta.preview_image_src }}">
+    <meta name="twitter:image:alt" content="{{ config.extra.meta.preview_image_alt }}">
 
+    <!--- If you have accounts on twitter that are relevant to your site --->
+    <meta name="twitter:site" content="{{ config.extra.meta.twitter_creator }}">
+    <meta name="twitter:creator" content="{{ config.extra.meta.twitter_creator }}">
 
 
-  <!-- Icons and Stylesheets -->
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ get_url(path="apple-touch-icon.png") }}"/>
-  <link rel="icon" type="image/png" sizes="32x32" href="{{ get_url(path="favicon-32x32.png") }}"/>
-  <link rel="icon" type="image/png" sizes="16x16" href="{{ get_url(path="favicon-16x16.png") }}"/>
 
-  <!-- <link rel="manifest" href="{{ get_url(path="site.webmanifest") }}"> PWA + android manifest -->
-  <link rel="mask-icon" href="{{ get_url(path="safari-pinned-tab.svg") }}" color="#030303">
-  <meta name="msapplication-TileColor" content="#603cba">
-  <!-- <meta name="theme-color" content="#ffffff"> discord fancy ruler line on the left of link preview embeds -->
+    <!-- Icons and Stylesheets -->
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ get_url(path="apple-touch-icon.png") }}"/>
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ get_url(path="favicon-32x32.png") }}"/>
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ get_url(path="favicon-16x16.png") }}"/>
 
-  <link rel="shortcut icon" href="{{ get_url(path="favicon.ico") }}"/>
+    <!-- <link rel="manifest" href="{{ get_url(path="site.webmanifest") }}"> PWA + android manifest -->
+    <link rel="mask-icon" href="{{ get_url(path="safari-pinned-tab.svg") }}" color="#030303">
+    <meta name="msapplication-TileColor" content="#603cba">
+    <!-- <meta name="theme-color" content="#ffffff"> discord fancy ruler line on the left of link preview embeds -->
 
-  <!-- Stylesheets -->
-  <link rel="stylesheet" href="{{ get_url(path="style.css") }}"/>
+    <link rel="shortcut icon" href="{{ get_url(path="favicon.ico") }}"/>
 
-  {% if page.title %}
-  <title>{{ page.title }}</title>
-  {% else %}
-  <title>{{ config.title }}</title>
-  {% endif %}
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="{{ get_url(path="style.css") }}"/>
 
-  {% if config.generate_feeds %}
-  <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path=config.feed_filenames[0], trailing_slash=false) }}">
-  {% endif %}
+    {% if page.extra.math %}
+    <!-- Math rendering with KaTeX -->
+    <link rel="stylesheet" href="{{ get_url(path="katex/katex.min.css") }}">
+    {% endif %}
+
+    {% if page.title %}
+    <title>{{ page.title }}</title>
+    {% else %}
+    <title>{{ config.title }}</title>
+    {% endif %}
+
+    {% if config.generate_feeds %}
+    <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path=config.feed_filenames[0], trailing_slash=false) }}">
+    {% endif %}
+
+  </head>
 
   <body id="page">
 
@@ -121,15 +130,11 @@
     <script defer src="{{ get_url(path="js/main.js") }}"></script>
 
     {% if page.extra.math %}
-    <!-- Math rendering with KaTeX -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
-
     <!-- The loading of KaTeX is deferred to speed up page rendering -->
-    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
+    <script defer src="{{ get_url(path="katex/katex.min.js") }}"></script>
 
     <!-- To automatically render math in text elements, include the auto-render extension -->
-    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
-      onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>
+    <script defer src="{{ get_url(path="katex/auto-render.min.js") }}" onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>
     {% endif %}
 
     {% if config.extra.google_analytics.enable %}
diff --git a/templates/page.html b/templates/page.html
index 176dc7b..df04cf6 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -68,7 +68,7 @@
               <line x1="3" y1="12" x2="3" y2="12"></line>
               <line x1="3" y1="18" x2="3" y2="18"></line>
             </svg>
-            <span> ToC</span>
+            <span>ToC</span>
           </button>
         {% endif %}