updated tailwind, added menu & button shortcodes

content/header/_index.md

@@ -14,39 +14,52 @@ extra:
 
 ##### PURPOSE
 
+{% button() %}
+
 ###### [The Internot](/apage)
 
 Whats wrong with the [internet](/apage)
 
 <br>
 
+{%% end %%}
+
+{% button() %}
+
 ###### Our Internet
 
 Vision for the new internet
 
+{%% end %%}
+
 |||
 
 ##### ECOSYSTEM
 
-<br>
+{% button() %}
-<br>
 
 #### OurWorld DAO
 
 Be a part of governance
 
-<br>
+{%% end %%}
+
+{% button() %}
 
 #### Communities
 
 Explore communities in OurWorld
 
-<br>
+{%% end %%}
+
+{% button() %}
 
 #### DAOs
 
 Decentralized autonomous organizations
 
+{%% end %%}
+
 |||
 
 ### APPLICATIONS
@@ -75,7 +88,7 @@ Projects in OurWorld
 
 Be a part of the new internet
 
+{% end %}
+
 - [Join us]("/join-us")
 - [Blog]("/blog")
-
-{% end %}

package.json

@@ -21,16 +21,17 @@
     "maintained node versions"
   ],
   "devDependencies": {
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.4.2",
     "glob": "^7.1.7",
     "glob-all": "^3.2.1",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.8",
     "postcss-cli": "^8.3.1",
     "postcss-csso": "^5.0.1",
     "postcss-import": "^14.0.2",
     "postcss-nesting": "^8.0.1",
     "rimraf": "^3.0.2",
-    "tailwindcss": "^2.2.19",
+    "tailwindcss": "^3.0.23",
     "ts-rmb-http-client": "^1.0.3",
     "typescript": "^4.5.5"
   },

tailwind.config.js

@@ -14,7 +14,10 @@ module.exports = {
       white: '#ffffff',
       black: '#000000',
       gray: colors.gray,
+      slate: colors.slate,
+      stone: colors.stone,
       yellow: colors.yellow,
+      orange: colors.orange,
       blue: {
         '100': '#bbeeff',
         '200': '#00aaff',

templates/partials/header.html

@@ -91,7 +91,7 @@
 <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 px-6 py-5 sm:px-8 sm:py-6 lg:px-12 lg:justify-start lg:space-x-20">
+        <div class="mx-auto flex z-50 shadow justify-between items-center px-6 py-5 sm:px-8 md:px-12 sm:py-6 lg:px-20 lg:justify-start lg:space-x-20">
             <div>
                 <a href="/" class="flex">
                     <img class="w-20 h-auto sm:w-32" src="{{section.extra.logoPath}}" alt="Ourworld Logo" />
@@ -121,13 +121,13 @@
     {% if '<a' in header_label %}
         {% set link_label = header_label | striptags %}
         {% set link_path = header_label | split(pat="%22") | safe%}
-        <a href="{{link_path[1]}}" class="text-md leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+        <a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
             {{link_label}}
         </a>
     {% else %}
         <div class="relative">
             {% set button_id = header_label ~ "-menu-btn" | slugify %}
-        <button type="button" id="{{button_id}}" class="font-medium text-gray-900 group inline-flex items-center space-x-2 text-md leading-6 font-normal hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
+        <button type="button" id="{{button_id}}" class="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>
             <!--
             Heroicon name: chevron-down

templates/shortcodes/admonition.html

@@ -7,10 +7,10 @@
 {% set admonition = parsed_first_line | first %}
 {% set style = "" %}
 
-
 {% set content = body | split(pat="\n") | slice(start=2) | join(sep="\n") %}
 
-<!-- hides content if doesn't adhere to admonition formatting -->
+<!-- sets admonition type depending on qualifiers and modifiers 
+    hides content if doesn't adhere to admonition formatting -->
 {% if admonition == "!!!" %}
     {% set classes = "admonition" %}
 {% elif admonition == "???" %}

templates/shortcodes/button.html

@@ -0,0 +1,3 @@
+<button class="border-transparent flex flex-col border-2 w-80 items-start rounded h-24 transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2">
+    {{ body | trim_start_matches(pat="<p></p>") | safe}}
+</button>

templates/shortcodes/menu.html

@@ -27,19 +27,28 @@ Parameters:
 
 <div class="{{classes}}" style="{{styles}}">
     {% for column in columns%} 
-
         <!-- Hides empty columns if displayed vertically in small screen -->
         {% if column | as_str | length < 10 %} 
             <div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
-                {{ column | safe }}
+                {{column | split(pat="{% button() %}") | slice(end=1)}}
+                {% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
+                    {% set body = button %}
+                    {% include "shortcodes/button.html" %}               
+                {% endfor %}
             </div>
 
         {% else %}
             <div class="{{column_classes}}">
-                <!-- handles mermaid markdown content display -->
+                {{column | split(pat="{% button() %}") | slice(end=1) | first | safe}}
-                {{ column | safe }}
+                <hr>
-            </div>
+                <br/>
 
+                <!-- handles mermaid markdown content display -->
+                {% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
+                    {% set body = button %}
+                    {% include "shortcodes/button.html" %}               
+                {% endfor %}
+            </div>
         {% endif %}
     {% endfor %}
 </div>