added tuicss

web/content/pages/bio.md

@@ -1,6 +1,6 @@
 Title: Curriculum Vitae
 Date: 2025-12-20 10:06
-Slug: cv
+Slug: bio
 
 * 2020 - now  product manager, developer, and consultant at Randonauts LLC
 * 2003 - 2020 freelance media artist and live video performer (VJ)

web/mc-pelican/static/local.css

@@ -27,7 +27,7 @@ h1, h2, h3, h4, h5 {
 
 body {
   font-family: 'Classic Console Neue';
-  padding: 1em;
+  padding-top: 2em;
   font-size: 1.4em;
   line-height: 1.2em;
   text-align: left;
@@ -51,6 +51,10 @@ ul li::before {
   content: '*\00a0'; 
 }
 
+ul li a {
+  display: inline;
+}
+
 /* Use a thin border around all images. */
 img 
 {
@@ -60,39 +64,28 @@ img
 }
 
 /* Navigation bar. */
-nav 
-{
-  padding-bottom: 1ex;
-  margin-bottom: 4em;
-}
-
-nav::after {
-  clear:left;
-}
-
-nav ul 
-{
-  padding: 0;
-  margin-left: 0;
-  list-style: none;
-}
-
-nav ul li 
-{
-  display: inline;
-  float: left;
-  margin-right: .4em; /* How far between items. */
-  margin-top: .3em;
-}
-
 nav li::before {
   content: none;
 }
 
-nav ul li a 
-{
-  display: inline;
-  margin: 0;
+#menu {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+#menu {
+  color: #000;
+}
+
+#menu a {
+  background-color: transparent;
+  color: #000;
+  padding: 0;
+}
+
+#menu ul li:not(:first-child) a::first-letter {
+  color: rgb(168, 0, 0);
 }
 
 /*
@@ -114,8 +107,8 @@ th, td
 }
 
 a {
-  background-color: #bbb;
-  color:#000;
+  background-color: #0aa;
+  /* color:#000; */
   padding: 0.2em 0.3em 0em 0.3em;
 }
 
@@ -193,6 +186,12 @@ abbr {
   }
 }
 
+#content-window {
+  background-color: #00f;
+  display: block;
+  margin-top:.7em;
+}
+
 #root {
   display: block;
   margin-top: 2em;
@@ -262,3 +261,8 @@ em, strong {
       background-image: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.33) 25%, rgba(0,0,0,0.33) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.33) 75%, rgba(0,0,0,0.33) 100%);
       background-size: 4px 4px;
 }
+
+.tui-fieldset legend {
+  margin-left: 50px;
+  padding: 0 5px 0 5px;
+}

web/mc-pelican/static/script.js

