update container size

This commit is contained in:
2021-09-29 14:00:13 +02:00
parent 0a540ecdb7
commit c616e69e2a
15 changed files with 110 additions and 106 deletions

View File

@@ -5,6 +5,6 @@ btnTxt: Learn more about TFT
sourceUrl: /token
btnTxt2: ''
sourceUrl2: ''
image: stake_token_big.jpg # src/assets/brandPanel/..
image: utility.jpg # src/assets/brandPanel/..
---
TFT is a utility token that was designed to ensure anyone can participate in the ThreeFold ecosystem without intermediaries. It incentivises node operators with monthly income and is used by developers to build and run workloads.

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

View File

@@ -1,10 +1,10 @@
<template>
<div class="lg:my-20 flex flex-col mt-5 p-auto">
<div class="lg:my-20 flex flex-col mt-5 p-auto lg:px-40">
<h2 class="flex py-2 mx-auto uppercase font-bold lg:text-6xl">
{{ team.title }}
</h2>
<div
class="lg:max-w-6xl text-2xl text-center mb-8 mx-auto leading-relaxed"
class="lg:max-w-6xl text-xl text-center mb-8 mx-auto leading-relaxed"
v-html="team.content"
></div>
<div class="flex overflow-x-scroll pb-10 scrollable">

View File

@@ -7,18 +7,18 @@
lg:text-6xl
font-bold
leading-tight
lg:max-w-3xl
lg:max-w-5xl
"
>
{{ main.title }}
</h2>
<div
class="my-5 max-w-2xl text-lg lg:text-2xl mx-auto text-gray-900 sm:mt-4"
class="my-5 max-w-xl text-lg lg:text-xl mx-auto text-gray-900 sm:mt-4"
v-html="main.content"
></div>
</div>
<div class="flex flex-col my-1 lg:w-1/2 overflow-hidden">
<g-image :src="mainItem.image" class="w-1/2 mx-auto" />
<g-image :src="mainItem.image" class="w-80 mx-auto" />
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
<div class="flex-1">
<div

View File

@@ -4,7 +4,7 @@
<g-image class="lg:w-3/4 mx-auto" :src="roadmap.image" />
<div
v-html="roadmap.content"
class="mt-10 mb-8 lg:text-2xl text-gray-900"
class="mt-10 mb-8 lg:text-xl text-gray-900"
></div>
</div>
</section>

View File

@@ -1,6 +1,6 @@
<template>
<section class="body-font">
<div class="mx-auto flex py-24 md:flex-row flex-col items-center">
<div class="mx-auto flex py-20 md:flex-row flex-col items-center lg:px-10">
<div
class="
lg:pl-24
@@ -23,7 +23,7 @@
{{ subscribe.title }}
</h2>
<div
class="my-8 lg:text-2xl"
class="my-8 lg:text-xl"
v-html="subscribe.content"
></div>
<div class="flex w-full md:justify-start justify-center items-end">
@@ -147,7 +147,7 @@
</div>
<div class="md:w-1/2 hidden md:flex">
<g-image
class="object-cover object-center rounded"
class="object-cover w-3/4 mx-auto object-center rounded"
:alt="subscribe.title"
:src="subscribe.image"
/>

View File

@@ -38,10 +38,8 @@
<div
class="
mt-3
max-w-md
text-2xl text-gray-900
text-xl
md:mt-5
md:max-w-xl
"
v-html="tft.content"
></div>

View File

