Merge pull request 'fix logo.' (#3) from development into master

Reviewed-on: threefold_coop/www_duniayetu#3

.github/workflows/tf_update_dev.yml

@@ -1,24 +0,0 @@
-name: www2.freezone.ourworld.tf
-on:
-  push:
-    branches: [ development ]
-
-jobs:
-  job_one:
-    name: Deploy
-    runs-on: ubuntu-latest
-    steps:
-    - name: pushing latest change on www2.freezone.ourworld.tf
-      uses: appleboy/ssh-action@master
-      with:
-        host: www2.freezone.ourworld.tf
-        username: ${{ secrets.TF_USER }}
-        key: ${{ secrets.TF_SECRET }}
-        port: ${{ secrets.TF_PORT }}
-        script: |
-          cd websites/www2/www_ourworld_freezone/
-          git log -1
-          git fetch
-          git reset --hard origin/development
-          sed -i "s/https:\/\/freezone.ourworld.tf/https:\/\/www2.freezone.ourworld.tf/g" config.toml
-          ./build.sh

.github/workflows/tf_update_prod.yml

@@ -1,24 +0,0 @@
-name: freezone.ourworld.tf
-on:
-  push:
-    branches: [ master ]
-
-jobs:
-  job_one:
-    name: Deploy
-    runs-on: ubuntu-latest
-    steps:
-    - name: pushing latest change on freezone.ourworld.tf
-      uses: appleboy/ssh-action@master
-      with:
-        host: freezone.ourworld.tf
-        username: ${{ secrets.TF_USER }}
-        key: ${{ secrets.TF_SECRET }}
-        port: ${{ secrets.TF_PORT }}
-        script: |
-          cd websites/www_ourworld_freezone/
-          git log -1
-          git fetch
-          git reset --hard origin/master
-          sed -i "s/https:\/\/www2.freezone.ourworld.tf/https:\/\/freezone.ourworld.tf/g" config.toml
-          ./build.sh

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,131 @@
+# The URL the site will be built for
+base_url = "http://localhost:8089/"
+# Change this to your own URL! Please note this variable **must** be uncommented.
+
+title = "A Template Website"
+description="Accessible and affordable for all"
+
+# 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 = "items"
+feed = true
+paginate_by = 2
+paginate_path = "product-posts"
+
+[[taxonomies]]
+name = "roles"
+feed = true
+paginate_by = 2
+paginate_path = "blog-posts"
+
+[[taxonomies]]
+name = "tags"
+feed = true
+paginate_by = 2
+paginate_path = "blog-posts"
+
+[[taxonomies]]
+name = "news-category"
+feed = true
+paginate_by = 6
+paginate_path = "news-card"
+
+[[taxonomies]]
+name = "people"
+feed = true
+paginate_by = 9
+paginate_path = "people"
+
+[[taxonomies]]
+name = "memberships"
+feed = true
+paginate_by = 8
+paginate_path = "people/memberships"
+
+[extra]
+header_class = "customize"
+footer_class = "customize"
+
+[extra.taxonomies."roles"]
+	[extra.taxonomies."roles".Create]
+	icon_path = "images/icons/paint-brush-art-svgrepo-com.svg"
+    banner_path = "images/marius-masalar-unsplash.jpg"
+    title = "Create OurWorld"
+    description = "Become a part of a team of creators looking to shape our digital world"
+
+    [extra.taxonomies."roles".Develop]
+	icon_path = "images/icons/code-svgrepo-com.svg"
+    banner_path = "images/marius-masalar-unsplash.jpg"
+    title = "Develop OurWorld"
+    description = "Become a part of a team of developers building our digital world"
+
+    [extra.taxonomies."roles".Inspire]
+	icon_path = "images/icons/bar-svgrepo-com.svg"
+    banner_path = "images/marius-masalar-unsplash.jpg"
+    title = "Share OurWorld"
+    description = "Create communities and involve people in ourworld"
+
+    [extra.taxonomies."roles".Organize]
+	icon_path = "images/icons/form-svgrepo-com.svg"
+    banner_path = "images/marius-masalar-unsplash.jpg"
+    title = "Run OurWorld"
+    description = "Become a part of the organizational team at ourworld"
+
+
+
+
+

content/buildondunia/index.md

@@ -6,8 +6,6 @@ updated: 2021-02-20
 draft: false
 sort_by: weight
 weight: 1
-extra:
-    logo_path: images/logo.svg
 ---
 
 {% row(style="center" padding="none" bgPath="img/2.jpg" bgStyle="full") %}

content/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);
+}

content/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%);
+  }
+}
+*/

content/css/index.css