@@ -1,15 +1,11 @@
 function pickColors() {
-  const backgrounds = [
+  const highlights = [
     "#000000", // Black
     "#0000AA", // Blue
-  ];
-
-  const highlights = [
     "#00AA00", // Green
     "#00AAAA", // Cyan
     "#AA00AA", // Magenta
     "#AA5500", // Brown
-    "#AAAA00", // Yellow
     "#AA0000", // Red
     "#555555", // Dark Gray
     "#5555FF", // Bright Blue
@@ -26,10 +22,15 @@ function pickColors() {
   };
 }
 
-const { background, highlight } = pickColors();
+const { background } = pickColors();
 
 document.querySelector('.home').style.backgroundColor = background;
-document.querySelector('#blog-title').firstElementChild.style.backgroundColor = highlight;
+
+const blogTitle = document.querySelector('#blog-title').firstElementChild;
+blogTitle.style.color = "#FFFF55"; // Bright Yellow
+// setInterval(() => {
+//   blogTitle.style.color = pickColors().highlight;
+// }, 120);
 
 let scrollHeight = Math.max(
     document.body.scrollHeight, document.documentElement.scrollHeight,

web/mc-pelican/static/tuicss/tuicss.js

@@ -0,0 +1,256 @@
+/**
+ * Replacement for jQuery's $(document).ready() function.
+ * This is handy in making sure stuff fires after the DOM is ready to be touched.
+ * Stolen from:https://stackoverflow.com/a/53601942/344028
+ *
+ * @param fn Callback.
+ */
+function domReady(fn) {
+    // If we're early to the party
+    document.addEventListener('DOMContentLoaded', fn);
+
+    // If late; I mean on time.
+    if (document.readyState === 'interactive' || document.readyState === 'complete') {
+        fn();
+    }
+}
+
+/**
+ * TuiTabs controller
+ */
+function tabsController() {
+    // Get all the tab elements (typically li tags).
+    const tabs = document.getElementsByClassName('tui-tab');
+
+    if (!tabs.length) {
+        // No tabs found, return early and save a couple CPU cycles.
+        return;
+    }
+
+    for (const tab of tabs) {
+        // Add click listeners to them.
+        tab.addEventListener('click', function (e) {
+
+            // Check if the clicked tab is disabled
+            if(e.target.classList.contains("disabled")) {
+                return;
+            }
+
+            // Remove the 'active' class from any and all tabs.
+            for (const otherTab of tabs) {
+                otherTab.classList.remove('active');
+            }
+
+            // Get the content element.
+            const tabContents = document.getElementsByClassName('tui-tab-content');
+
+            if (tabContents) {
+                for (const tabContent of tabContents) {
+                    // Hide all tab contents.
+                    tabContent.style.display = 'none';
+                }
+            } else {
+                throw 'No tab content elements found.'
+            }
+
+            // Get the id of the tab contents we want to show.
+            const tabContentId = e.target.getAttribute('data-tab-content');
+
+            if (tabContentId) {
+                const tabContent = document.getElementById(tabContentId);
+                if (tabContent) {
+                    // Show the tab contents.
+                    tabContent.style.display = 'block';
+                } else {
+                    throw 'No tab content element with id "' + tabContentId + '" found.';
+                }
+            }
+            // We are not going to throw an error here, since we could make the tab do something else that a tab
+            // normally wouldn't do.
+
+            // Set the clicked tab to have the 'active' class so we can use it in the next part.
+            e.target.classList.add('active');
+
+        });
+    }
+
+    // Grab the first tab with the active class.
+    const activeTab = document.querySelector('.tui-tab.active');
+    if (activeTab) {
+        // Now click it 'click' it.
+        activeTab.click();
+    } else {
+        // Nothing found, just click the first tab foud.
+        tabs[0].click()
+    }
+}
+
+/**
+ * Date/time field controller
+ */
+function datetimeController() {
+    // Get date/time elements.
+    const clocks = document.getElementsByClassName('tui-datetime');
+
+    if (!clocks.length) {
+        // No date time elements found, return early and save a couple CPU cycles.
+        return;
+    }
+
+    // Kick off our clock interval stuff.
+    datetimeInterval();
+
+    // Synchronize time and set interval to control the clocks
+    setTimeout(() => {
+        setInterval(datetimeInterval, 1000);
+    }, 1000 - new Date().getMilliseconds());
+
+    function datetimeInterval() {
+        for (const clock of clocks) {
+            if (clock === null) {
+                continue;
+            }
+
+            // Get the format we want to display in the element.
+            let format = clock.getAttribute('data-format');
+
+            // parse out the date and time into constants.
+            const today     = new Date();
+            const month     = (today.getMonth() + 1).toString().padStart(2, '0');
+            const day       = today.getDate().toString().padStart(2, '0');
+            const dayOfWeek = (today.getDay() + 1).toString().padStart(2, '0');
+            const year      = today.getFullYear().toString();
+            const hour      = today.getHours().toString().padStart(2, '0');
+            const hour12    = (parseInt(hour) + 24) % '12' || '12';
+            const minute    = today.getMinutes().toString().padStart(2, '0');
+            const second    = today.getSeconds().toString().padStart(2, '0');
+            const ampm      = parseInt(hour) >= 12 ? 'PM' : 'AM';
+
+            // Replace based on the format.
+            format = format.replace('M', month);
+            format = format.replace('d', day);
+            format = format.replace('e', dayOfWeek);
+            format = format.replace('y', year);
+            format = format.replace('H', hour);
+            format = format.replace('h', hour12);
+            format = format.replace('m', minute);
+            format = format.replace('s', second);
+            format = format.replace('a', ampm);
+
+            // Show it in the element.
+            clock.innerHTML = format;
+        }
+    }
+}
+
+/**
+ * Sidenav Controller
+ * There should only side navigation element at the moment.
+ */
+function sidenavController() {
+    // Get the side navigation button (there should be only one, but if not, we are getting the first one).
+    const sideNavButton = document.querySelector('.tui-sidenav-button');
+
+    if (!sideNavButton) {
+        // No side navigation button found, return early and save a couple CPU cycles.
+        return;
+    }
+
+    // Add the click event listener to the buttons.
+    sideNavButton.addEventListener('click', () => {
+        // Get the side navigation element (there should be only one, but if not, we are getting the first one).
+        const sideNav = document.querySelector('.tui-sidenav');
+
+        if (sideNav) {
+            if (sideNav.classList.contains('active')) {
+                sideNav.classList.remove('active');
+            } else {
+                sideNav.classList.add('active');
+            }
+        } else {
+            throw 'No sidenav element found.'
+        }
+    });
+}
+
+/**
+ * Modal controller
+ */
+function modalController() {
+    // Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one).
+    const tuiOverlap = document.querySelector('.tui-overlap');
+
+    if (!tuiOverlap) {
+        // No overlap found element, return early and save a couple CPU cycles.
+        return;
+    }
+
+    // Find modal buttons.
+    const modalButtons = document.getElementsByClassName('tui-modal-button');
+    for (const modalButton of modalButtons) {
+        // Add the click event listener to the buttons.
+        modalButton.addEventListener('click', (e) => {
+            // Show the overlap.
+            tuiOverlap.classList.add('active');
+
+            // Get the display element for the modal.
+            const modalId = e.target.getAttribute('data-modal');
+
+            if (modalId) {
+                const modal = document.getElementById(modalId);
+
+                if (modal) {
+                    // Show it.
+                    modal.classList.add('active');
+                } else {
+                    throw 'No modal element with id of "' + modalId + '" found.';
+                }
+            } else {
+                throw 'Modal close button data-modal attribute is empty or not set.'
+            }
+        });
+    }
+
+    // Find the close modal buttons.
+    const modalCloseButtons = document.getElementsByClassName('tui-modal-close-button');
+
+    if (modalButtons.length > 0 && !modalCloseButtons.length) {
+        // A modal without a close button, is a bad modal.
+        throw 'No modal close buttons found.'
+    }
+
+    for (const modalCloseButton of modalCloseButtons) {
+        // Add the click event listener to the buttons.
+        modalCloseButton.addEventListener('click', (e) => {
+            // Hide the the overlap.
+            tuiOverlap.classList.remove('active');
+
+            // Get the display element id for the modal.
+            const modalId = e.target.getAttribute('data-modal');
+
+            if (modalId) {
+                // Get the modal element.
+                const modal = document.getElementById(modalId);
+
+                if (modal) {
+                    // Hide it.
+                    modal.classList.remove('active');
+                } else {
+                    throw 'No modal element with id of "' + modalId + '" found.';
+                }
+            } else {
+                throw 'Modal close button data-modal attribute is empty or not set.'
+            }
+        });
+    }
+}
+
+/**
+ * Init: This is at the bottom to make sure it is fired correctly.
+ */
+domReady(function () {
+    tabsController();
+    datetimeController();
+    sidenavController();
+    modalController();
+});

web/mc-pelican/static/tuicss/tuicss.min.js

@@ -0,0 +1 @@
+function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){if(e.target.classList.contains("disabled"))return;for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){if(null===e)continue;let t=e.getAttribute("data-format");const o=new Date,n=(o.getMonth()+1).toString().padStart(2,"0"),a=o.getDate().toString().padStart(2,"0"),c=(o.getDay()+1).toString().padStart(2,"0"),s=o.getFullYear().toString(),i=o.getHours().toString().padStart(2,"0"),l=(parseInt(i)+24)%"12"||"12",r=o.getMinutes().toString().padStart(2,"0"),d=o.getSeconds().toString().padStart(2,"0"),u=parseInt(i)>=12?"PM":"AM";t=(t=(t=(t=(t=(t=(t=(t=(t=t.replace("M",n)).replace("d",a)).replace("e",c)).replace("y",s)).replace("H",i)).replace("h",l)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=t}}t.length&&(e(),setTimeout(()=>{setInterval(e,1e3)},1e3-(new Date).getMilliseconds()))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()});

web/mc-pelican/templates/article.html

@@ -28,6 +28,7 @@
   'hardware': 'nf-cod-circuit_board'
 } %}
 
