fix mobile issues

content/home/index.md

@@ -108,7 +108,7 @@ Earn TFT by adding capacity to the grid.
 <div style="background-color:#F6F6F6">
 <div class="container mx-auto">
 
-{% row(style="reverse margin") %}
+{% row(style="margin") %}
 
 ![Image](power_ecosystem.png#mx-auto)
 

content/tft/index.md

@@ -11,7 +11,7 @@ extra:
 <!-- section 1 (header) -->
 <div class="container mx-auto">
 
-{% row(style="header") %} 
+{% row(style="header reverse") %} 
 
 <h1 class="leading-none font-semibold"> All Transactions Use One Token: <span class="blue">TFT</span></h1>
 

content/utilization/index.md

@@ -9,7 +9,7 @@ insert_anchor_links: "left"
 
 <div class="container mx-auto">
 
-{% row(style="header") %}
+{% row(style="header reverse") %}
 
 
 

templates/shortcodes/hovevision.html

@@ -1,26 +1,26 @@
 
-<div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:py-20 py-8">
+<div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:pt-20 pt-8">
     <div class="flex flex-wrap justify-center items-center w-full md:w-1/3">
-     <h1 class="font-medium">The Vision</h1>
+     <h1 class="font-semibold">The Vision</h1>
-     <h3 class="blue font-normal">Pioneering. Empowering.</h3>
+     <h3 class="blue font-normal my-0">Pioneering. Empowering.</h3>
     </div>
     <div class="w-full md:w-2/3">
         <div class="flex flex-wrap justify-center md:justify-end">
             <div class="relative my-6 mx-2">
                 <img class="w-full object-cover rounded-md" src="images/vision1.png" alt="Random image">
-                <div class="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Most countries only rely on cable networks, meaning they lack control over their own digital infrastructure. </div>
+                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 duration-300 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Most countries only rely on cable networks, meaning they lack control over their own digital infrastructure. </div>
             </div>
             <div class="relative my-6 mx-2">
                 <img class="w-full object-cover rounded-md" src="images/vision2.png" alt="Random image">
-                <div class="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Today, most of the cloud is owned and operated by a few major companies taking all the profits and control of the Internet.</div>
+                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Today, most of the cloud is owned and operated by a few major companies taking all the profits and control of the Internet.</div>
             </div>
             <div class="relative my-6 mx-2">
                 <img class="w-full object-cover rounded-md" src="images/vision3.png" alt="Random image">
-                <div class="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Digital experiences should not manipulate people, rather they should empower them. </div>
+                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Digital experiences should not manipulate people, rather they should empower them. </div>
             </div>
             <div class="relative my-6 mx-2">
                 <img class="w-full object-cover rounded-md" src="images/vision4.png" alt="Random image">
-                <div class="test2 opacity-0 hover:opacity-100 duration-300 rounded-md absolute inset-0 z-10 flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Current IT infrastructures consume far too much energy. Now it is time we do something about it.</div>
+                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Current IT infrastructures consume far too much energy. Now it is time we do something about it.</div>
             </div>
         </div>
     </div>
@@ -33,17 +33,27 @@
 
 <style>
 
-    .test2{
+    .cardhover{
         background-color: rgba(224, 224, 224, 0);
 
         
     }
 
-    .test2:hover{ 
+    .cardhover:hover{ 
         background-color: rgba(224, 224, 224, 0.8);
         animation-duration: 200;
         
     }
+
+
+    @media (max-width: 640px) {
+        .cardhover{ 
+            background-color: rgba(224, 224, 224, 0.8);
+            
+            
+        }
+    }
 </style>
 
 
+

templates/shortcodes/row.html

@@ -51,7 +51,7 @@ Parameters:
     {% set row_class = row_class ~ " lg:items-center" %}
 {% endif %}
 
-{% set col_class = "flex-1 mb-6 md:mb-0 px-4" %}
+{% set col_class = "flex-1 mb-6 md:mb-0 px-2 md:px-4" %}
 {% set row_id = '' %}
 
 {% if id %}
@@ -74,7 +74,7 @@ Parameters:
 
     {% if "center" in style %}
         {% set row_class = row_class ~ " text-center mx-auto justify-center" %}
-        {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
+        {% set col_class = col_class ~ " flex-1 m-2 lg:m-0" %}
     {% endif %}
 
     {% if "text-white" in style %}
@@ -84,23 +84,23 @@ Parameters:
     <!-- makes row with margins -->
     {% if "margin" in style %}
         {% set row_class = row_class ~ " lg:py-24 py-10" %}
-        {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
+        {% set col_class = col_class ~ " flex-1 m-2 lg:m-0" %}
     {% endif %}
 
     <!-- makes row with margins -->
     {% if "header" in style %}
         {% set row_class = row_class ~ " h-auto md:h-screen mt-4 lg:mt-0" %}
-        {% set col_class = col_class ~ " m-4 lg:m-0" %}
+        {% set col_class = col_class ~ " mt-3" %}
     {% endif %}
 
     {% if "mtop" in style %}
         {% set row_class = row_class ~ " lg:pt-24 pt-2" %}
-        {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
+        {% set col_class = col_class ~ " flex-1 m-2 lg:m-0" %}
     {% endif %}
 
     {% if "mbottom" in style %}
         {% set row_class = row_class ~ " lg:pb-24" %}
-        {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
+        {% set col_class = col_class ~ " flex-1 m-2 lg:m-0" %}
     {% endif %}
 
     <!-- makes row full screen width, strips margins -->