@@ -0,0 +1,406 @@
+/*! 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-4 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-6xl font-bold leading-4 my-4;
+    font-family: "lato", sans-serif;
+    line-height: 0.9;
+    
+    
+  }
+  h2 strong {
+    @apply font-medium;
+  }
+  h3 {
+    @apply text-xl lg:text-3xl font-normal my-4;
+    color:#oab7a9;
+  }
+  h3 strong {
+    @apply font-medium;
+  }
+  h4 {
+    @apply text-xl lg:text-2xl font-normal my-4;
+    color:#oab7a9;
+  }
+  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-lg leading-tight tracking-normal font-normal my-0;
+    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
+    my-4
+    border-2
+    shadow
+  }
+
+  article h2{
+    @apply text-xl lg:text-3xl font-medium
+  }
+
+article p ,li{
+  @apply text-base lg:text-lg
+}
+}
+
+a:hover{
+  color: #737373;
+}
+
+button:hover  {
+  color: #737373;
+}
+
+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; */
+    color: #fff;
+    background-color: #17b9c8;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 24px;
+    padding-bottom: 24px;
+}
+
+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: 4px;
+  border: 2px solid black;
+  box-shadow: none;
+  /* font-size: 18px; */
+}
+
+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;
+  }
+
+  footer {
+    text-align: center;
+ }
+  /* h2 {
+    font-size: 3rem;
+  } */
+}

content/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%;
+  }
+}

content/footer/_index.md

@@ -4,7 +4,7 @@ description: ""
 insert_anchor_links: "left"
 template: "partials/footer.html"
 extra:
-  logoPath: "footer/img/logo_dunia_2.jpeg"
+  logoPath: "images/logo.jpeg"
   socialLinks: { Youtube: "https://www.youtube.com/channel/UC_iykLteqV-jwOBzueLtUwg", Twitter: "https://twitter.com/DenisMukwege", Facebook: "https://www.facebook.com/DrDenisMukwege"  }
 ---
 

content/header/_index.md

@@ -4,7 +4,7 @@ description: "this is a header."
 insert_anchor_links: "left"
 template: "partials/header.html"
 extra:
-  logoPath: "/header/img/logo_dunia.jpeg"
+  logoPath: "/images/logoheader.jpeg"
   imgPath: ""
 ---
 - [Home]("/home")

content/nodehost/index.md

@@ -7,7 +7,7 @@ draft: false
 sort_by: weight
 weight: 1
 extra:
-    logo_path: images/logo.svg
+    logo_path: images/logo.jpeg
 ---
 
 {% row(style="center" padding="top") %}

content/participate/index.md

@@ -7,7 +7,7 @@ draft: false
 sort_by: weight
 weight: 1
 extra:
-    logo_path: images/logo.svg
+    logo_path: images/logo.jpeg
 ---
 
 {% row(style="center" margin="through." bgPath="img/participate_2.png" bgStyle="full") %} 

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,406 @@
+/*! 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-4 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-6xl font-bold leading-4 my-4;
+    font-family: "lato", sans-serif;
+    line-height: 0.9;
+    
+    
+  }
+  h2 strong {
+    @apply font-medium;
+  }
+  h3 {
+    @apply text-xl lg:text-3xl font-normal my-4;
+    color:#oab7a9;
+  }
+  h3 strong {
+    @apply font-medium;
+  }
+  h4 {
+    @apply text-xl lg:text-2xl font-normal my-4;
+    color:#oab7a9;
+  }
+  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-lg leading-tight tracking-normal font-normal my-0;
+    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
+    my-4
+    border-2
+    shadow
+  }
+
+  article h2{
+    @apply text-xl lg:text-3xl font-medium
+  }
+
+article p ,li{
+  @apply text-base lg:text-lg
+}
+}
+
+a:hover{
+  color: #737373;
+}
+
+button:hover  {
+  color: #737373;
+}
+
+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; */
+    color: #fff;
+    background-color: #17b9c8;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 24px;
+    padding-bottom: 24px;
+}
+
+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: 4px;
+  border: 2px solid black;
+  box-shadow: none;
+  /* font-size: 18px; */
+}
+
+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;
+  }
+
+  footer {
+    text-align: center;
+ }
+  /* 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%;
+  }
+}

install.sh

@@ -1,16 +1,29 @@
 #!/usr/bin/env bash
 set -e
 
-mkdir -p ~/.vmodules/freeflowuniverse 
+GITEA_INSTANCE_URL="https://git.ourworld.tf"
-mkdir -p ~/code/github/freeflowuniverse
+GITEA_USERNAME="threefold_coop"
-pushd ~/code/github/freeflowuniverse
+
-git clone https://github.com/freeflowuniverse/crystallib.git
+mkdir -p ~/.vmodules/freeflowuniverse
+mkdir -p ~/code/gitea/$GITEA_USERNAME
+
+pushd ~/code/gitea/$GITEA_USERNAME
+
+# Clone crystallib repository from Gitea
+git clone $GITEA_INSTANCE_URL/$GITEA_USERNAME/crystallib.git
 pushd crystallib
 git checkout development_db
 popd
-ln -s ~/code/github/freeflowuniverse/crystallib/crystallib ~/.vmodules/freeflowuniverse/crystallib
 
-git clone https://github.com/freeflowuniverse/webcomponents.git
+# Create symbolic link to crystallib in ~/.vmodules/freeflowuniverse
-ln -s ~/code/github/freeflowuniverse/webcomponents/webcomponents ~/.vmodules/freeflowuniverse/webcomponents
+ln -s ~/code/gitea/$GITEA_USERNAME/crystallib/crystallib ~/.vmodules/freeflowuniverse/crystallib
+
+# Clone webcomponents repository from Gitea
+git clone $GITEA_INSTANCE_URL/$GITEA_USERNAME/webcomponents.git
+
+# Create symbolic link to webcomponents in ~/.vmodules/freeflowuniverse
+ln -s ~/code/gitea/$GITEA_USERNAME/webcomponents/webcomponents ~/.vmodules/freeflowuniverse/webcomponents
+
 popd
-echo "INSTALL OK"
+
+echo "INSTALL OK"

run.sh

@@ -0,0 +1,3 @@
+set -ex
+cd ~/code/git.ourworld.tf/drc/www_flowers4peace
+v -enable-globals -cg -w run.vsh

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
+

static/js/custom.js

@@ -0,0 +1,110 @@
+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-2 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);
+};

tailwind.config copy.js

@@ -0,0 +1,20 @@
+/** @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: [
+    require('@tailwindcss/typography'),
+  ],
+}

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./templates/**/*.html'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

