ourworld_web/www_ournomads
Archived
21
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

add ff template

Browse Source
This commit is contained in:
Ehab Hassan
2022-10-12 13:59:19 +02:00
parent 7c5298a4b2
commit 05e6eaa2e4
152 changed files with 1066 additions and 2035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
templates/shortcodes/earn_sec.html Normal file
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>

73
templates/shortcodes/featured_stories.html Normal file
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>

52
templates/shortcodes/fflow_experiences.html Normal file
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>

52
templates/shortcodes/fflow_grid.html Normal file
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>

95
templates/shortcodes/fflow_skills.html Normal file
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>

53
templates/shortcodes/fflow_twin.html Normal file
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>

151
templates/shortcodes/grid_stats.html
View File

@@ -1,87 +1,78 @@
{% set styles = "background-image: url('images/grid_map.png');" %}
{% set data = load_data(url="https://explorer.threefold.io/api/stats", required=false, format="json") %}
{% set capacity = data.hru + data.sru / 1000 %}
{% set nodes = data.onlinenodes %}
{% 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 %}
{% set cores = data.cru %}
<section class="px-2 h-auto bg-center bg-cover bg-no-repeat" style="{{styles}}">
<div class="flex flex-wrap lg:p-12 text-center -mx-auto">
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
{{body | markdown | safe }}
<div class="my-10 grid lg:grid-cols-3 lg:gap-8">
<div class="..."></div>
<!-- capacity -->
<div class="leading-none font-extrabold text-5xl">
{{ capacity / 1000000 | round(precision=2) }}PB
<span class="block text-3xl uppercase">capacity</span>
</div>
<div class="..."></div>
<!-- Nodes -->
<div class="
mx-auto
rounded-full
h-32
w-32
lg:h-60 lg:w-60
inline-flex
items-center
justify-center
bg-green
my-4
">
<div class="leading-none font-extrabold md:text-6xl">
{{ nodes }}
<span class="block md:text-2xl uppercase">nodes</span>
</div>
</div>
<div class="hidden md:block"></div>
<!-- countries -->
<div class="
mx-auto
rounded-full
h-32
w-32
lg:h-60 lg:w-60
inline-flex
items-center
justify-center
bg-pink
">
<div class="leading-none font-extrabold md:text-6xl">
{{ countries }}
<span class="block md:text-2xl uppercase">countries</span>
{% 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="..."></div>
<!-- cores -->
<div class="leading-none font-extrabold text-5xl">
{{ cores | num_format }}
<span class="block text-2xl uppercase">cores</span>
<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>
</section>
<style>
dd {
display: inline-block;
margin: auto;
border-radius: 50%;
line-height: 100px;
}
.bg-green {
background-color: #70dfc9;
}
.bg-pink {
background-color: #ea1ff7;
}
</style>
</div>

101
templates/shortcodes/row.html
View File

@@ -35,7 +35,7 @@ Parameters:
{% set columns = body | safe | markdown | split(pat="<p>|||</p>") %}
{% set row_class = "relative py-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 md:flex md:flex-row flex-wrap max-w-fit "%}
{% 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 %}
@@ -44,66 +44,89 @@ Parameters:
{% set row_class = row_class ~ " lg:items-center" %}
{% endif %}
{% set col_class = "flex-1 mb-4 md:mb-12 lg:mb-0 " %}
{% set col_class = col_class ~ " lg:mx-8 " %}
{% set col_class = "flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-8 xl:mx-12 " %}
{% 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 " %}
{% set margin_class = " mx-4 md:mx-16 lg:mx-24" %}
{% if margin %}
{% if "none" in margin %}
{% set margin_class = " mx-0 " %}
{% 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 " %}
{% set margin_class = " mx-4 sm:mx-8 md:mx-12 lg:mx-16 xl:mx-20" %}
{% elif "moderate" in margin %}
{% set margin_class = " mx-8 sm:mx-16 md:mx-24 lg:mx-28 " %}
{% 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-32 " %}
{% 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-60 lg:mx-80 xl:mx-96 " %}
{% 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 col_class = col_class ~ " lg:last:px-20 lg:max-w-[50%] lg:mx-0 " %}
{% set row_class = row_class ~ " !ml-0 sm:gap-0 " %}
{% 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 col_class = col_class ~ " lg:first:px-20 lg:max-w-[50%] lg:mx-0 " %}
{% set row_class = row_class ~ " !mr-0 sm:gap-0 " %}
{% 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 justify-center " %}
{% set row_class = row_class ~ " text-center items-center mx-auto " %}
{% set col_class = col_class ~ " flex-1 " %}
{% endif %}
<!-- makes row full screen width, strips margins -->
{% if "lean" in style %}
{% if "lean-left" in style %}
{% set col_class = col_class ~ " last:px-20 lg:max-w-[50%] " %}
{% set row_class = row_class ~ " sm:gap-0 " %}
{% elif "lean-right" in style %}
{% set col_class = col_class ~ " first:px-20 lg:max-w-[50%] -mr-8 md:-mr-12 lg:-mr-16 xl:-mr-20 " %}
{% set row_class = row_class ~ " sm:gap-0 " %}
{% else %}
{% set row_class = row_class ~ " md:py-0 " %}
{% set col_class = col_class ~ " lg:m-0" %}
{% endif %}
{% else %}
{% set row_class = row_class ~ " w-screen " %}
{% 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 %}
{% 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 %}
@@ -150,20 +173,20 @@ Parameters:
{% if "full" in bgStyle %}
{% set styles = styles ~ "height: -webkit-fill-available; height: 100vh;" %}
{% elif "hero" in bgStyle %}
{% set div_class = div_class ~ " -mt-24 pt-24 " %}
{% 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 ~ " py-0 " %}
{% 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="{{'w-screen relative justify-center flex ' ~ div_class ~ no_margins}}" style="{{styles}}">
<div class="{{row_class}}" style="min-width: -webkit-fill-available; min-width: -moz-available">
<div id="{{anchor_link}}" class="{{'w-screen relative justify-center flex ' ~ 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%}