@@ -26,7 +26,7 @@
</h2>
<div
v-html="cta.content"
class="mt-6 mb-8 lg:text-2xl text-gray-800"
class="mt-6 mb-8 lg:text-xl text-gray-800"
></div>
<g-image :src="cta.image" class="my-10 mx-auto" />
@@ -99,7 +99,7 @@
<h2
v-if="cta.title"
class="
lg:text-6xl
lg:text-5xl
text-center
uppercase
mb-2
@@ -111,7 +111,7 @@
</h2>
<div
v-html="cta.content"
class="mt-6 mb-8 lg:text-2xl text-gray-800"
class="mt-6 mb-8 lg:text-xl text-gray-800"
></div>
</div>
@@ -122,7 +122,7 @@
<h2
v-if="cta.title"
class="
lg:text-6xl
lg:text-5xl
text-center
uppercase
mb-2
@@ -135,7 +135,7 @@
<h2
v-if="cta.subtitle"
class="
lg:text-6xl
lg:text-5xl
text-center
uppercase
mb-2
@@ -147,7 +147,7 @@
</h2>
<div
v-html="cta.content"
class="mt-6 mb-8 lg:text-2xl text-gray-800"
class="mt-6 mb-8 lg:text-xl text-gray-800"
></div>
<a
class="
@@ -486,7 +486,7 @@
</div>
<div
class="w-full max-w-7xl mx-auto mt-10 px-2"
class="w-full max-w-7xl mx-auto mt-10 px-2 py-16"
v-else-if="id == 'home' && lastCta"
>
<g-image class="mx-auto" :src="cta.image" />
@@ -496,7 +496,7 @@
>
{{ cta.title }}
</h2>
<div v-html="cta.content" class="mt-6 mb-8 mx-auto text-2xl text-gray-800"></div>
<div v-html="cta.content" class="mt-6 mb-8 mx-auto text-xl text-gray-800"></div>
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
<a
@click="toggleModal"
@@ -685,7 +685,7 @@
</div>
<!-- grid -->
<div id="zero_os" class="w-full max-w-3xl mx-auto py-12" v-else-if="id == 'grid'">
<div id="zero_os" class="w-full max-w-3xl mx-auto lg:py-20" v-else-if="id == 'grid'">
<g-image :src="cta.image" class="mx-auto lg:w-1/3 my-10" />
<h2
v-if="cta.title"
@@ -702,7 +702,7 @@
</h2>
<div
v-html="cta.content"
class="mt-6 mb-8 lg:text-2xl text-gray-800"
class="mt-6 mb-8 lg:text-xl text-gray-800"
></div>
<a
class="
@@ -807,7 +807,7 @@
</h2>
<div
v-html="cta.content"
class="mt-6 mb-8 max-w-3xl mx-auto lg:text-2xl text-gray-800"
class="mt-6 mb-8 max-w-3xl mx-auto lg:text-xl text-gray-800"
></div>
<g-image :src="cta.image" class="mx-auto w-full my-10" />
<a
@@ -855,7 +855,7 @@
<h2
v-if="cta.title"
class="
max-w-2xl
lg:max-w-3xl
mx-auto
lg:text-6xl
text-center
@@ -869,7 +869,7 @@
</h2>
<div
v-html="cta.content"
class="mt-6 mb-8 lg:text-2xl text-gray-800"
class="mt-6 mb-8 lg:text-xl text-gray-800"
></div>
<a

View File

