ourworld_web/www_tf_demo
20
0
Fork 0
Code Pull Requests Activity

improvements all around

Browse Source
This commit is contained in:
timurgordon 2022-02-28 19:01:33 +03:00
parent b1357d5ca5
commit 5028d876d1
17 changed files with 302 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/header/_index.md
View File

@ -17,7 +17,7 @@ extra:
<br>
<br>
#### [The Internot](apage)
#### [The Internot](/apage)
Whats wrong with the [internet](/apage)

2
content/join-us/_index.md
View File

@ -10,7 +10,7 @@ insert_anchor_links: "left"
<br>
Together we expand and create this OurWorld platform, with the purpose to give a better digital life to billions of people. Anyone is invited to build solutions (experiences on top). OurWorld can provide the alternative to the current too centralized, unsustainable and abused internet. Let's go back to what the internet was supposed to be.
Together we expand and create this OurWorld platform, with the purpose to give a better digital life to billions of people. Anyone is invited to build solutions and experiences. OurWorld can provide the alternative to the current too centralized, unsustainable and abused internet.
[Explore areas of creation](https://)

2
css/index.css
View File

@ -29,7 +29,7 @@ img[src*="#medium"] {
}
img[src*="#logo"] {
max-width: 260px;
max-width: min(250px, 100%);
margin: auto;
}

7
tailwind.config.js
View File

@ -26,7 +26,14 @@ module.exports = {
'800': '#000088',
'900': '#000066',
},
},
extend: {
screens: {
'2xl': '1450px',
// => @media (min-width: 992px) { ... }
},
},
},
variants: {},
plugins: [], // if we add forms, do it here

6
templates/_default/base.html
View File

@ -6,9 +6,11 @@
<body>
<div id="content">
<div id="content" class="p-8 sm:p-12 md:p-16 lg:p-20">
{% block content %}{% endblock %}
</div>
{% include "partials/footer.html" %}
<div class="p-8 sm:p-12 md:p-16 lg:p-20">
{% include "partials/footer.html" %}
</div>
</body>
</html>

2
templates/blog/blog.html
View File

@ -8,7 +8,7 @@ and a side nav for category and featured post navigation
{% block content %}
<main class="pt-16">
<main>
<!--sets global featured variable as the most recent post with the isFeatured tag-->
{%- set section = get_section(path="blog/_index.md") %}

2
templates/blogPage.html
View File

@ -2,7 +2,7 @@
{% block content %}
<!-- Default page template for blog posts and basic informative markdown files -->
<main class="pt-16">
<main>
<div class="sm:w-5/6 md:w-4/5 mr-auto ml-auto px-6 lg:px-16 xl:w-11/12">
<img class="max-h-60 sm:max-h-60 md:max-h-80 lg:max-h-96 mx-auto" src={{"/" ~ page.extra.imgPath}} alt="">

2
templates/index.html
View File

@ -2,7 +2,7 @@
{% block content %}
<!-- Landing page template, has a banner and rows of page summaries -->
<main class="pt-16">
<main>
{{section.content | safe}}
</main>
{% endblock content %}

2
templates/page.html
View File

@ -2,7 +2,7 @@
{% block content %}
<main class="pt-16">
<main>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
{{page.content | safe}}

6
templates/partials/blogPosts.html
View File

@ -1,6 +1,8 @@
{% block content %}
<div class="font-sans text-center px-0 md:w-full md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
<h1
class="tracking-tight pt-12 lg:pt-24 2xl:pt-32 text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
class="tracking-tight text-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] %}
@ -64,3 +66,5 @@
</p>
</div>
</div>
{% endblock content %}

4
templates/partials/blogSidebar.html
View File

@ -1,6 +1,6 @@
<div class="mx-8 md:mx-4 flex flex-col">
<div class="lg:pt-24 flex flex-col mb-12 md:mr-24">
<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") %}
@ -14,7 +14,7 @@
{% set section = get_section(path="blog/_index.md")%}
<div class="lg:pt-6 flex flex-col mb-12 w-64 mr-24">
<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 %}

4
templates/partials/featuredBlog.html
View File

