update blog

templates/layouts/blog.html

@@ -8,7 +8,7 @@ and a side nav for category and featured post navigation
 
 {% block content %}
 
-<main class="pt-12">
+<main>
 
     <!--sets global featured variable as the most recent post with the isFeatured tag-->
     {%- set section = get_section(path="blog/_index.md") %}

templates/layouts/people.html

@@ -0,0 +1,83 @@
+{% extends "_default/base.html" %}
+<!-- partners template
+the template for displaying the partners page.
+consists of a featured partners row, 
+a paginated list of posts (sorted by date), 
+and a side nav for category and featured post navigation
+-->
+
+{% block content %}
+
+<main>
+
+    <!--sets global featured variable as the most recent post with the isFeatured tag-->
+    {%- set section = get_section(path="people/_index.md") %}
+    <div class="container mx-auto">
+      {% include "partials/filter_bar.html" %}
+      <div class="text-center main-title px-0 md:w-full">
+        <h1
+          class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+        >
+        {% set path_array = current_path | split(pat="/") %}
+        {% set taxonomy = path_array[1] %}
+        {% set category = path_array[2] %}
+          {{category | replace(from='-', to=' ' ) | title}}
+        </h1>
+        <div>
+          <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-4 lg:max-w-none">
+            {%- for page in paginator.pages %} 
+            {% if "Engineering" == "Engineering"%}
+                  {% include "partials/personCard.html" %} 
+              {%endif%} {%- endfor %}
+          </div>
+          <hr class="mt-6" />
+          <p class="text-center text-sm mt-2 mb-16">
+            {% if paginator.previous %}
+            <a
+              class="border-transparent"
+              aria-label="First page"
+              href="{{ paginator.first }}"
+              >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+              "partials/icons/svgPrevPageIcon.html" %}</a
+            >
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <a
+              class="border-transparent"
+              aria-label="Previous page"
+              href="{{ paginator.previous }}"
+              >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+            >
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+            include "partials/icons/svgFirstPageIcon.html" %}{% include
+            "partials/icons/svgFirstPageIcon.html" %}
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+            "partials/icons/svgFirstPageIcon.html" %}
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+            paginator.next %}
+            <a
+              class="border-transparent"
+              aria-label="Next page"
+              href="{{ paginator.next }}"
+              >{% include "partials/icons/svgNextPageIcon.html" %}</a
+            >
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <a
+              class="border-transparent"
+              aria-label="Last page"
+              href="{{ paginator.last }}"
+              >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+              "partials/icons/svgNextPageIcon.html" %}</a
+            >
+            {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+            "partials/icons/svgLastPageIcon.html" %}{% include
+            "partials/icons/svgLastPageIcon.html" %} {% endif %}
+          </p>
+        </div>
+      </div>
+    </div>
+ </main> 
+ 
+ {% endblock content %}

templates/partials/accordion.html

@@ -0,0 +1,48 @@
+{% set tfFaq = get_section(path="faq/_index.md") %}
+{% set farmFaq = get_section(path="farmfaq/_index.md") %}
+{% set tftFaq = get_section(path="tftfaq/_index.md") %}
+
+{% if current_path == '/faq/' %}
+<h2 class="text-center mt-10">{{ tfFaq.title }}</h2>
+<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
+    {% for page in tfFaq.pages %}
+    <details class="p-4 rounded-lg">
+        <summary class="font-semibold">{{ page.title }}</summary>
+        <div class="mt-3">
+            <p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
+        </div>
+    </details>
+    {% endfor %}
+</div>
+
+{% elif current_path == '/farmfaq/' %}
+<h2 class="text-center mt-10">{{ farmFaq.title }}</h2>
+<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
+    {% for page in farmFaq.pages %}
+    <details class="p-4 rounded-lg">
+        <summary class="font-semibold">{{ page.title }}</summary>
+        <div class="mt-3">
+            <p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
+        </div>
+    </details>
+    {% endfor %}
+</div>
+
+{% elif current_path == '/tftfaq/' %}
+<h2 class="text-center mt-10">{{ tftFaq.title }}</h2>
+<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
+    {% for page in tftFaq.pages %}
+    <details class="p-4 rounded-lg">
+        <summary class="font-semibold">{{ page.title }}</summary>
+        <div class="mt-3">
+            <p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
+        </div>
+    </details>
+    {% endfor %}
+</div>
+{% endif %}
+<style>
+    a {
+        color: #4ec48f
+    }
+</style>

templates/partials/blogPosts.html

@@ -1,8 +1,8 @@
 {% block content %}
 
-<div class="font-sans text-center px-0 md:w-full md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+<div class="text-center main-title px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
   <h1
-    class="tracking-tight text-left text-2xl mt-4 sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+    class="tracking-tight text-left text-2xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
   >
   {% set path_array = current_path | split(pat="/") %}
   {% set taxonomy = path_array[1] %}
@@ -15,9 +15,9 @@
   <div>
     <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
       {%- for post in paginator.pages %} 
-        {% if "Engineering" == "Engineering"%}
+          {% if not post.extra.hidden %}
             {% include "partials/postCard.html" %} 
-        {%endif%} {%- endfor %}
+         {%endif%} {%- endfor %}
     </div>
     <hr class="mt-6" />
     <p class="text-center text-sm mt-2 mb-16">

templates/partials/blogSidebar.html

@@ -1,6 +1,6 @@
 
 <div class="mx-8 md:mx-4 flex flex-col">
-    <div class="flex flex-col mb-12">
+    <div class="flex flex-col mb-12 mr-8 lg:mr-24">
         <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER POSTS BY</h4>
         <a id="all" class="mb-3 text-black font-normal" href="/blog">All</a>
         {% set taxonomy = get_taxonomy(kind="categories") %}

templates/partials/featuredBlog.html

@@ -10,7 +10,7 @@
 <body>
 
   <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center container mx-auto">
-    <div class="relative lg:ml-8 my-8 w-full mx-4 md:w-auto">
+    <div class="relative lg:ml-8 my-8 w-full md:w-auto">
       <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED POST</h3>
       <a href={{featured.permalink}} class="">
         <h2
@@ -25,7 +25,7 @@
     </div>
 
     <div class="mx-4 relative lg:mt-0 max-w-full">
-      <img class="relative mx-auto md:w-auto rounded md:max-w-full max-h-80" src=/{{featured.extra.imgPath}} alt="" />
+      <img class="relative mx-auto md:w-auto rounded md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
     </div>
   </div>
 

templates/partials/featuredNews.html