@@ -166,10 +166,10 @@
<!-- home -->
<div
v-else-if="id == 'home'"
class="flex flex-wrap lg:text-left lg:pt-16 px-4"
class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
>
<div class="lg:w-1/2 lg:px-6 self-center">
<g-image :src="image" :alt="brand.title" />
<g-image class="w-1/2 mx-auto" :src="image" :alt="brand.title" />
</div>
<div class="lg:w-1/2 lg:px-10 order-1 lg:order-none lg:self-center">
<div class="">
@@ -180,7 +180,7 @@
}}</span> -->
</h2>
<div
class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
class="pb-6 text-xl leading-tight tracking-wide"
v-html="brand.content"
></div>
<a
@@ -254,7 +254,7 @@
<!-- About us -->
<div
v-else-if="id == 'about-us' && !brandPanel2 && !brandPanel3"
class="flex flex-wrap text-left lg:my-10 lg:px-20"
class="flex flex-wrap text-left lg:my-10 lg:px-16"
>
<div class="lg:w-1/2 px-2 self-center">
<g-image class="lg:w-2/3 mx-auto" :src="image" :alt="brand.title" />
@@ -268,7 +268,7 @@
}}</span>
</h2>
<div
class="py-6 mt-4 text-2xl leading-tight tracking-wide"
class="py-6 mt-4 text-xl leading-tight tracking-wide"
v-html="brand.content"
></div>
<a
@@ -295,7 +295,7 @@
<div
v-else-if="id == 'about-us' && brandPanel2"
class="flex flex-wrap lg:text-left lg:pt-16 px-4 lg:mb-20 lg:px-20"
class="flex flex-wrap lg:text-left lg:pt-16 px-4 lg:mb-20 lg:px-16"
>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
<div class="lg:self-center">
@@ -306,7 +306,7 @@
}}</span>
</h2>
<div
class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
v-html="brand.content"
></div>
<a
@@ -353,7 +353,7 @@
}}</span>
</h2>
<div
class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
v-html="brand.content"
></div>
<a
@@ -385,9 +385,9 @@
<div
v-else-if="id == 'grid' && !brandPanel2 && !brandPanel3"
class="flex flex-wrap text-left"
class="flex flex-wrap text-left lg:px-16"
>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-left lg:self-center lg:px-32">
<div class="lg:w-1/2 lg:mt-10 order-1 lg:order-none text-left lg:self-center">
<div class="px-2">
<h2 class="lg:text-6xl mb-6 uppercase leading-none font-heading">
<span class="block">{{ brand.title }}</span>
@@ -399,7 +399,7 @@
class="
py-6
mt-4
text-gray-900 text-2xl
text-gray-900 text-xl
leading-tight
tracking-wide
"
@@ -449,24 +449,24 @@
</div>
</div>
<div class="lg:w-1/2">
<g-image class="mx-auto" :src="image" :alt="brand.title" />
<g-image class="mx-auto w-3/4" :src="image" :alt="brand.title" />
</div>
</div>
<div
v-else-if="id == 'grid' && brandPanel2"
class="flex flex-wrap lg:text-left lg:pt-16 px-2"
class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
>
<div class="lg:w-1/2 self-center">
<g-image class="" :src="image" :alt="brand.title" />
<g-image class="w-3/4" :src="image" :alt="brand.title" />
</div>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:px-32 lg:self-center">
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center ">
<div class="px-2">
<h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
{{ brand.title }}
</h2>
<div
class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
v-html="brand.content"
></div>
<a
@@ -495,15 +495,15 @@
<div
v-else-if="id == 'grid' && brandPanel3"
class="flex flex-wrap lg:text-left lg:pt-16 px-2"
class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:px-32 lg:self-center">
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
<div class="">
<h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
{{ brand.title }}
</h2>
<div
class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
v-html="brand.content"
></div>
<a
@@ -548,22 +548,22 @@
>
</div>
</div>
<div class="lg:w-1/2 px-2 self-center">
<g-image class="mx-auto" :src="image" :alt="brand.title" />
<div class="lg:w-1/2">
<g-image class="w-3/4 mx-auto" :src="image" :alt="brand.title" />
</div>
</div>
<div
v-else-if="id == 'grid' && brandPanel4"
class="flex flex-wrap lg:text-left lg:pt-16 px-2"
class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:px-32 lg:self-center">
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
<div class="">
<h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
<h2 class="lg:text-5xl mb-8 uppercase leading-none font-heading">
{{ brand.title }}
</h2>
<div
class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
v-html="brand.content"
></div>
<a
@@ -607,16 +607,16 @@
</div>
</div>
<div class="lg:w-1/2 px-2 self-center">
<g-image class="mx-auto" :src="image" :alt="brand.title" />
<g-image class="w-3/4 mx-auto" :src="image" :alt="brand.title" />
</div>
</div>
<!-- token -->
<div
v-else-if="id == 'token' && !brandPanel2 && !brandPanel3"
class="flex flex-wrap text-left mt-24"
class="flex flex-wrap text-left mt-24 lg:px-16"
>
<div class="lg:w-1/2 lg:px-32 lg:mt-5 order-1 lg:order-none text-left lg:self-center">
<div class="lg:w-1/2 lg:mt-5 order-1 lg:order-none text-left lg:self-center">
<div class="px-2">
<h2 class="lg:text-6xl mb-6 uppercase leading-none font-heading">
<span class="block">{{ brand.title }}</span>
@@ -628,8 +628,7 @@
class="
py-6
mt-4
max-w-md
text-gray-900 text-2xl
text-xl
leading-tight
tracking-wide
"
@@ -638,24 +637,24 @@
</div>
</div>
<div class="lg:w-1/2">
<g-image class="mx-auto" :src="image" :alt="brand.title" />
<g-image class="mx-auto w-3/4" :src="image" :alt="brand.title" />
</div>
</div>
<div
v-else-if="id == 'token' && brandPanel2"
class="flex flex-wrap lg:text-left lg:pt-16 px-4"
class="flex flex-wrap lg:text-left lg:pt-16 px-4 lg:px-16"
>
<div class="lg:w-1/2 self-center">
<g-image class="" :src="image" :alt="brand.title" />
<g-image class="mx-auto w-3/4" :src="image" :alt="brand.title" />
</div>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:px-32 lg:self-center">
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
<div class="px-2">
<h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
{{ brand.title }}
</h2>
<div
class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
v-html="brand.content"
></div>
<a
@@ -684,15 +683,15 @@
<div
v-else-if="id == 'token' && brandPanel3"
class="flex flex-wrap lg:text-left lg:pt-16 px-2"
class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
>
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center lg:px-32">
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
<div class="">
<h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
{{ brand.title }}
</h2>
<div
class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
v-html="brand.content"
></div>
<a
@@ -718,7 +717,7 @@
</div>
</div>
<div class="lg:w-1/2 px-2 self-center">
<g-image class="mx-auto" :src="image" :alt="brand.title" />
<g-image class="mx-auto w-3/4" :src="image" :alt="brand.title" />
</div>
</div>

