update about page

content/about/index.md

@@ -3,26 +3,9 @@ title: "About"
 template: "page.html"
 insert_anchor_links: "left"
 ---
+
 <!-- section 1 (header) -->
 
-<!-- <div class="text-gray-900 bg-cover bg-no-repeat">
-    <div class="h-full">
-      <div class="flex flex-col items-center md:flex-row">
-       <div class="w-full md:w-1/2">
-          <div class="block">
-            <img
-                src="about_geometric_header.png" class="w-full h-full"/>
-          </div>
-        </div>
-        <div class="flex flex-col items-start justify-center w-full lg:py-24 py-6 md:w-1/2">
-          <div class="flex flex-col items-start justify-center p-6">
-            <h2>It All Started a Decade Ago</strong></h2>
-            <p>When we saw how the Internet's existing infrastructure was becoming increasingly centralized, controlled by a handful of tech giants, and posed a threat to privacy and sovereignty, we knew it was time for a change. That's why we founded ThreeFold.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div> -->
 
 <div class="container mx-auto">
 
@@ -38,7 +21,12 @@ About a decade ago, a group of passionate Internet & Cloud veterans came togethe
 
 {% end %}
 
-{% row( style="center between") %}
+
+
+
+<!-- section 2  -->
+
+{% row( style="center narrow mtop") %}
 
 ## **Our Why**
 
@@ -46,7 +34,9 @@ Pioneering a new digital era, ThreeFold empowers communities to reclaim digital
 
 {% end %}
 
-{% row( style="center between") %}
+{% row( style="center semiNarrow") %}
+
+<div class="shadow-md border-solid border-2 border-gray-100 rounded-md p-2 lg:p-4 my-0 lg:my-4">
 
 ![Image](nations.png#mx-auto)
 
@@ -56,8 +46,13 @@ Pioneering a new digital era, ThreeFold empowers communities to reclaim digital
 
 Most countries only rely on cable networks meaning they lack control over their own digital infrastructure.
 
+
+</div>
+
 |||
 
+<div class="shadow-md border-solid border-2 border-gray-100 rounded-md p-2 lg:p-4 my-0 lg:my-4">
+
 ![Image](own.png#mx-auto)
 
 <br>
@@ -66,9 +61,13 @@ Most countries only rely on cable networks meaning they lack control over their
 
 Today, major private companies own and operate cloud worldwide, taking all the profits and control of internet.
 
+</div>
+
 {% end %}
 
-{% row( style="center between") %}
+{% row( style="center semiNarrow mbottom") %}
+
+<div class="shadow-md border-solid border-2 border-gray-100 rounded-md p-2 lg:p-4 my-0 lg:my-4">
 
 ![Image](human_right.png#mx-auto)
 
@@ -78,8 +77,12 @@ Today, major private companies own and operate cloud worldwide, taking all the p
 
 Billions of people are being left behind due to the IT landscape’s centralized infrastructure.
 
+</div>
+
 |||
 
+<div class="shadow-md border-solid border-2 border-gray-100 rounded-md p-2 lg:p-4 my-0 lg:my-4">
+
 ![Image](greener.png#mx-auto)
 
 <br>
@@ -88,9 +91,19 @@ Billions of people are being left behind due to the IT landscape’s centralized
 
 Today’s IT infrastructure consumes far too much energy. It becomes time we do something about it.
 
+</div>
+
 {% end %}
 
-{% row( style="center between") %}
+
+
+
+
+<!-- section 3  -->
+
+
+{% row( style="centerItem center semiNarrow mtop") %}
+
 
 ## **Our Mission**
 
@@ -114,4 +127,9 @@ The world needs a safe infrastructure to deploy cutting edge technology, where e
 
 We believe in an Internet where everyone can communicate freely, exchange fairly, access educational information, and own their own data. Our digital experiences should not addict nor manipulate, rather empower.
 
+
 {% end %}
+
+
+
+</div>

content/home/index.md

@@ -10,28 +10,6 @@ extra:
 ---
 
 
-
-<!-- <div class="text-gray-900 bg-cover bg-no-repeat">
-    <div class="h-full">
-      <div class="flex flex-col items-center md:flex-row">
-       <div class="w-full md:w-1/2">
-          <div class="block">
-            <img
-                src="home/home_header_geometric.png" class="w-full h-full"/>
-          </div>
-        </div>
-        <div class="flex flex-col items-start justify-center w-full lg:py-24 py-6 md:w-1/2">
-          <div class="flex flex-col items-start justify-center p-6">
-            <h2>Decentralized. Autonomous. Internet Infrastructure.</strong></h1>
-            <p>ThreeFold is a globally-distributed grid of storage, compute, and network capacity, acting as "no middleman" Internet resources between independent capacity providers and users.</p>
-            <button class="mx-0"><a target="_blank" href="https://manual.grid.tf/intro/intro_readme.html">Get Started</a></button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div> -->
-
-
 <!-- section 1 (header) -->
 
 <div class="container mx-auto">
@@ -393,16 +371,4 @@ Let's network
 
 {% end %}
 
-<style>
-
-/* .bgtest{
-
-  background-image: url("home/Bg.jpg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-
-
-}
-   */
-  </style>
+ </div>

css/index.css

@@ -148,7 +148,7 @@ h1 {
     @apply font-normal;
   }
   h4 {
-    @apply text-sm lg:text-2xl font-normal;
+    @apply text-xl lg:text-2xl font-normal;
   }
   h5 {
     @apply text-md my-1 tracking-widest text-zinc-500 font-semibold;

templates/shortcodes/row.html

@@ -62,6 +62,10 @@ Parameters:
 
 {% if style %}
 
+{% if "centerItem" in style %}
+{% set row_class = "flex flex-col md:flex-row items-start" %}
+{% endif %}
+
  <!-- reverse col at mobile -->
 
  {% if "reverse" in style %}
@@ -114,7 +118,7 @@ Parameters:
 
         <!-- makes row full screen width, strips margins -->
     {% if "narrow" in style %}
-        {% set row_class = row_class ~ " lg:max-w-5xl mx-auto" %}
+        {% set row_class = row_class ~ " lg:max-w-4xl mx-auto" %}
     {% elif "moderate" in style %}
         {% set row_class = row_class ~ " lg:m-20" %}
     {% endif %}