Refactor header structure and add dynamic navigation for improved usability

Author: devnomadic

_includes/head-custom.html

@@ -65,3 +65,34 @@
   }
 }
 </style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Find the site header
+    var siteHeader = document.querySelector('.site-header .wrapper');
+    if (siteHeader) {
+        // Create navigation HTML
+        var navHTML = '<div style="clear: both; border-top: 1px solid rgba(255, 167, 196, 0.3); margin-top: 0.5em; padding-top: 0.75em;">' +
+            '<a href="/about/" style="display: inline-block; margin-right: 2em; color: #ffa7c4; text-decoration: none; font-size: 1em;">About</a>' +
+            '<a href="/archive/" style="display: inline-block; margin-right: 2em; color: #ffa7c4; text-decoration: none; font-size: 1em;">Archive</a>' +
+            '<a href="/tags/" style="display: inline-block; margin-right: 2em; color: #ffa7c4; text-decoration: none; font-size: 1em;">Tags</a>' +
+            '</div>';
+        
+        // Add navigation to the header
+        siteHeader.insertAdjacentHTML('beforeend', navHTML);
+        
+        // Add hover effects
+        var navLinks = siteHeader.querySelectorAll('a[href^="/about"], a[href^="/archive"], a[href^="/tags"]');
+        navLinks.forEach(function(link) {
+            link.addEventListener('mouseenter', function() {
+                this.style.color = '#ffffff';
+                this.style.textDecoration = 'underline';
+            });
+            link.addEventListener('mouseleave', function() {
+                this.style.color = '#ffa7c4';
+                this.style.textDecoration = 'none';
+            });
+        });
+    }
+});
+</script>