View File

@@ -93,7 +93,15 @@
</div>
<div
class="flex flex-wrap text-center items-center lg:text-left lg:mb-10 lg:mt-4 -mx-2"
class="
flex flex-wrap
text-center
items-center
lg:text-left
lg:mb-10
lg:mt-4
-mx-2
"
v-else-if="id == 'about-us'"
>
<div class="lg:w-1/2 px-2 lg:pr-10 lg:mt-10 order-1 lg:order-none">
@@ -115,9 +123,7 @@
class="
mb-8
px-10
text-center
text-2xl
text-extrabold
text-center text-2xl text-extrabold
leading-tight
lg:max-w-2xl
mx-auto
@@ -268,7 +274,7 @@
{{ title }}
</h2> -->
<div class="mb-8 text-2xl leading-relaxed" v-html="excerpt"></div>
<div class="mb-8 text-xl leading-relaxed" v-html="excerpt"></div>
<a
v-if="link.includes('http')"
@@ -367,7 +373,7 @@
<h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
{{ title }}
</h2>
<div class="mb-8 text-2xl leading-relaxed" v-html="excerpt"></div>
<div class="mb-8 text-xl leading-relaxed" v-html="excerpt"></div>
</div>
</div>
@@ -379,10 +385,7 @@
<h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
{{ title }}
</h2>
<div
class="mb-8 mx-auto text-2xl max-w-xl"
v-html="excerpt"
></div>
<div class="mb-8 mx-auto text-xl max-w-xl" v-html="excerpt"></div>
<a
v-if="link.includes('http')"
@@ -427,11 +430,11 @@
<g-image class="order-2 lg:order-none" :src="img" :alt="altImg" />
</div>
<div
class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 lg:mx-40"
v-else
>
<div class="lg:w-2/5 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
<h2 class="text-6xl mb-6 mt-20 uppercase leading-none font-heading">
<div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none ">
<h2 class="text-8xl mb-6 mt-20 uppercase leading-none font-heading lg:max-w-xl">
<span class="text-blue-600">{{ slogan }}</span> {{ title }}
</h2>
<div class="mb-8 text-gray-700 leading-relaxed" v-html="excerpt"></div>
@@ -480,7 +483,7 @@
<!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
</div>
</div>
<div class="lg:w-3/5 px-2 self-center">
<div class="lg:w-1/2 px-2 self-center">
<g-image :src="img" :alt="altImg" />
</div>
</div>

View File