templates/_default/base.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" charset="utf-8">
+
+    {% include "partials/head.html" %}
+    
+    <body>
+        {% include "partials/header.html" %}
+        <div id="content" class="p-4 pt-24 sm:p-12 overflow-hidden">
+            {% block content %}{% endblock %}    
+        </div>
+        {% include "partials/footer.html" %}
+        <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
+    </body>
+</html>

templates/blogPage.html

@@ -0,0 +1,82 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% if page.taxonomies.people %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(page.taxonomies.people[0]) %}
+{% set author_path = 'people/' ~ page.taxonomies.people[0] ~ '/index.md' %}
+{% set author = get_page(path=author_path) %}
+{% endif %}
+{% endif %}
+
+<!-- Default page template for blog posts and basic informative markdown files -->
+
+{% set split = page.content | split(pat="threefold.io") %}
+{% if split | length < 2 %} {% set content=page.content %} {% else %} {% set content="" %} {% for part in split %} {% if
+  part is starting_with("/blog") %} {% set split_part=part | split(pat='/">' ) %} {% set link=split_part[0] %} {% set
+  link=link | replace(from="/blog/post" , to="/blog" ) %} {% set link=link | replace(from="_" , to="-" ) %} {% set
+  rest_part=split_part | slice(start=1) | join(sep='/"' ) %} {% set part=link ~ '/">' ~ rest_part %} {% endif %} {% if
+  loop.first %} {% set_global content=part%} {% else %} {% set_global content=content ~ "threefold.io" ~ part%} {% endif
+  %} {% endfor %} {% endif %} <main>
+
+  <div class="container mx-auto mt-2 lg:mt-20">
+
+    <div>
+      <article class="article lg:w-4/6 mx-auto">
+        <h1 class="lg:text-4xl text-2xl font-medium leading-none mt-0  text-gray-700">
+          {{ page.title }}
+        </h1>
+
+        <h4 class="lg:text-xl text-base text-gray-600 leading-8">
+          {{ page.description }}
+        </h4>
+        <section class="post-author-list mb-3 mx-0">
+          <div class="flex items-center">
+            <div class="flex justify-between items-center">
+              <ul class="list-none flex author-list m-0">
+                <li class="author-list-item">
+                  {% if author %}
+                  {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
+                  replace(from='index.md', to=author.extra.imgPath)) %}
+                  <img src="{{author_img}}" alt="{{author.title}}" class="
+                        h-8
+                        w-8
+                        sm:h-10
+                        sm:w-10
+                        rounded-full
+                        bg-gray-200
+                        border-2 border-white
+                      " />
+                </li>
+                {% endif %}
+              </ul>
+            </div>
+
+            <div class="pl-3 flex flex-col text-xs leading-none uppercase">
+              {% if author %}
+              <a href="{{author.permalink}}" class="text-gray-700 text-xs">{{ author.title }}</a>
+              {% endif %}
+              <p class="text-gray-700 text-xs">
+                <time datetime="{{ page.date }}"> {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago")
+                  }}</time><br />
+                  <span id="time"
+                    class="time"></span>
+              </p>
+            </div>
+
+          </div>
+          <div class="my-2 sharethis-inline-share-buttons"></div>
+        </section>
+        {% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md',
+        to=page.extra.imgPath)) %}
+        <img class="mb-8 mx-auto" src={{img_url}} alt="{{page.title ~ 'Picture'}}">
+        <div>{{ content | safe }}</div>
+      </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 class="">
+    {% set page = get_page(path="home/index.md") %}
+    {{page.content | safe}}
+</div>
+{% endblock content %}

templates/items/list.html

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