+{% block legend %}{{ article.title|upper }}{% endblock %}
 {% block content %}
 <section id="content" class="body">
   <header>

web/mc-pelican/templates/base.html

@@ -29,6 +29,7 @@
         {% if TAG_FEED_RSS and tag %}
         <link href="{{ FEED_DOMAIN }}/{{ TAG_FEED_RSS|format(tag.slug) }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
         {% endif %}
+        <link href="{{ SITEURL }}/theme/tuicss/tuicss.min.css" rel="stylesheet">
         <link href="{{ SITEURL }}/theme/local.css" rel="stylesheet">
         <link href="{{ SITEURL }}/theme/pygments.css" rel="stylesheet">
         <link href="{{ SITEURL }}/theme/symbols.css" rel="stylesheet">
@@ -37,17 +38,13 @@
 </head>
 
 <body id="index" class="home">
-        <nav id="menu"><ul>
+        <nav id="menu" class="tui-nav">
+            <span class="tui-datetime" data-format="h:m:s a"></span>
+            <ul>
                 <li id="blog-title"><a href="{{ SITEURL }}/">{{ SITENAME }}</a></li>
                 {% for title, link in MENUITEMS %}
                 <li><a href="{{ link }}">{{ title }}</a></li>
                 {% endfor %}
-            {% if FEED_ALL_RSS %}
-            <li><a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}">RSS</a></li>
-            {% endif %}            
-            {% if FEED_ALL_ATOM %}
-            <li><a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}">Atom</a></li>
-            {% endif %}            
                 {% if DISPLAY_PAGES_ON_MENU %}
                   {% for p in PAGES %}
                     <li{% if p == page %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li>
@@ -59,10 +56,24 @@
                     {% endfor %}
                   {% endif %}
                 {% endif %}
-        </ul></nav><!-- /#menu -->
+                {% if FEED_ALL_RSS %}
+                <li><a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}">RSS</a></li>
+                {% endif %}
+                {% if FEED_ALL_ATOM %}
+                <li><a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}">Atom</a></li>
+                {% endif %}
+            </ul>
+        </nav><!-- /#menu -->
         
