fix max-width

content/home/index.md

@@ -9,7 +9,7 @@ weight: 1
 
 <!-- section 1 (header) -->
 
-{% row(margin="header" padding="top") %}
+{% row(margin="withContainer" padding="both") %}
 
 <br>
 
@@ -18,8 +18,10 @@ weight: 1
 
 |||
 
-# Meet<br>
+<br>
-# OurPhone&trade;
+
+# Meet<br> OurPhone&trade;
+
 
 Experience True Sovereignty at Your Fingertips <br>
 with the World’s First Truly Decentralized Smartphone.
@@ -30,10 +32,10 @@ with the World’s First Truly Decentralized Smartphone.
 
 <!-- section 2 security -->
 
-{% row(margin="header" padding="top") %}
+{% row(margin="withContainer" padding="top") %}
+
+# Secure<br> Every Click
  
-# Secure<br>
-# Every Click
 
 Every application of __OurPhone&trade;__ is fully encrypted. <br>
 Have no concerns about your data being manipulated or stolen.
@@ -48,16 +50,16 @@ Have no concerns about your data being manipulated or stolen.
 
 <!-- section 3 features title -->
 
-{% row(style="center" margin="narrow" padding="top") %}
+{% row(style="center" margin="withContainer" padding="top") %}
 
-# Decentralized Smartphone
+# Decentralized Smartphone <br> Like No Other
-# Like No Other
 
-Discover many unique features of __OurPhone&trade;__ that makes it the ultimate decentralized smartphone like no other.
+
+Discover many unique features of __OurPhone&trade;__ that makes it <br>the ultimate decentralized smartphone like no other.
 
 {% end %}
 
-{% row(style="center" margin="narrow" padding="top") %}
+{% row(style="center" margin="withContainer" padding="none") %}
 
 ![Image](./img/data.png#sm#mx-auto)
 ### 100% Data Ownership
@@ -77,7 +79,7 @@ __OurApps&trade;__: decentralized SuperApps powered by  __OurPhone&trade;__ are
 
 {% end %}
 
-{% row(style="center" margin="narrow" padding="top") %}
+{% row(style="center" margin="withContainer" padding="bottom") %}
 
 ![Image](./img/decentralized.png#sm#mx-auto)
 ### Decentralized Network Support
@@ -100,7 +102,7 @@ Any transfer of data is powered by __Planetary Network&trade;__: a fully encrypt
 
 <!-- section 5 apps -->
 
-{% row(style="center" margin="narrow" padding="top") %}
+{% row(style="center" margin="withContainer" padding="top") %}
 
 # OurVerse&trade;
 # Our Limitless Possibilities
@@ -109,7 +111,7 @@ Unlock limitless capabilities with __OurVerse&trade;__ SuperApps that meet our d
 
 {% end %}
 
-{% row(style="center" margin="narrow" padding="top") %}
+{% row(style="center" margin="withContainer" padding="bottom") %}
 
 ![Image](./img/manyapps.png#mx-auto)
 
@@ -121,16 +123,16 @@ Unlock limitless capabilities with __OurVerse&trade;__ SuperApps that meet our d
 
 <!-- section 5 apps -->
 
-{% row(style="center" margin="narrow" padding="top") %}
+{% row(style="center" margin="withContainer" padding="top") %}
 
 # Powered by
 # ThreeFold
 
-The world’s largest decentralized network by __ThreeFold__ allows every application on the __OurApps&trade;__ to attain a level of security and privacy like never seen before.
+The world’s largest decentralized network by __ThreeFold__ allows every application<br> on the __OurApps&trade;__ to attain a level of security and privacy like never seen before.
 
 {% end %}
 
-{% row(style="center" margin="narrow" padding="none") %}
+{% row(style="center" margin="withContainer" padding="bottom") %}
 
 ![Image](./img/tf.png#mx-auto)
 
@@ -143,7 +145,7 @@ The world’s largest decentralized network by __ThreeFold__ allows every applic
 
 <!-- section 6 Buy -->
 
-{% row(style="center" margin="narrow" padding="top") %}
+{% row(style="center" margin="withContainer" padding="both") %}
 
 # OurPhone&trade;
 

css/index.css

@@ -85,7 +85,7 @@ img[src*="#fig"] {
 
 @layer components {
   h1 {
-    @apply text-3xl lg:text-5xl xl:text-7xl font-bold leading-none my-4;
+    @apply text-3xl lg:text-5xl xl:text-7xl font-bold leading-4 my-4;
     font-family: "lato", sans-serif;
     line-height: 0.9;
     
@@ -94,16 +94,16 @@ img[src*="#fig"] {
     @apply font-medium;
   }
   h2 {
-    @apply text-3xl md:text-4xl lg:text-5xl xl:text-7xl font-bold leading-none my-4;
+    @apply text-3xl md:text-5xl lg:text-7xl 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-4xl font-normal my-4;
+    @apply text-xl lg:text-3xl font-normal my-4;
   }
   h3 strong {
     @apply font-medium;

templates/index.html

@@ -2,7 +2,7 @@
 {% block content %}
 
 <!-- home page template, has a banner and rows of page summaries -->
-<div>
+<div class="container mx-auto">
     {% set page = get_page(path="home/index.md") %}
     {{page.content | safe}}
 </div>

templates/shortcodes/row.html

@@ -41,7 +41,7 @@ Parameters:
 {% if 2 < columns | length %}
     {% set row_class = row_class ~ " lg:items-start" %}
 {% else %} 
-    {% set row_class = row_class ~ " lg:items-center" %}
+    {% set row_class = row_class ~ " items-center" %}
 {% endif %}
 
 {% set col_class = "flex-1 mb-4 md:mb-12 lg:mb-0 lg:mx-2 xl:mx-4" %}
@@ -94,6 +94,8 @@ Parameters:
         {% 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" %}
+    {% elif "withContainer" in margin %}
+        {% set margin_class = " mx-8 " %}
     {% endif %}
     {% if "lean-left" in margin %}
         {% set margin = margin_class | replace(from=" ", to=" first:")%}