@@ -0,0 +1,42 @@
+<body>
+
+  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center container mx-auto">
+    <div class="relative lg:ml-8 my-8 w-full md:w-auto">
+      <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED NEWS</h3>
+      <a href={{featured.permalink}} class="">
+        <h2
+          class="mt-8 text-2xl main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 ">
+          {{ featured.title }}
+        </h2>
+      </a>
+
+      <h4 class="text-sm not-italic font-light leading-6 text-gray-600">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
+        {% for author in featured.taxonomies.people %}
+        {% set author_path = 'people/' ~ author ~ '/index.md' %}
+        {% set author = get_page(path=author_path) %}
+        {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
+        <a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize	text-gray-800"> <img
+            src="{{ author_img }}" alt="{{ author.title }}" class="
+            inline-flex 
+          w-8
+          h-8
+          rounded-full
+          bg-gray-200
+          border-2 border-white
+        " /> {{ author.title }}</a>
+        {% endfor %}
+      </h4>
+
+    </div>
+
+    <div class="mx-4 relative lg:mt-0 max-w-full">
+        {% if featured.extra.imgPath %}
+      <img class="relative mx-auto md:w-auto md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
+        {% endif %}
+    </div>
+  </div>
+  <hr class="mt-6">
+  </div>
+  </div>
+</body>

templates/partials/filter_bar.html

@@ -0,0 +1,48 @@
+{% set path_array = current_path | split(pat="/") %}
+{% set taxonomy = path_array[1] %}
+{% set category = path_array[2] %}
+{% if path_array | length < 4%}
+{% set category = "All" %}
+{% endif %}
+
+
+
+<div class="left-0 z-50 mb-5 h-16 bg-gray-200 mt-6 w-full rounded shadow">
+    <header class="flex flex-wrap container mx-auto pt-1 pb-0 sm:px-0 transition-all transition-500">
+        <div class="flex justify-between px-4 sm:p-0">
+            <div class="ml-8 inline-flex flex-shrink-0">
+                <span class="flex text-xl p-3 capitalize tracking-tight">
+                    Filter:
+                </span>
+            </div>
+        </div>
+        <nav class="inline-flex md:order-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent">
+            <ul class="list-none sm:flex justify-left capitalize transition-all transition-500 ">
+                <li class="flex items-center">
+                    <div class="relative">
+                        <button id="filter-btn" class="rounded border-0 px-5 !shadow-none flex flex-row items-center w-full md:w-auto md:inline md:mt-0 mb-0 animated-link bg-gray-300">
+                            <span class="capitalize">{{category | replace(from='-', to=' ' ) | title}}</span>
+                            <svg data-v-21fd5df0="" fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1 rotate-180"><path data-v-21fd5df0="" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                        </button>
+                        <div id="filter-menu" x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="hidden absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30">
+                            <div data-v-21fd5df0="" class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700">
+                                <a data-v-21fd5df0="" href="/people" class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                                    All
+                                </a>
+                                {% set taxonomy = get_taxonomy(kind="memberships") %}
+                                {% set categories = taxonomy.items %}
+                                {% for category in categories %}
+                                    {% set path = category.name | slugify %}
+                                    {% set fullpath = "/memberships/" ~ path %}
+                                    <a href="{{fullpath}}" class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                                        {{category.name}}
+                                    </a>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </nav>
+    </header>
+</div>

templates/partials/footer.html

@@ -3,21 +3,43 @@
   Read the documentation to get started: https://tailwindui.com/documentation
 -->
 
-{%- set section = get_section(path="_index.md") %}
+{%- set section = get_section(path="footer/_index.md") %}
+{%- set logoPath = section.extra.logoPath %}
 
-{% set subsections_str = section.subsections | join(sep=" ") %}
-<div class="bg-gray-200">
- <div class="container mx-auto">
-    <footer class="bottom-0">
-    {% if "footer/_index.md" in subsections_str %}
-        {%- set section = get_section(path="footer/_index.md") %}
-        {{ section.content | safe }}
-    {% else %}
-        {% set footer_class = config.extra.footer_class | default(value='') %}
-        <div class="{{ footer_class ~ ' -mx-20'}}">
-            <img src="{{get_url(path='images/footer.png')}}" class="w-60" alt="">
+<html>
+    <head /><body>
+        <div class="mt-6 border-t border-gray-200 pt-2"></div>
+        <footer class="bg-white">
+          <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+            <div class="xl:flex xl:gap-4">
+              <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
+                <img class="w-16 h-auto sm:w-15" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
+                <p class="text-gray-500 text-base leading-6 ">
+                  {{section.description}}
+                </p>
+                {% include "partials/socialLinks.html" %}
+            </div>
+
+            <div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust">
+                {{ section.content | safe }}
+            </div>
+              
+              </div>
+              <div  class="mt-12 mx-auto border-t border-gray-200 pt-8">
+                <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
+                © 2022 ThreeFold, All rights reserved.
+                <a target="_blank" href="https://library.threefold.me/info/legal/#/legal__terms_conditions_websites" class="leading-6 text-gray-500 hover:text-gray-900">Terms &amp; Conditions |
+                </a><a target="_blank" href="https://library.threefold.me/info/legal/#/legal__privacypolicy" class="leading-6 text-gray-500 hover:text-gray-900">Privacy Policy |
+                </a><a href="/tfLabs" class="leading-6 text-gray-500 hover:text-gray-900">ThreeFold Labs IT</a></p>
+              </div>
+    
+            </div>
             
-    {% endif %}
-    </footer>
-</div>
-</div>
+          </div>
+
+
+          
+        </footer>
+        </body>
+        </html>
+        

templates/partials/head.html

@@ -5,19 +5,111 @@
 {% set zolaVer = '0.13.0' %}
 
 <head>
-  <meta name="generator" content="Zola v.{{ zolaVer }} - getzola.org" />
-
+  <link rel="icon" type="image/x-icon" href="{{ get_url(path='images/icons/favicon.png')}}">
   {% block title %}
-  {% if current_path == '/' %}
   <title>{{ config.title }}</title>
-  <meta property="og:title" content="{{ config.title }}" />
-  {% else %}
-  <title>{% if section.title %}{{ section.title }} &bull; {% endif %}{% if page.title %}{{ page.title }} &bull; {% endif %}{{ config.title }}</title>
-  <meta property="og:title" content="{% if section.title %}{{ section.title }} &bull; {% endif %}{% if page.title %}{{ page.title }} &bull; {% endif %}{{ config.title }}" />
-  {% endif %}
-  {% endblock title %}
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="{{ config.base_url }}" />
 
-  <!-- Required meta categories -->
+  {% if section.title %}
+  <title>{{ section.title }}</title>
+  <meta property="og:title" content="{{ section.title }}" />
+  {% elif page.title %}
+  <title>{{ page.title }}</title>
+  <meta property="og:title" content="{{ page.title }}" />
+  {%endif%}
+
+  {%if section.extra.imgPath %}
+  <meta name="image" content="{{section.permalink}}{{ section.extra.imgPath }}" />
+  <meta property="og:image" content="{{section.permalink}}{{ section.extra.imgPath }}" />
+  <meta property="twitter:image" content="{{section.permalink}}{{ section.extra.imgPath }}" />
+  {% elif page.extra.imgPath %}
+  <meta name="image" content="{{page.permalink}}{{ page.extra.imgPath }}" />
+  <meta property="og:image" content="{{page.permalink}}{{ page.extra.imgPath }}" />
+  <meta property="twitter:image" content="{{page.permalink}}{{ page.extra.imgPath }}" />
+  {%endif%}
+  
+  {%if section.description%}
+  <meta name="description" content="{{ section.description }}" />
+  <meta property="og:description" content="{{ section.description }}" />
+  <meta property="twitter:description" content="{{ section.description }}" />
+  {%elif page.description%}
+  <meta name="description" content="{{ page.description }}" />
+  <meta property="og:description" content="{{ page.description }}" />
+  <meta property="twitter:description" content="{{ page.description }}" />
+  {%endif%}
+  
+  <meta name="twitter:card" content="summary" />
+  
+  {% endblock title %}
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css" />
+  <!-- Cookie Consent by https://www.FreePrivacyPolicy.com -->
+  <script type="text/javascript" src="//www.freeprivacypolicy.com/public/cookie-consent/4.0.0/cookie-consent.js"
+    charset="UTF-8"></script>
+  <script type="text/javascript" charset="UTF-8">
+    document.addEventListener('DOMContentLoaded', function () {
+      cookieconsent.run({ "notice_banner_type": "headline", "consent_type": "express", "palette": "light", "language": "en", "page_load_consent_levels": ["strictly-necessary"], "notice_banner_reject_button_hide": false, "preferences_center_close_button_hide": false, "website_name": "https://threefold.io/", "website_privacy_policy_url": "https://library.threefold.me/info/legal/#/legal__privacypolicy" });
+    });
+  </script>
+  <!-- Google Tag Manager -->
+  <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-N7PNMFH');</script>
+  <!-- End Google Tag Manager -->
+
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-100065546-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-100065546-1');
+  </script>
+
+  <!-- Matomo Tag Manager -->
+  <script>
+    var _mtm = window._mtm = window._mtm || [];
+    _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
+    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+    g.async = true; g.src = 'https://analytics.threefold.io/js/container_KIcuIdn4.js'; s.parentNode.insertBefore(g, s);
+  </script>
+  <!-- End Matomo Tag Manager -->
+  
+  <!-- Crisp -->
+  <script type="text/plain" cookie-consent="tracking">
+    window.$crisp = [];
+    window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
+    (function () {
+        d = document;
+        s = d.createElement("script");
+        s.src = "https://client.crisp.chat/l.js";
+        s.async = 1;
+        d.getElementsByTagName("head")[0].appendChild(s);
+    })();
+</script>
+
+  <!-- Crisp without cookies -->
+  <!-- <script type="text/javascript" cookie-consent="tracking">
+    window.$crisp = [];
+    window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
+    (function () {
+      d = document;
+      s = d.createElement("script");
+      s.src = "https://client.crisp.chat/l.js";
+      s.async = 1;
+      d.getElementsByTagName("head")[0].appendChild(s);
+    })();
+  </script> -->
+  <!-- end of Crisp-->
+
+  <!-- Required meta tags -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
@@ -36,6 +128,49 @@
   <!-- **** CONCLUSION, favicons **** -->
 
   <!-- CSS/SCSS -->
-  <link rel="stylesheet" href="{{ get_url(path="css/index.css", trailing_slash=false, cachebust=true) | safe }}" />  <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
-  
-</head>
+  <link rel="stylesheet" href="{{ get_url(path="css/index.css", trailing_slash=false, cachebust=true) | safe }}" />
+  <style>
+    .space-x-10>:not([hidden])~:not([hidden]){
+      margin-left: calc(1.5rem*calc(1 - var(--tw-space-x-reverse)))!important;
+    }
+    @-moz-document url-prefix() {
+      .lazy:-moz-loading {
+        visibility: hidden;
+      }
+    }
+
+    .ieOnly {
+      display: none;
+    }
+
+    @media all and (-ms-high-contrast: none),
+    (-ms-high-contrast: active) {
+      .ieOnly {
+        display: block;
+      }
+    }
+  @media (min-width: 640px){
+      .sm\:space-x-4>:not([hidden])~:not([hidden]){
+      margin-left: calc(2rem*calc(1 - var(--tw-space-x-reverse)))!important;
+      }
+  }
+  </style>
+  <script type='text/javascript'
+    src='https://platform-api.sharethis.com/js/sharethis.js#property=62556aac80366d0019fc1af2&product=sop'
+    async='async'></script>
+
+  <!-- MailerLite Universal -->
+  <script>
+    (function (m, a, i, l, e, r) {
+      m['MailerLiteObject'] = e; function f() {
+        var c = { a: arguments, q: [] }; var r = this.push(c); return "number" != typeof r ? r : f.bind(c.q);
+      }
+      f.q = f.q || []; m[e] = m[e] || f.bind(f.q); m[e].q = m[e].q || f.q; r = a.createElement(i);
+      var _ = a.getElementsByTagName(i)[0]; r.async = 1; r.src = l + '?v' + (~~(new Date().getTime() / 1000000));
+      _.parentNode.insertBefore(r, _);
+    })(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
+
+    var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
+  </script>
+  <!-- End MailerLite Universal -->
+</head>

templates/partials/header copy.html

@@ -12,27 +12,24 @@
 
     function toggleMenu(button) {
         if (displayedMenu === button.id.split("-")[0]) { 
-            button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
+            button.className = button.className.replace("text-blue-500", " text-gray-900");
             hideMenu(button.id.split("-")[0]);
-            button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
             displayedMenu = "";
         }
         else { 
             showMenu(button.id.split("-")[0]);
-            button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
-            button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
+            button.className = button.className.replace("text-gray-900", " text-blue-500");
             displayedMenu = button.id.split("-")[0]
         }
     }
 
     function handleClick(button) {
         if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
-        if (button.id.indexOf("menu") !== -1 ) { 
-            toggleMenu(button) 
-        }
+        if (button.id.indexOf("menu") !== -1 ) { toggleMenu(button) }
     }
 
     function toggleHamburger() {
+        console.log("toggling hamburger", hamburgerShown)
         if (hamburgerShown) { 
             hideHamburger();
             hamburgerShown = false;
@@ -60,16 +57,16 @@
 
     function showHamburger() {
         document.getElementById('header-container').className = "overflow-hidden";
-        document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
-        document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
+        document.getElementById('hamburger').className = "fixed mt-12 z-20 top-0 inset-x-0 transition transform origin-top-right";
+        document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
+        document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
     }
 
     function hideHamburger() {
         document.getElementById('header-container').className = "";
         document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
-        document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
+        document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
+        document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
         if (displayedMenu !== "") { hideMenu(displayedMenu); }
     }
 
@@ -82,6 +79,10 @@
         document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
     }
 
+    function showMobileNav() {
+        document.getElementById('learn').className = "absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-out duration-150 opacity-1 -translate-y-0";
+    }
+
 </script>
 
 {%- set section = get_section(path="header/_index.md") %}
@@ -90,27 +91,27 @@
 <header id="header-container">
     <div class="z-10 bg-white fixed w-screen">
         <div class="relative z-50 shadow">
-        <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 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 md:px-12 sm:py-6 lg:px-20 lg:justify-start lg:space-x-20">
             <div>
                 <a href="/" class="flex">
-                    <img class="w-48 h-auto sm:w-15" src="{{section.extra.logoPath}}" alt="Ourworld Logo" />
+                    <img class="w-20 h-auto sm:w-32" src="{{section.extra.logoPath}}" alt="Ourworld Logo" />
                 </a>
             </div>
             <div class="-mr-2 -my-2 lg:hidden">
-                <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                     <!-- Heroicon name: menu -->
                     <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                     </svg>
                 </button>
-            <button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+            <button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                 <!-- Heroicon name: x -->
                 <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                 </svg>
                 </button>
             </div>
-            <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
+            <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between lg:space-x-12">
             <nav class="flex space-x-10">
 
 {% for header_item in header_items %}
@@ -126,18 +127,20 @@
     {% else %}
         <div class="relative">
             {% set button_id = header_label ~ "-menu-btn" | slugify %}
-        <button type="button" id="{{button_id}}" class="nav_btn font-medium text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-blue-300 focus:outline-none 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-lg leading-6 font-normal hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
             <span>{{ header_label }}</span>
-            <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+            
+            <!--
+            Heroicon name: chevron-down
+
+            Item active: "text-gray-600", Item inactive: "text-gray-400"
+            -->
         </button>
         </div>
 
     {% endif %}  
 {% endif %}
 {% endfor %}
-<a href="mailto:info@ourworld.tf" target="_blank" class="text-lg uppercase leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-    Contact
-</a>
 </nav>
 
 
@@ -154,7 +157,7 @@
 <nav>
     <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:p-6 md:p-8 lg:p-12 xl:p-12">
+            <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 }}
             </div>
         </div>            
@@ -176,10 +179,10 @@
             From: "opacity-100 scale-100"
             To: "opacity-0 scale-95"
         -->
-    <div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
+    <div id="hamburger" class="hidden fixed mt-12 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
         <div>
-            <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
-                <div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
+            <div class="shadow-xs bg-white divide-y-2 divide-gray-50">
+                <div class="pt-5 pb-6 px-8 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
 
                     <nav class="flex flex-col justify-around pb-12">
                     {% for header_item in header_items %}
@@ -190,38 +193,31 @@
                             {% 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-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                <a href="{{link_path[1]}}" class="text-3xl leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 my-8 transition ease-in-out duration-150 mt-0">
                                     {{link_label}}
                                 </a>
                             {% else %}
                                 {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
-                                    <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                    <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
+                                    <button type="button" id="{{button_id}}" class="flex flex-col items-start text-left text-gray-500 group inline-flex space-x-2 text-3xl my-8 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>
-                                        <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
-                                    </button>
+                                    <!--
+                                    Heroicon name: chevron-down
+                    
+                                    Item active: "text-gray-600", Item inactive: "text-gray-400"
+                                    -->
                                     {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
-                                    <div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                                    <div id="{{menu_id}}" class="z-50 leading-3 mt-6 pl-12 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
                                         {{ header_arr[1] | safe }}
                                     </div>
+                                    </button>
                     
                             {% endif %}
-                            <hr/>
+                            {% if header_arr[1] %}  
+
+                            {% endif %}
                         {% endif %}
                     {% endfor %}
-                    {% if "footer/_index.md" in subsections_str %}
-                    {% set section = get_section(path="footer/_index.md")%}
-                    {% set logoPath = section.extra.logoPath %}
-                    <div class="mx-8 mt-8">
-                        {# <div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
-                          <img class="w-48 h-auto" src="{{logoPath}}" alt="Company name" />
-                          <p class="text-gray-500 text-base leading-6 ">
-                            {{section.description}}
-                          </p>
-                      </div> #}
-                    {% endif %}
-                    <a href="mailto:info@ourworld.tf" target="_blank" class="text-lg uppercase leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                        Contact
-                    </a>
                     </nav>                    
                 </div>
             

templates/partials/header.html

@@ -1,226 +1,155 @@
-<!--
-  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
-  Read the documentation to get started: https://tailwindui.com/documentation
---><!-- This example requires Tailwind CSS v1.4.0+ -->
+{%- set section = get_page(path="header/index.md") %}
+{% set header_items = section.content | safe | split(pat="<li>") %}
 
-<script type="text/javascript">
-    
-    var displayedMenu = "";
-    var hamburgerShown = false;
-    let width = screen.width;
-    var isMobile = width < 1024;
-
-    function toggleMenu(button) {
-        if (displayedMenu === button.id.split("-")[0]) { 
-            button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900");
-            hideMenu(button.id.split("-")[0]);
-            button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
-            displayedMenu = "";
-        }
-        else { 
-            showMenu(button.id.split("-")[0]);
-            button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
-            button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent");
-            displayedMenu = button.id.split("-")[0]
-        }
-    }
-
-    function handleClick(button) {
-        if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() }
-        if (button.id.indexOf("menu") !== -1 ) { 
-            toggleMenu(button) 
-        }
-    }
-
-    function toggleHamburger() {
-        if (hamburgerShown) { 
-            hideHamburger();
-            hamburgerShown = false;
-        }
-        else { 
-            showHamburger();
-            hamburgerShown = true;
-        }
-    }
-
-    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);
-    }
-
-    function hideMenu(menuName) {
-        var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
-        var menuElement = document.getElementById(menuId)
-        menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
-        setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
-    }
-
-    function showHamburger() {
-        document.getElementById('header-container').className = "overflow-hidden";
-        document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
-        document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-    }
-
-    function hideHamburger() {
-        document.getElementById('header-container').className = "";
-        document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
-        document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
-        if (displayedMenu !== "") { hideMenu(displayedMenu); }
-    }
-
-    window.onload = function(){
-        let elements = document.getElementsByTagName("button");
-        let buttons = [...elements]
-        buttons.forEach((button) => {
-            button.addEventListener( 'click', function() { handleClick(button) });
-        })
-        document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
-    }
-
-</script>
-
-
-<!-- set variables used for header template -->
-{% set section = get_section(path="_index.md") %}
-{% set subsections_str = section.subsections | join(sep=" ") %}
-{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %}
-
-{% if "header/_index.md" in subsections_str %}
-    {% set section = get_section(path="header/_index.md") %}
-    {% set header_items = section.content | safe | split(pat="<li>") %}
-    {% include "partials/header_custom.html" %}
-{% else %}
-    <header id="header-container">
-        {% set header_class = config.extra.header_class | default(value='') %}
-        <div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
-            <div class="relative z-50 shadow">
-            <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5  md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
-                <div>
-                    <a href="/" class="flex">
-                        <img class="w-56 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo" />
-                    </a>
-                </div>
-                <div class="-mr-2 -my-2 lg:hidden">
-                    <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
-                        <!-- Heroicon name: menu -->
-                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        </svg>
-                    </button>
-                <button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
-                    <!-- Heroicon name: x -->
-                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                    </button>
-                </div>
-                <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
-                    <nav class="flex space-x-10">    
-                    {% for page in section.pages %}
-                    {% if page.extra.menu %} {% continue %} {% endif %}
-                        <a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                            {{page.title}}
-                        </a>
-                        <div class="relative">
-                        </div>
-                    {% endfor %}
-                    {% for subsection in section.subsections %}
-                        {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}                        
-                        {% set button_id = subsection ~ "-menu-btn" | slugify %}
-                        <div class="relative">
-                        <button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
-                            <span>{{ subsection }}</span>
-                            <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
-                        </button>
-                        </div>
-                    {% endfor %}
-                    </nav>
-                </div>
-            </div>
-        </div>
-    {% for subsection in section.subsections %}
-        {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}        
-        {% set submenu_id = subsection ~ "-menu" | slugify %}
-    <nav>
-        <div id="{{submenu_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:p-6 md:p-8 lg:p-12 xl:p-12">
-                {{subsection | safe }}
-                </div>
-            </div>            
-            </div>
-        </nav>
-    
-    
-    {% endfor %}
-    
-        
-            <!--
-            Mobile menu, show/hide based on mobile menu state.
-        
-            Entering: "duration-200 ease-out"
-                From: "opacity-0 scale-95"
-                To: "opacity-100 scale-100"
-            Leaving: "duration-100 ease-in"
-                From: "opacity-100 scale-100"
-                To: "opacity-0 scale-95"
-            -->
-        <div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
+<header id="header-container">
+    <div class="z-10 bg-white fixed w-full top-0">
+        <div class="relative z-50 shadow">
+        <div class="mx-auto flex z-50 shadow justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
             <div>
-                <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
-                    <div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
-    
-                        <nav class="flex flex-col justify-around pb-12">
-                        {% for page in section.pages %}
-                            {% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
-                            {% if page.extra.menu %} {% continue %} {% endif %}
-                            <a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                {{page.title}}
-                            </a>
-                            <hr/>
-                        {% endfor %}
-                        {% for subsection in section.subsections %}
-                            {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
-                            {% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
-                            {% set menu_id = subsection ~ "-mobile-menu" | slugify %}
-
-                            <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                <span>{{ subsection }}</span>
-                                <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
-                            </button>
-
-                            <div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
-                                {{ subsection | safe }}
-                            </div>
-                        
-                            <hr/>
-                        {% endfor %}
-                        {% if "footer/_index.md" in subsections_str %}
-                        {% set section = get_section(path="footer/_index.md")%}
-                        <div class="mx-8 mt-8">
-                            <div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
-                              <img class="w-48 h-auto" src="{{logo_path}}" alt="Company name" />
-                              <p class="text-gray-500 text-base leading-6 ">
-                                {{section.description}}
-                              </p>
-                          </div>
-                          {% endif %}
-                        </nav>                    
-                    </div>
-                
+                <a href="{{get_url(path='/')}}" class="flex">
+                    <img class="w-16 h-auto sm:w-15" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
+                </a>
             </div>
-            
+            <div class="-mr-2 -my-2 lg:hidden">
+                <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
+                    <!-- Heroicon name: menu -->
+                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                </button>
+            <button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
+                <!-- Heroicon name: x -->
+                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                </button>
+            </div>
+            <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between lg:space-x-6">
+            <nav class="flex space-x-10">
+
+            {% for header_item in header_items %}
+            {% if not loop.first %}
+                {% set header_arr = header_item | split(pat="</li>") %}
+                {% set header_label = header_arr[0] %}
+                {% if '<a' in header_label %}
+                    {% set link_label = header_label | striptags %}
+                    {% set link_path = header_label | split(pat="%22") | safe%}
+                    {% if header_label is containing("http") %}
+                        {% if header_label is not containing("threefold") %}
+                        <a href="{{link_path[1]}}" target="_blank" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                            {{link_label}}
+                        </a>
+                        {% endif %}
+                    {% else %}
+                    <a href="{{ get_url(path=link_path[1])}}" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                      {{link_label}}
+                    </a>
+                    {% endif %}
+                {% else %}
+                    <div class="relative">
+                        {% set button_id = header_label ~ "-menu-btn" | slugify %}
+                    <button type="button" id="{{button_id}}" class="nav_btn font-medium text-gray-900 hover:text-gray-500 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
+                        <span>{{ header_label }}</span>
+                        <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                    </button>
+                    </div>
+
+                {% endif %}  
+            {% endif %}
+            {% endfor %}
+            </nav>
             </div>
         </div>
-    
-    
-    </header>
-    
+        </div>
+{% for header_item in header_items %}
+{% if not loop.first %}
+    {% set header_arr = header_item | split(pat="</li>") %}
+    {% set header_label = header_arr[0] %}
+    {% set header_menu = header_arr[1] %}
+    {% set menu_id = header_label ~ "-menu" | slugify %}
+
+<nav>
+    <div id="{{menu_id}}" class="nav_menu 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 id="menu" class="mx-8 lg:mx-10 xl:mx-10 px-6 sm:p-6 md:p-8">
+                {{header_menu | safe }}
+            </div>
+        </div>            
+        </div>
+    </nav>
+
+
 {% endif %}
+{% endfor %}
+
+    
+        <!--
+        Mobile menu, show/hide based on mobile menu state.
+    
+        Entering: "duration-200 ease-out"
+            From: "opacity-0 scale-95"
+            To: "opacity-100 scale-100"
+        Leaving: "duration-100 ease-in"
+            From: "opacity-100 scale-100"
+            To: "opacity-0 scale-95"
+        -->
+    <div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
+        <div>
+            <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
+                <div class="pb-6 sm:px-12 md:px-16 mt-6 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
+
+                    <nav class="flex flex-col justify-around pb-12">
+                    {% for header_item in header_items %}
+
+                        {% if not loop.first %}
+                            {% set header_arr = header_item | split(pat="</li>") %}
+                            {% set header_label = header_arr[0] %}
+                            {% if '<a' in header_label %}
+                                {% set link_label = header_label | striptags %}
+                                {% set link_path = header_label | split(pat="%22") | safe%}
+                                {% if header_label is containing("http") %}
+                                    {% if header_label is not containing("threefold") %}
+                                    <a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                        {{link_label}}
+                                    </a>
+                                    {% endif %}
+                                {% else %}
+                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                    {{link_label}}
+                                </a>
+                                {% endif %}
+                            {% else %}
+                                {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
+                                    <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg 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>
+                                        <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                                    </button>
+                                    {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
+                                    <div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                                        {{ header_arr[1] | safe }}
+                                    </div>
+                    
+                            {% endif %}
+                            <hr/>
+                        {% endif %}
+                    {% endfor %}
+                    {% set section = get_section(path="footer/_index.md")%}
+                    {%- set logoPath = section.extra.logoPath %}
+                    <div class="mx-8 mt-8">
+                        <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
+                          <img class="w-32 h-auto" src="{{get_url(path=logoPath)}}" alt="Company name" />
+                          <p class="text-gray-500 text-base leading-6 ">
+                            {{section.description}}
+                          </p>
+                          {% include "partials/socialLinks.html" %}
+                      </div>
+                    </nav>                    
+                </div>
+            
+        </div>
+        
+        </div>
+    </div>
 
 
+</header>

templates/partials/icons/svgDribbbleIcon.html

@@ -1,3 +1,3 @@
-<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
     <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" />
   </svg>

templates/partials/icons/svgFacebookIcon.html

@@ -1,3 +1,3 @@
-<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
     <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
 </svg>

templates/partials/icons/svgGithubIcon.html

@@ -1,3 +1,3 @@
-<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
     <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
 </svg>

templates/partials/icons/svgInstagramIcon.html

@@ -1,3 +1,3 @@
-<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
     <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
 </svg>

templates/partials/icons/svgLinkedInIcon.html

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="h-8 w-8"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" ></path></svg>

templates/partials/icons/svgTelegram.html

@@ -0,0 +1 @@
+<svg data-v-14efe4a7="" xmlns="http://www.w3.org/2000/svg" width="1.6rem" height="1.6rem" fill="currentColor" viewBox="0 0 16 16" class="bi bi-telegram mt-1"><path data-v-14efe4a7="" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"></path></svg>

templates/partials/icons/svgTwitterIcon.html

@@ -1,3 +1,3 @@
-<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
     <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
   </svg>

templates/partials/memberships.html

@@ -0,0 +1,85 @@
+{% block content %}
+
+{% if not paginator %} 
+    {% set paginator = section %}
+{% endif %}
+
+{% set path_array = current_path | split(pat="/") %}
+{% set taxonomy = path_array[1] %}
+{% set category = path_array[2] %}
+{% if path_array | length < 3%}
+{% set category = "All" %}
+{% endif %}
+
+<div class="-mt-16">
+    {% include "partials/filter_bar.html" %}
+    <div class="text-center main-title px-0 md:w-full mx-8 md:mx-12">
+        <div class="my-4 flex flex-col items-start">
+            <h1 class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal">
+            {{category | replace(from='-', to=' ' ) | title}}
+            </h1>
+            test
+            <div class="text-xl text-gray-800">
+                {{ paginator.total_pages ~ " People"}}
+            </div>
+        </div>
+
+        <hr/>
+
+        <div>
+            <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 xl:grid-cols-4 lg:max-w-none">
+                {%- for page in paginator.pages %} 
+                    {% include "partials/person_card.html" %} 
+                {%- endfor %}
+            </div>
+            <hr class="mt-6" />
+            <p class="text-center text-sm mt-2 mb-16">
+              {% if paginator.previous %}
+              <a
+                class="border-transparent"
+                aria-label="First page"
+                href="{{ paginator.first }}"
+                >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+                "partials/icons/svgPrevPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <a
+                class="border-transparent"
+                aria-label="Previous page"
+                href="{{ paginator.previous }}"
+                >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+              include "partials/icons/svgFirstPageIcon.html" %}{% include
+              "partials/icons/svgFirstPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+              "partials/icons/svgFirstPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+              paginator.next %}
+              <a
+                class="border-transparent"
+                aria-label="Next page"
+                href="{{ paginator.next }}"
+                >{% include "partials/icons/svgNextPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <a
+                class="border-transparent"
+                aria-label="Last page"
+                href="{{ paginator.last }}"
+                >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+                "partials/icons/svgNextPageIcon.html" %}</a
+              >
+              {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+              "partials/icons/svgLastPageIcon.html" %}{% include
+              "partials/icons/svgLastPageIcon.html" %} {% endif %}
+            </p>
+        </div>
+    </div>
+
+</div>
+
+{% endblock content %}

templates/partials/newsCard.html

@@ -0,0 +1,57 @@
+<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
+  <div class="flex-1">
+    <a href={{ post.permalink }} class="block">
+      <div class="flex-shrink-0">
+        {% if post.extra.imgPath %}
+        {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', to=post.extra.imgPath)) %}
+        <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="" />
+        {% endif %}
+      </div>
+      <div class="flex-1 bg-white p-4 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-xl leading-7 font-medium text-gray-900 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal leading-5 text-gray-500 text-left">
+          {{ post.description }}
+        </p>
+        {% endif %}
+    </a>
+    <div class="flex items-center">
+      <div class="flex justify-between items-center">
+        <ul class="list-none flex author-list my-10 mr-2 px-0">
+            {% if post.taxonomies.people %}
+            {% for author in post.taxonomies.people %}
+            {% set author_path = 'people/' ~ author ~ '/index.md' %}
+            {% set people = get_section(path="people/_index.md") %}           
+            {% set pages_str = people.pages | json_encode() | as_str %}
+            {% if pages_str is containing(author) %}
+                {% set author = get_page(path=author_path) %}
+                {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
+          <li class="author-list-item">
+            <a href="{{ author.permalink }}" tooltip="{{ author.title }}">
+              <img src="{{ author_img }}" alt="{{ author.title }}" class="
+                  w-8
+                  h-8
+                  rounded-full
+                  bg-gray-200
+                  border-2 border-white
+                " />
+            </a>
+          </li>
+          {% endif %}
+          {% endfor %}
+          {% endif %}
+        </ul>
+      </div>
+
+      <p class="text-gray-700 text-xs">
+        <time datetime="{{post.date}}">
+          {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
+        </time>
+      </p>
+    </div>
+  </div>
+</div>
+</div>

templates/partials/newsPosts.html

@@ -0,0 +1,70 @@
+{% block content %}
+
+<div class="text-center main-title px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  <h1
+    class="tracking-tight text-left text-2xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set category = path_array[2] %}
+    The Latest from ThreeFold   
+    {% if taxonomy == "news-category" %} - 
+        {{category | replace(from='-', to=' ' ) | title}}
+    {% endif %}
+  </h1>
+  <div>
+    <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+        {% if "Engineering" == "Engineering"%}
+            {% include "partials/newsCard.html" %} 
+        {%endif%} {%- endfor %}
+    </div>
+    <hr class="mt-6" />
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}

templates/partials/newsSidebar.html

@@ -0,0 +1,38 @@
+
+<div class="mx-8 md:mx-4 flex flex-col">
+    <div class="flex flex-col mb-12 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER NEWS BY</h4>
+        <a id="all" class="mb-3 text-black font-normal" href="/newsroom">All</a>
+        {% set taxonomy = get_taxonomy(kind="news-category") %}
+        {% set categories = taxonomy.items %}
+        {% for category in categories %}
+            {% set path = category.name | slugify %}
+            {% set fullpath = "/news-category/" ~ path %}
+            <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{category.name}} </a>
+        {% endfor %}
+    </div>
+
+{% set section = get_section(path="newsroom/_index.md")%}
+
+    <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FEATURED NEWS</h4>
+
+        {% for page in section.pages %}
+        {% if page.extra.isFeatured %}
+            <a class="mb-3 text-blue-700" href={{page.permalink}}>{{ page.title }}</a>
+        {% endif %}
+        {% endfor %}
+        
+    </div>
+</div>
+
+<script>
+    function setActiveCategory() {
+        let activeCategory = window.location.pathname.split("/")[2]    
+        if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeCategory)}
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveCategory()
+</script>

templates/partials/pageBox.html

@@ -2,7 +2,7 @@
     <a href="{{page.permalink}}" class="text-lg font-medium cursor-pointer text-blue-400 py-4">
         {{page.title | safe}}
     </a>
-    {% include "partials/categories.html" %}
+    {% include "partials/tags.html" %}
     <p>
         {{page.description | safe}}
     </p>

templates/partials/partnerCard.html

@@ -0,0 +1,22 @@
+<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
+  <div class="flex-1">
+    <a href="{{post.permalink}}" class="block">
+      
+      <div class="flex-shrink-0">
+        {% set url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', to=post.extra.imgPath)) %}
+        <img class="h-48 w-full mx-auto object-cover" src="{{url}}" alt="{{post.title ~ ' Picture'}}" />
+      </div>
+      <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-xl leading-7 font-medium text-gray-900 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal leading-6 text-gray-500 text-left">
+          {{ post.description }}
+        </p>
+        {% endif %}
+    </a>
+  </div>
+</div>
+</div>

templates/partials/partnersCards.html

@@ -0,0 +1,69 @@
+{% block content %}
+
+<div class="text-center px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  <h1
+    class="tracking-tight text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set category = path_array[2] %}
+    {% if taxonomy == "partners-category" %} - 
+        {{category | replace(from='-', to=' ' ) | title}}
+    {% endif %}
+  </h1>
+  <div>
+    <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+        {% if "Engineering" == "Engineering"%}
+            {% include "partials/partnerCard.html" %} 
+        {%endif%} {%- endfor %}
+    </div>
+    <hr class="mt-6" />
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}

templates/partials/partnersSidebar.html

@@ -0,0 +1,24 @@
+<div class="mx-8 md:mx-4 flex flex-col">
+    <div class="flex flex-col mb-12 mr-8 lg:mr-16">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER PARTNERS BY</h4>
+        <a id="all" class="mb-3 text-black font-normal" href="/partners">All</a>
+        {% set taxonomy = get_taxonomy(kind="partners-category") %}
+        {% set categories = taxonomy.items %}
+        {% for category in categories %}
+        {% set path = category.name | slugify %}
+        {% set fullpath = "/partners-category/" ~ path %}
+        <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{category.name}} </a>
+        {% endfor %}
+    </div>
+</div>
+
+<script>
+    function setActiveCategory() {
+        let activeCategory = window.location.pathname.split("/")[2]
+        if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeCategory) }
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveCategory()
+</script>

templates/partials/personCard.html

@@ -0,0 +1,26 @@
+<div class="flex flex-col px-0 sm:px-4 pb-2">
+    <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left">
+        {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
+        <img src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
+        <div>
+            <h2 class="text-2xl">{{page.title}}</h2>
+            <div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis">
+                {% if page.description %}
+                    {{page.description}}
+                {% else %}
+                    {{page.content | safe}}
+                {% endif %}
+            </div>
+            <div class="my-2 flex flex-row items-start flex-wrap">
+            {% if page.taxonomies.memberships %}
+            {% for tag in page.taxonomies.memberships %}
+                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 text-xs font-light bg-transparent hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+                    {{tag}}
+                </a>
+            {% endfor %}
+            {% endif %}
+            </div>
+        </div>
+    </a>
+</div>
+

templates/partials/person_card.html

@@ -0,0 +1,26 @@
+<div class="flex flex-col px-0 sm:px-4 pb-2">
+    <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left">
+        {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
+        <img src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
+        <div>
+            <h2 class="text-2xl">{{page.title}}</h2>
+            <div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis">
+                {% if page.description %}
+                    {{page.description}}
+                {% else %}
+                    {{page.content | safe}}
+                {% endif %}
+            </div>
+            <div class="my-2 flex flex-row items-start flex-wrap">
+            {% if page.taxonomies.memberships %}
+            {% for tag in page.taxonomies.memberships %}
+                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 text-xs font-light bg-transparent hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+                    {{tag}}
+                </a>
+            {% endfor %}
+            {% endif %}
+            </div>
+        </div>
+    </a>
+</div>
+

templates/partials/postCard.html

@@ -1,37 +1,75 @@
+{% if post.date %}
+{% if post.taxonomies.people %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(post.taxonomies.people[0]) %}
+{% set author_path = 'people/' ~ post.taxonomies.people[0] ~ '/index.md' %}
+{% set author = get_page(path=author_path) %}
+{% set content = get_page(path=author_path) %}
+{% endif %}
+{% endif %}
+
 <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
-    <div class="flex-shrink-0">
-      <img class="h-48 w-full mx-auto object-cover" src=/{{post.extra.imgPath}} alt="" />
-    </div>
-    <div class="flex-1 bg-white p-6 flex flex-col justify-between">
-      <div class="flex-1">
-        <a href={{ post.permalink }} class="block">
-          <h3 class="mt-2 text-xl leading-7 font-medium text-gray-900 text-left not-italic">
-            {{ post.title }}
-          </h3>
-          {% if post.description %}
-          <p class="mt-3 text-sm font-normal leading-6 text-gray-500 text-left">
-              {{ post.description }}
+  <div class="flex-1 border-b">
+    <a href="{{ post.permalink }}" class="block">
+        {% if post.extra.imgPath %}
+      {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md',
+      to=post.extra.imgPath)) %}
+      <div class="flex-shrink-0">
+        <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="{{post.title ~ ' Picture'}}" />
+      </div>
+      {%endif%}
+      <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-xl leading-6 font-medium text-gray-900 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal text-gray-500 text-left">
+          {{ post.description }}
         </p>
         {% endif %}
-        </a>
-      </div>
-      <div class="mt-6 flex items-center">
-        <div>
-          <p class="text-sm leading-5 font-medium text-gray-900 text-left">
-              {{ post.extra.author }}
-          </p>
-          <div class="flex text-sm leading-5 text-gray-500 text-left">
-            <time datetime="2020-03-16">
-                {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
-            </time>
-            <span class="mx-1">
-              &#xB7;
-            </span>
-            <span>
-              6 min read
-            </span>
+        <div class="article hidden">{{ post.content | safe }}</div>
+
+        <div class="w-full post-card-meta py-3">
+          <div class="avatars">
+            <div class="flex">
+              <div class="flex">
+                <ul class="list-none flex author-list mr-2 pl-0">
+                  {% if author %}
+                  {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
+                  replace(from='index.md', to=author.extra.imgPath)) %}
+                  <li class="author-list-item"><img alt="{{author.title}}" src="{{author_img}}"
+                      class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"></li>
+                  {% endif %}
+                </ul>
+              </div>
+              <div class="flex flex-col text-left leading-none uppercase">
+                {% if author %}
+                <p class="text-gray-700 text-xs">{{ author.title }}</p>
+                {% endif %}
+                <p class="text-gray-700 text-xs">
+                  <time datetime="{{post.date}}">
+                    {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
+                  </time>
+                </p>
+                <p class="flex justify-between lowercase my-2 items-center text-gray-700 text-xs"><span id="time"
+                    class="time"></span>
+                </p>
+              </div>
+              <br />
+            </div>
           </div>
         </div>
-      </div>
-    </div>
+    </a>
   </div>
+
+</div>
+</div>
+
+<style>
+  .border-b {
+    border-bottom-width: 1px !important;
+  }
+</style>
+{% endif %}

templates/partials/roadmapCta.html

@@ -0,0 +1,47 @@
+{% set cta_path = 'roadmap/cta/index.md' %}
+{% set cta = get_page(path=cta_path) %}
+
+<style>
+    .margin-bottom-large p {
+        width: 60%;
+        margin-right: auto;
+        margin-left: auto;
+        font-family: open sans, sans-serif;
+        color: #fff;
+        font-size: .8em;
+        text-align: center;
+        letter-spacing: -.02em;
+        margin-top: 0;
+        margin-bottom: 1em;
+        padding-top: 0;
+        -webkit-align-self: auto;
+        -ms-flex-item-align: auto;
+        -ms-grid-row-align: auto;
+        align-self: auto;
+        line-height: 1.6;
+        font-weight: 400;
+    }
+</style>
+{% block content %}
+
+<div data-w-id="0f683f86-f550-3954-0d49-2cb73ef14054" class="section-timeline-cta">
+    <div class="container-2">
+        <div class="padding-vertical-xlarge">
+            <div style="opacity: 1;" class="timeline-main_heading-wrapper">
+                <div class="margin-bottom-medium">
+                    <div class="timeline_date-text">{{cta.title}}</div>
+                </div>
+                <div class="margin-bottom-small">
+                    <div class="paragraph-large _11">{{cta.description}}<br></div>
+                </div>
+                <div class="margin-bottom-large">
+                    <p class="paragraph-large">{{cta.content | safe }}</p>
+                </div>
+                <a href="https://fluxofficial.medium.com/" target="_blank" class="button_zelcore roadmap w-button"
+                    data-ur1313m3t="true">More News</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock content %}

templates/partials/roadmapHeading.html

@@ -0,0 +1,37 @@
+{% set header_path = 'roadmap/heading/index.md' %}
+{% set header = get_page(path=header_path) %}
+{% block content %}
+
+<style>
+    .paragraph-3,
+    p {
+        width: 65%;
+        margin-right: auto;
+        margin-left: auto;
+        color: hsla(0, 0%, 100%, .8);
+        font-size: .7em;
+        text-align: center;
+        margin-top: 0;
+        margin-bottom: 1em;
+        padding-top: 0;
+        -webkit-align-self: auto;
+        -ms-flex-item-align: auto;
+        -ms-grid-row-align: auto;
+        align-self: auto;
+        font-size: .7em;
+        line-height: 1.6;
+        font-weight: 400;
+    }
+</style>
+
+<div class="section-timeline-heading">
+    <div class="container-2">
+        <div class="padding-vertical-xlarge">
+            <h5 class="heading-2 mob rr mt-5">{{ header.title }}</h5>
+            <h2 class="title_section roadmap">{{ header.extra.subtitle }} <br />{{header.extra.subtitle2 }}</h2>
+            <p class="paragraph-3 roadmap">{{header.content | safe }}</p>
+        </div>
+    </div>
+</div>
+
+{% endblock content %}

templates/partials/roadmapTimeline.html

@@ -0,0 +1,61 @@
+{% set timeline_path = 'timeline/_index.md' %}
+{% set timeline = get_section(path=timeline_path) %}
+
+
+<style>
+  ul {
+    margin-bottom: 0;
+    padding-left: 2em;
+    color: rgba(245, 245, 250, .47);
+    font-size: 1.4vw;
+    list-style: disc;
+  }
+
+  li {
+    margin-bottom: 0.5em;
+    color: #fff;
+    font-size: .8em;
+    line-height: 1.6;
+    font-weight: 400;
+  }
+
+  li a {
+    color: #5d91ff;
+    font-weight: 600;
+    text-decoration: none;
+  }
+</style>
+{% block content %}
+
+
+<div class="section-timeline">
+  <div class="container-2">
+    <div class="timeline_wrapper">
+      <div class="timeline_progress">
+        <div class="timeline_progress-bar"></div>
+      </div>
+      {% for post in timeline.pages %}
+      <div data-w-id="0f683f86-f550-3954-0d49-2cb73ef13f85" class="timeline_item">
+        <div id="w-node-_0f683f86-f550-3954-0d49-2cb73ef13f86-45cac3f1" class="timeline_left"
+          style="will-change: opacity; opacity: 0.25;">
+          <div class="timeline_date-text">{{ post.extra.title }}</div>
+        </div>
+        <div id="w-node-_0f683f86-f550-3954-0d49-2cb73ef13f89-45cac3f1" class="timeline_centre">
+          <div class="timeline_circle" style="will-change: background; background-color: rgb(65, 65, 65);"></div>
+        </div>
+        <div id="w-node-_0f683f86-f550-3954-0d49-2cb73ef13f8b-45cac3f1" class="timeline_right"
+          style="will-change: opacity; opacity: 0.25;">
+          <div class="margin-bottom-xlarge">
+            <div class="timeline_title">{{ post.title }}</div>
+            {{ post.content | safe }}
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+      <div class="overlay-fade-bottom"></div>
+      <div class="overlay-fade-top"></div>
+    </div>
+  </div>
+</div>
+
+{% endblock content %}

templates/partials/socialLinks.html

@@ -1,4 +1,8 @@
-<div class="flex space-x-6">
+{% if not section %}
+{% set section = page %}
+{% endif %}
+
+<div class="flex space-x-4">
     {% for key, link in section.extra.socialLinks %}
 
         <a href="{{link}}" target="_blank" class="text-gray-400 hover:text-gray-500">
@@ -7,12 +11,18 @@
         {% include "partials/icons/svgFacebookIcon.html" %}
         {% elif key == "Github" %}
         {% include "partials/icons/svgGithubIcon.html" %}
+        {% elif key == "Github2" %}
+        {% include "partials/icons/svgGithubIcon.html" %}
         {% elif key == "Instagram" %}
         {% include "partials/icons/svgInstagramIcon.html" %}
+        {% elif key == "LinkedIn" %}
+        {% include "partials/icons/svgLinkedInIcon.html" %}
         {% elif key == "Twitter" %}
         {% include "partials/icons/svgTwitterIcon.html" %}
         {% elif key == "Dribbble" %}
         {% include "partials/icons/svgDribbbleIcon.html" %}
+        {% elif key == "Telegram" %}
+        {% include "partials/icons/svgTelegram.html" %}
         {% endif %}
         </a>
 

templates/partials/tagCard.html

@@ -0,0 +1,69 @@
+{% block content %}
+
+<div class="text-center px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  <h1
+    class="tracking-tight text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set tag = path_array[2] %}
+    {% if taxonomy == "tags" %} # 
+        {{tag | replace(from='-', to='_' ) | title}}
+    {% endif %}
+  </h1>
+  <div>
+    <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+        {% if "Engineering" == "Engineering"%}
+            {% include "partials/tagCard.html" %} 
+        {%endif%} {%- endfor %}
+    </div>
+    <hr class="mt-6" />
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}

templates/partials/tags.html

@@ -1,5 +1,5 @@
 <div class="flex mb-4">
-    {% for tag in page.taxonomies.categories %}
+    {% for tag in page.taxonomies.tags %}
         <div class="bg-gray-200 rounded font-semibold text-xs w-auto px-2 py-1 mr-2">{{tag}}</div>
     {% endfor %}
 </div>

templates/partials/tagsCards.html

@@ -0,0 +1,69 @@
+{% block content %}
+
+<div class="text-center px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  <h1
+    class="tracking-tight text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set tag = path_array[2] %}
+    {% if taxonomy == "tags" %} # 
+        {{tag | replace(from='-', to='_' ) | title}}
+    {% endif %}
+  </h1>
+  <div>
+    <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+        {% if "Engineering" == "Engineering"%}
+            {% include "partials/tagCard.html" %} 
+        {%endif%} {%- endfor %}
+    </div>
+    <hr class="mt-6" />
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}

templates/partials/tagsSidebar.html

@@ -0,0 +1,23 @@
+<div class="mx-8 md:mx-4 flex flex-col">
+    <div class="flex flex-col mb-12 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER BY</h4>
+        {% set taxonomy = get_taxonomy(kind="tags") %}
+        {% set tags = taxonomy.items %}
+        {% for tag in tags %}
+        {% set path = tag.name | slugify %}
+        {% set fullpath = "/tags/" ~ path %}
+        <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> #{{tag.name}} </a>
+        {% endfor %}
+    </div>
+</div>
+
+<script>
+    function setActiveCategory() {
+        let activeCategory = window.location.pathname.split("/")[2]
+        if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeCategory) }
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveCategory()
+</script>

templates/tags/single.html

@@ -2,11 +2,13 @@
 
 {% block content %}
 
-{% set section = get_section(path="join-us/_index.md")%}
 <main class="pt-16">
-    {{ section.content | safe}}
-    <hr>
-    {% include "partials/page_list.html" %}
+
+    <div class="flex flex-col md:flex-row">
+        {% include "partials/tagsCards.html" %}
+        {% include "partials/tagsSidebar.html" %}
+    </div>
  </main> 
  
  {% endblock content %}
+

templates/taxonomy_list.html

@@ -0,0 +1,4 @@
+{% extends "index.html" %}
+
+{% block content %}
+{% endblock content %}

templates/taxonomy_single.html

@@ -0,0 +1,25 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+<main class="pt-16">
+
+    <div class="flex flex-col md:flex-row">
+        {% if current_path is containing("partners") %}
+        {% include "partials/partnersCards.html" %}
+        {% include "partials/partnersSidebar.html" %}
+        {% elif current_path is containing("tags") %}
+        {% include "partials/tagsCards.html" %}
+        {% include "partials/tagsSidebar.html" %}
+        {% elif current_path is containing("memberships") %}
+        {% include "partials/memberships.html" %}
+        {% elif current_path is containing("people") %}
+        {% else %}
+        {% include "partials/newsPosts.html" %}
+        {% include "partials/newsSidebar.html" %}
+        {% endif %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
+