progress in prettifying header

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>