small mod for config file, so is a template

This commit is contained in:
despiegk
2022-12-07 15:39:38 +03:00
parent 7db2e7f823
commit bff3af7ac4
118 changed files with 4837 additions and 1 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,225 @@
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
<!-- This fixes link & img paths in local, prod, and wth prefix -->
{% if page %}
{% if "](" in body %}
{% set body_arr = body | split(pat="](") %}
{% set body = body_arr[0] %}
{% for i in body_arr %}
{% set prev_index = loop.index0 - 1 %}
{% if not loop.first %}
{% if "![" in body_arr[prev_index] %}
{% set_global body = body ~ '](' ~ page.permalink ~ i %}
{% else %}
{% if i is not starting_with("http") %}
{% set base_url = get_url(path="") %}
{% set_global body = body ~ '](' ~ base_url ~ i %}
{% else %}
{% set_global body = body ~ '](' ~ i %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% set columns = body | safe | markdown | split(pat="<p>|||</p>") %}
{% set row_class = "relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden"%}
<!-- aligns columns depending on col number-->
{% if 2 < columns | length %}
{% set row_class = row_class ~ " lg:items-start" %}
{% else %}
{% set row_class = row_class ~ " lg:items-center" %}
{% endif %}
{% set col_class = "flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4" %}
{% set row_id = '' %}
{% if id %}
{% set row_id = id %}
{% endif %}
<!-- Padding -->
{% set padding_class = " py-8 md:py-8 lg:py-28" %}
{% if padding %}
{% if "none" in padding %}
{% set padding_class = " py-0" %}
{% elif "top" in padding %}
{% set padding_class = " py-2 md:py-4 lg:pt-28" %}
{% elif "bottom" in padding %}
{% set padding_class = " py-2 md:py-4 lg:pb-28" %}
{% endif %}
{% endif %}
{% if css %}
{% set padding_class = padding_class ~ " " ~ css %}
{% endif %}
{% set row_class = row_class ~ padding_class %}
<!-- Margins -->
{% set margin_class = " mx-4 md:mx-16 lg:mx-24" %}
{% if margin %}
{% if "none" in margin %}
{% set margin_class = " mx-0" %}
{% elif "wide" in margin %}
{% set margin_class = " mx-4 sm:mx-8 md:mx-12 lg:mx-16 xl:mx-20" %}
{% elif "moderate" in margin %}
{% set margin_class = " mx-8 sm:mx-16 md:mx-20 lg:mx-28" %}
{% elif "narrow" in margin %}
{% set margin_class = " mx-12 sm:mx-20 md:mx-28 lg:mx-40" %}
{% elif "tight" in margin %}
{% set margin_class = " mx-20 sm:mx-32 md:mx-40 lg:mx-80 xl:mx-96" %}
{% elif "header" in margin %}
{% set margin_class = " mx-12 sm:mx-20 md:mx-28 lg:mx-40 my-10" %}
{% endif %}
{% if "lean-left" in margin %}
{% set margin = margin_class | replace(from=" ", to=" first:")%}
{% set margin_left = margin | replace(from="mx", to="-ml") %}
{% set margin_right = margin | replace(from="mx", to="mr") %}
{% set col_class = col_class ~ " md:last:px-8 lg:last:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
{% set row_class = row_class ~ " sm:gap-0 " %}
{% elif "lean-right" in margin %}
{% set margin = margin_class | replace(from=" ", to=" last:")%}
{% set margin_left = margin | replace(from="mx", to="ml") %}
{% set margin_right = margin | replace(from="mx", to="-mr") %}
{% set col_class = col_class ~ " md:first:px-8 lg:first:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
{% set row_class = row_class ~ " sm:gap-0 " %}
{% endif %}
{% endif %}
{% if css %}
{% set margin_class = margin_class ~ " " ~ css %}
{% endif %}
{% set row_class = row_class ~ margin_class %}
{% if style %}
{% if "center" in style %}
{% set row_class = row_class ~ " text-center items-center mx-auto " %}
{% set col_class = col_class ~ " flex-1 " %}
{% endif %}
{% if "items-end" in style %}
{% set row_class = row_class ~ " lg:items-end" %}
{% set col_class = col_class ~ " flex-1 " %}
{% endif %}
<!-- makes row semi-full screen width, strips margins -->
{% if "between" in style %}
{% set row_class = row_class ~ " lg:max-w-6xl " %}
{% elif "moderate" in style %}
{% set row_class = row_class ~ " " %}
{% endif %}
<!-- makes row full screen width, strips margins -->
{% if "narrow" in style %}
{% set row_class = row_class ~ " lg:max-w-3xl " %}
{% elif "tight" in style %}
{% set row_class = row_class ~ " lg:max-w-sm " %}
{% elif "moderate" in style %}
{% set row_class = row_class ~ " mx-20 " %}
{% endif %}
{% if "invert-color" in style %}
{% set row_class = row_class ~ " text-white lg:text-white " %}
{% endif %}
{% else %}
{% set row_class = row_class ~ " " %}
{% endif %}
{% set anchor_link = ""%}
{% if anchor %}
{% set anchor_link = anchor %}
{% endif %}
<!-- makes row full screen width and adds background img -->
{% set styles = "" %}
{% set div_class = " " %}
{% if bgPath %}
{% set background_url = page.permalink ~ bgPath %}
{% set styles = "background: url('" ~ background_url ~ "'); background-size: cover; background-position: center;" %}
{% if "#desktop" in bgPath %}
{% set bgStyle = false %}
{% set div_class = " !bg-[length:0px_0px] !bg-no-repeat lg:!bg-cover " %}
{% set row_class = row_class | replace(from='text-white', to='text-black') %}
{% if "invert-color" in style %}
{% if "#desktop" in bgPath %}
{% set row_class = row_class ~ " lg:text-white " %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% if bgStyle %}
{% if "full" in bgStyle %}
{% set styles = styles ~ "height: -webkit-fill-available; height: 100vh;" %}
{% elif "hero" in bgStyle %}
{% set div_class = div_class ~ " -mt-24 pt-12 " %}
{% endif %}
{% endif %}
{% if bgColor %}
{% set styles = "background-color: " ~ bgColor ~ "; background-size: cover" %}
{% set row_class = row_class %}
{% endif %}
{% if class %}
{% set styles = "background-color: " ~ bgColor ~ "; background-size: cover" %}
{% set row_class = row_class %}
{% endif %}
<!-- Cancels page margins so that rows can have separate margins -->
{% set no_margins = " -mx-8 md:-mx-12 lg:-mx-16 xl:-mx-20" %}
<div id="{{anchor_link}}" class="{{'relative justify-center flex overflow-hidden ' ~ div_class }}" style="{{styles}}">
<div id="{{row_id}}" class="{{row_class}}" style="min-width: -webkit-fill-available; min-width: -moz-available">
{% for column in columns%}
<!-- Hides empty columns if displayed vertically in small screen -->
{% if column | as_str | length < 10 %}
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1 ">
{{ column | safe }}
</div>
{% else %}
<div class="{{col_class}}">
<!-- handles mermaid markdown content display -->
{% if "{% mermaid() %}" in column %}
{% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
{% set mermaid_content = mermaid_section[1] | striptags | replace(from="", to="--")%}
<div class="mermaid">
{{mermaid_content | safe }}
</div>
{% else %}
{{ column | safe }}
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>

View File

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

View File

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