@@ -18,7 +18,7 @@
</h2>
<p
v-if="main !== null && main.subtitle"
class="mb-6 text-2xl max-w-2xl mx-auto"
class="mb-6 text-xl max-w-2xl mx-auto"
>
{{ main.subtitle }}
</p>
@@ -203,7 +203,7 @@
<!-- Support -->
<div
class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center"
class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center lg:px-20"
v-else-if="id == 'support'"
>
<a
@@ -214,8 +214,8 @@
class="m-auto rounded overflow-hidden transition duration-500"
>
<div class="px-2 py-2">
<g-image class="py-4" :src="img(product.image)" />
<div class="font-bold text-xl mb-2">{{ product.title }}</div>
<g-image class="py-4 w-2/3 mx-auto" :src="img(product.image)" />
<div class="font-bold text-2xl mb-2">{{ product.title }}</div>
<div v-html="product.content" class="text-gray-700 text-base"></div>
<div v-if="product.button" class="my-5 text-center">
<a

View File

@@ -7,12 +7,12 @@
>
{{ main.title }}
</h2>
<p v-if="main !== null" class="mb-6 text-2xl">
<p v-if="main !== null" class="mb-6 text-xl">
{{ main.subtitle }}
</p>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:px-40">
<a
v-for="(product, idx) in products"
target="_blank"

View File

@@ -1,6 +1,6 @@
<template>
<section class="py-10 pb-8 px-4 text-center">
<div class="max-w-2xl mx-auto mb-4" v-if="main">
<div class="max-w-4xl mx-auto mb-4" v-if="main">
<h2 class="lg:text-6xl uppercase leading-tight mb-6 font-bold font-heading">
{{ main.title }}
</h2>
@@ -9,7 +9,7 @@
</div>
<div
v-if="id == 'support' || id == 'community'"
class="flex flex-wrap mx-2"
class="flex flex-wrap lg:mx-40"
>
<div
v-for="(logo, idx) in logos"

View File

@@ -16,7 +16,8 @@
:button="$page.markdownPage.button"
:link="$page.markdownPage.link"
/>
</div>
<div class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5">
<BrandPanel
:id="$page.markdownPage.id"
v-if="
@@ -33,7 +34,8 @@
"
:brandPanel2="true"
/>
</div>
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel3"
@@ -43,8 +45,6 @@
:brandPanel3="true"
/>
<CustomCTA
:header="true"
v-if="$page.markdownPage.pageHeader"
@@ -52,9 +52,6 @@
:title="$page.markdownPage.pageHeader.title"
/>
</div>
<div class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5">
<Header
v-if="
$page.markdownPage.id !== 'contact' &&
@@ -129,7 +126,8 @@
"
:cta="$page.markdownPage.cta"
/>
</div>
<div class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5">
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel4"
@@ -138,11 +136,15 @@
"
:brandPanel4="true"
/>
</div>
<div class="container-fluid sm:pxi-0 mx-auto overflow-visible">
<SplitWithImage
v-if="$page.markdownPage.tft"
:id="$page.markdownPage.id"
:tft="$page.markdownPage.tft"
/>
</div>
<div class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5">
<Features
:id="$page.markdownPage.id"
v-if="$page.markdownPage.network.length > 0"
@@ -173,6 +175,13 @@
:brandPanel3="true"
/>
<RoadMap
:id="$page.markdownPage.id"
v-if="$page.markdownPage.roadmap"
:roadmap="$page.markdownPage.roadmap"
/>
</div>
<div class="container-fluid sm:pxi-0 mx-auto overflow-visible">
<CallToAction
:id="$page.markdownPage.id"
v-if="$page.markdownPage.cta2 && $page.markdownPage.id == 'token'"
@@ -180,11 +189,6 @@
:lastCta="true"
/>
<RoadMap
:id="$page.markdownPage.id"
v-if="$page.markdownPage.roadmap"
:roadmap="$page.markdownPage.roadmap"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="$page.markdownPage.cta3"
@@ -249,7 +253,7 @@
v-if="$page.markdownPage.header"
:header="$page.markdownPage.header"
/>
<g-image
<g-image class="w-3/4 mx-auto"
v-if="$page.markdownPage.solution_image2"
:src="$page.markdownPage.solution_image2.src"
/>

View File

@@ -281,7 +281,7 @@ module.exports = {
maxWidth: '1024px',
},
'@screen xl': {
maxWidth: '1496px',
maxWidth: '1800px',
},
}
})