progress in prettifying header

templates/partials/header.html

@@ -12,11 +12,13 @@
 
     function toggleMenu(button) {
         if (displayedMenu === button.id.split("-")[0]) { 
+            button.className = button.className.replace("text-blue-500", " text-gray-900");
             hideMenu(button.id.split("-")[0]);
             displayedMenu = "";
         }
         else { 
             showMenu(button.id.split("-")[0]);
+            button.className = button.className.replace("text-gray-900", " text-blue-500");
             displayedMenu = button.id.split("-")[0]
         }
     }
@@ -40,6 +42,7 @@
 
     function showMenu(menuName) {
         var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
+        var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
         var menuElement = document.getElementById(menuId)
         menuElement.className = menuElement.className.replace(" hidden" , "");
         setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
@@ -87,8 +90,8 @@
 
 <header id="header-container">
     <div class="z-10 bg-white fixed w-screen">
-        <div class="relative z-10 shadow">
-        <div class="mx-auto flex justify-between items-center px-6 py-5 sm:px-8 sm:py-4 lg:px-12 lg:justify-start lg:space-x-20">
+        <div class="relative z-50 shadow">
+        <div class="mx-auto flex z-50 shadow justify-between items-center px-6 py-5 sm:px-8 sm:py-6 lg:px-12 lg:justify-start lg:space-x-20">
             <div>
                 <a href="/" class="flex">
                     <img class="w-20 h-auto sm:w-32" src="{{section.extra.logoPath}}" alt="Ourworld Logo" />
@@ -118,14 +121,13 @@
     {% if '<a' in header_label %}
         {% set link_label = header_label | striptags %}
         {% set link_path = header_label | split(pat="%22") | safe%}
-        <a href="{{link_path[1]}}" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+        <a href="{{link_path[1]}}" class="text-md leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
             {{link_label}}
         </a>
     {% else %}
         <div class="relative">
             {% set button_id = header_label ~ "-menu-btn" | slugify %}
-        <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
-        <button type="button" id="{{button_id}}" class="text-gray-500 group inline-flex items-center space-x-2 text-sm leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+        <button type="button" id="{{button_id}}" class="font-medium text-gray-900 group inline-flex items-center space-x-2 text-md leading-6 font-normal hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
             <span>{{ header_label }}</span>
             <!--
             Heroicon name: chevron-down
@@ -152,7 +154,7 @@
     {% set menu_id = header_label ~ "-menu" | slugify %}
 
 <nav>
-    <div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
+    <div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
         <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
             <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:px-8 sm:py-6 lg:px-12 lg:py-8 xl:py-12">
             {{header_menu | safe }}

templates/shortcodes/menu.html

@@ -0,0 +1,45 @@
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+{% set columns = body | safe | markdown | split(pat="|||") %}
+
+<!-- aligns columns depending on col number-->
+
+
+{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
+{% set column_classes = "flex-1 m-4 lg:m-4" %}
+    
+
+<!-- makes row full screen width and adds background img -->
+{% set styles = ""  %}
+{% if bgPath %}
+    {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover"  %}
+    {% set classes = classes ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 lg:py-40 p-8 sm:p-12 md:p-16 lg:p-20" %}
+{% endif %}
+
+<div class="{{classes}}" style="{{styles}}">
+    {% for column in columns%} 
+
+        <!-- Hides empty columns if displayed vertically in small screen -->
+        {% if column | as_str | length < 10 %} 
+            <div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
+                {{ column | safe }}
+            </div>
+
+        {% else %}
+            <div class="{{column_classes}}">
+                <!-- handles mermaid markdown content display -->
+                {{ column | safe }}
+            </div>
+            
+        {% endif %}
+    {% endfor %}
+</div>