templates/items/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/productPosts.html" %}
+        {% include "partials/productSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% 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 container mx-auto">
+        {% 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/layouts/newsroom.html

@@ -0,0 +1,33 @@
+{% extends "_default/base.html" %}
+<!-- News template
+the template for displaying the news page.
+consists of a featured news 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="newsroom/_index.md") %}
+    {% for page in section.pages %}
+    {% if page.extra.isFeatured %}
+        {%- set_global featured = page %}
+        {% break %}
+    {% endif %}
+    {% if not featured %} 
+        {%- set_global featured = section.pages[0] %}
+    {% endif %}
+    {% endfor %}
+    
+    {% include "partials/featuredNews.html" %}
+
+    <div class="flex flex-col md:flex-row container mx-auto">
+        {% include "partials/newsPosts.html" %}
+        {% include "partials/newsSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}

templates/layouts/people.html

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

templates/layouts/products.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="products/_index.md") %}
+    {% for page in section.pages %}
+    {% if page.extra.isFeatured %}
+        {%- set_global featured = page %}
+        {% break %}
+    {% endif %}
+    {% endfor %}
+    
+    {% include "partials/featuredProduct.html" %}
+
+    <div class="flex flex-col md:flex-row container mx-auto">
+        {% include "partials/productPosts.html" %}
+        {% include "partials/productSidebar.html" %}
+    </div>
+ </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/newsPage.html

