update repo

README.md

@@ -1,2 +1,104 @@
-# www_examplezola
+# Example zola Website
-Template for Zola website 
+
+## About
+
+A website created using Zola, a static site generator.
+
+- The contents of the pages reside in the markdown files in /content (written in CommmonMark)
+- 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 static sites.
+
+To use this repository as a template, simply:
+
+- clone repository
+- add your own content to templates directory (see more below)
+- [install Zola](https://www.getzola.org/documentation/getting-started/installation/),
+- run `./build.sh` to build.
+- Then run `./start.sh` to run Locally.
+
+## 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 categories, 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

@@ -0,0 +1,38 @@
+echo "Starting build..."
+
+# TODO: Check if current version is latest to avoid redundant installation
+
+# 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

@@ -0,0 +1,71 @@
+# The URL the site will be built for
+base_url = "https://examplezola.tf/"
+# Change this to your own URL! Please note this variable **must** be uncommented.
+
+title = "examplezola"
+description="Our global digital backbone"
+
+# When set to "true", a feed is automatically generated.
+# generate_feed = true
+
+# The filename to use for the feed. Used as the template filename, too.
+# Defaults to "atom.xml", which has a built-in template that renders an Atom 1.0 feed.
+# There is also a built-in template "rss.xml" that renders an RSS 2.0 feed.
+# feed_filename = "index.xml"
+
+# The number of articles to include in the feed. All items are included if
+# this limit is not set (the default).
+# feed_limit = 10
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = false
+
+# When set to "true", the generated HTML files are minified.
+# minify_html = true
+# I'm keeping off for now -- buggy -- 2021-02-05 (@keats says it'll be fixed 0.14.0)
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+highlight_theme = "visual-studio-dark"
+
+# When set to "true", emoji aliases translated to their corresponding
+# Unicode emoji equivalent in the rendered Markdown files. (e.g.: :smile: => 😄)
+render_emoji = false
+
+[slugify]
+paths = "on"
+
+# Whether external links are to be opened in a new tab
+# If this is true, a `rel="noopener"` will always automatically be added for security reasons
+external_links_target_blank = true
+
+# Whether to set rel="nofollow" for all external links
+external_links_no_follow = true
+
+# Whether to set rel="noreferrer" for all external links
+external_links_no_referrer = true
+
+# Whether smart punctuation is enabled (changing quotes, dashes, dots in their typographic form)
+# For example, `...` into `…`, `"quote"` into `“curly”` etc
+smart_punctuation = true
+
+[[taxonomies]]
+name = "categories"
+feed = true
+paginate_by = 2
+paginate_path = "blog-posts"
+
+[[taxonomies]]
+name = "categories"
+feed = true
+paginate_by = 2
+paginate_path = "blog-posts"
+
+[extra]
+header_class = "customize"
+footer_class = "customize"

content/_index.md

@@ -0,0 +1,11 @@
+---
+title: "OW Nomads"
+description: ""
+date: 2018-09-14
+updated: 2021-02-20
+draft: false
+sort_by: weight
+weight: 1
+extra:
+    logo_path: images/logo_placeholder.jpg
+---

content/home/index.md

@@ -0,0 +1,160 @@
+---
+title: "Home"
+description: ""
+date: 2018-09-14
+updated: 2021-02-20
+draft: false
+weight: 1
+---
+
+<!-- section 1 (header) -->
+
+{% row(margin="header") %}
+
+# TITLE {#text-8xl}
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit.<br> Quas, aliquid ab blanditiis omnis odio repellat?
+
+<button>[BUTTON](/)</button>
+
+|||
+
+
+![placeholder](placeholder.jpg#mx-auto)
+
+
+
+
+{% end %}
+
+<br>
+<br>
+
+<!-- section 2  -->
+
+{% row(style="center" margin="narrow" padding="both") %}
+
+![Lorem](placeholder.jpg#medium)
+
+### **TITLE**
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+
+|||
+
+![Lorem](placeholder.jpg#medium)
+
+### **TITLE**
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+
+|||
+
+![Lorem](placeholder.jpg#medium)
+
+### **TITLE**
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+
+{% end %}
+
+<br>
+<br>
+
+<!-- section 3 -->
+
+{% row(style="center" margin="narrow" padding="both") %}
+
+![Image](placeholder.jpg)
+
+|||
+
+## YOUR TITLE <br /> HERE
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas, aliquid ab blanditiis omnis odio repellat?
+
+<button>[BUTTON](/)</button>
+
+{% end %}
+
+<!-- section 4 -->
+
+{% row(style="" margin="narrow" padding="top") %}
+
+![Image](placeholder.jpg#sm#mx-auto)
+
+|||
+
+### **TITLE**
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit.Quas, aliquid ab blanditiis omnis odio repellat?
+
+|||
+
+![Image](placeholder.jpg#sm#mx-auto)
+
+|||
+
+### **TITLE**
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit.Quas, aliquid ab blanditiis omnis odio repellat?
+
+{% end %}
+
+<!-- section 4-2-->
+
+{% row(style="" margin="narrow" padding="bottom") %}
+
+![Image](placeholder.jpg#sm#mx-auto)
+
+|||
+
+### **TITLE**
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit.Quas, aliquid ab blanditiis omnis odio repellat?
+
+|||
+
+![Image](placeholder.jpg#sm#mx-auto)
+
+|||
+
+### **TITLE**
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit.Quas, aliquid ab blanditiis omnis odio repellat?
+
+{% end %}
+
+
+
+<!-- section 5 -->
+
+{% row(style="center" margin="narrow" padding="both") %}
+
+## TITLE <br /> HEADER
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit.Quas, aliquid ab blanditiis omnis odio repellat?
+
+|||
+
+![Image](placeholder.jpg)
+
+{% end %}
+
+<!-- section 6 -->
+
+{% row(style="center" margin="narrow" padding="top") %}
+
+## TITLE
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit
+
+<button>[BUTTON](/)</button>
+
+{% end %}
+
+{% row(margin="header" padding="none") %}
+
+    ![Image](placeholder.jpg#medium#mx-auto)
+
+{% end %}

content/page2/index.md

@@ -0,0 +1,22 @@
+---
+title: "page2"
+description: ""
+date: 2018-09-14
+updated: 2021-02-20
+draft: false
+weight: 2
+---
+
+<!-- section 1 (co-found) -->
+
+{% row(style="center" margin="narrow" padding="both") %}
+
+# TITLE {#text-8xl}
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+
+![Image](placeholder.jpg#medium#mx-auto)
+
+{% end %}
+
+

content/page3/index.md

@@ -0,0 +1,26 @@
+---
+title: "page3"
+description: ""
+date: 2018-09-14
+updated: 2021-02-20
+draft: false
+weight: 2
+---
+
+<!-- section 1 (co-found) -->
+
+{% row(style="center" margin="narrow" padding="both") %}
+
+# TITLE {#text-8xl}
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+
+<button>[BUTTON](/)</button>
+
+|||
+
+![Image](placeholder.jpg#medium#mx-auto)
+
+{% end %}
+
+

css/admonition.css

@@ -0,0 +1,361 @@
+:root {
+  --md-admonition-icon--note: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>");
+  --md-admonition-icon--abstract: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/></svg>");
+  --md-admonition-icon--info: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/></svg>");
+  --md-admonition-icon--tip: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z'/></svg>");
+  --md-admonition-icon--success: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z'/></svg>");
+  --md-admonition-icon--question: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z'/></svg>");
+  --md-admonition-icon--warning: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21z'/></svg>");
+  --md-admonition-icon--failure: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6.91 17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12 20 6.91z'/></svg>");
+  --md-admonition-icon--danger: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 15H6l7-14v8h5l-7 14v-8z'/></svg>");
+  --md-admonition-icon--bug: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z'/></svg>");
+  --md-admonition-icon--example: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z'/></svg>");
+  --md-admonition-icon--quote: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z'/></svg>");
+  --md-details-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
+}
+
+:is(.admonition) {
+  display: flow-root;
+  margin: 1.5625em 0;
+  padding: 0 1.2rem;
+  color: var(--fg);
+  page-break-inside: avoid;
+  background-color: var(--bg);
+  border: 0 solid black;
+  border-inline-start-width: 0.4rem;
+  border-radius: 0.2rem;
+  box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05), 0 0 0.1rem rgba(0, 0, 0, 0.1);
+}
+
+.admonition p {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  font-size: 0.8rem;
+}
+
+@media print {
+  :is(.admonition) {
+    box-shadow: none;
+  }
+}
+:is(.admonition) > * {
+  box-sizing: border-box;
+}
+:is(.admonition) :is(.admonition) {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+:is(.admonition) > .tabbed-set:only-child {
+  margin-top: 0;
+}
+html :is(.admonition) > :last-child {
+  margin-bottom: 1.2rem;
+}
+
+:is(.admonition-title, summary) {
+  position: relative;
+  margin-block: 0;
+  margin-inline: -1.6rem -1.2rem;
+  padding-block: 0.8rem;
+  padding-inline: 4rem 1.2rem;
+  font-weight: 700;
+  background-color: rgba(68, 138, 255, 0.1);
+  border: 0 solid #448aff;
+  border-inline-start-width: 0.4rem;
+  border-start-start-radius: 0.2rem;
+  display: flex;
+}
+:is(.admonition-title, summary) > p {
+  margin: 0;
+}
+html :is(.admonition-title, summary):last-child {
+  margin-bottom: 0;
+}
+:is(.admonition-title, summary)::before {
+  position: absolute;
+  top: 0.625em;
+  inset-inline-start: 1.2rem;
+  width: 1.4rem;
+  height: 1.4rem;
+  background-color: #448aff;
+  mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  content: "";
+}
+
+:is(.admonition):is(.note) {
+  border-color: #448aff;
+}
+
+:is(.note) > :is(.admonition-title, summary) {
+  background-color: rgba(68, 138, 255, 0.1);
+  border-color: #448aff;
+}
+:is(.note) > :is(.admonition-title, summary)::before {
+  background-color: #448aff;
+  mask-image: var(--md-admonition-icon--note);
+  -webkit-mask-image: var(--md-admonition-icon--note);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.abstract, .summary, .tldr) {
+  border-color: #00b0ff;
+}
+
+:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 176, 255, 0.1);
+  border-color: #00b0ff;
+}
+:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary)::before {
+  background-color: #00b0ff;
+  mask-image: var(--md-admonition-icon--abstract);
+  -webkit-mask-image: var(--md-admonition-icon--abstract);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.info, .todo) {
+  border-color: #00b8d4;
+}
+
+:is(.info, .todo) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 184, 212, 0.1);
+  border-color: #00b8d4;
+}
+:is(.info, .todo) > :is(.admonition-title, summary)::before {
+  background-color: #00b8d4;
+  mask-image: var(--md-admonition-icon--info);
+  -webkit-mask-image: var(--md-admonition-icon--info);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.tip, .hint, .important) {
+  border-color: #00bfa5;
+}
+
+:is(.tip, .hint, .important) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 191, 165, 0.1);
+  border-color: #00bfa5;
+}
+:is(.tip, .hint, .important) > :is(.admonition-title, summary)::before {
+  background-color: #00bfa5;
+  mask-image: var(--md-admonition-icon--tip);
+  -webkit-mask-image: var(--md-admonition-icon--tip);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.success, .check, .done) {
+  border-color: #00c853;
+}
+
+:is(.success, .check, .done) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 200, 83, 0.1);
+  border-color: #00c853;
+}
+:is(.success, .check, .done) > :is(.admonition-title, summary)::before {
+  background-color: #00c853;
+  mask-image: var(--md-admonition-icon--success);
+  -webkit-mask-image: var(--md-admonition-icon--success);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.question, .help, .faq) {
+  border-color: #64dd17;
+}
+
+:is(.question, .help, .faq) > :is(.admonition-title, summary) {
+  background-color: rgba(100, 221, 23, 0.1);
+  border-color: #64dd17;
+}
+:is(.question, .help, .faq) > :is(.admonition-title, summary)::before {
+  background-color: #64dd17;
+  mask-image: var(--md-admonition-icon--question);
+  -webkit-mask-image: var(--md-admonition-icon--question);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.warning, .caution, .attention) {
+  border-color: #ff9100;
+}
+
+:is(.warning, .caution, .attention) > :is(.admonition-title, summary) {
+  background-color: rgba(255, 145, 0, 0.1);
+  border-color: #ff9100;
+}
+:is(.warning, .caution, .attention) > :is(.admonition-title, summary)::before {
+  background-color: #ff9100;
+  mask-image: var(--md-admonition-icon--warning);
+  -webkit-mask-image: var(--md-admonition-icon--warning);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.failure, .fail, .missing) {
+  border-color: #ff5252;
+}
+
+:is(.failure, .fail, .missing) > :is(.admonition-title, summary) {
+  background-color: rgba(255, 82, 82, 0.1);
+  border-color: #ff5252;
+}
+:is(.failure, .fail, .missing) > :is(.admonition-title, summary)::before {
+  background-color: #ff5252;
+  mask-image: var(--md-admonition-icon--failure);
+  -webkit-mask-image: var(--md-admonition-icon--failure);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.danger, .error) {
+  border-color: #ff1744;
+}
+
+:is(.danger, .error) > :is(.admonition-title, summary) {
+  background-color: rgba(255, 23, 68, 0.1);
+  border-color: #ff1744;
+}
+:is(.danger, .error) > :is(.admonition-title, summary)::before {
+  background-color: #ff1744;
+  mask-image: var(--md-admonition-icon--danger);
+  -webkit-mask-image: var(--md-admonition-icon--danger);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.bug) {
+  border-color: #f50057;
+}
+
+:is(.bug) > :is(.admonition-title, summary) {
+  background-color: rgba(245, 0, 87, 0.1);
+  border-color: #f50057;
+}
+:is(.bug) > :is(.admonition-title, summary)::before {
+  background-color: #f50057;
+  mask-image: var(--md-admonition-icon--bug);
+  -webkit-mask-image: var(--md-admonition-icon--bug);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.example) {
+  border-color: #7c4dff;
+}
+
+:is(.example) > :is(.admonition-title, summary) {
+  background-color: rgba(124, 77, 255, 0.1);
+  border-color: #7c4dff;
+}
+:is(.example) > :is(.admonition-title, summary)::before {
+  background-color: #7c4dff;
+  mask-image: var(--md-admonition-icon--example);
+  -webkit-mask-image: var(--md-admonition-icon--example);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.quote, .cite) {
+  border-color: #9e9e9e;
+}
+
+:is(.quote, .cite) > :is(.admonition-title, summary) {
+  background-color: rgba(158, 158, 158, 0.1);
+  border-color: #9e9e9e;
+}
+:is(.quote, .cite) > :is(.admonition-title, summary)::before {
+  background-color: #9e9e9e;
+  mask-image: var(--md-admonition-icon--quote);
+  -webkit-mask-image: var(--md-admonition-icon--quote);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+.navy :is(.admonition) {
+  background-color: var(--sidebar-bg);
+}
+
+.ayu :is(.admonition),
+.coal :is(.admonition) {
+  background-color: var(--theme-hover);
+}
+
+.rust :is(.admonition) {
+  background-color: var(--sidebar-bg);
+  color: var(--sidebar-fg);
+}
+
+:is(.admonition-title) {
+  font-feature-settings: "kern", "liga";
+  font-weight: 600;
+  font-size: 0.84rem;
+  border: none;
+  padding: 10px 50px;
+}
+
+:is(summary)::after {
+  position: absolute;
+  top: 0.625em;
+  width: 1.4rem;
+  height: 1.4rem;
+  mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  content: "";
+}
+
+:is(summary)::after {
+  background-color: black;
+  mask-image: var(--md-details-icon);
+  -webkit-mask-image: var(--md-details-icon);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  position: absolute;
+  transform: rotate(-90deg);
+  transition: transform 0.25s;
+  right: 0.4rem;
+}
+
+details[open] > summary::after {
+  transform: rotate(0deg);
+}

css/code.css

@@ -0,0 +1,90 @@
+code.language-html,
+code.language-css,
+code.language-md,
+code.language-cmd,
+code.language-bash,
+code.language-text,
+code.language-js,
+span.o,
+span.nx {
+  color: rgb(255, 255, 255);
+  line-height: 1.4;
+}
+span.c {
+  color: hsl(120, 100%, 20%);
+}
+
+span.p,
+span.s1,
+span.s2,
+span.nt {
+  color: hsl(40, 100%, 30%);
+}
+
+span.gs,
+span.gh,
+span.ge {
+  color: hsl(208, 100%, 50%);
+}
+
+span.gs {
+  font-weight: bold;
+}
+
+span.ge {
+  font-style: italic;
+}
+
+pre,
+code {
+  @apply font-mono;
+}
+
+code {
+  background-color: hsl(0, 0%, 98%);
+  border-radius: 3px;
+  color: hsl(120, 100%, 20%);
+  font-size: 85%;
+}
+
+pre {
+  margin: 0;
+  margin: 0;
+  padding: 1rem;
+  overflow: scroll;
+}
+
+pre code {
+  background-color: transparent;
+  color: inherit;
+  font-size: 100%;
+  padding: 0;
+}
+
+.highlight {
+  background-color: transparent;
+  border-radius: 3px;
+  margin: 0 0 0.5rem;
+  padding: 0;
+
+  & pre {
+    margin-bottom: 0;
+    overflow-x: auto;
+  }
+
+  & .lineno {
+    color: hsla(0, 0%, 67%, 0.72);
+    display: inline-block; /* Ensures the null space also isn't selectable */
+    padding: 0 0.75rem 0 0.25rem;
+    /* Make sure numbers aren't selectable */
+  }
+}
+
+/* TODO: dark theme for future
+@media (prefers-color-scheme: dark) {
+  code {
+    color: #fff;
+    background: hsl(200, 63%, 15%);
+  }
+}
+*/

css/index.css

@@ -0,0 +1,386 @@
+/*! purgecss start ignore */
+@import "code.css";
+/*! purgecss end ignore */
+
+@import "tailwindcss/base";
+@import "layout.css";
+@import "tailwindcss/components";
+@import "admonition.css";
+@import "tailwindcss/utilities";
+
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:wght@400;700&display=swap');
+/* Custom CSS for header partial */
+.backdrop-blur {
+  -webkit-backdrop-filter: blur(40px);
+}
+
+* {
+  font-family: 'Lato', sans-serif;
+}
+
+.bg-semi-white {
+  background-color: rgba(255, 255, 255, 0.75);
+}
+
+/* Custom css allowing image styling in markdown */
+
+
+img[src*="#mx-auto"] {
+  margin: auto;
+}
+
+img[src*="#small"] {
+  width: 68px;
+}
+
+img[src*="#sm"] {
+  width: 200px;
+}
+
+img[src*="#md"] {
+    width: 300px;
+}
+
+img[src*="#medium"] {
+    width: 500px;
+}
+
+img[src*="#logo"] {
+  max-width: min(250px, 100%);
+  margin: auto;
+}
+
+img[src*="#large"] {
+  width: min(60vw, 100vh);
+  margin: auto;
+}
+
+img[src*="#fill"] {
+  width: 100%;
+  height: 100%;
+}
+
+img[src*="#tft_img"] {
+  width: 150px;
+  margin: 8px;
+}
+
+img[src*="#icon"] {
+  width: 65px;
+  margin: 4px;
+}
+
+img[src*="#fig"] {
+  width: 150px;
+}
+
+.logo_size {
+  width: 200px;
+}
+
+.advance{
+
+  font-family: "lato";
+}
+
+@layer components {
+  h1 {
+    @apply text-3xl lg:text-5xl xl:text-7xl font-bold leading-none my-4;
+    font-family: "lato", sans-serif;
+    line-height: 0.9;
+    
+  }
+  h1 strong {
+    @apply font-medium;
+  }
+  h2 {
+    @apply text-3xl md:text-4xl lg:text-5xl xl:text-7xl font-bold leading-none my-4;
+    font-family: "lato", sans-serif;
+    line-height: 0.9;
+    
+  }
+  h2 strong {
+    @apply font-medium;
+  }
+  h3 {
+    @apply text-xl lg:text-4xl font-normal my-4;
+  }
+  h3 strong {
+    @apply font-medium;
+  }
+  h4 {
+    @apply text-xl lg:text-xl font-normal;
+  }
+  h5 {
+    @apply text-xl lg:text-xl font-normal;
+  }
+  h6 {
+    @apply text-lg not-italic font-normal my-1;
+  }
+  p {
+    @apply text-base lg:text-xl leading-tight tracking-normal font-normal my-4;
+    font-family: "CercoDEMO", sans-serif;
+  }
+  blockquote {
+    @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
+  }
+  li {
+    @apply text-lg lg:text-xl font-normal my-2;
+  }
+  li li {
+    @apply text-sm lg:text-sm font-light;
+  }
+  button {
+    @apply inline-block
+    text-base
+    lg:text-lg
+    px-8
+    py-1
+    mr-5
+    my-4
+    border-2
+    shadow
+  }
+}
+
+button:hover  {
+  color: #984210;
+}
+
+button  {
+font-weight: 500;
+}
+
+.experience-btn {
+    border: none;
+    margin: 0;
+    padding: 0;
+    color: black;
+    padding: 20px;
+    width: fit-content;
+}
+
+.experience-btn p {
+    @apply text-lg;
+}
+
+.experience-btn:hover {
+    background: white;
+}
+
+
+.experience-btn h4 {
+    white-space: normal;
+}
+
+header .customize {
+    background-color: transparent;
+    position: absolute;
+}
+
+footer .customize {
+    width: 100vw;
+    background-color: #d7d7d7;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px;
+}
+
+footer .customize img {
+    width: 60px;
+}
+
+
+header .customize div {
+    box-shadow: none;
+    text-transform: uppercase;
+    font-weight: 700 !important;
+}
+
+button {
+  background: transparent;
+  color: black;
+  border-radius: 10px;
+  border: 2px solid black;
+  box-shadow: none;
+  font-size: 20px;
+}
+
+a {
+  border: none;
+}
+
+header {
+  font-family: "Work Sans";
+}
+
+.nav_btn {
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.quicklinks {
+  box-sizing: border-box;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: auto;
+  display: inline-block;
+  margin: 0 auto;
+  border-radius: 10px;
+  margin-top: 30px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.quicklinks img {
+  height: auto;
+  max-width: 200px;
+  display: inline-block;
+  padding: 10px;
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+  position: relative;
+  margin-right: 30px;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  opacity: 0.5;
+}
+
+.quicklinks img:hover {
+  opacity: 1;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+.banner {
+  width: 100%;
+  margin: 0;
+  padding: 120px 0;
+  text-align: center;
+  position: relative;
+  display: block;
+  color: #fff !important;
+  letter-spacing: 0.5px;
+  overflow: hidden;
+  background: #00838d;
+  transition: 1.5s;
+}
+
+.header {
+  height: auto;
+  background: none;
+  padding: 200px 0;
+}
+
+.banner h2,
+.header h1 {
+  margin: auto;
+  color: #fff;
+  position: relative;
+  transition: 0.3s;
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.header h1 {
+  color: #000;
+  transition: none;
+}
+
+.banner h2 svg {
+  font-size: 40px;
+  margin-left: 15px;
+  position: absolute;
+  top: 55%;
+  transform: translateY(-50%) scale(0.5);
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.banner .back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-position: center;
+  background-size: cover;
+  filter: grayscale(1) contrast(1.4);
+  opacity: 0.25;
+  transition: 1.5s;
+}
+
+.header .back {
+  filter: none;
+  opacity: 1;
+  background-position: center;
+
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.banner:hover {
+  background: #4b3a92;
+}
+
+.header:hover {
+  background: none;
+}
+
+.banner:hover h2 svg {
+  transform: translateY(-50%) scale(1);
+  opacity: 1;
+}
+
+.banner:hover h2 {
+  padding-right: 40px;
+}
+
+.header:hover h1 {
+  padding-right: 0;
+}
+
+.banner:hover .back {
+  transform: scale(1.03);
+}
+
+.header:hover .back {
+  transform: none;
+}
+@media (max-width: 768px) {
+  h2 {
+    font-size: 4rem;
+  }
+}
+@media (max-width: 640px) {
+  .banner h2 {
+    font: 600 7vw/10vw;
+  }
+
+  .header h1 {
+    font-size: 35px;
+  }
+
+  .banner h2 svg {
+    font-size: 30px;
+  }
+}
+
+@media (max-width: 480px) {
+  .banner,
+  .header {
+    padding: 80px 0;
+  }
+
+  h2 {
+    font-size: 3rem;
+  }
+}

css/layout.css

@@ -0,0 +1,472 @@
+main {
+  @apply pt-0;
+}
+
+#text-1xl { @apply text-xl }
+#text-2xl { @apply text-2xl }
+#text-3xl { @apply text-3xl }
+#text-4xl { @apply text-4xl }
+#text-5xl { @apply text-5xl }
+#text-6xl { @apply xl:text-6xl lg:text-5xl md:text-4xl sm:text-3xl}
+#text-7xl { @apply text-7xl }
+#text-8xl { @apply text-8xl }
+#text-9xl { 
+    font-size: 8rem;
+}
+
+#xp-heading { @apply m-0 }
+/*
+html, body {
+  @apply dark:bg-black;
+
+body {
+  @apply font-serif dark:text-gray-200;
+}
+*/
+
+p {
+  /* for handling Markdown-created <p> and <li> */
+  @apply text-lg;
+}
+
+pre,
+code {
+  font-feature-settings: normal;
+}
+
+.navWhite,
+.navWhite:visited {
+  @apply text-white;
+}
+
+.navWhite:focus,
+.navWhite:active {
+  @apply text-gray-400;
+}
+
+.text-blue-light {
+  @apply text-blue-500;
+}
+
+.text-blue-dark {
+  /* for dark mode 
+  @apply text-blue-200;
+  */
+}
+
+.text-shadow-titles {
+  text-shadow: 4px 4px 2px #000;
+}
+
+.gradient-titles {
+  @apply bg-gradient-to-b from-blue-700 to-black;
+}
+
+.ctr {
+  @apply text-center;
+}
+
+.legal {
+  @apply text-xs;
+}
+
+nav h4 a:hover {
+  @apply border-0 text-blue-300 font-light;
+}
+nav h4 a,
+nav h4 a:focus,
+nav h4 a:active {
+  @apply border-0 text-black font-light;
+}
+
+a h2 {
+  @apply text-black;
+}
+
+a:focus,
+a:hover {
+  @apply border-none text-blue-300;
+}
+a:active {
+  @apply text-blue-800 border-blue-500;
+}
+
+h5 a {
+  @apply text-gray-900 font-normal;
+}
+
+/*
+a:hover {
+  @apply dark:text-blue-300;
+}
+*/
+
+sup a,
+a.previous,
+a.next,
+.footnote-return {
+  @apply border-b-0;
+}
+
+#nav-toggle:checked + #navMenu {
+  @apply block;
+}
+
+a.navborderless {
+  @apply border-b-0;
+}
+/*
+.dateInfo {
+  @apply text-gray-700 dark:text-gray-400;
+}
+*/
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+}
+
+h1,
+.h1 {
+  @apply text-4xl font-extrabold;
+}
+
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  @apply font-bold;
+}
+
+h2,
+.h2 {
+  @apply text-4xl;
+}
+
+h4,
+.h4 {
+  @apply text-2xl;
+}
+
+h5 {
+  @apply not-italic;
+}
+
+h5,
+.h5,
+h6,
+.h6 {
+  @apply text-lg;
+}
+
+.height-hero {
+  height: 45vh;
+  max-height: 45vh;
+  overflow: hidden;
+}
+
+.height-post {
+  height: 35vh;
+  max-height: 35vh;
+}
+
+.imgCover {
+  @apply object-cover object-center h-full w-full;
+}
+
+.background-hero-image-div {
+  @apply relative overflow-hidden w-full bg-black;
+  /* Have to allow for mobile browsers' own "chrome"; can't go by Inspector simulations of smaller breakpoints */
+  height: 80vh;
+  max-height: 80vh;
+}
+
+.background-hero-title-block-fit {
+  @apply block w-full absolute bottom-0 px-4 pt-3 pb-6 bg-gradient-to-t from-black;
+}
+
+.background-hero-title-text {
+  text-shadow: 4px 4px 2px #000;
+}
+
+@media screen and (min-width: 768px) {
+  .background-hero-title-block-fit {
+    @apply px-12;
+  }
+
+  .background-hero-image-div {
+    height: 85vh;
+    max-height: 85vh;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .background-hero-title-block-fit {
+    @apply px-16;
+  }
+
+  .background-hero-image-div {
+    height: 95vh;
+    max-height: 95vh;
+  }
+}
+
+.text-nowrap,
+.text-nobrk {
+  @apply whitespace-nowrap;
+}
+
+article h1,
+article h2,
+article h3,
+article h4 {
+  @apply tracking-tight mt-8 mb-6;
+}
+
+article p {
+  @apply text-lg leading-relaxed;
+}
+
+article img.containedImage {
+  min-width: 100%;
+  max-width: 100%;
+  @apply w-full h-auto;
+}
+
+@media screen and (min-width: 768px) {
+  .height-hero {
+    height: 70vh;
+    max-height: 70vh;
+  }
+
+  .height-post {
+    height: 40vh;
+    max-height: 40vh;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  article p {
+    @apply text-xl leading-relaxed;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  article p {
+    @apply text-2xl leading-relaxed;
+  }
+}
+/*
+.yellowBox {
+  @apply font-sans bg-yellow-200 border border-gray-900 border-solid mx-auto my-2 w-full px-6 py-2 dark:bg-gray-800 dark:border-gray-500;
+}
+*/
+
+.yellowbox p {
+  @apply w-full p-2 m-0;
+}
+
+ul,
+ol {
+  @apply pl-8;
+}
+
+ul {
+  @apply list-disc;
+}
+
+ol {
+  @apply list-decimal;
+}
+
+.twitter-tweet {
+  @apply mt-4 mx-auto mb-0;
+}
+
+table.leagues {
+  @apply w-11/12 mt-4 mx-auto mb-0 border-0 border-collapse;
+}
+
+table.leagues td.col {
+  @apply w-1/2;
+}
+
+@media (min-width: 900px) {
+  table.leagues {
+    @apply w-3/5;
+  }
+  table.noborders {
+    @apply w-11/12;
+  }
+}
+
+table.noborders {
+  @apply w-full border-0 border-collapse mt-6 mx-auto mb-4;
+}
+
+table.noborders td {
+  @apply text-gray-800 text-left align-middle py-1 pr-0 pl-2;
+  /* text-align: left !important; */
+}
+
+table.noborders td img {
+  @apply inline-block align-middle m-0;
+}
+
+table.noborders tr {
+  @apply bg-blue-100;
+}
+
+table.noborders tr:nth-child(even) {
+  @apply bg-gray-200;
+}
+
+table.noborders thead tr {
+  @apply bg-blue-700;
+}
+
+table.noborders thead td {
+  @apply text-white font-bold;
+}
+
+table.noborders td.td70 {
+  width: 70%;
+}
+table.noborders td.td70 img {
+  @apply block w-1/2 h-auto;
+  max-width: 50%;
+}
+
+table.noborders td.td30 {
+  width: 30%;
+}
+/*
+blockquote {
+  @apply px-6 text-gray-700 dark:text-gray-400;
+}
+*/
+
+/* start, footnotes */
+
+.footnote-definition,
+.footnote-reference {
+  @apply font-sans;
+}
+
+.footnote-reference {
+  font-size: 0.65em;
+  top: -0.5em;
+}
+
+.footnote-sim {
+  font-size: 0.65em;
+  color: #0000ff;
+  @media (prefers-color-scheme: dark) {
+    color: #00aaff;
+  }
+}
+
+.footnotes {
+  & ol {
+    padding-inline-start: 1.5rem;
+  }
+  & ol li {
+    margin-bottom: 0.5rem;
+    font-size: $pokey;
+  }
+  & li p {
+    font-size: 100%;
+    line-height: 1.4;
+  }
+  & .footnote-backref {
+    font-size: 75%;
+  }
+}
+
+a.footnote-return {
+  font-size: 50%;
+}
+
+article > .footnote-definition {
+  border-top: 1px solid black;
+  padding-top: 1em;
+  margin-top: 1em;
+}
+
+article > .footnote-definition ~ .footnote-definition {
+  border-top: 0;
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.footnote-definition-label {
+  top: -0.4em;
+  font-size: 0.65em;
+}
+
+.footnote-definition-label + p {
+  font-size: 75%;
+  margin-top: -1.75em;
+  margin-left: 1em;
+  line-height: 1.35;
+}
+
+.footnote-definition-label::after {
+  content: ".";
+}
+
+/* == end, footnotes */
+
+.aspect-16x9 {
+  padding-bottom: 56.25%;
+}
+/*
+hr {
+  @apply border-solid border-gray-900 dark:border-gray-100;
+}
+*/
+
+footer {
+  @apply font-sans;
+}
+
+.lazypicturecaption {
+  @apply text-sm p-0 mt-2 leading-snug text-center;
+}
+
+.home-colOne p {
+  @apply leading-8 mb-4;
+}
+
+.home-colOne img {
+  @apply my-4;
+}
+
+.container-comments {
+  margin: 0 auto;
+  font-size: 85%;
+  width: 85%;
+  max-width: 720px !important;
+  margin-bottom: 0;
+}
+
+@media screen and (min-width: 900px) {
+  .container-comments {
+    width: 40%;
+  }
+}

public/404.html

@@ -0,0 +1,3 @@
+<!doctype html>
+<title>404 Not Found</title>
+<h1>404 Not Found</h1>

public/page2/index.html

@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<html lang="en" charset="utf-8">
+
+    
+
+
+
+
+
+<head>
+  <meta name="generator" content="Zola v.0.13.0 - getzola.org" />
+
+  
+  
+  <title>page2 &bull; examplezola</title>
+  <meta property="og:title" content="page2 &bull; examplezola" />
+  
+  
+
+  <!-- Required meta categories -->
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- **** BEGINNING, favicons **** -->
+
+  <!-- generics -->
+
+  <!-- iOS -->
+
+  <!-- Android -->
+
+  <!-- Windows 8, IE 10 -->
+
+  <!-- Windows 8.1 and up, IE 11 -->
+
+  <!-- **** CONCLUSION, favicons **** -->
+
+  <!-- CSS/SCSS -->
+  <link rel="stylesheet" href="https://examplezola.tf/css/index.css?h=241c4886080bf8daf3ce48d39d27a62e1dd2217a3943e80ffa0e9ea80bd73d8b" />  <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>
+
+    
+    <body>
+        <!--
+  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 variables used for header template -->
+
+
+
+
+
+    <header id="header-container">
+        
+        <div class="z-10 bg-white fixed w-screen customize">
+            <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="h-auto sm:w-15" src="https:&#x2F;&#x2F;examplezola.tf&#x2F;images&#x2F;logo_placeholder.jpg" alt="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">    
+                    
+                    
+                        <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;home&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                            Home
+                        </a>
+                        <div class="relative">
+                        </div>
+                    
+                    
+                        <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;page2&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                            page2
+                        </a>
+                        <div class="relative">
+                        </div>
+                    
+                    
+                        <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;page3&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                            page3
+                        </a>
+                        <div class="relative">
+                        </div>
+                    
+                    
+                    </nav>
+                </div>
+            </div>
+        </div>
+    
+    
+        
+            <!--
+            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">
+                        
+                             
+                            
+                            
+                            <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;page2&#x2F;" 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">
+                                page2
+                            </a>
+                            <hr/>
+                        
+                            
+                            
+                            <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;page3&#x2F;" 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">
+                                page3
+                            </a>
+                            <hr/>
+                        
+                        
+                        
+                        </nav>                    
+                    </div>
+                
+            </div>
+            
+            </div>
+        </div>
+    
+    
+    </header>
+    
+
+
+
+
+        <div id="content" class="mx-auto overflow-hidden">
+            
+
+<main>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <script>mermaid.initialize({startOnLoad:true});</script>
+    <div>
+        
+            <!-- section 1 (co-found) -->
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+
+<!-- This fixes link & img paths in local, prod, and wth prefix -->
+
+    
+    
+    
+        
+            
+            
+        
+            
+            
+            
+                
+            
+            
+        
+    
+
+
+
+
+
+
+<!-- aligns columns depending on col number-->
+ 
+    
+
+
+
+
+
+
+
+
+
+<!-- Padding -->
+
+
+
+
+    
+        
+    
+
+
+
+
+
+
+
+<!-- Margins -->
+
+
+
+
+    
+        
+    
+    
+
+
+
+
+
+
+
+
+    
+        
+        
+    
+
+    
+
+     <!-- makes row semi-full screen width, strips margins -->
+    
+
+        <!-- makes row full screen width, strips margins -->
+    
+
+    
+    
+
+
+
+
+
+<!-- makes row full screen width and adds background img -->
+
+
+
+
+
+
+
+
+<!-- Cancels page margins so that rows can have separate margins -->
+
+
+
+        <div id="" class="relative justify-center flex overflow-hidden  " style="">
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-2 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+        
+         
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            
+                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 ">
+                    <!-- handles mermaid markdown content display -->
+
+                    
+                        <h1 id="text-8xl">TITLE</h1>
+<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
+<p><img src="https://examplezola.tf/page2/placeholder.jpg#medium#mx-auto" alt="Image" /></p>
+
+                    
+                </div>
+            
+        
+    </div>
+</div>
+        
+    </div>
+
+ </main>     
+        </div>
+        <!--
+  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
+  Read the documentation to get started: https://tailwindui.com/documentation
+-->
+
+
+
+<footer class="bottom-0 mx-20">
+    
+        
+        <div class="customize -mx-20">
+            
+            <p class="text-center">ALL RIGHTS RESERVED 2022</p>
+        </div>
+    
+</footer>
+    </body>
+</html>

public/page3/index.html

@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<html lang="en" charset="utf-8">
+
+    
+
+
+
+
+
+<head>
+  <meta name="generator" content="Zola v.0.13.0 - getzola.org" />
+
+  
+  
+  <title>page3 &bull; examplezola</title>
+  <meta property="og:title" content="page3 &bull; examplezola" />
+  
+  
+
+  <!-- Required meta categories -->
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- **** BEGINNING, favicons **** -->
+
+  <!-- generics -->
+
+  <!-- iOS -->
+
+  <!-- Android -->
+
+  <!-- Windows 8, IE 10 -->
+
+  <!-- Windows 8.1 and up, IE 11 -->
+
+  <!-- **** CONCLUSION, favicons **** -->
+
+  <!-- CSS/SCSS -->
+  <link rel="stylesheet" href="https://examplezola.tf/css/index.css?h=241c4886080bf8daf3ce48d39d27a62e1dd2217a3943e80ffa0e9ea80bd73d8b" />  <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>
+
+    
+    <body>
+        <!--
+  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 variables used for header template -->
+
+
+
+
+
+    <header id="header-container">
+        
+        <div class="z-10 bg-white fixed w-screen customize">
+            <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="h-auto sm:w-15" src="https:&#x2F;&#x2F;examplezola.tf&#x2F;images&#x2F;logo_placeholder.jpg" alt="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">    
+                    
+                    
+                        <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;home&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                            Home
+                        </a>
+                        <div class="relative">
+                        </div>
+                    
+                    
+                        <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;page2&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                            page2
+                        </a>
+                        <div class="relative">
+                        </div>
+                    
+                    
+                        <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;page3&#x2F;" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                            page3
+                        </a>
+                        <div class="relative">
+                        </div>
+                    
+                    
+                    </nav>
+                </div>
+            </div>
+        </div>
+    
+    
+        
+            <!--
+            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">
+                        
+                             
+                            
+                            
+                            <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;page2&#x2F;" 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">
+                                page2
+                            </a>
+                            <hr/>
+                        
+                            
+                            
+                            <a href="https:&#x2F;&#x2F;examplezola.tf&#x2F;page3&#x2F;" 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">
+                                page3
+                            </a>
+                            <hr/>
+                        
+                        
+                        
+                        </nav>                    
+                    </div>
+                
+            </div>
+            
+            </div>
+        </div>
+    
+    
+    </header>
+    
+
+
+
+
+        <div id="content" class="mx-auto overflow-hidden">
+            
+
+<main>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <script>mermaid.initialize({startOnLoad:true});</script>
+    <div>
+        
+            <!-- section 1 (co-found) -->
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+
+<!-- This fixes link & img paths in local, prod, and wth prefix -->
+
+    
+    
+    
+        
+            
+            
+        
+            
+            
+            
+                
+            
+            
+        
+    
+
+
+
+
+
+
+<!-- aligns columns depending on col number-->
+ 
+    
+
+
+
+
+
+
+
+
+
+<!-- Padding -->
+
+
+
+
+    
+        
+    
+
+
+
+
+
+
+
+<!-- Margins -->
+
+
+
+
+    
+        
+    
+    
+
+
+
+
+
+
+
+
+    
+        
+        
+    
+
+    
+
+     <!-- makes row semi-full screen width, strips margins -->
+    
+
+        <!-- makes row full screen width, strips margins -->
+    
+
+    
+    
+
+
+
+
+
+<!-- makes row full screen width and adds background img -->
+
+
+
+
+
+
+
+
+<!-- Cancels page margins so that rows can have separate margins -->
+
+
+
+        <div id="" class="relative justify-center flex overflow-hidden  " style="">
+            <div id="" class="relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden lg:items-center py-2 md:py-4 lg:py-28 mx-12 sm:mx-20 md:mx-28 lg:mx-40 text-center items-center mx-auto " style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+        
+         
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            
+                <div class="flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4 flex-1 ">
+                    <!-- handles mermaid markdown content display -->
+
+                    
+                        <h1 id="text-8xl">TITLE</h1>
+<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
+<p><img src="https://examplezola.tf/page3/placeholder.jpg#medium#mx-auto" alt="Image" /></p>
+
+                    
+                </div>
+            
+        
+    </div>
+</div>
+        
+    </div>
+
+ </main>     
+        </div>
+        <!--
+  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
+  Read the documentation to get started: https://tailwindui.com/documentation
+-->
+
+
+
+<footer class="bottom-0 mx-20">
+    
+        
+        <div class="customize -mx-20">
+            
+            <p class="text-center">ALL RIGHTS RESERVED 2022</p>
+        </div>
+    
+</footer>
+    </body>
+</html>

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Disallow:
+Allow: /
+Sitemap: https://examplezola.tf/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+        <loc>https://examplezola.tf/</loc>
+    </url>
+    <url>
+        <loc>https://examplezola.tf/categories/</loc>
+    </url>
+    <url>
+        <loc>https://examplezola.tf/home/</loc>
+        <lastmod>2021-02-20</lastmod>
+    </url>
+    <url>
+        <loc>https://examplezola.tf/page2/</loc>
+        <lastmod>2021-02-20</lastmod>
+    </url>
+    <url>
+        <loc>https://examplezola.tf/page3/</loc>
+        <lastmod>2021-02-20</lastmod>
+    </url>
+</urlset>

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

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./templates/**/*.html', './content/**/*.md'],
+  safelist: [
+    {
+        pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/,
+        variants: ['sm', 'md', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'],
+    },
+    {
+        pattern: /(pt|pb)-(0)/,
+        variants: ['!', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'],
+    }
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

templates/_default/base.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" charset="utf-8">
+
+    {% include "partials/head.html" %}
+    
+    <body>
+        {% include "partials/header.html" %}
+        <div id="content" class="mx-auto overflow-hidden">
+            {% block content %}{% endblock %}    
+        </div>
+        {% include "partials/footer.html" %}
+    </body>
+</html>

templates/blogPage.html

@@ -0,0 +1,23 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+<!-- Default page template for blog posts and basic informative markdown files -->
+<main>
+
+<div class="sm:w-5/6 md:w-4/5 mr-auto ml-auto 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="">
+<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">
+        {{ page.title }} 
+    </h2>
+    <h4 class="text-sm not-italic font-light leading-6 text-gray-600"> 
+    </h4>
+        
+      {{ page.content | safe }}
+    </article>
+</div>
+</div>
+</main>
+
+{% endblock content %}

templates/categories/list.html

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

templates/categories/single.html

@@ -0,0 +1,14 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+<main class="pt-16">
+
+    <div class="flex flex-col md:flex-row">
+        {% include "partials/blogPosts.html" %}
+        {% include "partials/blogSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
+

templates/index.html

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

templates/layouts/blog.html

@@ -0,0 +1,30 @@
+{% extends "_default/base.html" %}
+<!-- blog template
+the template for displaying the blog page.
+consists of a featured blog 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="blog/_index.md") %}
+    {% for page in section.pages %}
+    {% if page.extra.isFeatured %}
+        {%- set_global featured = page %}
+        {% break %}
+    {% endif %}
+    {% endfor %}
+    
+    {% include "partials/featuredBlog.html" %}
+
+    <div class="flex flex-col md:flex-row">
+        {% include "partials/blogPosts.html" %}
+        {% include "partials/blogSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}

templates/layouts/horizontal_section.html

@@ -0,0 +1,18 @@
+{% extends "_default/base.html" %}
+{% import "macros.html" as macros %}
+
+{% block content %}
+
+<main class="lg:mt-6">
+    <div class="flex">
+        <div class="w-4/6 pr-20">
+            {{ section.content | safe}}
+        </div>
+        <div class="w-2/6 pl-20">
+            {{ macros::page_list(item_type="page-box", group=false) }}
+        </div>
+    </div>
+    <hr>
+</main> 
+ 
+{% endblock content %}

templates/list.html

@@ -0,0 +1,14 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+<!-- Page template for blog posts and basic informative markdown files -->
+<h1 class="title">
+  {{ section.title }}
+</h1>
+<ul>
+  {% for page in section.pages %}
+  <li>{{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") }} &bull; <a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
+  {% endfor %}
+</ul>
+<p>This comes from /templates/_default/list.html.</p>
+{% endblock content %}

templates/macros.html

@@ -0,0 +1,28 @@
+{% macro page_list(type="text") %}
+    <div id="list"></div>
+    {% if section.extra.group_pages_by %}
+        <div class="flex flex-col md:grid md:grid-cols-2 md:gap-12 lg:flex lg:flex-row justify-around text-center">
+            {% set taxonomy = get_taxonomy(kind=section.extra.group_pages_by) %}
+            {% set roles = taxonomy.items %}
+            {% for role in roles %}
+            <div class="flex flex-col items-start text-left my-8 mx-4 md:mx-8 lg:mx-4 flex-1 w-72">
+                {% set icon_path = config.extra.taxonomies["roles"][role.name].icon_path | as_str %}
+                <img src="{{icon_path}}" alt="role category icon" class="h-10 my-4">
+                {% set path = role.name | slugify %}
+                {% set fullpath = "/roles/" ~ path %}
+                <a href={{fullpath}} class="text-2xl text-black font-normal lg:mb-8 cursor-pointer"> {{role.name}} </a>
+                {% for page in role.pages %}
+                    {% include "partials/pageBox.html"%}
+                {% endfor %}
+            </div>
+            {% endfor %}
+        </div>
+    {% else %}
+        {% for page in section.pages %}
+            {{page}}
+            {% include "partials/pageBox.html"%}
+        {% endfor %}
+    {% endif %}
+{% endmacro page_list %}
+
+

templates/page.html

@@ -0,0 +1,16 @@
+{% extends "_default/base.html" %}
+
+{% block content %}
+
+<main>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <script>mermaid.initialize({startOnLoad:true});</script>
+    <div>
+        {% if page %}
+            {{page.content | safe}}
+        {% else %}
+            {{section.content | safe}}
+        {% endif %}
+    </div>
+
+ </main> {% endblock content %}

templates/partials/applicationForm.html

@@ -0,0 +1,60 @@
+<div class="mt-5 md:mt-0 md:col-span-2">
+    <form action="#" method="POST">
+      <div class="shadow sm:rounded-md sm:overflow-hidden">
+        <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
+            <h3 class="text-black text-lg">Application</h3>
+          <div class="grid grid-cols-3 gap-6">
+            <div class="col-span-3 sm:col-span-2">
+              <label for="company-website" class="block text-sm font-medium text-gray-700"> Website </label>
+              <div class="mt-1 flex rounded-md shadow-sm">
+                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"> http:// </span>
+                <input type="text" name="company-website" id="company-website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <label for="about" class="block text-sm font-medium text-gray-700"> About </label>
+            <div class="mt-1">
+              <textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="you@example.com"></textarea>
+            </div>
+            <p class="mt-2 text-sm text-gray-500">Brief description for your profile. URLs are hyperlinked.</p>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700"> Photo </label>
+            <div class="mt-1 flex items-center">
+              <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
+                <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+              </span>
+              <button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700"> Resume </label>
+            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
+              <div class="space-y-1 text-center">
+                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                  <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+                <div class="flex text-sm text-gray-600">
+                  <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+                    <span>Upload a file</span>
+                    <input id="file-upload" name="file-upload" type="file" class="sr-only">
+                  </label>
+                  <p class="pl-1">or drag and drop</p>
+                </div>
+                <p class="text-xs text-gray-500">PDF up to 10MB</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
+          <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
+        </div>
+      </div>
+    </form>
+  </div>

templates/partials/blogPosts.html

@@ -0,0 +1,70 @@
+{% 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">
+  <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] %}
+    The Latest from ThreeFold   
+    {% if taxonomy == "categories" %} - 
+        {{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/postCard.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/blogSidebar.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 POSTS BY</h4>
+        <a id="all" class="mb-3 text-black font-normal" href="/blog">All</a>
+        {% set taxonomy = get_taxonomy(kind="categories") %}
+        {% set categories = taxonomy.items %}
+        {% for category in categories %}
+            {% set path = category.name | slugify %}
+            {% set fullpath = "/categories/" ~ path %}
+            <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{category.name}} </a>
+        {% endfor %}
+    </div>
+
+{% set section = get_section(path="blog/_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 POSTS</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/featuredBlog.html

@@ -0,0 +1,29 @@
+<body>
+        
+    <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 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>
+        
+        <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>
+</body> 

templates/partials/footer.html

@@ -0,0 +1,21 @@
+<!--
+  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
+  Read the documentation to get started: https://tailwindui.com/documentation
+-->
+
+{%- set section = get_section(path="_index.md") %}
+
+{% set subsections_str = section.subsections | join(sep=" ") %}
+
+<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'}}">
+            {# <img src="{{get_url(path='images/')}}" class="w-60" alt=""> #}
+            <p class="text-center">ALL RIGHTS RESERVED 2022</p>
+        </div>
+    {% endif %}
+</footer>

templates/partials/head.html

@@ -0,0 +1,41 @@
+{% set cloudiBase = 'https://res.cloudinary.com/brycewray-com/image/upload/' %}
+{% set xFmPart1 = 'f_auto,q_auto:eco,w_' %}
+{% set xFmPart2 = ',x_0,z_1/' %}
+{% set fallbackImg = 'typewriter-monochrome_2242164_6260x4374.jpg' %}
+{% set zolaVer = '0.13.0' %}
+
+<head>
+  <meta name="generator" content="Zola v.{{ zolaVer }} - getzola.org" />
+
+  {% 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 %}
+
+  <!-- Required meta categories -->
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- **** BEGINNING, favicons **** -->
+
+  <!-- generics -->
+
+  <!-- iOS -->
+
+  <!-- Android -->
+
+  <!-- Windows 8, IE 10 -->
+
+  <!-- Windows 8.1 and up, IE 11 -->
+
+  <!-- **** 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>

templates/partials/header.html

@@ -0,0 +1,226 @@
+<!--
+  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 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="h-auto sm:w-15" src="{{logo_path}}" alt="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">
+            <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>
+                
+            </div>
+            
+            </div>
+        </div>
+    
+    
+    </header>
+    
+{% endif %}
+
+

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/icons/bar-svgrepo-com.svg

@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#A39B8D;" d="M406.261,155.826h-11.13V11.13h11.13V155.826z M261.565,11.13h-11.13v144.696h11.13V11.13z
+	 M116.87,11.13h-11.13v144.696h11.13V11.13z"/>
+<path style="fill:#F7F2CD;" d="M467.478,278.261H333.913l55.652-133.565h22.261L467.478,278.261z M267.13,144.696H244.87
+	l-55.652,133.565h133.565L267.13,144.696z M122.435,144.696h-22.261L44.522,278.261h133.565L122.435,144.696z"/>
+<path style="fill:#FFFCE3;" d="M446.609,278.261h-91.826l40.812-122.435h10.203L446.609,278.261z M261.101,155.826h-10.203
+	l-40.811,122.435h91.826L261.101,155.826z M116.405,155.826h-10.203L65.391,278.261h91.826L116.405,155.826z"/>
+<path style="fill:#F5D470;" d="M369.212,155.826c-1.231-3.483-1.908-7.227-1.908-11.13c0-18.442,14.949-33.391,33.391-33.391
+	s33.391,14.949,33.391,33.391c0,3.903-0.677,7.648-1.908,11.13H369.212z M287.484,155.826c1.231-3.483,1.908-7.227,1.908-11.13
+	c0-18.442-14.949-33.391-33.391-33.391s-33.391,14.949-33.391,33.391c0,3.903,0.677,7.648,1.908,11.13H287.484z M142.788,155.826
+	c1.231-3.483,1.908-7.227,1.908-11.13c0-18.442-14.949-33.391-33.391-33.391s-33.391,14.949-33.391,33.391
+	c0,3.903,0.677,7.648,1.908,11.13H142.788z"/>
+<path style="fill:#D19B3F;" d="M434.087,144.696c0,3.903-0.677,7.648-1.908,11.13h-20.353v-11.13c0-6.147-4.983-11.13-11.13-11.13
+	c-6.147,0-11.13,4.983-11.13,11.13v11.13h-20.353c-1.231-3.483-1.908-7.227-1.908-11.13c0-18.442,14.949-33.391,33.391-33.391
+	S434.087,126.254,434.087,144.696z M256,111.304c-18.442,0-33.391,14.949-33.391,33.391c0,3.903,0.677,7.648,1.908,11.13h20.353
+	v-11.13c0-6.147,4.983-11.13,11.13-11.13s11.13,4.983,11.13,11.13v11.13h20.353c1.231-3.483,1.908-7.227,1.908-11.13
+	C289.391,126.254,274.442,111.304,256,111.304z M111.304,111.304c-18.442,0-33.391,14.949-33.391,33.391
+	c0,3.903,0.677,7.648,1.908,11.13h20.353v-11.13c0-6.147,4.983-11.13,11.13-11.13c6.147,0,11.13,4.983,11.13,11.13v11.13h20.353
+	c1.231-3.483,1.908-7.227,1.908-11.13C144.696,126.254,129.746,111.304,111.304,111.304z"/>
+<path style="fill:#57544C;" d="M500.87,22.261H11.13C4.983,22.261,0,17.278,0,11.13l0,0C0,4.983,4.983,0,11.13,0H500.87
+	C507.017,0,512,4.983,512,11.13l0,0C512,17.278,507.017,22.261,500.87,22.261z"/>
+<path style="fill:#D3C6A8;" d="M434.087,489.739L434.087,489.739c0,12.295-9.966,22.261-22.261,22.261H100.174
+	c-12.295,0-22.261-9.966-22.261-22.261l0,0c0-12.295,9.966-22.261,22.261-22.261h311.652
+	C424.121,467.478,434.087,477.444,434.087,489.739z"/>
+<path style="fill:#6E5840;" d="M478.609,467.478H33.391V267.13h445.217V467.478z"/>
+<path style="fill:#323030;" d="M500.87,478.609H11.13c-6.147,0-11.13-4.983-11.13-11.13l0,0c0-6.147,4.983-11.13,11.13-11.13H500.87
+	c6.147,0,11.13,4.983,11.13,11.13l0,0C512,473.626,507.017,478.609,500.87,478.609z M512,267.13L512,267.13
+	c0-6.147-4.983-11.13-11.13-11.13H11.13C4.983,256,0,260.983,0,267.13l0,0c0,6.147,4.983,11.13,11.13,11.13H500.87
+	C507.017,278.261,512,273.278,512,267.13z"/>
+<path style="fill:#C6984F;" d="M125.217,500.87h-22.261l38.957-166.957h22.261L125.217,500.87z M347.826,333.913h-22.261
+	L286.609,500.87h22.261L347.826,333.913z"/>
+<path style="fill:#AA8144;" d="M164.174,333.913h22.261l38.957,166.957H203.13L164.174,333.913z M386.783,500.87h22.261
+	l-38.957-166.957h-22.261L386.783,500.87z"/>
+<path style="fill:#ADA58C;" d="M208.696,356.174h-89.043c-6.147,0-11.13-4.983-11.13-11.13v-22.261c0-6.147,4.983-11.13,11.13-11.13
+	h89.043c6.147,0,11.13,4.983,11.13,11.13v22.261C219.826,351.191,214.843,356.174,208.696,356.174z M403.478,345.043v-22.261
+	c0-6.147-4.983-11.13-11.13-11.13h-89.043c-6.147,0-11.13,4.983-11.13,11.13v22.261c0,6.147,4.983,11.13,11.13,11.13h89.043
+	C398.495,356.174,403.478,351.191,403.478,345.043z"/>
+<path style="fill:#D3C6A8;" d="M108.522,322.783L108.522,322.783c0-6.147,4.983-11.13,11.13-11.13h89.043
+	c6.147,0,11.13,4.983,11.13,11.13l0,0H108.522z M403.478,322.783L403.478,322.783c0-6.147-4.983-11.13-11.13-11.13h-89.043
+	c-6.147,0-11.13,4.983-11.13,11.13l0,0H403.478z"/>
+<path style="fill:#92393C;" d="M66.783,256c0,6.147-4.983,11.13-11.13,11.13h-11.13c-6.147,0-11.13-4.983-11.13-11.13v-33.391
+	h33.391V256z"/>
+<path style="fill:#DB6D53;" d="M50.087,256L50.087,256c-3.073,0-5.565-2.492-5.565-5.565v-27.826h11.13v27.826
+	C55.652,253.508,53.16,256,50.087,256z"/>
+<path style="fill:#C6984F;" d="M178.087,250.435v11.13c0,3.073-2.492,5.565-5.565,5.565h-66.783c-3.073,0-5.565-2.492-5.565-5.565
+	v-11.13c0-3.073,2.492-5.565,5.565-5.565h66.783C175.595,244.87,178.087,247.362,178.087,250.435z"/>
+<path style="fill:#AA8144;" d="M178.087,250.435V256h-77.913v-5.565c0-3.073,2.492-5.565,5.565-5.565h66.783
+	C175.595,244.87,178.087,247.362,178.087,250.435z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

templates/partials/icons/code-svgrepo-com.svg

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#E4EAF8;" d="M494.345,472.276H17.655C7.904,472.276,0,464.372,0,454.621V57.379
+	c0-9.751,7.904-17.655,17.655-17.655h476.69c9.751,0,17.655,7.904,17.655,17.655v397.241
+	C512,464.372,504.096,472.276,494.345,472.276z"/>
+<path style="fill:#5B5D6E;" d="M494.345,472.276H256V83.862h256v370.759C512,464.372,504.096,472.276,494.345,472.276z"/>
+<path style="fill:#D5DCED;" d="M512,83.862H0V57.379c0-9.751,7.904-17.655,17.655-17.655h476.69c9.751,0,17.655,7.904,17.655,17.655
+	V83.862z"/>
+<path style="fill:#E4EAF8;" d="M26.483,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C35.31,71.082,31.358,75.034,26.483,75.034z"/>
+<path style="fill:#FF5050;" d="M423.724,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C432.552,71.082,428.599,75.034,423.724,75.034z"/>
+<path style="fill:#FFF082;" d="M459.034,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C467.862,71.082,463.91,75.034,459.034,75.034z"/>
+<path style="fill:#A0FFB4;" d="M494.345,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C503.172,71.082,499.22,75.034,494.345,75.034z"/>
+<path style="fill:#00C3FF;" d="M144.898,150.826l-59.75,59.75c-3.229,3.229-3.463,8.386-0.54,11.893L256,428.138V145.655h-98.618
+	C152.7,145.655,148.209,147.516,144.898,150.826z"/>
+<polygon style="fill:#80E1FF;" points="256,145.655 176.552,216.276 256,216.276 "/>
+<g>
+	<path style="fill:#00AAF0;" d="M176.552,216.276l-25.97-69.254c-2.103,0.878-4.039,2.159-5.681,3.801L85.15,210.575
+		c-1.578,1.578-2.415,3.619-2.543,5.7L176.552,216.276L176.552,216.276z"/>
+	<polygon style="fill:#00AAF0;" points="176.552,216.276 256,428.138 256,216.276 	"/>
+</g>
+<path style="fill:#AFB9D2;" d="M256,489.931c-4.879,0-8.828-3.953-8.828-8.828V30.897c0-4.875,3.948-8.828,8.828-8.828
+	c4.879,0,8.828,3.953,8.828,8.828v450.207C264.828,485.978,260.879,489.931,256,489.931z"/>
+<g>
+	<path style="fill:#FF5050;" d="M317.793,163.31h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828S322.673,163.31,317.793,163.31z"/>
+	<path style="fill:#FF5050;" d="M317.793,233.931h-17.655c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828C326.621,229.978,322.673,233.931,317.793,233.931z"/>
+</g>
+<path style="fill:#A0FFB4;" d="M344.276,198.621h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,198.621,344.276,198.621z"/>
+<path style="fill:#FFFFFF;" d="M467.862,163.31H353.103c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,163.31,467.862,163.31z"/>
+<path style="fill:#FFF082;" d="M467.862,233.931H353.103c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828C476.69,229.978,472.742,233.931,467.862,233.931z"/>
+<path style="fill:#D5DCED;" d="M467.862,198.621h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,198.621,467.862,198.621z"/>
+<path style="fill:#A0FFB4;" d="M344.276,269.241h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,269.241,344.276,269.241z"/>
+<path style="fill:#D5DCED;" d="M467.862,269.241h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,269.241,467.862,269.241z"/>
+<g>
+	<path style="fill:#FF5050;" d="M317.793,304.552h-17.655c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828C326.621,300.599,322.673,304.552,317.793,304.552z"/>
+	<path style="fill:#FF5050;" d="M317.793,375.172h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828S322.673,375.172,317.793,375.172z"/>
+</g>
+<path style="fill:#A0FFB4;" d="M344.276,339.862h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,339.862,344.276,339.862z"/>
+<path style="fill:#FFFFFF;" d="M467.862,304.552H353.103c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828C476.69,300.599,472.742,304.552,467.862,304.552z"/>
+<path style="fill:#FFF082;" d="M467.862,375.172H353.103c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,375.172,467.862,375.172z"/>
+<path style="fill:#D5DCED;" d="M467.862,339.862h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,339.862,467.862,339.862z"/>
+<path style="fill:#A0FFB4;" d="M344.276,410.483h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,410.483,344.276,410.483z"/>
+<path style="fill:#D5DCED;" d="M467.862,410.483h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,410.483,467.862,410.483z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

templates/partials/icons/form-svgrepo-com.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path style="fill:#9F6459;" d="M416,32H272c0,8.836-7.164,16-16,16s-16-7.164-16-16H96c-22.055,0-40,17.945-40,40v400
+			c0,22.055,17.945,40,40,40h320c22.055,0,40-17.945,40-40V72C456,49.945,438.054,32,416,32z M416,464c0,4.418-3.582,8-8,8H104
+			c-4.418,0-8-3.582-8-8V80c0-4.418,3.582-8,8-8h304c4.418,0,8,3.582,8,8V464z"/>
+	</g>
+	<g>
+		<g>
+			<path style="fill:#D8DCE1;" d="M152,368c-1.891,0-3.789-0.664-5.312-2.023c-3.305-2.93-3.602-7.992-0.664-11.289l64-72
+				c2.328-2.625,6.094-3.422,9.289-1.969l80.445,36.57l52.844-128.336c1.688-4.078,6.359-6,10.445-4.352
+				c4.086,1.68,6.031,6.359,4.352,10.445l-56,136c-0.828,2.008-2.438,3.594-4.453,4.391s-4.273,0.742-6.258-0.156l-82.625-37.555
+				l-60.086,67.586C156.398,367.094,154.203,368,152,368z"/>
+		</g>
+	</g>
+	<g>
+		<circle style="fill:#FF4F19;" cx="152" cy="360" r="24"/>
+	</g>
+	<g>
+		<circle style="fill:#FF9600;" cx="216" cy="288" r="24"/>
+	</g>
+	<g>
+		<circle style="fill:#FFD200;" cx="304" cy="328" r="24"/>
+	</g>
+	<g>
+		<circle style="fill:#74D24F;" cx="360" cy="192" r="24"/>
+	</g>
+	<g>
+		<path style="fill:#B9BBC1;" d="M304,16h-20.391C277.969,6.242,267.484,0,256,0s-21.969,6.242-27.609,16H208
+			c-22.055,0-40,17.945-40,40v32c0,4.418,3.578,8,8,8h160c4.422,0,8-3.582,8-8V56C344,33.945,326.055,16,304,16z M256,40
+			c-4.418,0-8-3.582-8-8c0-4.418,3.582-8,8-8s8,3.582,8,8C264,36.418,260.418,40,256,40z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

templates/partials/icons/paint-brush-art-svgrepo-com.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 496 496" style="enable-background:new 0 0 496 496;" xml:space="preserve">
+<path style="fill:#996632;" d="M264,465.6c-4,4-10.4,6.4-16,6.4c-0.8,0-1.6,0-2.4,0c-12-1.6-21.6-12.8-21.6-25.6v-84
+	c0-32-26.4-58.4-58.4-58.4h-2.4c-14.4,0-26.4-12-26.4-26.4V256h224v21.6c0,14.4-12,26.4-26.4,26.4H332c-32,0-58.4,26.4-58.4,58.4
+	V448C272,454.4,268.8,461.6,264,465.6z M264,448c0-8.8-7.2-16-16-16c-8.8,0-16,7.2-16,16s7.2,16,16,16C256.8,464,264,456.8,264,448z
+	"/>
+<path style="fill:#D9CDC1;" d="M364,232c6.4,0,12-5.6,12-12v-24c0-6.4-5.6-12-12-12h20h4c6.4,0,12,5.6,12,12v24c0,6.4-5.6,12-12,12
+	h-12H364z"/>
+<circle style="fill:#42210B;" cx="328" cy="208" r="16"/>
+<path style="fill:#CC9966;" d="M296,80c0-8.8,7.2-16,16-16s16,7.2,16,16v40c0,17.6,14.4,32,32,32c5.6,0,11.2-1.6,16-4.8V168h-91.2
+	c6.4-5.6,11.2-14.4,11.2-24V80z"/>
+<g>
+	<circle style="fill:#42210B;" cx="248" cy="448" r="16"/>
+	<circle style="fill:#42210B;" cx="248" cy="208" r="16"/>
+</g>
+<path style="fill:#FFF8EF;" d="M248,192c-8.8,0-16,7.2-16,16s7.2,16,16,16c8.8,0,16-7.2,16-16S256.8,192,248,192z M364,184
+	c6.4,0,12,5.6,12,12v24c0,6.4-5.6,12-12,12H168c17.6,0,32-14.4,32-32v-16H364z M328,224c8.8,0,16-7.2,16-16s-7.2-16-16-16
+	s-16,7.2-16,16S319.2,224,328,224z"/>
+<path style="fill:#CC9966;" d="M200,80c0-8.8,7.2-16,16-16s16,7.2,16,16v64c0,9.6,4,18.4,11.2,24H200V80z"/>
+<path style="fill:#FF6600;" d="M360,136c-8.8,0-16-7.2-16-16V80c0-17.6-14.4-32-32-32s-32,14.4-32,32v64c0,8.8-7.2,16-16,16
+	s-16-7.2-16-16V80c0-17.6-14.4-32-32-32s-32,14.4-32,32v120c0,8.8-7.2,16-16,16s-16-7.2-16-16V96c0-19.2-13.6-35.2-32-39.2V56
+	c0-22.4,17.6-40,40-40h176c22.4,0,40,17.6,40,40v64C376,128.8,368.8,136,360,136z"/>
+<path style="fill:#FF7D00;" d="M168,208c-4.8,0-8-3.2-8-8V96c0-20-12.8-38.4-31.2-44.8C131.2,35.2,144,24,160,24h176
+	c17.6,0,32,14.4,32,32v64c0,4.8-3.2,8-8,8s-8-3.2-8-8V80c0-22.4-17.6-40-40-40s-40,17.6-40,40v64c0,4.8-3.2,8-8,8s-8-3.2-8-8V80
+	c0-22.4-17.6-40-40-40s-40,17.6-40,40v120C176,204.8,172.8,208,168,208z"/>
+<path style="fill:#CC9966;" d="M136,96v72h-16V73.6C129.6,76.8,136,85.6,136,96z"/>
+<path style="fill:#FFF8EF;" d="M136,200c0,17.6,13.6,32,31.2,32h-34.4c-6.4,0-12-5.6-12-12v-24c0-6.4,5.6-12,12-12h3.2V200z"/>
+<path style="fill:#875426;" d="M165.6,304c32,0,58.4,26.4,58.4,58.4v84c0,12.8,9.6,24,21.6,25.6c0.8,0,1.6,0,2.4,0
+	c6.4,0,12-2.4,16-6.4c4.8-4.8,8-11.2,8-17.6v-85.6c0-32,26.4-58.4,58.4-58.4h2.4c14.4,0,26.4-12,26.4-26.4V256H136v21.6
+	c0,14.4,12,26.4,26.4,26.4H165.6z M244.8,480c-16-1.6-28.8-16-28.8-33.6v-84c0-28-22.4-50.4-50.4-50.4h-2.4
+	c-19.2,0-34.4-15.2-34.4-34.4V248h240v29.6c0,19.2-15.2,34.4-34.4,34.4H332c-28,0-50.4,22.4-50.4,50.4V448c0,8.8-4,17.6-10.4,24
+	C262.4,477.6,253.6,480.8,244.8,480z"/>
+<path style="fill:#D9CDC1;" d="M120.8,220c0,6.4,5.6,12,12,12H120h-12c-6.4,0-12-5.6-12-12v-24c0-6.4,5.6-12,12-12h4h20.8
+	c-6.4,0-12,5.6-12,12V220z"/>
+<path style="fill:#42210B;" d="M136,96c0-10.4-6.4-19.2-16-22.4V168h16V96z M165.6,312c28,0,50.4,22.4,50.4,50.4v84
+	c0,17.6,12.8,32,28.8,33.6c8.8,0.8,17.6-2.4,24.8-8c6.4-6.4,10.4-14.4,10.4-24v-85.6c0-28,22.4-50.4,50.4-50.4h2.4
+	c19.2,0,34.4-15.2,34.4-34.4V248H128v29.6c0,19.2,15.2,34.4,34.4,34.4H165.6z M243.2,168c-6.4-5.6-11.2-14.4-11.2-24V80
+	c0-8.8-7.2-16-16-16s-16,7.2-16,16v88H243.2z M200,200c0,17.6-14.4,32-32,32h196h12h12c6.4,0,12-5.6,12-12v-24c0-6.4-5.6-12-12-12
+	h-4h-20H200V200z M330.4,328c-19.2,0-34.4,15.2-34.4,34.4V448c0,13.6-5.6,26.4-16,35.2c-8.8,8-20.8,12.8-32.8,12.8
+	c-1.6,0-3.2,0-4.8,0c-24-2.4-43.2-24-43.2-49.6v-84c0-19.2-15.2-34.4-34.4-34.4h-2.4c-28,0-50.4-22.4-50.4-50.4V248h-4
+	c-15.2,0-28-12.8-28-28v-24c0-14.4,10.4-25.6,24-27.2V56c0-31.2,24.8-56,56-56h176c31.2,0,56,24.8,56,56v112
+	c13.6,1.6,24,13.6,24,27.2v24c0,15.2-12.8,28-28,28h-4v29.6c0,28-22.4,50.4-50.4,50.4h-3.2V328z M296,144c0,9.6-4,18.4-11.2,24H376
+	v-20.8c-4.8,3.2-10.4,4.8-16,4.8c-17.6,0-32-14.4-32-32V80c0-8.8-7.2-16-16-16s-16,7.2-16,16V144z M120,232h12.8h34.4
+	c-17.6,0-31.2-14.4-31.2-32v-16h-3.2H112h-4c-6.4,0-12,5.6-12,12v24c0,6.4,5.6,12,12,12H120z M280,80c0-17.6,14.4-32,32-32
+	s32,14.4,32,32v40c0,8.8,7.2,16,16,16s16-7.2,16-16V56c0-22.4-17.6-40-40-40H160c-22.4,0-40,17.6-40,40v0.8c18.4,4,32,20,32,39.2
+	v104c0,8.8,7.2,16,16,16s16-7.2,16-16V80c0-17.6,14.4-32,32-32s32,14.4,32,32v64c0,8.8,7.2,16,16,16s16-7.2,16-16V80z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

templates/partials/icons/svgDribbbleIcon.html

@@ -0,0 +1,3 @@
+<svg class="h-6 w-6" 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

@@ -0,0 +1,3 @@
+<svg class="h-6 w-6" 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/svgFirstPageIcon.html

@@ -0,0 +1 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(128,128,128);"/></g></svg>

templates/partials/icons/svgGithubIcon.html

@@ -0,0 +1,3 @@
+<svg class="h-6 w-6" 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

@@ -0,0 +1,3 @@
+<svg class="h-6 w-6" 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/svgLastPageIcon.html

@@ -0,0 +1 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(128,128,128);"/></g></svg>

templates/partials/icons/svgNextPageIcon.html

@@ -0,0 +1 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(0,170,255);"/></g></svg>

templates/partials/icons/svgPrevPageIcon.html

@@ -0,0 +1 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(0,170,255);"/></g></svg>

templates/partials/icons/svgTwitterIcon.html

@@ -0,0 +1,3 @@
+<svg class="h-6 w-6" 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/pageBox.html

@@ -0,0 +1,9 @@
+<div class="mb-8 flex flex-col">
+    <a href="{{page.permalink}}" class="text-lg font-medium cursor-pointer text-blue-400 py-4">
+        {{page.title | safe}}
+    </a>
+    {% include "partials/categories.html" %}
+    <p>
+        {{page.description | safe}}
+    </p>
+</div>

templates/partials/page_list.html

@@ -0,0 +1,19 @@
+<div id="list"></div>
+{% if section.extra.group_pages_by %}
+    <div class="flex flex-col md:grid md:grid-cols-2 md:gap-12 lg:flex lg:flex-row justify-around text-center">
+        {% set taxonomy = get_taxonomy(kind=section.extra.group_pages_by) %}
+        {% set roles = taxonomy.items %}
+        {% for role in roles %}
+        <div class="flex flex-col items-start text-left my-8 mx-4 md:mx-8 lg:mx-4 flex-1 w-72">
+            {% set icon_path = config.extra.taxonomies["roles"][role.name].icon_path | as_str %}
+            <img src="{{icon_path}}" alt="role category icon" class="h-10 my-4">
+            {% set path = role.name | slugify %}
+            {% set fullpath = "/roles/" ~ path %}
+            <a href={{fullpath}} class="text-2xl text-black font-normal lg:mb-8 cursor-pointer"> {{role.name}} </a>
+            {% for page in role.pages %}
+                {% include "partials/pageBox.html"%}
+            {% endfor %}
+        </div>
+        {% endfor %}
+    </div>
+{% endif %}

templates/partials/postCard.html

@@ -0,0 +1,37 @@
+<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 }}
+        </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>
+        </div>
+      </div>
+    </div>
+  </div>

templates/partials/socialLinks.html

@@ -0,0 +1,21 @@
+<div class="flex space-x-6">
+    {% for key, link in section.extra.socialLinks %}
+
+        <a href="{{link}}" target="_blank" class="text-gray-400 hover:text-gray-500">
+        <span class="sr-only">{{key}}</span>
+        {% if key == "Facebook" %}
+        {% include "partials/icons/svgFacebookIcon.html" %}
+        {% elif key == "Github" %}
+        {% include "partials/icons/svgGithubIcon.html" %}
+        {% elif key == "Instagram" %}
+        {% include "partials/icons/svgInstagramIcon.html" %}
+        {% elif key == "Twitter" %}
+        {% include "partials/icons/svgTwitterIcon.html" %}
+        {% elif key == "Dribbble" %}
+        {% include "partials/icons/svgDribbbleIcon.html" %}
+        {% endif %}
+        </a>
+
+    {% endfor %}
+
+  </div>

templates/partials/tags.html

@@ -0,0 +1,5 @@
+<div class="flex mb-4">
+    {% 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

@@ -0,0 +1,31 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+<!-- Default page template for blog posts and basic informative markdown files -->
+<main>
+
+{% set banner_path = config.extra.taxonomies["roles"][page.taxonomies.roles[0]].banner_path | as_str %}
+{% set styles = "background: url('/" ~ banner_path ~ "'); background-size: cover; background-position: center"  %}
+
+<div class="w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 -mt-6 max-w-none py-28 max-h-80" style="{{styles}}"></div>
+<div class="flex flex-col lg:flex-row md:mx-4 lg:mx-6">
+    <article class="article mx-auto lg:w-1/2 lg:mr-8 lg:mt-10">
+        <div class="pt-8 lg:pt-8 2xl:pt-24">
+            <h3 class="text-2xl font-normal my-0 text-gray-600">Our World</h3>
+            <h1 class="text-left text-5xl font-normal my-2 font-medium">
+                {{ page.title }} 
+            </h1>
+            <p class="my-4">{{page.description}}</p>
+            {% include "partials/categories.html" %}
+        </div>
+        {{ page.content | safe }}
+    </article>
+    <div class="mx-auto lg:mt-12">
+        {% include "partials/applicationForm.html"%}
+    </div>
+</div>
+    
+</div>
+</main>
+
+{% endblock content %}

templates/roles/list.html

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

templates/roles/single.html

@@ -0,0 +1,35 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+<!-- Default page template for blog posts and basic informative markdown files -->
+<main>
+
+{% set banner_path = config.extra.taxonomies["roles"][term.name].banner_path | as_str %}
+{% set styles = "background: url('/" ~ banner_path ~ "'); background-size: cover; background-position: center"  %}
+
+<div class="w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 -mt-6 max-w-none py-28 max-h-80" style="{{styles}}"></div>
+<div class="flex flex-col lg:flex-row md:mx-4 lg:mx-6">
+    <article class="article mx-auto lg:w-1/2 lg:mr-8 lg:mt-10">
+        <div class="pt-8 lg:pt-8 2xl:pt-24">
+            <h3 class="text-2xl font-normal my-0 text-gray-600">Our World</h3>
+            <h1 class="text-left font-normal my-2 font-medium">
+                {{ config.extra.taxonomies["roles"][term.name].title }} 
+            </h1>
+            <p class="my-4">{{config.extra.taxonomies["roles"][term.name].description}}</p>
+        </div>
+        <hr />
+        <h3 class="text-black text-lg">{{term.name}} @ Ourworld</h3>
+        {% for page in term.pages %}
+            {% include "partials/pageBox.html"%}
+        {% endfor %}
+    </article>
+    <div class="mx-auto lg:mt-12">
+        {% include "partials/applicationForm.html"%}
+    </div>
+</div>
+    
+</div>
+</main>
+
+{% endblock content %}

templates/section.html

@@ -0,0 +1,11 @@
+{% extends "_default/base.html" %}
+
+{% block content %}
+
+<main class="lg:-mt-6">
+    {{ section.content | safe}}
+    <!-- <hr> -->
+    {% include "partials/page_list.html" %}
+ </main> 
+ 
+ {% endblock content %}

templates/shortcodes/admonition.html

@@ -0,0 +1,65 @@
+<!-- admonition shortcode for adding admonition in md-->
+
+{% set classes = "" %}
+
+{% set first_line = body | split(pat="\n") | first %}
+{% set parsed_first_line = first_line | split(pat=" ") %}
+{% set admonition = parsed_first_line | first %}
+{% set style = "" %}
+
+{% set content = body | split(pat="\n") | slice(start=2) | join(sep="\n") %}
+
+<!-- sets admonition type depending on qualifiers and modifiers 
+    hides content if doesn't adhere to admonition formatting -->
+{% if admonition == "!!!" %}
+    {% set classes = "admonition" %}
+{% elif admonition == "???" %}
+    {% set style = "collapsible closed" %}
+    {% set classes = "admonition" %}
+{% elif admonition == "???+" %}
+    {% set style = "collapsible open" %}
+    {% set classes = "admonition" %}
+{% else %}
+    {% set classes = "hidden" %}
+{% endif %}
+
+{% if "inline end" in first_line %}
+    {% set classes = classes ~ " inline end" %}
+    {% set parsed_first_line = parsed_first_line | slice(end=-2)%}
+{% elif "inline" in first_line %}
+    {% set classes = classes ~ " inline" %}
+    {% set parsed_first_line = parsed_first_line | slice(end=-1)%}
+{% endif %}
+
+{% if classes != "hidden"%}
+    {% if parsed_first_line[1] %}
+        {% set classes = classes ~ " " ~ parsed_first_line[1] %}
+    {% endif %}
+    {% if parsed_first_line[2] %}
+        {% if not parsed_first_line[2] == '""' %}
+            {% set title = parsed_first_line | slice(start=2) | join(sep=" ") %}     
+        {% endif %}
+    {% else %}
+        {% if parsed_first_line[1] %}
+            {% set title = parsed_first_line[1] | title %}
+        {% endif %}
+    {% endif %}
+{% endif %}
+
+
+{% if "collapsible" in style %}
+    <details class="{{classes}}" 
+    {% if "open" in style %} {{ "open='open'" }} {% endif %}>
+        {% if title %}
+            <summary class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</summary>
+            <p>{{ content }}</p>
+        {% endif %}
+    </details>
+{% else %}
+    <div class="{{classes}}">
+        {% if title %}
+            <div class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</div>
+        {% endif %}
+        <p>{{ content }}</p>
+    </div>
+{% endif %}

templates/shortcodes/button.html

@@ -0,0 +1,5 @@
+
+{% set path = body | split(pat="href=") | slice(start=1) | first | split(pat=">") | first | trim_start_matches(pat='"') | trim_end_matches(pat='"') %}
+<button onclick="window.location='{{path}}'" class="border-transparent flex flex-col border-2 w-full items-start rounded h-16 md:h-24 transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
+    {{ body | trim_start_matches(pat="<p>") | safe}}
+</button>

templates/shortcodes/earn_sec.html

@@ -0,0 +1,56 @@
+<style>
+    .bg_earn {
+        background-color: #F2EDE8;
+    }
+
+    .bg-boxs {
+        background-color: #f7f4f0;
+    }
+</style>
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn">
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/1_plug_in.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All you need to get started is
+                            electricity, a network connection, and a FreeFlow Node</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/2_offer_capacity.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Provide decentralized storage and
+                            compute capacity to host your communities digital life while maintaining privacy.</div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/3_earn.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Earn in the most valuable and
+                            rapidly growing economy: the Internet and cloud</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <br>
+        <button class="flex mx-auto uppercase"
+            onclick="window.open('https://threefoldfoundation.github.io/books/freeflow/network/farming/farming_reward.html', '_blank')">see
+            rewards</button>
+    </div>
+</div>

templates/shortcodes/featured_stories.html

@@ -0,0 +1,73 @@
+<style>
+    .bg_earning {
+        background-color: #F2F2F2;
+    }
+
+    .bg_fflow_twin {
+        background-color: #EAF3F7;
+    }
+
+    .bg_CHi_green {
+        background-color: #EBFFED;
+    }
+</style>
+
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg-white">
+    <div class="absolute inset-0">
+        <div class="bg-white h-1/3 sm:h-2/3"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_earning">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/get_earn.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900">
+                            get a node and <br /><b class="font-bold">start earning</b>
+                        </h3>
+                        <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">Get a FreeFlow Node and add capacity to
+                            the FreeFlow Network.</div>
+                        <button class="uppercase font-bold" onclick="window.location='/node'">know more</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_fflow_twin">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/ff_twin.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900">
+                            GET THE <br /><b class="font-bold">FREEFLOW TWIN</b>
+                        </h3>
+                        <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">Reserve your sovereign digital twin. <br>Take control over your digital life.</div>
+                        <button class="uppercase font-bold" onclick="window.location='/twin'">know more</button>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_CHi_green">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/chi.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900">
+                            ACQUIRE <br /><b class="font-bold">CHI</b>
+                        </h3>
+                        <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">The digital energy currency
+                            of <br>the FreeFlow network `CHI token`</div>
+                        <button class="uppercase font-bold"
+                            onclick="window.open('https://threefoldfoundation.github.io/books/freeflow/network/buy/buy_my_chi.html', '_blank')">know
+                            more</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

templates/shortcodes/fflow_experiences.html

@@ -0,0 +1,52 @@
+<style>
+    .bg_earn3 {
+        background-color: #F9F8F6;
+    }
+
+    .bg-boxs3 {
+        background-color: #EFEDEB;
+    }
+</style>
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn3">
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs3">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/education.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">FREEFLOWING<br> EDUCATION</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All citizens can now acquire information and learn skills.</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/empowerment.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">FREEFLOWING<br> EMPOWERMENT</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All citizens can now attain the opportunity to participate in the digital economy.</div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/collaboration.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">FREEFLOWING<br> COLLABORATION</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All citizens can now work together to achieve goals and growth.</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

templates/shortcodes/fflow_grid.html

@@ -0,0 +1,52 @@
+<style>
+    .bg_earn2 {
+        background-color: #f0ece8;
+    }
+
+    .bg-boxs {
+        background-color: #F7F4F1;
+    }
+</style>
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn2">
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/own_data.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">fully own<br> your data</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">The entirety of your data belogs to you instead of company or service-provider.</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/own_identy.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">unbeatable<br> privacy</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Only you have control of your data and decide who has access to it. Forever.</div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/endless.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">zero<br> manipulation</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Your data can never be used for financial or commercial gains by anyone.</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

templates/shortcodes/fflow_skills.html

@@ -0,0 +1,95 @@
+<div class="container px-4 sm:px-6 lg:pb-28 lg:px-8 mx-auto">
+    
+        <div class="grid gap-3 max-w-lg mx-auto lg:grid-cols-2 lg:max-w-none">
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/meet.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Meet & Communicate</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Chat with your friends, hold meetings and and have video conferencing.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/exchange.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Exchange & Store Money</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Transact or manage your assets using the wallet features available with the Twin.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/create.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Create</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Create videos, documents or anything else you require for your daily needs.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/organize.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Organize</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Archive and organize all your data in one place without worrying about security.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/share.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Share</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Send your data and files to anyone of your choice directly without central servers.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/publish.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Publish</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Build websites, librariies or whatever else you require with the FreeFlow Twin.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/discover.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Discover</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">FInd and browse any information without being tracked or logged.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/collaborate.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Collaborate</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Work with your friends, family or collegues or projects or tasks together.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/develop.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Develop & Expand</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Develop more tools or decentralized applications for the FreeFlow Grid.</p>
+                </div>
+            </div>
+        </div>   
+</div>

templates/shortcodes/fflow_twin.html

@@ -0,0 +1,53 @@
+<style>
+    .bg_earn {
+        background-color: #D9E7DF;
+    }
+
+    .bg-boxs {
+        background-color: #F7F4F1;
+    }
+</style>
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn">
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/key.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">EVERYONE<br> HAS ACCESS</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Every member of society has access and there are no barriers to entry,.</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/partake.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">ANYONE<br> CAN PARTAKE</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Only you have control of your data and decide who has access to it.</div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/succeed.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">ANYONE<br> CAN SUCCEED</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Anyone can attain the opportunity to earn and to better their lives.</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>

templates/shortcodes/grid_stats.html

@@ -0,0 +1,78 @@
+{% set styles = "background-image: url('/images/ston_bg.png');" %}
+{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
+{% if data %}
+{% set capacity = data.totalHru + data.totalSru / (1024 * 1024 * 1024 * 1024) %}
+{% set nodes = data.nodes %}
+{% set countries = data.countries %}
+{% endif %}
+<style>
+    .bg-map {
+        background-color: #EAE8E3;
+    }
+</style>
+<div class="bg-map pb-24">
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 ">
+            <div class=" overflow-hidden">
+                <div class="px-2 py-16">
+                    <div class="flex items-start">
+                        <div class="flex-shrink-0">
+                            <img src="/images/node_icon.png"  width="65" alt="">
+                        </div>
+                        <div class="ml-5 w-0 flex-1 pt-3">
+                            <dl>
+                                <dd class="flex items-baseline mb-5 ">
+                                    <div class="text-6xl advance leading-8 font-extrabold text-gray-900">
+                                        {{ nodes }}
+                                    </div>
+                                </dd>
+                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
+                                    freeflow nodes <br />deployed
+                                </dt>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class=" overflow-hidden bg-no-repeat bg-center	bg-contain	text-center" style="{{styles}}">
+                <div class="px-2 py-16">
+                    <div class="flex items-start">
+                        <div class="ml-5 w-0 flex-1 pt-3">
+                            <dl>
+                                <dd class="flex items-baseline mb-5 ">
+                                    <div class="text-6xl advance leading-8 mx-auto font-extrabold text-gray-900">
+                                        {{ countries }}
+                                    </div>
+                                </dd>
+                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
+                                    countries <br />involved
+                                </dt>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class=" overflow-hidden">
+                <div class="px-2 py-16">
+                    <div class="flex items-start">
+                        <div class="flex-shrink-0">
+                            <img src="/images/capacity_icon.png" width="65" alt="">
+                        </div>
+                        <div class="ml-5 w-0 flex-1 pt-3">
+                            <dl>
+                                <dd class="flex items-baseline mb-5 ">
+                                    <div class="text-6xl advance leading-8 font-extrabold text-gray-900">
+                                        {{ capacity | round() }}TB
+                                    </div>
+                                </dd>
+                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
+                                    capacity <br />generated
+                                </dt>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

templates/shortcodes/menu.html

@@ -0,0 +1,44 @@
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+{% set columns = body | safe | markdown | split(pat="|||") %}
+
+<!-- aligns columns depending on col number-->
+
+{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8" %}
+{% set column_classes = "flex-1 m-2 lg:m-4" %}
+
+<!-- makes row full screen width and adds background img -->
+
+<div class="{{classes}}">
+    {% 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 | 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}}">
+                {{column | split(pat="{% button() %}") | slice(end=1) | first | safe}}
+                <hr class="border-t-2 mt-2">
+                <br/>
+                {% 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>

templates/shortcodes/mermaid.html

@@ -0,0 +1,3 @@
+<div class="mermaid">
+    {{ body }}
+</div>

templates/shortcodes/row.html

@@ -0,0 +1,227 @@
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+
+<!-- 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 flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden"%}
+
+<!-- aligns columns depending on col number-->
+{% if 2 < columns | length %}
+    {% set row_class = row_class ~ " lg:items-start" %}
+{% else %} 
+    {% set row_class = row_class ~ " lg:items-center" %}
+{% endif %}
+
+{% set col_class = "flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4" %}
+
+
+{% set row_id = '' %}
+
+{% if id %}
+{% set row_id = id %}
+
+{% endif %}
+
+<!-- Padding -->
+
+{% set padding_class = " py-8 md:py-8 lg:py-28" %}
+
+{% if padding %}
+    {% if "none" in padding %}
+        {% set padding_class = " py-0" %}
+    {% elif "top" in padding %}
+        {% set padding_class = " py-2 md:py-4 lg:pt-28" %}
+    {% elif "bottom" in padding %}
+        {% set padding_class = " py-2 md:py-4 lg:pb-28" %}
+    {% elif "both" in padding %}
+        {% set padding_class = " py-2 md:py-4 lg:py-28" %}
+    {% endif %}
+{% endif %}
+
+{% if css %}
+    {% set padding_class = padding_class ~ " " ~ css %}
+{% endif %}
+
+{% set row_class =  row_class ~ padding_class %}
+
+
+<!-- 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-20 lg:mx-28" %}
+    {% elif "narrow" in margin %}
+        {% set margin_class = " mx-12 sm:mx-20 md:mx-28 lg:mx-40" %}
+    {% elif "tight" in margin %}
+        {% set margin_class = " mx-20 sm:mx-32 md:mx-40 lg:mx-80 xl:mx-96" %}
+    {% elif "header" in margin %}
+        {% set margin_class = " mx-12 sm:mx-20 md:mx-28 lg:mx-40 my-10" %}
+    {% endif %}
+    {% if "lean-left" in margin %}
+        {% set margin = margin_class | replace(from=" ", to=" first:")%}
+        {% set margin_left = margin | replace(from="mx", to="-ml") %}
+        {% set margin_right = margin | replace(from="mx", to="mr") %}
+        {% set col_class = col_class ~ " md:last:px-8 lg:last:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
+        {% set row_class = row_class ~ " sm:gap-0 " %}
+    {% elif "lean-right" in margin %}
+        {% set margin = margin_class | replace(from=" ", to=" last:")%}
+        {% set margin_left = margin | replace(from="mx", to="ml") %}
+        {% set margin_right = margin | replace(from="mx", to="-mr") %}
+        {% set col_class = col_class ~ " md:first:px-8  lg:first:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
+        {% set row_class = row_class ~ " sm:gap-0 " %}
+    {% endif %}
+{% endif %}
+
+{% if css %}
+    {% set margin_class = margin_class ~ " " ~ css %}
+{% endif %}
+
+{% set row_class =  row_class ~ margin_class %}
+
+{% if style %}
+
+    {% if "center" in style %}
+        {% set row_class = row_class ~ " text-center items-center mx-auto " %}
+        {% set col_class = col_class ~ " flex-1 " %}
+    {% endif %}
+
+    {% if "items-end" in style %}
+    {% set row_class = row_class ~ " lg:items-end" %}
+    {% set col_class = col_class ~ " flex-1 " %}
+    {% 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 ~ " " %}
+    {% endif %}
+
+        <!-- makes row full screen width, strips margins -->
+    {% if "narrow" in style %}
+        {% set row_class = row_class ~ " lg:max-w-3xl " %}
+    {% elif "tight" in style %}
+        {% set row_class = row_class ~ " lg:max-w-sm " %}
+    {% elif "moderate" in style %}
+        {% set row_class = row_class ~ " mx-20 " %}
+    {% endif %}
+
+    {% if "invert-color" in style %}
+
+                {% set row_class = row_class ~ " text-white lg:text-white " %}
+
+    {% endif %}
+    {% else %}
+        {% set row_class = row_class ~ " " %}
+{% endif %}
+
+{% set anchor_link = ""%}
+{% if anchor %}
+    {% set anchor_link = anchor %}
+{% endif %}
+
+
+<!-- makes row full screen width and adds background img -->
+{% set styles = ""  %}
+{% set div_class = " " %}
+{% if bgPath %}
+    {% 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-12 " %}
+    {% endif %}
+{% endif %}
+{% if bgColor %}
+    {% set styles = "background-color: " ~ bgColor ~ "; background-size: cover"  %}
+    {% set row_class = row_class %}
+{% endif %}
+
+{% if class %}
+    {% set styles = "background-color: " ~ bgColor ~ "; background-size: cover"  %}
+    {% set row_class = row_class %}
+{% endif %}
+
+<!-- Cancels page margins so that rows can have separate margins -->
+{% set no_margins = " -mx-8 md:-mx-12 lg:-mx-16 xl:-mx-20" %}
+
+
+        <div id="{{anchor_link}}" class="{{'relative justify-center flex overflow-hidden ' ~ div_class }}" style="{{styles}}">
+            <div id="{{row_id}}" 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 ">
+                    {{ 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="--")%}
+                        <div class="mermaid">
+                            {{mermaid_content | safe }}
+                        </div> 
+                    {% else %}
+                        {{ column | safe }}
+                    {% endif %}
+                </div>
+            {% endif %}
+        {% endfor %}
+    </div>
+</div>

templates/shortcodes/space.html

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

templates/shortcodes/team_sec.html

@@ -0,0 +1,79 @@
+<div class="lg:my-32 flex flex-col mt-5 p-auto lg:px-40">
+    <h2 class="flex py-2 mx-auto uppercase font-bold lg:text-6xl">
+        THE TEAM
+    </h2>
+    <div class="lg:max-w-4xl text-xl text-center mb-8 mx-auto leading-relaxed">Spread across the world, our team has
+        built some of the world’s best Internet storage and cloud automation technologies since the ‘90s. With a strong
+        vision for the future, we’re now on a mission to create a peer-to-peer Internet that can host all of humanity’s
+        digital workloads via smart contract, removing all forms of centralization from global IT systems.</div>
+    <div class="flex overflow-x-scroll pb-10 scrollable">
+        <div class="flex flex-nowrap ml-10 mt-10">
+            <div class="inline-block px-3">
+                <div class="
+                box
+                max-w-xs
+                overflow-hidden
+                rounded-full
+                shadow-md
+                hover:shadow-xl
+                transition-shadow
+                duration-300
+                ease-in-out
+              ">
+                    <a href="https://threefold.io/people/adnan_fatayerji/" title="Adnan Fatayerji">
+                        <img src="https://threefold.io/assets/static/adnan_fatayerji.a68c322.7ba2b95e75c9fab15be532f16ac0d644.jpg"
+                            class="rounded-full mx-auto mt-3" alt="Adnan Fatayerji" />
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .scrollable::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .scrollable::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 20px;
+    }
+
+    .scrollable::-webkit-scrollbar-thumb {
+        background: linear-gradient(45deg, #70dfc9, #ee7bf7);
+        border-radius: 20px;
+    }
+
+    /* #70dfc9, #ee7bf7 */
+    .box {
+        position: relative;
+        height: 150px;
+        width: 150px;
+    }
+
+    .box::before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 50%;
+        padding: 10px;
+        background: linear-gradient(45deg, #70dfc9, #ee7bf7);
+        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+        -webkit-mask-composite: destination-out;
+        mask-composite: exclude;
+    }
+
+    .box img {
+        filter: grayscale(100%);
+        height: 130px;
+        width: 130px;
+    }
+
+    .box img:hover {
+        filter: grayscale(0);
+    }
+</style>

templates/tags/list.html

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

templates/tags/single.html

@@ -0,0 +1,12 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+{% set section = get_section(path="join-us/_index.md")%}
+<main class="pt-16">
+    {{ section.content | safe}}
+    <hr>
+    {% include "partials/page_list.html" %}
+ </main> 
+ 
+ {% endblock content %}

vercel.json

@@ -0,0 +1,48 @@
+{
+  "build": {
+    "env": {
+      "ZOLA_VERSION": "0.14.0"
+    }
+  },
+  "github": {
+    "silent": true
+  },
+  "headers": [
+    {
+      "source": "/css/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=2678400"
+        }
+      ]
+    },
+    {
+      "source": "/images/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=2678400"
+        }
+      ]
+    },
+    {
+      "source": "/images/icons/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=2678400"
+        }
+      ]
+    },
+    {
+      "source": "/fonts/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=2678400"
+        }
+      ]
+    }
+  ]
+}