update max width and section size

content/home/index.md

@@ -11,7 +11,9 @@ extra:
 
 <!-- section 1 (header) -->
 
-{% row(style="center" margin="lean-right") %}
+<div class="container mx-auto">
+
+{% row(style="center" reverse="rightreserve" margin="header" padding="none") %}
 
 ### EXPERIENCE
 
@@ -23,20 +25,23 @@ A better world is one where we all have access to endless information and oppurt
 
 <button>[Explore]("https://ourverse.tf/use-cases/")</button>
 
+
+
 |||
 
-![Image](OWAsset-15.png#large)
+![Image](OWAsset-15.png#auto)
 
 {% end %}
 
-{{ space() }}
 
-{% row(style="center narrow") %}
+<!-- section 2 -->
+
+{% row(style="center" margin="tight") %}
+
+![Image](OWAsset-16.png#medium#auto)
 
 <br>
 
-![Image](OWAsset-16.png#auto)
-
 ### THE END OF
 
 ## SCARCITY.
@@ -47,11 +52,10 @@ Learn whatever your heart desires. Access any oppurtunity to earn. Enter any sho
 
 {% end %}
 
-{{ space() }}
 
-{% row(style="center" margin="moderate") %}
+<!-- section 3 -->
 
-<br>
+{% row(style="center" margin="moderate" padding="none") %}
 
 ![Image](OWAsset-17.png)
 
@@ -65,8 +69,6 @@ Learn whatever your heart desires. Access any oppurtunity to earn. Enter any sho
 
 |||
 
-<br>
-
 ![Image](OWAsset-18.png)
 
 <br>
@@ -79,9 +81,7 @@ Learn whatever your heart desires. Access any oppurtunity to earn. Enter any sho
 
 {% end %}
 
-{% row(style="center moderate") %}
+{% row(style="center moderate" padding="bottom") %}
-
-<br>
 
 ![Image](OWAsset-19.png)
 
@@ -95,8 +95,6 @@ Learn whatever your heart desires. Access any oppurtunity to earn. Enter any sho
 
 |||
 
-<br>
-
 ![Image](OWAsset-20.png)
 
 <br>
@@ -109,18 +107,20 @@ Learn whatever your heart desires. Access any oppurtunity to earn. Enter any sho
 
 {% end %}
 
-{{ space() }}
+</div>
 
 
-{% row(style="center lean-left" bgColor="#c4ffeb") %}
 
-<br>
+<!-- section 4 -->
-<br>
+
+{% row(style="center" bgColor="#c4ffeb") %}
 
 ![Image](OWAsset-21.png)
 
 |||
 
+<div class="mx-8 px-8">
+
 # WORK.
 
 # PLAY.
@@ -133,12 +133,16 @@ Learn whatever your heart desires. Access any oppurtunity to earn. Enter any sho
 
 <button>[USE CASES](/use-cases)</button>
 
-<br>
+</div>
-<br>
 
 {% end %}
 
-{% row(style="center narrow") %}
+
+<!-- section 5 -->
+
+<div class="container mx-auto">
+
+{% row(style="center" margin="tight") %}
 
 <br>
 
@@ -152,45 +156,45 @@ OurVerse users are protected through ThreeFold's digital twin. This allows every
 
 <br>
 
-![Image](OWAsset-22.png)
+![Image](OWAsset-22.png#medium#auto)
 
 {% end %}
 
-{{ space() }}
+</div>
 
-{% row(style="center lean-left" bgColor="#c6f8ff") %}
 
-<br>
+<!-- section 6 -->
-<br>
+
+{% row(style="center" bgColor="#c6f8ff") %}
+
 
 ![Image](OWAsset-23.png)
 
 |||
 
-#### BUILT BY
+<div class="mx-8 px-8">
 
+#### BUILT BY
 ### TOGETHERNESS.
 
 <br>
 
 An OurVerse is created by utilizing the world's largest decentralized and peer-to-peer of storage and compute: The ThreeFold Grid.
 
-<br>
 <br>
 
 This provides every OurVerse community with unparalleled security to each user and assures unprecedented sovereignty.
 
 <button>[DISCOVER THE TECH]("https://threefold.io/")</button>
 
-<br>
+</div>
-<br>
 
 {% end %}
 
-{% row(style="center invert-color" bgColor="#4dc48f" margin="narrow") %}
 
-<br>
+<!-- section 7 -->
-<br>
+
+{% row(style="center invert-color" bgColor="#4dc48f" margin="narrow") %}
 
 ### WANNA GET **INVOLVED?**
 

css/index.css

@@ -37,7 +37,7 @@ img[src*="#small"] {
 }
 
 img[src*="#medium"] {
-  width: 400px;
+  width: 700px;
   margin: auto;
 }
 
@@ -66,19 +66,19 @@ img[src*="#tft_img"] {
 
 @layer components {
   h1 {
-    @apply text-6xl lg:text-9xl font-normal leading-none;
+    @apply text-5xl lg:text-8xl font-normal leading-none;
   }
   h1 strong {
     @apply font-semibold;
   }
   h2 {
-    @apply text-5xl lg:text-8xl font-normal leading-none;
+    @apply text-4xl lg:text-7xl font-normal leading-none;
   }
   h2 strong {
     @apply font-medium;
   }
   h3 {
-    @apply text-3xl lg:text-6xl font-normal leading-none;
+    @apply text-2xl lg:text-5xl font-normal leading-none;
   }
   h3 strong {
     @apply font-semibold;
@@ -116,6 +116,10 @@ img[src*="#tft_img"] {
     shadow
     capitalize;
   }
+  .article h2{
+    @apply text-3xl lg:text-4xl font-normal leading-none;
+  }
+  
 }
 
 button:hover :is(:where(a)) {
@@ -287,6 +291,12 @@ header {
 .header:hover .back {
   transform: none;
 }
+
+
+.article h2{
+
+}
+
 @media (max-width: 640px) {
   .banner h2 {
     font: 600 7vw/10vw;

templates/_default/base.html

@@ -5,7 +5,7 @@
     
     <body>
         {% include "partials/header.html" %}
-        <div id="content" class="mx-8 md:mx-12 lg:mx-16 xl:mx-20 pt-24">
+        <div id="content" class="mx-auto overflow-hidden pt-24">
             {% block content %}{% endblock %}    
         </div>
         {% include "partials/footer.html" %}

templates/shortcodes/row.html

@@ -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,49 @@ 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 = "flex-1 mb-4 md:mb-12 lg:mb-0" %}
-{% set col_class = col_class ~ " lg:mx-8 " %}
 
 
-<!-- Margins -->
+{% set row_id = '' %}
 
-{% set margin_class = " mx-4 md:mx-16 lg:mx-24 " %}
+{% if id %}
+{% set row_id = id %}
 
-{% 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-24 lg:mx-28 " %}
-    {% elif "narrow" in margin %}
-        {% set margin_class = " mx-12 sm:mx-20 md:mx-28 lg:mx-32 " %}
-    {% elif "tight" in margin %}
-        {% set margin_class = " mx-20 sm:mx-32 md:mx-60 lg:mx-80 xl:mx-96 " %}
-    {% 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 " %}
-    {% 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 " %}
-    {% endif %}
 {% endif %}
 
-{% set row_class =  row_class ~ margin_class %}
+ <!-- reverse col at mobile -->
+
+{% if reverse %}
+ {% if "rightreserve" in reverse %}
+ {% set row_class = "flex flex-col-reverse md:flex-row items-center" %}
+ {% elif "leftreserve" in reverse %}
+ {% set row_class = "flex flex-col md:flex-row items-center" %}
+     
+ {% endif %}
+ {% endif %}
 
 {% 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 lg:mx-auto " %}
         {% set col_class = col_class ~ " flex-1 " %}
     {% endif %}
 
-    <!-- makes row full screen width, strips margins -->
+    {% if "right" in style %}
-    {% if "lean" in style %}
+    {% set row_class = row_class ~ " text-right justify-center " %}
-        {% if "lean-left" in style %}
+    {% endif %}
-            {% set col_class = col_class ~ " last:px-20 lg:max-w-[50%] " %}
+
-            {% set row_class = row_class ~ " sm:gap-0 " %}
+    {% if "items-end" in style %}
-        {% elif "lean-right" in style %}
+    {% set row_class = row_class ~ " lg:items-end" %}
-            {% set col_class = col_class ~ " first:px-20 lg:max-w-[50%] -mr-8 md:-mr-12 lg:-mr-16 xl:-mr-20 " %}
+    {% set col_class = col_class ~ " flex-1 " %}
-            {% 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 %}
+    {% if "between" in style %}
-     {% set row_class = row_class ~ " lg:max-w-6xl " %}
+        {% set row_class = row_class ~ " lg:max-w-6xl " %}
- {% elif "moderate" in style %}
+    {% elif "moderate" in style %}
-     {% set row_class = row_class ~ " " %}
+        {% set row_class = row_class ~ " " %}
- {% endif %}
+    {% endif %}
 
         <!-- makes row full screen width, strips margins -->
     {% if "narrow" in style %}
@@ -128,6 +111,65 @@ Parameters:
     {% set anchor_link = anchor %}
 {% 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 md:mx-12 lg:mx-16 xl:mx-20" %}
+    {% elif "moderate" in margin %}
+        {% set margin_class = " mx-4 md:mx-20 lg:mx-28" %}
+    {% elif "narrow" in margin %}
+        {% set margin_class = " mx-4 md:mx-28 lg:mx-40" %}
+    {% elif "tight" in margin %}
+        {% set margin_class = " mx-4 md:mx-40 lg:mx-80 xl:mx-96" %}
+    {% elif "header" in margin %}
+        {% set margin_class = " mx-4 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 %}
+
 
 <!-- makes row full screen width and adds background img -->
 {% set styles = ""  %}
@@ -150,26 +192,31 @@ 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 %}
+
+{% 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="{{'w-screen relative justify-center flex ' ~ div_class ~ no_margins}}" style="{{styles}}">
+        <div id="{{anchor_link}}" class="{{'relative justify-center items-center flex overflow-hidden ' ~ div_class }}" style="{{styles}}">
-    <div class="{{row_class}}" style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+            <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 ">
+                <div class="hidden md:block flex-1 md:mb-0 md:mx-8">
                     {{ column | safe }}
                 </div>
             {% else %}