@ -1,7 +1,7 @@
<body>
<div class="relative mt-12 lg:mt-16 grid grid-cols-2 gap-8 items-center">
<div class="relative xl:mx-24 lg:mx-20 md:mx-16 sm:mx-12 mx-8 w-full md:w-auto">
<div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center">
<div class="relative lg:ml-8 my-8 w-full md:w-auto">
<h3 class="text-base not-italic leading-6 text-gray-600">FEATURED POST</h3>
<a href={{featured.permalink}} class="">
<h2 class="mt-8 text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 ">

4
templates/partials/footer.html
View File

@ -12,7 +12,7 @@
<footer class="bg-white">
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div class="xl:flex xl:gap-4">
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mx-8 lg:mb-8 xl:col-span-1">
<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="h-6" src="{{logoPath}}" alt="Company name" />
<p class="text-gray-500 text-base leading-6 ">
{{section.description}}
@ -20,7 +20,7 @@
{% include "partials/socialLinks.html" %}
</div>
<div class="mt-6 lg:mt-0 w-full">
<div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20">
{{ section.content | safe }}
</div>

257
templates/partials/header copy.html Normal file
View File

@ -0,0 +1,257 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><!-- This example requires Tailwind CSS v1.4.0+ -->
<script type="text/javascript">
var displayedMenu = "";
var hamburgerShown = false;
let width = screen.width;
var isMobile = width < 640;
function toggleMenu(button) {
if (displayedMenu === button.id.split("-")[0]) {
hideMenu(button.id.split("-")[0]);
displayedMenu = "";
}
else {
showMenu(button.id.split("-")[0]);
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() {
console.log("toggling hamburger", hamburgerShown)
if (hamburgerShown) {
hideHamburger();
hamburgerShown = false;
}
else {
showHamburger();
hamburgerShown = true;
}
}
function showMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
document.getElementById(menuId).className = document.getElementById(menuId).className.replace("hidden ease-in opacity-0 -translate-y-1", "ease-out opacity-1 -translate-y-0");
}
function hideMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
console.log(menuId)
document.getElementById(menuId).className = document.getElementById(menuId).className.replace("ease-out opacity-1 -translate-y-0", "hidden ease-in opacity-0 -translate-y-1");
}
function showHamburger() {
document.getElementById('header-container').className = "overflow-hidden";
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
document.getElementById('hamburger-btn').className = "hidden md: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";
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";
}
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 md: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";
document.getElementById('close-hamburger-btn').className = "hidden md: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";
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);
}
function showMobileNav() {
document.getElementById('learn').className = "absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-out duration-150 opacity-1 -translate-y-0";
}
</script>
{%- set section = get_section(path="header/_index.md") %}
{% set header_items = section.content | safe | split(pat="<li>") %}
<body id="header-container">
<div class="z-10 bg-white fixed w-screen">
<div class="relative z-10 shadow">
<div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 sm:px-6 sm:py-4 lg:px-8 md:justify-start md:space-x-10">
<div>
<a href="/" class="flex">
<img class="w-20 h-auto sm:w-32" src="{{section.extra.logoPath}}" alt="Workflow" />
</a>
</div>
<div class="-mr-2 -my-2 md: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">
<!-- 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 md: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">
<!-- 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 md:flex-1 md:flex md:items-center md:justify-between md:space-x-12">
<nav class="flex space-x-10">
{% for header_item in header_items %}
{% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %}
{% if '<a' in header_label %}
{% set link_label = header_label | striptags %}
{% set link_path = header_label | split(pat="%22") | safe%}
<a href="{{link_path[1]}}" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
{{link_label}}
</a>
{% else %}
<div class="relative">
{% set button_id = header_label ~ "-menu-btn" | slugify %}
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
<button type="button" id="{{button_id}}" class="text-gray-500 group inline-flex items-center space-x-2 text-sm 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>
<!--
Heroicon name: chevron-down
Item active: "text-gray-600", Item inactive: "text-gray-400"
-->
</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-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-150 hidden ease-in opacity-0 -translate-y-1">
<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-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8 xl:py-12">
{{header_menu | safe }}
</div>
</div>
</div>
</nav>
{% endif %}
{% endfor %}
<!--
Mobile menu, show/hide based on mobile menu state.
Entering: "duration-200 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right md:hidden">
<div>
<div class="shadow-xs bg-white divide-y-2 divide-gray-50">
<div class="pt-5 pb-6 px-5 space-y-6 sm:space-y-8 sm:pb-8">
<nav class="flex flex-col justify-around">
{% for header_item in header_items %}
{% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %}
{% if '<a' in header_label %}
{% set link_label = header_label | striptags %}
{% set link_path = header_label | split(pat="%22") | safe%}
<a href="{{link_path[1]}}" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
{{link_label}}
</a>
{% else %}
<div class="relative">
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
<button type="button" id="{{button_id}}" class="text-gray-500 group inline-flex items-center space-x-2 text-sm 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>
<!--
Heroicon name: chevron-down
Item active: "text-gray-600", Item inactive: "text-gray-400"
-->
</button>
</div>
{% set header_menu = header_arr[1] %}
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
<div id="{{menu_id}}" class="z-50 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 absolute inset-x-0 transform shadow-lg md:backdrop-blur lg:backdrop-blur xl:backdrop-blur hidden ease-in opacity-0 -translate-y-1">
<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-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8 xl:py-12">
{{header_menu | safe }}
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}
</nav>
</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] %}
<nav>
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
<div id="{{menu_id}}" class="z-50 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 absolute inset-x-0 transform shadow-lg md:backdrop-blur lg:backdrop-blur xl:backdrop-blur hidden ease-in opacity-0 -translate-y-1">
<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-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8 xl:py-12">
{{header_menu | safe }}
</div>
</div>
</div>
</nav>
{% endif %}
{% endfor %}
-->
</div>
</div>
</div>
</body>

