ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix mobile issues

Browse Source
This commit is contained in:
Ehab Hassan
2024-06-02 12:38:27 +03:00
parent b9517ffaf7
commit 44523d9d62
5 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
content/home/index.md
View File

@@ -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)

2
content/tft/index.md
View File

@@ -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>

2
content/utilization/index.md
View File

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

28
templates/shortcodes/hovevision.html
View File

@@ -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>
<h3 class="blue font-normal">Pioneering. Empowering.</h3>
<h1 class="font-semibold">The Vision</h1>
<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>

12
templates/shortcodes/row.html
View File

@@ -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 -->