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

Fix responsive

Browse Source
This commit is contained in:
samaradel
2021-10-03 12:00:16 +02:00
parent 058f6d49aa
commit f0d37104d1
3 changed files with 106 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/marketing/sections/cta-sections/Header.vue
View File

@@ -584,4 +584,9 @@ export default {
background: linear-gradient(to bottom, #ea1ff7, #70dfc9);
background-size: cover !important;
}
@media (max-width: 640px) {
.bg-home {
background-position: center !important;
}
}
</style>

43
src/components/marketing/sections/cta-sections/Map.vue
View File

@@ -17,7 +17,8 @@
</h2>
<h2
class="
lg:text-6xl text-black
lg:text-6xl
text-black
leading-tight
font-bold font-heading
uppercase
@@ -28,61 +29,63 @@
<div class="my-10 grid lg:grid-cols-3 lg:gap-8">
<div class="..."></div>
<div class="...">
<!-- capacity -->
<div class="leading-none font-extrabold text-6xl">
{{ stats[0] }}PB
<span class="block text-3xl uppercase">capacity</span>
</div>
</div>
<div class="..."></div>
<div class="...">
<!-- Nodes -->
<div
class="
mx-auto
rounded-full
h-60
w-60
h-32
w-32
lg:h-60
lg:w-60
inline-flex
items-center
justify-center
bg-green
"
>
<div class="leading-none font-extrabold text-6xl">
<div class="leading-none font-extrabold md:text-6xl">
{{ stats[1] }}
<span class="block text-2xl uppercase">nodes</span>
<span class="block md:text-2xl uppercase">nodes</span>
</div>
</div>
</div>
<div class="..."></div>
<div class="...">
<div class="hidden md:block"></div>
<!-- countries -->
<div
class="
mx-auto
rounded-full
h-60
w-60
h-32
w-32
lg:h-60
lg:w-60
inline-flex
items-center
justify-center
bg-pink
"
>
<div class="leading-none font-extrabold text-6xl">
<div class="leading-none font-extrabold md:text-6xl">
{{ stats[3] }}
<span class="block text-2xl uppercase">countries</span>
<span class="block md:text-2xl uppercase">countries</span>
</div>
</div>
</div>
<div class="..."></div>
<div class="...">
<!-- cores -->
<div class="leading-none font-extrabold text-6xl">
{{ stats[2] }}
<span class="block text-5xl uppercase">cores</span>
</div>
</div>
<span class="block text-2xl uppercase">cores</span>
</div>
</div>
</div>

97
src/pages/Index.vue
View File

@@ -21,7 +21,6 @@
<div class="container_tft mx-auto sm:pxi-0 overflow-x-hidden">
<Map v-if="$page.markdownPage.map" :section="$page.markdownPage.map" />
<ShowcaseProducts
v-if="
$page.markdownPage.productData &&
@@ -31,10 +30,6 @@
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
/>
</div>
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
@@ -70,8 +65,6 @@
:blogs="$page.markdownPage.blogs"
/>
<SplitWithForm
v-if="$page.markdownPage.subscribe"
:id="$page.markdownPage.id"
@@ -430,56 +423,56 @@ export default {
return img;
},
},
// metaInfo() {
// return {
// title: "",
// titleTemplate: "ThreeFold | Welcome",
// meta: [
// {
// key: "description",
// name: "description",
// content: this.$page.markdownPage.metaDesc,
// },
// {
// key: "og:title",
// property: "og:title",
// content: this.$page.markdownPage.metaTitle,
// },
// {
// key: "og:description",
// property: "og:description",
// content: this.$page.markdownPage.metaDesc,
// },
// {
// key: "og:image",
// property: "og:image",
// content: this.getImg,
// },
// {
// key: "twitter:description",
// name: "twitter:description",
// content: this.$page.markdownPage.metaDesc,
// },
// {
// key: "twitter:image",
// property: "twitter:image",
// content: this.getImg,
// },
// {
// key: "twitter:title",
// property: "twitter:title",
// content: this.$page.markdownPage.metaTitle,
// },
// ],
// };
// },
metaInfo() {
return {
title: "",
titleTemplate: "ThreeFold | Welcome",
meta: [
{
key: "description",
name: "description",
content: this.$page.markdownPage.metaDesc,
},
{
key: "og:title",
property: "og:title",
content: this.$page.markdownPage.metaTitle,
},
{
key: "og:description",
property: "og:description",
content: this.$page.markdownPage.metaDesc,
},
{
key: "og:image",
property: "og:image",
content: this.getImg,
},
{
key: "twitter:description",
name: "twitter:description",
content: this.$page.markdownPage.metaDesc,
},
{
key: "twitter:image",
property: "twitter:image",
content: this.getImg,
},
{
key: "twitter:title",
property: "twitter:title",
content: this.$page.markdownPage.metaTitle,
},
],
};
},
};
</script>
<style scoped>
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
/* padding-right: 15px;
padding-left: 15px; */
margin-right: auto;
margin-left: auto;
}