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: linear-gradient(to bottom, #ea1ff7, #70dfc9);
background-size: cover !important; background-size: cover !important;
} }
@media (max-width: 640px) {
.bg-home {
background-position: center !important;
}
}
</style> </style>

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

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

105
src/pages/Index.vue
View File

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