Update tf_update.yml

.github/workflows/tf_update._yml

@@ -1,23 +0,0 @@
-# name: Threefold_io
-# on: 
-#   push:
-#     branch: [ development ]
-
-# jobs:
-#   job_one:
-#     name: Deploy
-#     runs-on: ubuntu-latest
-#     steps:
-#     - name: pushing latest change on www2.threefold.io
-#       uses: appleboy/ssh-action@master
-#       with:
-#         host: www2.threefold.io
-#         username: root
-#         key: ${{ secrets.TF_SECRET }}
-#         port: 22
-#         script: |
-#           cd /opt/www_threefold_io/
-#           git log -1
-#           git restore static/css/index.css
-#           git pull
-#           npm run build

.github/workflows/tf_update.yml

@@ -0,0 +1,23 @@
+name: www2.ourverse.tf
+on:
+  push:
+    branch: [development]
+
+jobs:
+  job_one:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+      - name: pushing latest change on www2.ourverse.tf
+        uses: appleboy/ssh-action@master
+        with:
+          host: www2.ourverse.tf
+          username: webuser
+          key: ${{ secrets.TF_SECRET }}
+          port: 34022
+          script: |
+            cd websites/www2/www_ourverse/
+            git log -1
+            git restore .
+            git pull
+            bash build.sh

.gitignore

@@ -1,10 +1,3 @@
-examples/builder
-examples/docker
-examples/publisher
-examples/texttools
-examples/gittools
-examples/tmux
-examples/vredis2
 *dSYM/
 publisher/publish
 install_publisher
@@ -20,7 +13,6 @@ src/.temp
 content/news
 content/person
 content/project
-node_modules
 !.env.example
 .env
 .env.*
@@ -33,3 +25,5 @@ run*
 install*
 public
 static/css
+tailwindcss
+.github

.gitpod.yml

@@ -0,0 +1,7 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: sh build
+    command: sh build

README.md

@@ -1,104 +1,11 @@
-# OurWorld Website
+# OurVerse Website
 
-## About
+https://ourverse.tf/
 
-A website created using Zola, a static site generator.
 
-- The contents of the pages reside in the markdown files in /content (written in CommmonMark)
+- deployed site on https://ourworld-tsc.github.io/www_ourverse gets updated on each development branch update
-- The pages are rendered using HTML templates with Tailwind CSS framework in /templates
 
-## Getting Started
 
-This repository is meant to use as a template for separate projects as well.
+## howto use
 
