progress in prettifying header

content/header/_index copy.md

@@ -0,0 +1,84 @@
+---
+title: "Header"
+description: "NEAR is on a mission to empower everyone to take back control of their money, their data, and their identity. Join us."
+insert_anchor_links: "left"
+template: "partials/header.html"
+extra:
+  logoPath: "/images/ourworld_logo2.png"
+  imgPath: ""
+---
+
+- Learn
+
+{% row(style="lean") %}
+
+### PURPOSE
+
+<br>
+<br>
+
+#### [The Internot](/apage)
+
+Whats wrong with the [internet](/apage)
+
+<br>
+
+#### Our Internet
+
+Vision for the new internet
+
+|||
+
+### ECOSYSTEM
+
+<br>
+<br>
+
+#### OurWorld DAO
+
+Be a part of governance
+
+<br>
+
+#### Communities
+
+Explore communities in OurWorld
+
+<br>
+
+#### DAOs
+
+Decentralized autonomous organizations
+
+|||
+
+### APPLICATIONS
+
+<br>
+<br>
+
+#### DAPPs
+
+Decentralized applications
+
+<br>
+
+#### Projects
+
+Projects in OurWorld
+
+|||
+
+### FEATURED
+
+<br>
+<br>
+
+#### OurWorld is Live
+
+Be a part of the new internet
+
+- [Join us]("/join-us")
+- [Blog]("/blog")
+
+{% end %}

content/header/_index.md

@@ -10,26 +10,23 @@ extra:
 
 - Learn
 
-{% row(style="lean") %}
+{% menu() %}
 
-### PURPOSE
+##### PURPOSE
 
-<br>
+###### [The Internot](/apage)
-<br>
-
-#### [The Internot](/apage)
 
 Whats wrong with the [internet](/apage)
 
 <br>
 
-#### Our Internet
+###### Our Internet
 
 Vision for the new internet
 
 |||
 
-### ECOSYSTEM
+##### ECOSYSTEM
 
 <br>
 <br>

css/index.css

@@ -4,16 +4,20 @@
 @import "tailwindcss/base";
 @import "layout.css";
 @import "tailwindcss/components";
-@import "ffoxobliq.css";
 /*! purgecss end ignore */
 @import "tailwindcss/utilities";
 @import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
 /* Custom CSS for header partial */
 .backdrop-blur {
   -webkit-backdrop-filter: blur(40px);
 }
 
+* {
+  font-family: "Work Sans";
+}
+
 .bg-semi-white {
   background-color: rgba(255, 255, 255, 0.75);
 }
@@ -49,7 +53,10 @@ img[src*="#large"] {
     @apply text-lg lg:text-xl font-light;
   }
   h5 {
-    @apply text-base lg:text-base font-light leading-8;
+    @apply text-base not-italic font-light leading-8;
+  }
+  h6 {
+    @apply text-sm lg:text-sm font-normal;
   }
   nav p {
     @apply hidden sm:block md:block lg:block xl:block 2xl:block;
@@ -79,3 +86,7 @@ p {
 a {
   border: none;
 }
+
+header {
+  font-family: "Work Sans";
+}

css/layout.css

@@ -159,6 +159,10 @@ h4,
   @apply text-2xl;
 }
 
+h5 {
+  @apply not-italic;
+}
+
 h5,
 .h5,
 h6,

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="relative z-50 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="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="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">
-        <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">
             <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>