mobile version improvements

content/_index.md

@@ -12,35 +12,51 @@ extra:
 
 {% row(style="invert-color" bgPath="/images/ow_lp1.jpg" bgStyle="full") %}
 
+![TF Logo](/images/ow_lp_logo.png#small)
+
+<br>
+<br>
+<br>
 <br>
 
-## Be at the source of WEB4 Movement
+## Power the WEB4 Movement
 
 <br>
 <br>
 
-#### Shaping the future internet
+#### The Internet of Internets
 
-#### open, green, resilient, inclusive
+#### Open, regenerative & inclusive
 
 <br>
-<br>
+
+<a href="/"><button class="dark">PLAN A MEETING</button></a>
 
 {% end %}
 
-{% row(style="lean") %}
+{% row(style="moderate center") %}
 
-![Image](images/ow_lp.png)
+## SPRING CAMPAIGN
-
-{% end %}
-
-{% row(style="invert-color" bgPath="/images/ow_lp2.jpg" bgStyle="full") %}
 
 <br>
 
-## The Foundation for a
+![Image](images/ow_lp40.jpg)
 
-## Decentralized World.
+<br>
+
+**4 MILLION € ALREADY RAISED**
+
+{% end %}
+
+![Tech image](/images/ow_lp2.jpg#mobile)
+
+{% row(style="invert-color" bgPath="/images/ow_lp2.jpg#desktop" bgStyle="full") %}
+
+<br>
+
+## The Foundation for
+
+## a Decentralized World.
 
 <br>
 <br>
@@ -49,7 +65,7 @@ Power to change everything. Discover a sovereign, secure and regenerative Intern
 
 <br>
 
-The Internet of Internets is bringing a new paradigm for people, enterprises and governements.
+The Internet of Internets is bringing a new paradigm for people, enterprises and governments.
 
 |||
 
@@ -63,7 +79,7 @@ The Internet of Internets is bringing a new paradigm for people, enterprises and
 
 {% row(style="moderate")%}
 
-![Image](/images/ow_lp3.jpg)
+![Image](/images/ow_lp3.jpg#desktop)
 
 <br>
 

css/index.css

@@ -8,15 +8,14 @@
 @import "tailwindcss/components";
 @import "admonition.css";
 @import "tailwindcss/utilities";
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 /* Custom CSS for header partial */
 .backdrop-blur {
   -webkit-backdrop-filter: blur(40px);
 }
 
 * {
-  font-family: "Exo", sans-serif;
+  font-family: "Montserrat", sans-serif;
 }
 
 a {
@@ -33,7 +32,7 @@ img[src*="#mx-auto"] {
 }
 
 img[src*="#small"] {
-  width: 68px;
+  width: 60px;
 }
 
 
@@ -47,6 +46,22 @@ img[src*="#medium"] {
   margin: auto;
 }
 
+img[src*="#mobile"] {
+    display: none;
+}
+
+@media (max-width: 440px) {
+    img[src*="#mobile"] {
+        display: block;
+    }
+}
+
+@media (max-width: 440px) {
+    img[src*="#desktop"] {
+        display: none;
+    }
+}
+
 img[src*="#logo"] {
   max-width: min(250px, 100%);
   margin: auto;
@@ -74,7 +89,7 @@ img[src*="#tft_img"] {
     @apply font-semibold;
   }
   h2 {
-    @apply text-4xl md:text-4xl lg:text-5xl xl:text-6xl font-semibold leading-none;
+    @apply text-2xl md:text-4xl lg:text-5xl font-semibold leading-none;
   }
   h2 strong {
     @apply font-medium;
@@ -95,7 +110,7 @@ img[src*="#tft_img"] {
     @apply text-md not-italic font-normal my-1;
   }
   p {
-    @apply text-md lg:text-md font-normal tracking-wide leading-normal;
+    @apply text-sm lg:text-md font-normal tracking-wide leading-normal;
     font-family: "Lato", sans-serif;
   }
   blockquote {
@@ -109,17 +124,27 @@ img[src*="#tft_img"] {
   }
   button {
     @apply inline-block
-    lg:text-lg
+    font-sans
-    px-12
+    text-sm
+    lg:text-xl
+    px-6
+    lg:px-16
     py-1
     mr-5
     my-10
     border-2
+    rounded-3xl
     shadow
+    font-bold
     capitalize;
   }
 }
 
+button.dark {
+  background-color: #1a1a1a;
+}
+
+
 button:hover :is(:where(a)) {
   color: #c6f8ff;
 }
@@ -129,6 +154,7 @@ button :is(:where(p)) {
   font-weight: 400;
 }
 
+/*
 button {
   background-color: #1a1a1a;
   border-radius: 20px;
@@ -136,6 +162,7 @@ button {
   box-shadow: none;
   font-size: 20px;
 }
+*/
 
 button a {
   color: white;

css/layout.css

@@ -128,19 +128,13 @@ h1,
 h2,
 .h2,
 h3,
-.h3 {
+.h3, 
-  font-family: "Exo", sans-serif;
-}
-
 h4,
 .h4,
 h5,
 .h5,
 h6,
-.h6 {
+.h6,
-  @apply font-sans leading-none tracking-tight;
-  font-family: "Lato", sans-serif;
-}
 
 h1,
 .h1 {

tailwind.config.js

@@ -1,6 +1,7 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
+  important: '#content',
   content: [
       './templates/**/*.html'
   ],
@@ -12,6 +13,13 @@ module.exports = {
         }
   },
   theme: {
+    fontFamily: {
+        'sans': ['Montserrat', 'system-ui'],
+        'serif': ['ui-serif', 'Georgia'],
+        'mono': ['ui-monospace', 'SFMono-Regular'],
+        'display': ['Montserrat'],
+        'body': ['"Montserrat"']
+    },
     fontSize: {
         'xs': '.75rem',
         'sm': '.875rem',

templates/_default/base.html

@@ -2,11 +2,9 @@
 <html lang="en" charset="utf-8">
   {% include "partials/head.html" %}
 
-  {% include "partials/header.html" %}
-
   <body>
 
-    <div id="content" class="p-8 pt-12 sm:p-12 md:p-16 lg:p-20">
+    <div id="content">
         {% block content %}{% endblock %}
     </div>
 

templates/shortcodes/row.html

@@ -31,10 +31,10 @@ Parameters:
     <!-- makes row full screen width, strips margins -->
     {% if "lean" in style %}
         {% if "lean-left" in style %}
-            {% set col_class = col_class ~ " last:px-20 max-w-[50%] " %}
+            {% set col_class = col_class ~ " last:px-20 lg:max-w-[50%] " %}
             {% set row_class = row_class ~ " sm:gap-0 " %}
         {% elif "lean-right" in style %}
-            {% set col_class = col_class ~ " first:px-20 max-w-[50%] " %}
+            {% set col_class = col_class ~ " first:px-20 lg:max-w-[50%] " %}
             {% set row_class = row_class ~ " sm:gap-0 " %}
         {% else %}
             {% set row_class = row_class ~ " md:py-0 " %}
@@ -74,32 +74,47 @@ Parameters:
     {% set anchor_link = anchor %}
 {% endif %}
 
-
 <!-- makes row full screen width and adds background img -->
 {% set styles = ""  %}
+{% set div_class = " " %}
 {% if bgPath %}
-    {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover;"  %}
+    {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover; background-position: center;"  %}
+    {% if "#desktop" in bgPath %}
+        {% set div_class = " !bg-[length:0px_0px] !bg-no-repeat lg:!bg-cover " %}
+        {% set row_class = row_class | replace(from='text-white', to='') %}
+    {% endif %}
 {% endif %}
 {% if bgStyle %}
-    {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover; height: -webkit-fill-available"  %}
+    {% if "full" in bgStyle %}
+        {% set styles = styles ~ "height: -webkit-fill-available; height: 100vh;"  %}
+    {% endif %}
 {% endif %}
 {% if bgColor %}
     {% set styles = "background-color: " ~ bgColor ~ "; background-size: cover"  %}
     {% set row_class = row_class ~ " py-0 " %}
 {% endif %}
 
-<div id="{{anchor_link}}" class="w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 justify-center flex" style="{{styles}}">
+
+<div id="{{anchor_link}}" class="{{'w-screen justify-center flex ' ~ div_class}}" style="{{styles}}">
     <div class="{{row_class}}" style="width: -webkit-fill-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 sm:flex-1 ">
                     {{ column | safe }}
                 </div>
             {% else %}
                 <div class="{{col_class}}">
                     <!-- handles mermaid markdown content display -->
+
+                    {% set claim = "yo there is no img" %}
+                    {% if "img" in column %} 
+                        {% set claim = "yo there iis img" %}
+                    {% endif %}
+                    {{claim}}
+
+
                     {% if "{% mermaid() %}" in column %}
                         {% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
                         {% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%}