@@ -0,0 +1,143 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% set split = page.content | split(pat="threefold.io") %}
+{% if split | length < 2 %}
+    {% set content = page.content %}
+{% else %}
+    {% set content = "" %}
+    {% for part in split %}
+        {% if part is starting_with("/blog") %}
+            {% set split_part = part | split(pat='/">') %}
+            {% set link = split_part[0] %}
+            {% set link = link | replace(from="/blog/post", to="/blog") %}
+            {% set link = link | replace(from="_", to="-") %}
+            {% set rest_part = split_part | slice(start=1) | join(sep='/">') %}
+            {% set part = link ~ '/">' ~ rest_part %}
+        {% endif %}
+        {% if part is starting_with("/people") %}
+            {% set split_part = part | split(pat='/">') %}
+            {% set link = split_part[0] %}
+            {% set link = link | replace(from="_", to="-") %}
+            {% set rest_part = split_part | slice(start=1) | join(sep='/">') %}
+            {% set part = link ~ '/">' ~ rest_part %}
+        {% endif %}
+        {% if loop.first %}
+            {% set_global content = part %}
+        {% else %}
+            {% set_global content = content ~ "threefold.io" ~ part %}
+        {% endif %}
+    {% endfor %}
+{% endif %}
+
+
+<!-- Default page template for news posts and basic informative markdown files -->
+<main>
+
+  <div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-2 lg:pt-16 lg:w-4/6">
+
+    <div class="pt-8">
+      <section class="post-header container mx-auto px-0 mb-4 border-b">
+        <h1 class="lg:text-4xl text-2xl font-medium leading-none mt-0">
+          {{ page.title }}
+        </h1>
+        <div class="lg:text-xl text-base pt-4 pb-10 text-gray-700">{{ page.description }}</div>
+      </section>
+      <section class="post-author-list mb-10 mx-0">
+        <div class="flex items-center">
+          <div class="flex justify-between items-center">
+            <ul class="list-none flex author-list my-10 mr-2 px-0">
+            {% if page.taxonomies.people %}
+                {% for person in page.taxonomies.people %}
+                    {% set author_path = 'people/' ~ person ~ '/index.md' %}
+                    {% set people = get_section(path="people/_index.md") %}           
+                    {% set pages_str = people.pages | json_encode() | as_str %}
+                    {% if pages_str is containing(person) %}
+                        {% set author = get_page(path=author_path) %}
+                        {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
+              <li class="author-list-item">
+                <a href="{{author.permalink}}" tooltip="{{author.title}}">
+                  <img src="{{author_img}}" alt="{{ author.title }}" class="
+                    w-10
+                    h-10
+                    rounded-full
+                    bg-gray-200
+                    border-2 border-white
+                  " />
+                </a>
+              </li>
+              {% endif %}
+              {% endfor %}
+              {% endif %}
+            </ul>
+          </div>
+
+          <div class="pl-3 flex flex-col text-xs leading-none uppercase">
+            <p>
+            {% if page.taxonomies.people %}
+            {% for person in page.taxonomies.people %}
+            {% set author_path = 'people/' ~ person ~ '/index.md' %}
+            {% set people = get_section(path="people/_index.md") %}           
+            {% set pages_str = people.pages | json_encode() | as_str %}
+            {% if pages_str is containing(person) %}
+                {% set author = get_page(path=author_path) %}
+                {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
+              <span>
+                <a href="{{author.permalink}}" tooltip="{{author.title}}" class="hover:underline text-gray-800">{{ author.title }}</a>
+              </span>
+              {% endif %}
+                {% endfor %}
+            {% endif %}
+            </p>
+            <p class="text-gray-700">
+              <time datetime="{{page.date}}">
+                {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
+              </time>
+              {# &nbsp;&middot;&nbsp; {{ page.news.timeToRead }} min read #}
+            </p>
+          </div>
+          <div class="my-2 ml-auto sharethis-inline-share-buttons"></div>
+        </div>
+      </section>
+    </div>
+    <section class="post-image mx-auto w-full">
+        {% if page.extra.imgPath %}
+    {% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
+    <img src="{{img_url}}" />
+    {%endif%}
+    </section>
+
+    <div class="py-12">
+      <section class="
+          post-content
+          container
+          mx-auto
+          relative
+          font-serif
+          text-gray-700
+        ">
+        <div class="post-content-text text-xl">{{ content | safe }}</div>
+      </section>
+
+      <section class="post-tags container mx-auto relative py-10">
+        {% for tag in page.taxonomies.tags %}
+        {% set fullpath = "/tags/" ~ tag | replace(from='_', to='-' ) %}
+        <a href="{{fullpath}}" class="
+            text-xs
+            bg-transparent
+            hover:text-blue-700
+            py-2
+            px-4
+            mr-2
+            border
+            hover:border-blue-500
+            border-gray-600
+            text-gray-700
+            rounded-full
+          ">{{ tag }}</a>
+        {% endfor %}
+      </section>
+    </div>
+  </div>
+</main>
+{% endblock content %}

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="text-center main-title px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  <h1
+    class="tracking-tight text-left text-2xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set category = path_array[2] %}
+    The Latest from Ourworld Free Zone  
+    {% 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 not post.extra.hidden %}
+            {% 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,36 @@
+{% if featured.taxonomies.people %}
+    {% set people = get_section(path="people/_index.md") %}           
+    {% set pages_str = people.pages | json_encode() | as_str %}
+    {% if pages_str is containing(featured.taxonomies.people[0]) %}
+        {% set author_path = 'people/' ~ featured.taxonomies.people[0] ~ '/index.md' %}
+        {% set author = get_page(path=author_path) %}
+    {% endif %}
+{% endif %}
+
+<body>
+
+  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-4 lg:mt-16 items-center container mx-auto pt-0 lg:pt-16">
+    <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 main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 ">
+          {{ featured.title }}
+        </h2>
+      </a>
+      <h4 class="text-sm not-italic font-light leading-6 text-gray-600">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
+      </h4>
+
+    </div>
+
+    <div class="mx-4 relative lg:mt-0 max-w-full">
+      <img class="relative mx-auto md:w-auto rounded md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
+    </div>
+  </div>
+
+  <hr class="mt-6">
+
+  </div>
+  </div>
+</body>

templates/partials/featuredNews.html

@@ -0,0 +1,28 @@
+<body>
+
+  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center container mx-auto">
+    <div class="relative lg:ml-8 my-8 w-full md:w-auto">
+      <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED NEWS</h3>
+      <a href={{featured.permalink}} class="">
+        <h2
+          class="mt-8 text-2xl main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 ">
+          {{ featured.title }}
+        </h2>
+      </a>
+
+      <h4 class="text-sm not-italic font-light leading-6 text-gray-600">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
+      </h4>
+
+    </div>
+
+    <div class="mx-4 relative lg:mt-0 max-w-full">
+        {% if featured.extra.imgPath %}
+      <img class="relative mx-auto md:w-auto md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
+        {% endif %}
+    </div>
+  </div>
+  <hr class="mt-6">
+  </div>
+  </div>
+</body>

templates/partials/featuredProduct.html

@@ -0,0 +1,36 @@
+{% if featured.taxonomies.people %}
+    {% set people = get_section(path="people/_index.md") %}           
+    {% set pages_str = people.pages | json_encode() | as_str %}
+    {% if pages_str is containing(featured.taxonomies.people[0]) %}
+        {% set author_path = 'people/' ~ featured.taxonomies.people[0] ~ '/index.md' %}
+        {% set author = get_page(path=author_path) %}
+    {% endif %}
+{% endif %}
+
+<body>
+
+  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center container mx-auto">
+    <div class="relative lg:ml-8 my-8 w-full md:w-auto">
+      <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED PRODUCT</h3>
+      <a href={{featured.permalink}} class="">
+        <h2
+          class="mt-8 text-2xl main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 ">
+          {{ featured.title }}
+        </h2>
+      </a>
+      <h4 class="text-sm not-italic font-light leading-6 text-gray-600">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
+      </h4>
+
+    </div>
+
+    <div class="mx-4 relative lg:mt-0 max-w-full">
+      <img class="relative mx-auto md:w-auto rounded md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
+    </div>
+  </div>
+
+  <hr class="mt-6">
+
+  </div>
+  </div>
+</body>

templates/partials/filter_bar.html

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

templates/partials/footer.html

@@ -0,0 +1,42 @@
+<!--
+  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="footer/_index.md") %}
+{%- set logoPath = section.extra.logoPath %}
+
+<html>
+    <head /><body>
+        <div class="mt-6 border-t border-gray-200 pt-2"></div>
+        <footer class="bg-white">
+          <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+            <div class="xl:flex xl:gap-4 items-center">
+              <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
+                <img class="w-40 h-auto sm:w-15 mx-auto" src="{{ get_url(path=logoPath)}}" alt="Ourworld Freezone Logo" />
+                <p class="text-gray-500 text-base leading-6 ">
+                  {{section.description}}
+                </p>
+                {% include "partials/socialLinks.html" %}
+            </div>
+
+            <div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust">
+                {{ section.content | safe }}
+            </div>
+              
+              </div>
+              <div  class="mt-12 mx-auto border-t border-gray-200 pt-8">
+                <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
+                © 2023 Flowers 4 Peace, All rights reserved.
+              </div>
+    
+            </div>
+            
+          </div>
+
+
+          
+        </footer>
+        </body>
+        </html>
+        

templates/partials/head.html

@@ -0,0 +1,53 @@
+{% 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>
+  
+  <!-- MailerLite Universal -->
+<script>
+  (function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
+  var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
+  f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
+  var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
+  _.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
+  
+  var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
+  </script>
+  <!-- End MailerLite Universal -->
+
+</head>

templates/partials/header.html

@@ -0,0 +1,134 @@
+<!--
+  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
+  Read the documentation to get started: https://tailwindui.com/documentation
+--><!-- This example requires Tailwind CSS v1.4.0+ -->
+
+
+<!-- set 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 max-w-full ' ~ 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 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="pt-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>
+                        
+                        {% endfor %}
+                        </nav>                    
+                    </div>
+                
+            </div>
+            
+            </div>
+        </div>
+    
+    
+    </header>
+    
+{% endif %}
+
+

templates/partials/header_custom.html

@@ -0,0 +1,147 @@
+<!--
+  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
+  Read the documentation to get started: https://tailwindui.com/documentation
+--><!-- This example requires Tailwind CSS v1.4.0+ -->
+
+{%- set section = get_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-1 sm:px-8 md:px-12 py-2 lg:px-28 lg:justify-start lg:space-x-20">
+            <div>
+                <a href="/" class="flex">
+                    <img class="w-40 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%}
+        {% if header_label is containing("http") %}
+            <a href="{{link_path[1]}}" target="_blank" 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 %}
+            <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>
+        {% endif %}
+    {% else %}
+        <div class="relative">
+            {% set button_id = header_label ~ "-menu-btn" | slugify %}
+        <button type="button" id="{{button_id}}" class="nav_btn font-medium text-gray-900 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 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%}
+                                {% if header_label is containing("http") %}
+                                <a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                    {{link_label}}
+                                </a>
+                                {% else %}
+                                <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>
+                                {% endif %}
+                            {% else %}
+                                {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
+                                    <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                        <span>{{ header_label }}</span>
+                                        <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                                    </button>
+                                    {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
+                                    <div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                                        {{ header_arr[1] | safe }}
+                                    </div>
+                    
+                            {% endif %}
+                        {% endif %}
+                    {% endfor %}
+                    </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/svgTelegram.html

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

templates/partials/icons/svgTwitterIcon.html

@@ -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/memberships.html

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

templates/partials/newsCard.html

@@ -0,0 +1,59 @@
+<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
+  <div class="flex-1">
+    <a href={{ post.permalink }} class="block" style="pointer-events: none;">
+      <div class="flex-shrink-0">
+        {% if post.extra.imgPath %}
+        {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', to=post.extra.imgPath)) %}
+        <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="" />
+        {% endif %}
+      </div>
+      <div class="flex-1 bg-white p-4 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-xl leading-7 font-medium text-gray-900 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal leading-5 text-gray-500 text-left">
+          {{ post.description }}
+        </p>
+        {% endif %}
+    </a>
+    <div class="flex items-center">
+      <div class="flex justify-between items-center">
+        <ul class="list-none flex author-list my-10 mr-2 px-0">
+            {% if post.taxonomies.people %}
+            {% for author in post.taxonomies.people %}
+            {% set author_path = 'people/' ~ author ~ '/index.md' %}
+            {% set people = get_section(path="people/_index.md") %}           
+            {% set pages_str = people.pages | json_encode() | as_str %}
+            {% if pages_str is containing(author) %}
+                {% set author = get_page(path=author_path) %}
+                {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
+          <li class="author-list-item">
+            <a href="{{ author.permalink }}" tooltip="{{ author.title }}">
+              <img src="{{ author_img }}" alt="{{ author.title }}" class="
+                  w-8
+                  h-8
+                  rounded-full
+                  bg-gray-200
+                  border-2 border-white
+                " />
+            </a>
+          </li>
+          {% endif %}
+          {% endfor %}
+          {% endif %}
+        </ul>
+      </div>
+
+      <p class="text-gray-700 text-s">
+        {% if post.extra.socialLinks.contact %}
+        <a href="{{ post.extra.socialLinks.contact }}" class="border-1 text-s font-bold border-gray-600 hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full" target="_blank">
+            <u>Read More</u>
+        </a>
+    {% endif %}
+      </p>
+    </div>
+  </div>
+</div>
+</div>

templates/partials/newsPosts.html

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

templates/partials/newsSidebar.html

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

templates/partials/pageBox.html

@@ -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/personCard.html

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

templates/partials/person_card.html

@@ -0,0 +1,21 @@
+<div class="flex flex-col px-0 sm:px-4 pb-2">
+    <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left ">
+        {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
+        <img src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
+        <div>
+            <h2 class="text-2xl">{{page.title}}</h2>
+            <div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis" style="pointer-events: none;">
+                {% if page.description %}
+                    {{page.description}}
+                {% else %}
+                    {{page.content | safe}}
+                {% endif %}
+            </div>
+            <div class="my-2 flex flex-row items-start flex-wrap">
+                    <a href="{{ page.permalink }}" class="border-1 text-s font-bold border-gray-600 hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full" onclick="s">
+                        <u>More Info</u>
+                    </a>
+            </div>
+        </div>
+    </a>
+</div>

templates/partials/postCard.html

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

templates/partials/productCard.html

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

templates/partials/productPosts.html

@@ -0,0 +1,70 @@
+{% block content %}
+
+<div class="text-center main-title px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  <h1
+    class="tracking-tight text-left text-2xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set item = path_array[2] %}
+    The Latest from OurPhone   
+    {% if taxonomy == "items" %} - 
+        {{item | 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 not post.extra.hidden %}
+            {% include "partials/productCard.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/productSidebar.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 PRODUCTS BY</h4>
+        <a id="all" class="mb-3 text-black font-normal" href="/products">All</a>
+        {% set taxonomy = get_taxonomy(kind="items") %}
+        {% set items = taxonomy.items %}
+        {% for item in items %}
+            {% set path = item.name | slugify %}
+            {% set fullpath = "/items/" ~ path %}
+            <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{item.name}} </a>
+        {% endfor %}
+    </div>
+
+{% set section = get_section(path="products/_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 setActiveProduct() {
+        let activeProduct = window.location.pathname.split("/")[2]    
+        if (typeof activeProduct === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeProduct)}
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveProduct()
+</script>

templates/partials/socialLinks.html

@@ -0,0 +1,23 @@
+<div class="flex space-x-6 items-center justify-center">
+    {% 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" %}
+        {% elif key == "Telegram" %}
+        {% include "partials/icons/svgTelegram.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/partnerPage.html

@@ -0,0 +1,57 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-16 lg:w-4/6">
+  <div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
+    <div class="w-full md:w-1/6 mx-auto sm:mx-0">
+      <img src="{{page.extra.partner_logo}}" class="
+            rounded-full
+            bg-gray-200
+            w-32
+            h-32
+            border-4 border-gray-400
+            mx-auto
+            md:mx-0
+          " />
+    </div>
+    <div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0">
+      <h1 class="pb-0 mb-0 mt-0 text-4xl font-medium">
+        {{ page.title }}
+      </h1>
+
+      <div class="avatars">
+        <section class="container mx-auto py-2">
+          <ul class="list-none flex author-list my-2 px-0">
+            {% if page.extra.websites %}
+            <li class="mr-2">
+              <a href="{{page.extra.websites}}" target="_blank" rel="noopener noreferrer"
+                class="text-gray-400 hover:text-black linkedin_size mx-1">
+                <i class="fa-solid fa-globe fa-2x"></i> </a>
+            </li>
+            {% endif %}
+            {% if page.extra.linkedin %}
+            <li>
+              <a href="{{page.extra.linkedin}}" target="_blank" rel="noopener noreferrer"
+                class="text-gray-400 hover:text-black linkedin_size mx-1">
+                <i class="fa-brands fa-linkedin fa-2x"></i> </a>
+            </li>
+            {% endif %}
+          </ul>
+          {% for tag in page.taxonomies.tags %}
+          <a href="{{'/tags/' ~ tag}}" class="border-1 font-light text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+              {{tag}}
+          </a>
+      {% endfor %}
+        </section>
+      </div>
+    </div>
+  </div>
+
+  <div class="pt-8 border-b mx-4 sm:-mx-4"></div>
+
+  <section class="post-content container mx-auto relative text-gray-700">
+    <div class="post-content-text text-xl">{{ page.content | safe }}</div>
+  </section>
+</div>
+
+{% endblock content %}

templates/people/list.html

@@ -0,0 +1,84 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+
+<div class="container mx-auto">
+    {% include "partials/filter_bar.html" %}
+    
+    <div class="text-center main-title px-0 md:w-full">
+      <h1
+        class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+      >
+      {%- set section = get_section(path="people/_index.md") %}
+
+      {% set path_array = current_path | split(pat="/") %}
+      {% set taxonomy = path_array[1] %}
+      {% set category = path_array[2] %}
+        {{category | replace(from='-', to=' ' ) | title}}
+      </h1>
+      <div>
+        <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-4 lg:max-w-none">
+          {% for person in section.pages %} 
+            {% set page_path = person.path ~ 'index.md' | replace(from='-', to='_') | trim_start_matches(pat="/") %}
+            {% set people = get_section(path="people/_index.md") %}
+            {% set pages_str = people.pages | json_encode() | as_str %}
+            {% if pages_str is containing(person.title) %}
+                {% set page = get_page(path=page_path) %}
+                {% if page.extra.private >= 0 %}
+                {% if page.title != "ThreeFold_Community"%}
+                    {% include "partials/person_card.html" %}
+                {% endif %}
+                {% endif %}
+            {% endif %}
+        {% endfor %}
+        </div>
+        <hr class="mt-6" />
+        <p class="text-center text-sm mt-2 mb-16">
+          {% if paginator.previous %}
+          <a
+            class="border-transparent"
+            aria-label="First page"
+            href="{{ paginator.first }}"
+            >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+            "partials/icons/svgPrevPageIcon.html" %}</a
+          >
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <a
+            class="border-transparent"
+            aria-label="Previous page"
+            href="{{ paginator.previous }}"
+            >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+          >
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+          include "partials/icons/svgFirstPageIcon.html" %}{% include
+          "partials/icons/svgFirstPageIcon.html" %}
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+          "partials/icons/svgFirstPageIcon.html" %}
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+          paginator.next %}
+          <a
+            class="border-transparent"
+            aria-label="Next page"
+            href="{{ paginator.next }}"
+            >{% include "partials/icons/svgNextPageIcon.html" %}</a
+          >
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <a
+            class="border-transparent"
+            aria-label="Last page"
+            href="{{ paginator.last }}"
+            >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+            "partials/icons/svgNextPageIcon.html" %}</a
+          >
+          {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+          "partials/icons/svgLastPageIcon.html" %}{% include
+          "partials/icons/svgLastPageIcon.html" %} {% endif %}
+        </p>
+      </div>
+    </div>
+</div>
+
+{% endblock content %}

templates/people/memberships/list.html

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

templates/people/memberships/single.html

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

templates/people/news-category/list.html

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

templates/people/news-category/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/newsPosts.html" %}
+        {% include "partials/newsSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
+

templates/people/single.html

@@ -0,0 +1,55 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% set page_path = term.path ~ 'index.md' | replace(from='-', to='_') | trim_start_matches(pat="/") %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(term.name) %}
+    {% set page = get_page(path=page_path) %}
+
+
+<div class="container sm:pxi-0 lg:w-5/6 mx-auto min-h-screen overflow-x-hidden pt-24">
+    <div class="flex flex-row flex-wrap items-start mx-4 sm:mx-0">
+        <div class="w-full md:w-1/6 mx-auto sm:mx-0">
+            <img src="{{page.extra.imgPath}}" alt="" class="rounded bg-gray-200 w-48 border-2 border-gray-400 mx-auto md:mx-0 g-image g-image--lazy g-image--loaded my-4">
+        </div>
+        <div class="w-full md:w-5/6 text-center md:text-left md:pl-8">
+            <div class="flex flex-row items-center">
+                <h1 class="pb-0 mb-0 mt-0 text-4xl font-normal tracking-wide my-1">
+                    {{page.title}}
+                </h1>
+            </div>
+            <div class="text-gray-700 my-4">
+                {{page.content | safe }}
+            </div>
+            <div class="flex items-center">
+                <div class="flex justify-between items-center">
+                    <ul class="list-none flex author-list m-0 py-2">
+                        {% for org in page.extra.organizations %}
+                            <li>
+                                <a href="">
+                                    <img src="" alt="">
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+            {% if page.taxonomies.memberships %}
+            {% for tag in page.taxonomies.memberships %}
+                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 font-light text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+                    {{tag}}
+                </a>
+            {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+    <div class="my-8">
+        <hr/>
+        <br/>
+        <hr/>
+    </div>
+</div>
+{% endif %}
+
+{% endblock content %}

templates/people/tags/list.html

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

templates/people/tags/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/tagsCards.html" %}
+        {% include "partials/tagsSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
+

templates/people_page.html

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

templates/person_page.html

@@ -0,0 +1,45 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+<div class="container sm:pxi-0 lg:w-5/6 mx-auto min-h-screen overflow-x-hidden pt-24">
+    <div class="flex flex-row flex-wrap items-start mx-4 sm:mx-0">
+        <div class="w-full md:w-1/6 mx-auto sm:mx-0">
+            <img src="{{page.extra.imgPath}}" alt="" class="rounded bg-gray-200 w-48 border-2 border-gray-400 mx-auto md:mx-0 g-image g-image--lazy g-image--loaded my-4">
+        </div>
+        <div class="w-full md:w-5/6 text-center md:text-left md:pl-8">
+            <div class="flex flex-row items-center">
+                <h1 class="pb-0 mb-0 mt-0 text-4xl font-normal tracking-wide my-1">
+                    {{page.title}}
+                </h1>
+            </div>
+            <div class="text-gray-700 my-4">
+                {{page.content | safe }}
+            </div>
+            <div class="flex items-center">
+                <div class="flex justify-between items-center">
+                    <ul class="list-none flex author-list m-0 py-2">
+                        {% for org in page.extra.organizations %}
+                            <li>
+                                <a href="">
+                                    <img src="" alt="">
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+            {% for tag in page.taxonomies.memberships %}
+                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 font-light text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+                    {{tag}}
+                </a>
+            {% endfor %}
+        </div>
+    </div>
+    <div class="my-8">
+        <hr/>
+        <br/>
+        <hr/>
+    </div>
+</div>
+
+{% endblock content %}

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 %}