22
templates/partials/header.html
View File

@ -2,6 +2,8 @@
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><!-- This example requires Tailwind CSS v1.4.0+ -->
<script type="text/javascript">
var displayedMenu = "";
var hamburgerShown = false;
@ -51,15 +53,15 @@
function showHamburger() {
document.getElementById('header-container').className = "overflow-hidden";
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
document.getElementById('hamburger-btn').className = "hidden md: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";
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";
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";
}
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 md:hidden";
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";
document.getElementById('close-hamburger-btn').className = "hidden md: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";
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";
if (displayedMenu !== "") { hideMenu(displayedMenu); }
}
@ -82,30 +84,30 @@
{%- set section = get_section(path="header/_index.md") %}
{% set header_items = section.content | safe | split(pat="<li>") %}
<body id="header-container">
<header id="header-container">
<div class="z-10 bg-white fixed w-screen">
<div class="relative z-10 shadow">
<div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 sm:px-6 sm:py-4 lg:px-8 md:justify-start md:space-x-10">
<div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 sm:px-6 sm:py-4 lg:px-8 lg:justify-start lg:space-x-10">
<div>
<a href="/" class="flex">
<img class="w-20 h-auto sm:w-32" src="{{section.extra.logoPath}}" alt="Workflow" />
</a>
</div>
<div class="-mr-2 -my-2 md:hidden">
<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">
<!-- 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 md: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">
<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">
<!-- 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 md:flex-1 md:flex md:items-center md:justify-between md:space-x-12">
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between lg:space-x-12">
<nav class="flex space-x-10">
{% for header_item in header_items %}
@ -173,7 +175,7 @@
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right md:hidden">
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
<div>
<div class="shadow-xs bg-white divide-y-2 divide-gray-50">
<div class="pt-5 pb-6 px-5 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
@ -221,4 +223,4 @@
</div>
</body>
</header>

2
templates/section.html
View File

@ -2,7 +2,7 @@
{% block content %}
<main class="pt-16">
<main>
{{ section.content | safe}}
<hr>
{% include "partials/pageList.html" %}

6
templates/shortcodes/row.html
View File

@ -10,7 +10,7 @@ Parameters:
-->
{% set columns = body | safe | markdown | split(pat="|||") %}
{% set classes = "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row p-8 sm:p-12 md:p-16 lg:p-20 lg:py-16"%}
{% set classes = "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row lg:py-16"%}
{% if 2 < columns | length %}
{% set classes = classes ~ " lg:items-start" %}
@ -23,7 +23,7 @@ Parameters:
{% if style %}
{% if "lean" in style %}
{% set classes = "relative flex flex-col md:flex-row items-baseline w-full" %}
{% set classes = "relative flex flex-col md:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
{% set column_classes = "flex-1 m-4 md:m-0" %}
{% endif %}
@ -37,7 +37,7 @@ Parameters:
{% if bgPath %}
{% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover" %}
{% set classes = classes ~ " lg:py-40" %}
{% set classes = classes ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 lg:py-40 p-8 sm:p-12 md:p-16 lg:p-20" %}
{% endif %}