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>

43
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,61 +29,63 @@
<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 --> <!-- capacity -->
<div class="leading-none font-extrabold text-6xl"> <div class="leading-none font-extrabold text-6xl">
{{ stats[0] }}PB {{ stats[0] }}PB
<span class="block text-3xl uppercase">capacity</span> <span class="block text-3xl uppercase">capacity</span>
</div> </div>
</div>
<div class="..."></div> <div class="..."></div>
<div class="...">
<!-- Nodes --> <!-- Nodes -->
<div <div
class=" class="
mx-auto
rounded-full rounded-full
h-60 h-32
w-60 w-32
lg:h-60
lg:w-60
inline-flex inline-flex
items-center items-center
justify-center justify-center
bg-green bg-green
" "
> >
<div class="leading-none font-extrabold text-6xl"> <div class="leading-none font-extrabold md:text-6xl">
{{ stats[1] }} {{ stats[1] }}
<span class="block text-2xl uppercase">nodes</span> <span class="block md:text-2xl uppercase">nodes</span>
</div> </div>
</div> </div>
</div> <div class="hidden md:block"></div>
<div class="..."></div>
<div class="..."> <!-- countries -->
<div <div
class=" class="
mx-auto
rounded-full rounded-full
h-60 h-32
w-60 w-32
lg:h-60
lg:w-60
inline-flex inline-flex
items-center items-center
justify-center justify-center
bg-pink bg-pink
" "
> >
<div class="leading-none font-extrabold text-6xl"> <div class="leading-none font-extrabold md:text-6xl">
{{ stats[3] }} {{ stats[3] }}
<span class="block text-2xl uppercase">countries</span> <span class="block md:text-2xl uppercase">countries</span>
</div> </div>
</div> </div>
</div> </div>
<div class="..."></div> <div class="..."></div>
<div class="...">
<!-- cores --> <!-- cores -->
<div class="leading-none font-extrabold text-6xl"> <div class="leading-none font-extrabold text-6xl">
{{ stats[2] }} {{ stats[2] }}
<span class="block text-5xl uppercase">cores</span> <span class="block text-2xl uppercase">cores</span>
</div>
</div>
</div> </div>
</div> </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"> <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="
$page.markdownPage.productData && $page.markdownPage.productData &&
@@ -31,10 +30,6 @@
: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">
@@ -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;
} }