-To use this repository as a template, simply:
+Information how to use the framework see https://github.com/threefoldfoundation/www_threefold_io#readme 
-
-- clone repository
-- add your own content to templates directory (see more below)
-- [install Zola](https://www.getzola.org/documentation/getting-started/installation/),
-- run `npm install` to install dependencies
-- run `npm run start`
-
-## How to create pages using this template
-
-### Structure of the content directory
-
-Every index.md file in a content directory corresponds to a page, and the landing page is content/\_index.md.
-The path of each page is simply its path relavant to the root of the content directory.
-
-Ex:
-content/\_index.md -> yoururl.com/
-content/blog/\_index.md -> yoururl.com/blog
-content/careers/index.md or content/careers.md -> yoururl.com/careers
-
-### Section Templates
-
-#### Blog.html
-
-The blog page is created by default if there is a blog folder in the content directory. The blog page consists of a featured post row, a paginated grid of posts sorted by recency, and a side nav of post categories and featured posts.
-
-Blog posts can have categories, and can be filtered by said categries. To add a new category simply define the posts category in the yaml header of the blog's index.md file. See /content/blog/2019/01/post-3/index.md for example. The side navigation and category based listing will be automatically updated.
-
-To make a blog post featured, simply add an isFeatured attribute to the yaml header of the blog post. The most recent featured blog post wiil be displayed on the heading row of the blog page, and the rest will be displayed under featured posts in the side nav. See /content/blog/2019/03/post-5/index.md for implementation.
-
-#### Section.html
-
-The default section template, displays section body without styling (except for margins), and displays subpages of the section below. The subpages of the page are displayed as small summaries of pages with title, description, and tags, as rendered by partials/pageBox.html. The subpages are grouped by the taxonomy name passed in as the "group_pages_by" extra attribute, defined in the section's yaml header.
-
-### Creating custom pages
-
-To create your own page, simply create a markdwn file following the examples provided above.
-By default, the markdown file will be displayed plainly as it is.
-
-#### Page templates
-
-If you wish to display your markdown files in a specific page template, simply define the template you would like to use in the yaml header of your markdown file. For instance, the blogPage.html template displays blog posts with author info, date, side margins, and a hero image on top of the post. See any blog page in /content for implementation.
-
-### Shortcodes
-
-To give website creators freedom in styling without necessitating getting outside of the /content directory and in to the html files, the template has a few features.
-
-- #### row.html shortcode
-
-Markdown only goes vertical, but this shortcode allows one to add horizontal elements to their web pages. Simply use the {% row() %} {% end %} syntax and place your content in between. The row shortcode can also take a bgPath parameter if you want your row to have a background. (see /content/careers/index.html)
-
-You can create columns in your row by using three vertical bars. ( ||| )
-You can fill in your columns with regular markdown, but they can also be empty.
-
-- #### menu.html
-
-Just like row, menu renders a row with columns split by ( ||| ). However, menu is specifically used to create menu objects for expandible header items. The menu shortcode supports button shortcodes in itself, and provides styling for the menu.
-
-- #### button.html
-
-A simple button shortcode that takes a body and displays it inside a button that is animated on hover. The button also is entirely clickable, and navigates to the first of if any children link elements.
-
-- #### mermaid.html
-
-Simple mermaid shorcode that can be used to create mermaid diagrams in markdown. Also supported in row shortcode.
-
-[Mermaid]("https://mermaid-js.github.io/mermaid/#/")
-
-- #### annotation.html
-
-Simple annotation shorcode that can be used to create annotation objects in markdown.
-
-(note: inline and inline end qualifiers do not work.)
-
-[Annotations]("https://squidfunk.github.io/mkdocs-material/reference/annotations/#usage")
-
-### Image sizing with source paths
-
-You can size your markdown images by adding #small, #medium or #large at the end of the images source url.
-See /content/\_index.md for implementation.
-
-### Header & Footer
-
-The header and footer are also created from markdown files in the content directory. In /content/header/\_index.md, each header item is bulleted. If a header item has a row beneath it, the row will be displayed as a sub-menu on click. Otherwise, if header item is a link, it will simply navigate to the linked page.
-
-The footer, likewise, is structured using the row shortcode. However the left section with page summary is built in. To edit the site destcription, one should edit the description (in the yaml header) of the footer md file. To edit the social links, simply add the social outlets name and your link into the socialLinks dictionary attribute on the yaml header of the footer/\_index.md. If a social icon exists for the social outlet, the link wiill be automatically rendered within the icon, displayed in the footer.
-
-## Resources & References
-
-This project was started using a [Zola Tailwind starter set](https://github.com/brycewray/zola_twcss)
-Some templates were created using [Tailwind UI](https://tailwindui.com)

build.sh

@@ -1,7 +1,44 @@
-rm -rf build
+echo "Starting build..."
-# rm -rf public
+
-npm run prod:build
+# TODO: Check if current version is latest to avoid redundant installation
-rsync -rav static/ public/
+if [[ -f "tailwindcss" ]]
-echo 'see http://localhost:3000/'
+then
-node -e '(e=require("express"))().use(e.static("public")).listen(3000)'
+    rm tailwindcss
+fi
+
+# checks os and architecture for correct release
+# https://stackoverflow.com/a/8597411 
+echo "Installing & building tailwind..."
+ASSET="tailwindcss"
+
+if [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    ASSET="$ASSET-linux"
+elif [[ "$OSTYPE" == "darwin"* ]]; then
+    ASSET="$ASSET-macos"
+fi
+if [[ "$(uname -m)" == "x86_64"* ]]; then
+    ASSET="$ASSET-x64"
+elif [[ "$(uname -m)" == "arm64"* ]]; then
+    ASSET="$ASSET-arm64"
+fi
+
+curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/${ASSET}"
+chmod +x $ASSET
+mv $ASSET tailwindcss
+
+
+# initialized and configures tailwind if not configured
+echo "Initializing tailwind..."
+if [[ ! -f "tailwind.config.js" ]]
+then
+    ./tailwindcss init
+    sed -i '' "s|  content: \\[\\],|  content: \\['./templates/**/*.html'\\],|g" tailwind.config.js
+fi
+
+# compiles tailwind css for prod & builds project
+echo "Compiling tailwindcss and building zola project..."
+rm -rf public static/css
+./tailwindcss -i css/index.css -o ./static/css/index.css --minify
+zola build
+
 

config.toml

@@ -1,5 +1,5 @@
 # The URL the site will be built for
-base_url = "https://www4.ourverse.tf"
+base_url = "https://www2.ourverse.tf"
 # Change this to your own URL! Please note this variable **must** be uncommented.
 
 title = "ThreeFold"
@@ -55,19 +55,19 @@ smart_punctuation = true
 name = "categories"
 feed = true
 paginate_by = 2
-paginate_path = "/blog-posts"
+paginate_path = "blog-posts"
 
 [[taxonomies]]
 name = "roles"
 feed = true
 paginate_by = 2
-paginate_path = "/join-us"
+paginate_path = "join-us"
 
 [[taxonomies]]
 name = "tags"
 feed = true
 paginate_by = 2
-paginate_path = "/join-us"
+paginate_path = "join-us"
 
 [extra]
 # Put all your custom variables here

content/_index.md

@@ -6,184 +6,4 @@ updated: 2021-02-20T14:40:00-06:00
 draft: false
 extra:
   author:
-  imgPath: blog/realizing_the_promise/
 ---
-
-<!-- section 1 (header) -->
-
-{% row(style="center lean-right") %}
-
-### EXPERIENCE
-
-## ABUNDANCE
-
-<br>
-
-A better world is one where we all have access to endless information and oppurtunities. OurVerse exists to achieve that dream.
-
-<button>[Explore]("")</button>
-
-|||
-
-![Image](/images/OWAsset-15.png#large)
-
-{% end %}
-
-{{ space() }}
-
-{% row(style="center narrow") %}
-
-<br>
-
-![Image](/images/OWAsset-16.png)
-
-### THE END OF
-
-## SCARCITY.
-
-<br>
-
-Learn whatever your heart desires. Access any oppurtunity to earn. Enter any shop. Travel everywhere. In OurVerse, you are limited by only your own imagination.
-
-{% end %}
-
-{{ space() }}
-
-{% row(style="center moderate") %}
-
-<br>
-
-![Image](/images/OWAsset-17.png)
-
-<br>
-
-#### ENDLESS KNOWLEDGE AND EDUCATION
-
-<br>
-
-Learn whatever your heart desires. Access any oppurtunity to earn. Enter any shop. Travel everywhere. In OurVerse, you are limited by only your own imagination.
-
-|||
-
-<br>
-
-![Image](/images/OWAsset-18.png)
-
-<br>
-
-#### A BETTER EARNING MODEL
-
-<br>
-
-Learn whatever your heart desires. Access any oppurtunity to earn. Enter any shop. Travel everywhere. In OurVerse, you are limited by only your own imagination.
-
-{% end %}
-
-{% row(style="center moderate") %}
-
-<br>
-
-![Image](/images/OWAsset-19.png)
-
-<br>
-
-#### EVERY PRODUCT IS ACCESSIBLE
-
-<br>
-
-Learn whatever your heart desires. Access any oppurtunity to earn. Enter any shop. Travel everywhere. In OurVerse, you are limited by only your own imagination.
-
-|||
-
-<br>
-
-![Image](/images/OWAsset-20.png)
-
-<br>
-
-#### THE WORLD IS YOUR OYSTER
-
-<br>
-
-Learn whatever your heart desires. Access any oppurtunity to earn. Enter any shop. Travel everywhere. In OurVerse, you are limited by only your own imagination.
-
-{% end %}
-
-{{ space() }}
-
-{% row(style="center lean-left" bgColor="#c4ffeb") %}
-
-![Image](/images/OWAsset-21.png)
-
-|||
-
-# WORK.
-
-# PLAY.
-
-# **LIVE.**
-
-<br/>
-
-**Anything** you can do in the real world you can do in OurVerse. Only your own imagination limits you. Explore or start building experiences and start earning now!
-
-<button>[USE CASES](/use-cases)</button>
-
-{% end %}
-
-{% row(style="center narrow") %}
-
-<br>
-
-### EVERY IDENTITY IS
-
-## PROTECTED.
-
-<br>
-
-OurVerse users are protected through ThreeFold's digital twin. This allows everyone to communicate, network and collaborate without worrying about data breaches and identity theft.
-
-<br>
-
-![Image](/images/OWAsset-22.png)
-
-{% end %}
-
-{{ space() }}
-
-{% row(style="center lean-left" bgColor="#c6f8ff") %}
-
-![Image](/images/OWAsset-23.png)
-
-|||
-
-#### BUILT BY
-
-### TOGETHERNESS.
-
-<br>
-
-An OurVerse is created by utilizing the world's largest decentralized and peer-to-peer of storage and compute: The ThreeFold Grid.
-
-<br>
-<br>
-
-This provides every OurVerse community with unparalleled security to each user and assures unprecedented sovereignty.
-
-<button>[DISCOVER THE TECH]("")</button>
-
-{% end %}
-
-{% row(style="center narrow invert-color" bgColor="#4dc48f") %}
-
-## WANNA GET **INVOLVED?**
-
-<br/>
-
-Interested in partnering up? Or just wanna say hi?
-
-Drop us a message!
-
-<button>[Email](mailto:info@ourverse.tf)</button>
-
-{% end %}

content/blog/realizing_the_promise/index.md

@@ -8,7 +8,7 @@ taxonomies:
 extra:
   subtitle: "Together with our global community, we're realizing the initial promise of an open-source, peer-to-peer Internet owned by the people."
   author: "Sacha Obeegadoo"
-  imgPath: images/threefold_blog2.png
+  imgPath: realizing_the_promise.png
   isFeatured: "true"
 ---
 

content/footer/_index.md

@@ -7,16 +7,4 @@ extra:
   socialLinks: { Github: "https://" }
 ---
 
-{% row(style="center narrow invert-color" bgColor="#2d103e") %}
 
-## WANNA GET INVOLVED?
-
-<br/>
-
-Interested in partnering up? Or just wanna say hi?
-
-Drop us a message!
-
-<button>[Email](/)</button>
-
-{% end %}

content/header/_index.md

@@ -10,6 +10,6 @@ extra:
 
 - [HOME]("/")
 - [BLOGS]("/blog")
-- [USE CASES]("/")
+- [USE CASES]("/use-cases")
-- [TECH]("/")
+- [TECH]("https://threefold.io/")
 - [GET IN TOUCH]("mailto:info@ourverse.tf")

content/home/index.md

@@ -0,0 +1,205 @@
+---
+title: "OurVerse"
+description: "The only truly decentralized metaverse on the planet awaits you."
+date: 2018-09-14T21:00:00-05:00
+updated: 2021-02-20T14:40:00-06:00
+draft: false
+extra:
+  author:
+  imgPath: blog/realizing_the_promise/
+---
+
+<!-- section 1 (header) -->
+
+{% row(style="center" margin="lean-right") %}
+
+### EXPERIENCE
+
+## ABUNDANCE
+
+<br>
+
+A better world is one where we all have access to endless information and oppurtunities. OurVerse exists to achieve that dream.
+
+<button>[Explore]("https://ourverse.tf/use-cases/")</button>
+
+|||
+
+![Image](OWAsset-15.png#large)
+
+{% end %}
+
+{{ space() }}
+
+{% row(style="center narrow") %}
+
+<br>
+
+![Image](OWAsset-16.png#auto)
+
+### THE END OF
+
+## SCARCITY.
+
+<br>
+
+Learn whatever your heart desires. Access any oppurtunity to earn. Enter any shop. Travel everywhere. In OurVerse, you are limited by only your own imagination.
+
+{% end %}
+
+{{ space() }}
+
+{% row(style="center" margin="moderate") %}
+
+<br>
+
+![Image](OWAsset-17.png)
+
+<br>
+
+#### ENDLESS KNOWLEDGE AND EDUCATION
+
+<br>
+
+Learn whatever your heart desires. Access any oppurtunity to earn. Enter any shop. Travel everywhere. In OurVerse, you are limited by only your own imagination.
+
+|||
+
+<br>
+
+![Image](OWAsset-18.png)
+
+<br>
+
+#### A BETTER EARNING MODEL
+
+<br>
+
+Learn whatever your heart desires. Access any oppurtunity to earn. Enter any shop. Travel everywhere. In OurVerse, you are limited by only your own imagination.
+
+{% end %}
+
+{% row(style="center moderate") %}
+
+<br>
+
+![Image](OWAsset-19.png)
+
+<br>
+
+#### EVERY PRODUCT IS ACCESSIBLE
+
+<br>
+
+Learn whatever your heart desires. Access any oppurtunity to earn. Enter any shop. Travel everywhere. In OurVerse, you are limited by only your own imagination.
+
+|||
+
+<br>
+
+![Image](OWAsset-20.png)
+
+<br>
+
+#### THE WORLD IS YOUR OYSTER
+
+<br>
+
+Learn whatever your heart desires. Access any oppurtunity to earn. Enter any shop. Travel everywhere. In OurVerse, you are limited by only your own imagination.
+
+{% end %}
+
+{{ space() }}
+
+
+{% row(style="center lean-left" bgColor="#c4ffeb") %}
+
+<br>
+<br>
+
+![Image](OWAsset-21.png)
+
+|||
+
+# WORK.
+
+# PLAY.
+
+# **LIVE.**
+
+<br/>
+
+**Anything** you can do in the real world you can do in OurVerse. Only your own imagination limits you. Explore or start building experiences and start earning now!
+
+<button>[USE CASES](/use-cases)</button>
+
+<br>
+<br>
+
+{% end %}
+
+{% row(style="center narrow") %}
+
+<br>
+
+### EVERY IDENTITY IS
+
+## PROTECTED.
+
+<br>
+
+OurVerse users are protected through ThreeFold's digital twin. This allows everyone to communicate, network and collaborate without worrying about data breaches and identity theft.
+
+<br>
+
+![Image](OWAsset-22.png)
+
+{% end %}
+
+{{ space() }}
+
+{% row(style="center lean-left" bgColor="#c6f8ff") %}
+
+<br>
+<br>
+
+![Image](OWAsset-23.png)
+
+|||
+
+#### BUILT BY
+
+### TOGETHERNESS.
+
+<br>
+
+An OurVerse is created by utilizing the world's largest decentralized and peer-to-peer of storage and compute: The ThreeFold Grid.
+
+<br>
+<br>
+
+This provides every OurVerse community with unparalleled security to each user and assures unprecedented sovereignty.
+
+<button>[DISCOVER THE TECH]("https://threefold.io/")</button>
+
+<br>
+<br>
+
+{% end %}
+
+{% row(style="center invert-color" bgColor="#4dc48f" margin="narrow") %}
+
+<br>
+<br>
+
+### WANNA GET **INVOLVED?**
+
+<br/>
+
+Interested in partnering up? Or just wanna say hi?
+
+Drop us a message!
+
+<button>[Email]("mailto:info@ourverse.tf")</button>
+
+{% end %}

content/use-cases/index.md

@@ -9,7 +9,7 @@ extra:
   imgPath:
 ---
 
-{% row(style="center lean-right") %}
+{% row(style="center lean-right" margin="narrow") %}
 
 ## EXPLORE **AWESOME.**
 
@@ -23,7 +23,7 @@ already in OurVerse.
 
 |||
 
-![Image](/images/OVAsset-33.jpg)
+![Image](OWAsset-17.png)
 
 {% end %}
 
@@ -31,7 +31,7 @@ already in OurVerse.
 
 {% row(style="center moderate" anchor="experiences") %}
 
-![Image](/images/OVAsset-27.jpg)
+![Image](oWAsset_39.png)
 
 <br/>
 
@@ -45,7 +45,7 @@ already in OurVerse.
 
 |||
 
-![Image](/images/OVAsset-28.jpg)
+![Image](oWAsset_34.png)
 
 <br/>
 
@@ -61,7 +61,7 @@ already in OurVerse.
 
 {% row(style="center moderate") %}
 
-![Image](/images/OVAsset-29.jpg)
+![Image](oWAsset_35.png)
 
 <br/>
 
@@ -75,7 +75,7 @@ already in OurVerse.
 
 |||
 
-![Image](/images/OVAsset-30.jpg)
+![Image](oWAsset_36.png)
 
 <br/>
 
@@ -91,7 +91,7 @@ already in OurVerse.
 
 {% row(style="center moderate") %}
 
-![Image](/images/OVAsset-31.jpg)
+![Image](oWAsset_37.png)
 
 <br/>
 
@@ -105,7 +105,7 @@ already in OurVerse.
 
 |||
 
-![Image](/images/OVAsset-32.jpg)
+![Image](oWAsset_38.png)
 
 <br/>
 
@@ -121,11 +121,18 @@ already in OurVerse.
 
 {{ space() }}
 
+
+
 {% row(style="center narrow invert-color" bgColor="#2d103e") %}
 
-## GOT A
 
-## **COOL IDEA?**
+<br>
+<br>
+
+
+### GOT A
+
+### **COOL IDEA?**
 
 <br/>
 
@@ -133,6 +140,6 @@ Drop us a line and let us know.
 
 We are always looking out for creative suggestions!
 
-<button>[Email](mailto:info@ourverse.tf)</button>
+<button>[Email]("mailto:info@ourverse.tf")</button>
 
 {% end %}

css/index.css

@@ -51,6 +51,10 @@ img[src*="#large"] {
   margin: auto;
 }
 
+img[src*="#auto"] {
+  margin: auto;
+}
+
 img[src*="#tft_img"] {
   width: 150px;
   margin: 8px;
@@ -86,7 +90,7 @@ img[src*="#tft_img"] {
     @apply text-xl lg:text-3xl font-normal;
   }
   h6 {
-    @apply text-md not-italic font-normal my-1;
+    @apply text-base not-italic font-normal my-1;
   }
   p {
     @apply text-lg lg:text-2xl leading-tight;

start.sh

@@ -0,0 +1,25 @@
+# builds if executable isn't foound
+if [[ ! -f "tailwindcss" ]]
+then
+    sh build.sh
+fi
+
+# initialized and configures tailwind if not configured
+if [[ ! -f "tailwind.config.js" ]]
+then
+    ./tailwindcss init
+    sed -i '' "s|  content: \\[\\],|  content: \\['./templates/**/*.html'\\],|g" tailwind.config.js
+fi
+
+# compiles tailwind css & launches locally
+rm -rf public static/css
+./tailwindcss -i css/index.css -o ./static/css/index.css --watch & zola serve &
+
+# compiles tailwind css for prod & builds project
+./tailwindcss -i css/index.css -o ./static/css/index.css --minify
+zola build
+
+# kills zola and tw bg processes on interrupt
+trap 'kill $(jobs -p); exit 1' INT
+wait
+

tailwind.config.js

@@ -1,58 +1,8 @@
-const colors = require('tailwindcss/colors')
+/** @type {import('tailwindcss').Config} */
-
 module.exports = {
-  content: [
+  content: ['./templates/**/*.html'],
-      './templates/**/*.html'
-  ],
-  darkMode: false,
   theme: {
-    fontSize: {
+    extend: {},
-        'xs': '.75rem',
-        'sm': '.875rem',
-        'tiny': '.875rem',
-        'base': '1rem',
-        'md': '1.05rem',
-        'lg': '1.125rem',
-        'xl': '1.25rem',
-        '2xl': '1.5rem',
-        '3xl': '1.875rem',
-        '4xl': '2.25rem',
-        '5xl': '3rem',
-        '6xl': '4rem',
-        '7xl': '5rem',
-        '8xl': '5.75rem',
-        '9xl':	'8rem' 
-    },
-    colors: {
-      transparent: 'transparent',
-      white: '#ffffff',
-      black: '#000000',
-      gray: colors.gray,
-      slate: colors.slate,
-      stone: colors.stone,
-      zinc: colors.zinc,
-      yellow: colors.yellow,
-      orange: colors.orange,
-      sky: colors.sky,
-      blue: {
-        '100': '#bbeeff',
-        '200': '#00aaff',
-        '300': '#0088ff',
-        '400': '#0033ff',
-        '500': '#0000ff',
-        '600': '#0000bb',
-        '700': '#0000aa',
-        '800': '#000088',
-        '900': '#000066',
-      },
-      
-    },
-    extend: {
-        screens: {
-          '2xl': '1450px',
-          // => @media (min-width: 992px) { ... }
-        },
-      },
   },
-  plugins: [], // if we add forms, do it here
+  plugins: [],
 }

templates/_default/base.html

@@ -1,14 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" charset="utf-8">
-  {% include "partials/head.html" %}
 
-  {% include "partials/header.html" %}
+    {% include "partials/head.html" %}
     
-  <body>
+    <body>
-
+        {% include "partials/header.html" %}
-    <div id="content" class="p-8 pt-12 sm:p-12 md:p-16 lg:p-20">
+        <div id="content" class="mx-8 md:mx-12 lg:mx-16 xl:mx-20 pt-24">
-        {% block content %}{% endblock %}
+            {% block content %}{% endblock %}    
-    </div>
+        </div>
-
+        {% include "partials/footer.html" %}
-  </body>
+    </body>
 </html>

templates/blogPage.html

@@ -3,9 +3,10 @@
 
 <!-- Default page template for blog posts and basic informative markdown files -->
 <main>
+  <div class="container mx-auto mt-24">
 
-<div class="sm:w-5/6 md:w-4/5 mr-auto ml-auto px-6 lg:px-16 xl:w-11/12">
+<div class="sm:w-5/6 md:w-4/5 mr-auto ml-auto mt-16 px-6 lg:px-16 xl:w-11/12">
-<img class="max-h-60 sm:max-h-60 md:max-h-80 lg:max-h-96 mx-auto" src={{"/" ~ page.extra.imgPath}} alt="">
+<img class="max-h-60 sm:max-h-60 md:max-h-80 lg:max-h-96 mx-auto" src="{{page.extra.imgPath}}" alt="">
 <div>
     <article class="article lg:w-5/6 mx-auto">
     <h2 class="tracking-tight pt-8 lg:pt-8 2xl:pt-24 text-left fw-500 leading-snug font-normal mb-10">
@@ -18,6 +19,7 @@
     </article>
 </div>
 </div>
+</div>
 </main>
 
 {% endblock content %}

templates/index.html

@@ -1,8 +1,9 @@
 {% extends "_default/base.html" %}
 {% block content %}
 
-<!-- Landing page template, has a banner and rows of page summaries -->
+<!-- home page template, has a banner and rows of page summaries -->
-<main>
+<div>
-    {{section.content | safe}}
+    {% set page = get_page(path="home/index.md") %}
-</main>
+    {{page.content | safe}}
+</div>
 {% endblock content %}

templates/layouts/blog.html

@@ -8,7 +8,7 @@ and a side nav for category and featured post navigation
 
 {% block content %}
 
-<main>
+<main class="container mx-auto">
 
     <!--sets global featured variable as the most recent post with the isFeatured tag-->
     {%- set section = get_section(path="blog/_index.md") %}
@@ -17,14 +17,18 @@ and a side nav for category and featured post navigation
         {%- set_global featured = page %}
         {% break %}
     {% endif %}
+    {% if not featured %} 
+        {%- set_global featured = section.pages[0] %}
+    {% endif %}
     {% endfor %}
     
     {% include "partials/featuredBlog.html" %}
 
-    <div class="flex flex-col md:flex-row">
+    <div class="flex flex-col md:flex-row container mx-auto">
         {% include "partials/blogPosts.html" %}
         {% include "partials/blogSidebar.html" %}
     </div>
+</div>
  </main> 
  
  {% endblock content %}

templates/page.html

@@ -5,6 +5,12 @@
 <main>
     <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
     <script>mermaid.initialize({startOnLoad:true});</script>
-    {{page.content | safe}}
+    <div>
+        {% if page %}
+            {{page.content | safe}}
+        {% else %}
+            {{section.content | safe}}
+        {% endif %}
+    </div>
 
  </main> {% endblock content %}

templates/partials/blogPosts.html

@@ -1,13 +1,13 @@
 {% 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="font-sans text-center px-0 md:w-full lg:w-2/3 mx-8 md:mx-12">
   <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"
+    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] %}
-    The Latest from ThreeFold   
+    The Latest from GoldFlow   
     {% if taxonomy == "categories" %} - 
         {{category | replace(from='-', to=' ' ) | title}}
     {% endif %}

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 mr-8 lg:mr-24">
+    <div class="flex flex-col mb-12 mr-8 lg:mr-24 mt-10">
         <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

@@ -1,26 +1,32 @@
 <body>
+  <div class="container px-4 mx-auto my-10"> 
+<div class="md:grid md:grid-cols-2 md:gap-8 relative mt-10 lg:mt-16 items-center">
+  <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 class="mt-8 text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-2 md:mb-4">
+            {{ featured.title }}
+        </h2>
+    </a>
+    <p class="mb-4 md:mb-10 text-lg lg:pr-4">
+        {{featured.description}}
+    </p>
     
-    <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center">
+    <h4 class="text-sm not-italic font-light leading-6 text-gray-600"> 
-      <div class="relative lg:ml-8 my-8 w-full md:w-auto">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} - 
-        <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED POST</h3>
+        {{ featured.extra.author }}
-        <a href={{featured.permalink}} class="">
+    </h4>
-            <h2 class="mt-8 text-2xl 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")}} - 
-            {{ featured.extra.author }}
-        </h4>
-            
-      </div>
-
-      <div class="-mx-4 relative lg:mt-0 max-w-full">
-        <img class="relative mx-auto w-7/12 md:w-auto md:max-w-full max-h-80" src=/{{featured.extra.imgPath}} alt="" />
-      </div>
-    </div>
         
   </div>
+
+  <div class="mx-4 relative lg:mt-0 max-w-full">
+    {% set img_url = get_url(path='/' ~ featured.relative_path | replace(from='_', to='-') | replace(from='index.md',
+    to=featured.extra.imgPath)) %}
+    <img class="relative mx-auto md:w-auto md:max-w-full max-h-80" src="{{img_url}}" alt="" />
+  </div>
+</div>
+<hr class="mt-6">
+</div>
+</div>
 </div> 
 </body> 

templates/partials/footer.html

@@ -3,31 +3,19 @@
   Read the documentation to get started: https://tailwindui.com/documentation
 -->
 
-{%- set section = get_section(path="footer/_index.md") %}
+{%- set section = get_section(path="_index.md") %}
-{%- set logoPath = section.extra.logoPath %}
 
-<html>
+{% set subsections_str = section.subsections | join(sep=" ") %}
-    <head /><body>
-        <div class="mt-12 border-t border-gray-200 pt-8"></div>
-        <footer class="bg-white">
-          <div class="max-w-screen-xl 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-20 h-auto sm:w-15" src="{{logoPath}}" alt="Company name" />
-                <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">
-                {{ section.content | safe }}
-            </div>
-              
-              </div>
-            </div>
-          </div>
-        </footer>
-        </body>
-        </html>
 
+<footer class="bottom-0 mx-20">
+    {% 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 pt-20'}}">
+            <img src="{{get_url(path='images/footer_logo.png')}}" alt="">
+            ALL RIGHTS RESERVED 2022
+        </div>
+    {% endif %}
+</footer>

templates/partials/head.html

@@ -17,7 +17,7 @@
   {% endif %}
   {% endblock title %}
 
-  <!-- Required meta tags -->
+  <!-- Required meta categories -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 

templates/partials/header.html

@@ -84,143 +84,142 @@
 
 </script>
 
-{%- set section = get_section(path="header/_index.md") %}
-{% set header_items = section.content | safe | split(pat="<li>") %}
 
-<header id="header-container">
+<!-- set variables used for header template -->
-    <div class="z-10 bg-white fixed w-screen">
+{% set section = get_section(path="_index.md") %}
-        <div class="relative z-50 shadow">
+{% set subsections_str = section.subsections | join(sep=" ") %}
-        <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">
+{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %}
-            <div>
+
-                <a href="/" class="flex">
+{% if "header/_index.md" in subsections_str %}
-                    <img class="w-32 h-auto sm:w-15" src="{{section.extra.logoPath}}" alt="Ourworld Logo" />
+    {% set section = get_section(path="header/_index.md") %}
-                </a>
+    {% set header_items = section.content | safe | split(pat="<li>") %}
-            </div>
+    {% include "partials/header_custom.html" %}
-            <div class="-mr-2 -my-2 lg:hidden">
+{% else %}
-                <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">
+    <header id="header-container">
-                    <!-- Heroicon name: menu -->
+        {% 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-48 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="M4 6h16M4 12h16M4 18h16" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                     </svg>
-                </button>
+                    </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">
+                </div>
-                <!-- Heroicon name: x -->
+                <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
-                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <nav class="flex space-x-10">    
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    {% for page in section.pages %}
-                </svg>
+                    {% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
-                </button>
+                        <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">
-            </div>
+                            {{page.title}}
-            <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
+                        </a>
-            <nav class="flex space-x-10">
+                        <div class="relative">
-
+                        </div>
-{% for header_item in header_items %}
+                    {% endfor %}
-{% if not loop.first %}
+                    {% for subsection in section.subsections %}
-    {% set header_arr = header_item | split(pat="</li>") %}
+                        {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}                        
-    {% set header_label = header_arr[0] %}
+                        {% set button_id = subsection ~ "-menu-btn" | slugify %}
-    {% if '<a' in header_label %}
+                        <div class="relative">
-        {% set link_label = header_label | striptags %}
+                        <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">
-        {% set link_path = header_label | split(pat="%22") | safe%}
+                            <span>{{ subsection }}</span>
-        <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">
+                            <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>
-            {{link_label}}
+                        </button>
-        </a>
+                        </div>
-    {% 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">
-            <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>
-        </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="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">
-            {{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 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%}
-                                <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">
-                                    {{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">
-                                        <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-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>
                     </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">
+            <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 %}
+                            <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>
+                
+            </div>
+            
+            </div>
         </div>
     
-        </div>
+    
-    </div>
+    </header>
+    
+{% endif %}
 
 
-</header>

templates/partials/header_custom.html

@@ -0,0 +1,228 @@
+<!--
+  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+ -->
+
+<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 section = get_section(path="header/_index.md") %}
+{% set header_items = section.content | safe | split(pat="<li>") %}
+
+<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>
+                <a href="/" class="flex">
+                    <img class="w-48 h-auto sm:w-15" 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">
+                    <!-- 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 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%}
+        <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="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">
+            <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>
+        </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="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">
+            {{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 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%}
+                                <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">
+                                    {{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">
+                                        <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 %}
+                    {% 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 %}
+                    </nav>                    
+                </div>
+            
+        </div>
+        
+        </div>
+    </div>
+
+
+</header>

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/tags.html" %}
+    {% include "partials/categories.html" %}
     <p>
         {{page.description | safe}}
     </p>

templates/partials/postCard.html

@@ -1,37 +1,39 @@
 <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
-    <div class="flex-shrink-0">
+  <div class="flex-shrink-0">
-      <img class="h-48 w-full mx-auto object-cover" src=/{{post.extra.imgPath}} alt="" />
+    {% 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="" />
+  </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 }}
+      </p>
+      {% endif %}
+      </a>
     </div>
-    <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+    <div class="mt-6 flex items-center">
-      <div class="flex-1">
+      <div>
-        <a href={{ post.permalink }} class="block">
+        <p class="text-sm leading-5 font-medium text-gray-900 text-left">
-          <h3 class="mt-2 text-xl leading-7 font-medium text-gray-900 text-left not-italic">
+            {{ post.extra.author }}
-            {{ 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 %}
+        <div class="flex text-sm leading-5 text-gray-500 text-left">
-        </a>
+          <time datetime="2020-03-16">
-      </div>
+              {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
-      <div class="mt-6 flex items-center">
+          </time>
-        <div>
+          <span class="mx-1">
-          <p class="text-sm leading-5 font-medium text-gray-900 text-left">
+            &#xB7;
-              {{ post.extra.author }}
+          </span>
-          </p>
+          <span>
-          <div class="flex text-sm leading-5 text-gray-500 text-left">
+            6 min read
-            <time datetime="2020-03-16">
+          </span>
-                {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
-            </time>
-            <span class="mx-1">
-              &#xB7;
-            </span>
-            <span>
-              6 min read
-            </span>
-          </div>
         </div>
       </div>
     </div>
   </div>
+</div>

templates/partials/tags.html

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

templates/positionPage.html

@@ -16,7 +16,7 @@
                 {{ page.title }} 
             </h1>
             <p class="my-4">{{page.description}}</p>
-            {% include "partials/tags.html" %}
+            {% include "partials/categories.html" %}
         </div>
         {{ page.content | safe }}
     </article>

templates/shortcodes/row.html

@@ -9,8 +9,33 @@ Parameters:
 - bgPath: if bgPath is passed, the row has a full width background
 -->
 
-{% set columns = body | safe | markdown | split(pat="|||") %}
+
-{% set row_class =  "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 md:flex md:flex-row md:py-4 lg:py-8"%}
+<!-- This fixes link & img paths in local, prod, and wth prefix -->
+{% if page %}
+    {% if "](" in body %}
+    {% set body_arr = body | split(pat="](") %}
+    {% set body = body_arr[0] %}
+        {% for i in body_arr %}
+            {% set prev_index = loop.index0 - 1 %}
+            {% if not loop.first %}
+            {% if "![" in body_arr[prev_index] %}
+                {% set_global body = body ~ '](' ~ page.permalink ~ i %}
+            {% else %}
+                {% if i is not starting_with("http") %}
+                    {% set base_url = get_url(path="") %}
+                    {% set_global body = body ~ '](' ~ base_url ~ i %}
+                {% else %}
+                    {% set_global body = body ~ '](' ~ i %}
+                {% endif %}
+            {% endif %}
+            {% endif %}
+        {% endfor %}
+    {% endif %}
+{% endif %}
+
+{% set columns = body | safe | markdown | split(pat="<p>|||</p>") %}
+
+{% set row_class =  "relative py-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 md:flex md:flex-row flex-wrap max-w-fit "%}
 
 <!-- aligns columns depending on col number-->
 {% if 2 < columns | length %}
@@ -19,7 +44,36 @@ Parameters:
     {% set row_class = row_class ~ " lg:items-center" %}
 {% endif %}
 
-{% set col_class = "flex-1 mb-20 lg:mb-0 " %}
+{% set col_class = "flex-1 mb-4 md:mb-12 lg:mb-0 " %}
+{% set col_class = col_class ~ " lg:mx-8 " %}
+
+
+<!-- Margins -->
+
+{% set margin_class = " mx-4 md:mx-16 lg:mx-24 " %}
+
+{% if margin %}
+    {% if "none" in margin %}
+        {% set margin_class = " mx-0 " %}
+    {% elif "wide" in margin %}
+        {% set margin_class = " mx-4 sm:mx-8 md:mx-12 lg:mx-16 xl:mx-20 " %}
+    {% elif "moderate" in margin %}
+        {% set margin_class = " mx-8 sm:mx-16 md:mx-24 lg:mx-28 " %}
+    {% elif "narrow" in margin %}
+        {% set margin_class = " mx-12 sm:mx-20 md:mx-28 lg:mx-32 " %}
+    {% elif "tight" in margin %}
+        {% set margin_class = " mx-20 sm:mx-32 md:mx-60 lg:mx-80 xl:mx-96 " %}
+    {% endif %}
+    {% if "lean-left" in margin %}
+        {% set col_class = col_class ~ " lg:last:px-20 lg:max-w-[50%] lg:mx-0 " %}
+        {% set row_class = row_class ~ " !ml-0 sm:gap-0 " %}
+    {% elif "lean-right" in margin %}
+        {% set col_class = col_class ~ " lg:first:px-20 lg:max-w-[50%] lg:mx-0 " %}
+        {% set row_class = row_class ~ " !mr-0 sm:gap-0 " %}
+    {% endif %}
+{% endif %}
+
+{% set row_class =  row_class ~ margin_class %}
 
 {% if style %}
 
@@ -31,24 +85,24 @@ Parameters:
     <!-- makes row full screen width, strips margins -->
     {% if "lean" in style %}
         {% if "lean-left" in style %}
-            {% set col_class = col_class ~ "flex-1 lg:m-0 " %}
+            {% set col_class = col_class ~ " last:px-20 lg:max-w-[50%] " %}
-            {% set row_class = row_class ~ " lg:mr-20 " %}
+            {% set row_class = row_class ~ " sm:gap-0 " %}
         {% elif "lean-right" in style %}
-            {% set col_class = col_class ~ "flex-1 lg:m-0 " %}
+            {% set col_class = col_class ~ " first:px-20 lg:max-w-[50%] -mr-8 md:-mr-12 lg:-mr-16 xl:-mr-20 " %}
-            {% set row_class = row_class ~ " lg:ml-20 " %}
+            {% set row_class = row_class ~ " sm:gap-0 " %}
         {% else %}
-            {% set col_class = col_class ~ "flex-1 lg:m-0 " %}
+            {% set row_class = row_class ~ " md:py-0 " %}
+            {% set col_class = col_class ~ " lg:m-0" %}
         {% endif %}    
     {% else %}
-        {% set row_class = row_class ~ " mx-8 " %}
+        {% set row_class = row_class ~ " w-screen " %}
-        {% set col_class = col_class ~ " lg:mx-8 " %}
     {% endif %}
 
      <!-- makes row semi-full screen width, strips margins -->
      {% if "between" in style %}
      {% set row_class = row_class ~ " lg:max-w-6xl " %}
  {% elif "moderate" in style %}
-     {% set row_class = row_class ~ " lg:m-20 " %}
+     {% set row_class = row_class ~ " " %}
  {% endif %}
 
         <!-- makes row full screen width, strips margins -->
@@ -57,15 +111,16 @@ Parameters:
     {% elif "tight" in style %}
         {% set row_class = row_class ~ " lg:max-w-sm " %}
     {% elif "moderate" in style %}
-        {% set row_class = row_class ~ " lg:m-20 " %}
+        {% set row_class = row_class ~ " mx-20 " %}
     {% endif %}
 
     {% if "invert-color" in style %}
-        {% set row_class = row_class ~ " text-white " %}
-    {% endif %}
 
+                {% set row_class = row_class ~ " text-white lg:text-white " %}
+
+    {% endif %}
     {% else %}
-        {% set row_class = row_class ~ " mx-12 " %}
+        {% set row_class = row_class ~ " " %}
 {% endif %}
 
 {% set anchor_link = ""%}
@@ -76,25 +131,51 @@ Parameters:
 
 <!-- makes row full screen width and adds background img -->
 {% set styles = ""  %}
+{% set div_class = " " %}
 {% if bgPath %}
-    {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover"  %}
+    {% set background_url = page.permalink ~ bgPath %}
+    {% set styles = "background: url('" ~ background_url ~ "'); background-size: cover; background-position: center;"  %}
+    {% if "#desktop" in bgPath %}
+        {% set bgStyle = false %}
+        {% set div_class = " !bg-[length:0px_0px] !bg-no-repeat lg:!bg-cover " %}
+        {% set row_class = row_class | replace(from='text-white', to='text-black') %}
+        {% if "invert-color" in style %}
+            {% if "#desktop" in bgPath %}
+                {% set row_class = row_class ~ " lg:text-white " %}
+            {% endif %}
+        {% endif %}
+    {% endif %}
+{% endif %}
+{% if bgStyle %}
+    {% if "full" in bgStyle %}
+        {% set styles = styles ~ "height: -webkit-fill-available; height: 100vh;"  %}
+    {% elif "hero" in bgStyle %}
+        {% set div_class = div_class ~ " -mt-24 pt-24 " %}
+    {% endif %}
 {% endif %}
 {% if bgColor %}
     {% set styles = "background-color: " ~ bgColor ~ "; background-size: cover"  %}
+    {% set row_class = row_class ~ " py-0 " %}
 {% endif %}
 
-<div id="{{anchor_link}}" class="w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 justify-center flex" style="{{styles}}">
+<!-- Cancels page margins so that rows can have separate margins -->
-    <div class="{{row_class}}"> 
+{% set no_margins = " -mx-8 md:-mx-12 lg:-mx-16 xl:-mx-20" %}
+
+
+<div id="{{anchor_link}}" class="{{'w-screen relative justify-center flex ' ~ div_class ~ no_margins}}" style="{{styles}}">
+    <div class="{{row_class}}" style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+        
         {% 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">
+                <div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1 ">
                     {{ column | safe }}
                 </div>
             {% else %}
                 <div class="{{col_class}}">
                     <!-- handles mermaid markdown content display -->
+
                     {% if "{% mermaid() %}" in column %}
                         {% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
                         {% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%}

templates/shortcodes/space.html

@@ -1 +1,8 @@
-<div class="h-20 lg:h-60"></div>
+
+{% set height = 52 %}
+{% if size %}
+    {% if size == "small" %}
+        {% set height = 28 %}
+    {% endif %}
+{% endif %}
+<div class="h-20 lg:h-{{height}}"></div>