+        <div class="tui-window full-width tui-no-shadow" id="content-window">
+            <fieldset class="tui-fieldset">
+                <legend class="center">{% block legend %}{{ SITENAME }}{% endblock %}</legend>
+                <span class="tui-fieldset-button"><span class="green-255-text">↕</span></span>
+                <span class="tui-fieldset-button left"><span class="green-255-text">■</span></span>
                 {% block content %}
                 {% endblock %}
+            </fieldset>
+        </div>
 
         {% if DESCRIPTION %}
         <footer id="contentinfo" class="body">
@@ -71,6 +82,7 @@
         </footer><!-- /#contentinfo -->
         {% endif %}
         <span id="root">&nbsp;</span>
+        <script src="{{ SITEURL }}/theme/tuicss/tuicss.min.js"></script>
         {% if JS_OVERRIDE %}
           <!-- Script specified by the user -->
           {% for js in JS_OVERRIDE %}

web/mc-pelican/templates/page.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% block title %}{{ page.title }}{%endblock%}
+{% block legend %}{{ page.title|upper }}{% endblock %}
 {% block content %}
     <h1>{{ page.title }}</h1>
     {% import 'translations.html' as translations with context %}

web/pelicanconf.py

@@ -6,7 +6,7 @@ class NoProcessing(bp.BlockProcessor):
 bp.SetextHeaderProcessor = NoProcessing
 
 AUTHOR = 'Tobias'
-SITENAME = 'Tobias Raayoni Last'
+SITENAME = 'MOMENTUM FLUX'
 
 THEME = 'mc-pelican'
 PLUGIN_PATHS = ['pelican-plugins']
@@ -45,7 +45,7 @@ PATH = 'content'
 ARTICLE_PATHS = ['blog',]
 PAGE_PATHS = ['pages',]
 
-MENUITEMS = [('Projects', '/projects/'), ('Articles', '/blog/'), ('Connect', '/connect.html'), ('CV', '/pages/cv.html')]
+MENUITEMS = [('Projects', '/projects/'), ('Articles', '/blog/'), ('Connect', '/connect.html'), ('Bio', '/pages/bio.html')]
 SUMMARY_MAX_LENGTH = 0
 DEFAULT_DATE_FORMAT = '%Y-%m-%d'