Merge branch 'development' of github.com:threefoldfoundation/www_threefold_io into development

This commit is contained in:
Sacha
2021-04-18 16:14:53 +02:00
18 changed files with 386 additions and 377 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

View File

@@ -1,14 +1,19 @@
---
id: home_header
id: carbon_neutral
title: ''
subtitle: Welcome to ThreeFold
subtitle: Truly Better for Our Planet #Welcome to ThreeFold
btn1: ''
link1: ''
btn2: ''
link2: ''
---
With our game-changing technology and incredible partners, together we are building a better Internet for humanity and for our planet.
ThreeFolds peer-to-peer nature brings considerable energy efficiencies as compared to current solutions.
<br/>
<br/>
The remaining carbon footprint of the grid will be converted into carbon credits and invested in planet positive projects to enable the worlds first carbon neutral grid.
<!-- With our game-changing technology and incredible partners, together we are building a better Internet for humanity and for our planet.
<br/>
<br/>
The ThreeFold peer-to-peer (P2P) Internet delivers on privacy and security, gives us all back ownership of our digital lives, can be made available everywhere in the world, and uses much less energy than today's solution.
@@ -16,6 +21,6 @@ The ThreeFold peer-to-peer (P2P) Internet delivers on privacy and security, give
<br/>
It is the foundation for a more fair and equal tomorrow.
<br/>
And it is available, today!
And it is available, today! -->
<!-- We are building the next generation peer-to-peer internet infrastructure. After creating a powerful and super sustainable operating system that can host all of humanity's digital needs and data in smart contracts, we are now creating a fair, equal and private Internet experience to free humanity from the tech giants that exploit our data.

View File

@@ -15,7 +15,6 @@ brandPanel: fix_internet
brandPanel2: grid_solution
cta3: home_cta3
cta4: home_cta4
solution_image3: ./bg3.png
cta5: home_cta5
comparisonMain: comparison
comparisonSecs: [private, equal, sustainable]
@@ -28,3 +27,6 @@ cta: home_cta
<!-- header: home_header
solution_image: ./home_header.png -->
<!-- -->
<!-- solution_image3: ./carbon_neutral.png
header: carbon_neutral -->

View File

@@ -7,6 +7,10 @@
"explore": "gridsome explore"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/vue-fontawesome": "^2.0.0",
"@gridsome/source-filesystem": "^0.6.2",
"@gridsome/transformer-remark": "^0.6.2",
"@noxify/gridsome-remark-classes": "^1.0.0",
@@ -21,18 +25,16 @@
"gridsome-source-graphql": "^1.0.2",
"gridsome-source-static-meta": "github:noxify/gridsome-source-static-meta#master",
"lodash": "^4.17.20",
"node-sass": "^5.0.0",
"pluralize": "^8.0.0",
"sass-loader": "^10.0.2",
"tailwindcss": "^1.8.4",
"tailwindcss-gradients": "^3.0.0",
"tailwindcss-tables": "^0.4.0",
"v-tooltip": "^2.0.3",
"vue-markdown": "^2.2.4",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/vue-fontawesome": "^2.0.0",
"node-sass": "^5.0.0"
"vue-markdown": "^2.1.2"
},
"devDependencies": {}
"devDependencies": {
"@tailwindcss/aspect-ratio": "^0.2.0"
}
}

View File

@@ -1,314 +1,322 @@
@tailwind base;
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
src: url("https://fonts.googleapis.com/css2?family=Roboto");
font-display: swap;
}
blockquote {
@apply border-l;
@apply border-l-4;
@apply border-l-blue-500;
@apply pl-4;
@apply italic;
@apply my-8;
p {
padding: 0 !important;
}
@apply border-l;
@apply border-l-4;
@apply border-l-blue-500;
@apply pl-4;
@apply italic;
@apply my-8;
p {
padding: 0 !important;
}
}
body {
font-family: 'Lato', sans-serif;
font-family: "Roboto", sans-serif;
}
body h2 {
font-family: 'Lato', sans-serif;
font-family: "Roboto", sans-serif;
}
h1 {
font-family: 'Lato', sans-serif;
font-family: "Roboto", sans-serif;
}
body {
padding-top: 60px;
padding-top: 60px;
}
body p {
font-family: 'Lato', sans-serif;
font-family: "Roboto", sans-serif;
}
.act-link {
@apply bg-gray-300;
@apply bg-gray-300;
}
pre {
@apply border-l;
@apply border-l-2;
@apply border-l-gray-500;
@apply pl-4;
@apply mt-4;
@apply text-base;
@apply break-words;
@apply overflow-x-auto;
@apply border-l;
@apply border-l-2;
@apply border-l-gray-500;
@apply pl-4;
@apply mt-4;
@apply text-base;
@apply break-words;
@apply overflow-x-auto;
}
ol {
@apply list-decimal;
@apply ml-5;
@apply list-decimal;
@apply ml-5;
}
ul {
@apply list-disc;
@apply ml-5;
@apply list-disc;
@apply ml-5;
}
:not(pre)>code {
@apply text-red-600;
@apply text-base;
:not(pre) > code {
@apply text-red-600;
@apply text-base;
}
@tailwind components;
@tailwind utilities;
@responsive {
.pxi-0 {
@apply px-0 #{!important};
}
.pyi-0 {
@apply py-0 #{!important};
}
.pi-0 {
@apply p-0 #{!important};
}
.pxi-0 {
@apply px-0 #{!important};
}
.pyi-0 {
@apply py-0 #{!important};
}
.pi-0 {
@apply p-0 #{!important};
}
}
.animated-link:after {
content: "";
width: 0px;
height: 1px;
display: block;
transition: 300ms;
@apply bg-gray-500;
content: "";
width: 0px;
height: 1px;
display: block;
transition: 300ms;
@apply bg-gray-500;
}
.footerlink {
margin-left: 0rem !important;
margin-left: 0rem !important;
}
// .animated-link:hover:after {
// width: 100%;
// }
.height-30px {
height: 30px;
height: 30px;
}
.text-3xl {
font-size: 2.50rem
font-size: 2.5rem;
}
.no-border {
border-width: 0px !important;
border-width: 0px !important;
}
.flex-post {
@apply border-b;
@apply border-b-gray-300;
@apply flex-col;
@apply border-b;
@apply border-b-gray-300;
@apply flex-col;
@apply w-full;
.post-card-image {
// @apply h-56;
@apply h-full;
@apply w-full;
.post-card-image {
// @apply h-56;
@apply h-full;
@apply w-full;
@apply object-cover;
@apply rounded;
@apply relative;
}
.post-card-title {
@apply leading-none;
@apply text-2xl;
@apply font-medium;
}
.post-card-excerpt {
@apply font-serif;
}
@apply object-cover;
@apply rounded;
@apply relative;
}
.post-card-title {
@apply leading-none;
@apply text-2xl;
@apply font-medium;
}
.post-card-excerpt {
@apply font-serif;
}
}
.author-list-item:nth-child(n + 2) {
@apply -ml-3;
@apply -ml-3;
}
button:focus {
outline: none;
outline: none;
}
.telegram_icon {
font-size: 1.2rem;
font-size: 1.2rem;
}
.post-content a {
color: #4ec48f;
color: #4ec48f;
}
.text-8xl {
font-size: 5rem;
line-height: 1;
font-family: 'Lato', sans-serif !important;
font-size: 5rem;
line-height: 1;
font-family: "Roboto", sans-serif !important;
}
text-6xl {
font-family: 'Lato', sans-serif !important;
font-family: "Roboto", sans-serif !important;
}
text-5xl {
font-family: 'Lato', sans-serif !important;
font-family: "Roboto", sans-serif !important;
}
@media (min-width: 375px) {
.text-3xl {
font-size: 2.25rem
}
.text-3xl {
font-size: 2.25rem;
}
}
@media (min-width: 768px) {
.with-large>.flex-post:nth-child(5n),
.with-large>.flex-post:nth-child(5n-1) {
// @apply flex-100;
flex: 1 1 50%;
@apply flex-col;
.post-card-image-link {
@apply relative;
min-height: 400px;
}
.post-card-image {
@apply absolute;
@apply h-full;
@apply w-full;
@apply object-cover;
@apply rounded-lg;
}
.post-card-content {
// @apply flex-post-large-content;
flex: 0 1 auto;
@apply self-center;
}
.post-card-title {
@apply text-4xl;
}
.post-card-excerpt {
@apply text-xl;
}
.with-large > .flex-post:nth-child(5n),
.with-large > .flex-post:nth-child(5n-1) {
// @apply flex-100;
flex: 1 1 50%;
@apply flex-col;
.post-card-image-link {
@apply relative;
min-height: 400px;
}
.news>.flex-post:nth-child(5n),
.news>.flex-post:nth-child(5n-1) {
// @apply flex-100;
flex: 1 1 50%;
@apply flex-col;
.post-card-image-link {
@apply relative;
min-height: 300px;
}
.post-card-image {
@apply absolute;
@apply h-full;
@apply w-full;
@apply object-cover;
@apply rounded-lg;
}
.post-card-content {
// @apply flex-post-large-content;
flex: 0 1 auto;
@apply self-center;
}
.post-card-title {
@apply text-4xl;
}
.post-card-excerpt {
@apply text-xl;
}
.post-card-image {
@apply absolute;
@apply h-full;
@apply w-full;
@apply object-cover;
@apply rounded-lg;
}
.text-3xl {
font-size: 2.50rem
.post-card-content {
// @apply flex-post-large-content;
flex: 0 1 auto;
@apply self-center;
}
// .news>.flex-post:nth-child(9n+1),
// .news>.flex-post:nth-child(9n+2) {
// // @apply flex-100;
// flex: 1 1 50%;
// @apply flex-col;
// .post-card-image-link {
// @apply relative;
// min-height: 300px;
// }
// .post-card-image {
// @apply absolute;
// @apply h-full;
// @apply w-full;
// @apply object-cover;
// @apply rounded-lg;
// }
// .post-card-content {
// // @apply flex-post-large-content;
// flex: 0 1 auto;
// @apply self-center;
// }
// .post-card-title {
// @apply text-4xl;
// }
// .post-card-excerpt {
// @apply text-xl;
// }
// }
// .news>.flex-post:nth-child(9n+3),
// .news>.flex-post:nth-child(9n+4),
// .news>.flex-post:nth-child(9n+5) {
// // @apply flex-100;
// flex: 1 1 300px;
// @apply flex-col;
// .post-card-image-link {
// @apply relative;
// min-height: 180px;
// }
// .post-card-image {
// @apply absolute;
// @apply h-full;
// @apply w-full;
// @apply object-cover;
// @apply rounded-lg;
// }
// .post-card-content {
// // @apply flex-post-large-content;
// flex: 0 1 auto;
// @apply self-center;
// }
// .post-card-title {
// @apply text-4xl;
// }
// .post-card-excerpt {
// @apply text-xl;
// }
// }
// .news>.flex-post:nth-child(9n+6),
// .news>.flex-post:nth-child(9n+7),
// .news>.flex-post:nth-child(9n+8),
// .news>.flex-post:nth-child(9n+9) {
// // @apply flex-100;
// flex: 1 1 250px;
// @apply flex-col;
// .post-card-image-link {
// @apply relative;
// min-height: 300px;
// }
// .post-card-image {
// @apply absolute;
// @apply h-full;
// @apply w-full;
// @apply object-cover;
// @apply rounded-lg;
// }
// .post-card-content {
// // @apply flex-post-large-content;
// flex: 0 1 auto;
// @apply self-center;
// }
// .post-card-title {
// @apply text-4xl;
// }
// .post-card-excerpt {
// @apply text-xl;
// }
// }
.post-card-title {
@apply text-4xl;
}
.post-card-excerpt {
@apply text-xl;
}
}
.news > .flex-post:nth-child(5n),
.news > .flex-post:nth-child(5n-1) {
// @apply flex-100;
flex: 1 1 50%;
@apply flex-col;
.post-card-image-link {
@apply relative;
min-height: 300px;
}
.post-card-image {
@apply absolute;
@apply h-full;
@apply w-full;
@apply object-cover;
@apply rounded-lg;
}
.post-card-content {
// @apply flex-post-large-content;
flex: 0 1 auto;
@apply self-center;
}
.post-card-title {
@apply text-4xl;
}
.post-card-excerpt {
@apply text-xl;
}
}
.text-3xl {
font-size: 2.5rem;
}
// .news>.flex-post:nth-child(9n+1),
// .news>.flex-post:nth-child(9n+2) {
// // @apply flex-100;
// flex: 1 1 50%;
// @apply flex-col;
// .post-card-image-link {
// @apply relative;
// min-height: 300px;
// }
// .post-card-image {
// @apply absolute;
// @apply h-full;
// @apply w-full;
// @apply object-cover;
// @apply rounded-lg;
// }
// .post-card-content {
// // @apply flex-post-large-content;
// flex: 0 1 auto;
// @apply self-center;
// }
// .post-card-title {
// @apply text-4xl;
// }
// .post-card-excerpt {
// @apply text-xl;
// }
// }
// .news>.flex-post:nth-child(9n+3),
// .news>.flex-post:nth-child(9n+4),
// .news>.flex-post:nth-child(9n+5) {
// // @apply flex-100;
// flex: 1 1 300px;
// @apply flex-col;
// .post-card-image-link {
// @apply relative;
// min-height: 180px;
// }
// .post-card-image {
// @apply absolute;
// @apply h-full;
// @apply w-full;
// @apply object-cover;
// @apply rounded-lg;
// }
// .post-card-content {
// // @apply flex-post-large-content;
// flex: 0 1 auto;
// @apply self-center;
// }
// .post-card-title {
// @apply text-4xl;
// }
// .post-card-excerpt {
// @apply text-xl;
// }
// }
// .news>.flex-post:nth-child(9n+6),
// .news>.flex-post:nth-child(9n+7),
// .news>.flex-post:nth-child(9n+8),
// .news>.flex-post:nth-child(9n+9) {
// // @apply flex-100;
// flex: 1 1 250px;
// @apply flex-col;
// .post-card-image-link {
// @apply relative;
// min-height: 300px;
// }
// .post-card-image {
// @apply absolute;
// @apply h-full;
// @apply w-full;
// @apply object-cover;
// @apply rounded-lg;
// }
// .post-card-content {
// // @apply flex-post-large-content;
// flex: 0 1 auto;
// @apply self-center;
// }
// .post-card-title {
// @apply text-4xl;
// }
// .post-card-excerpt {
// @apply text-xl;
// }
// }
}
// body[data-theme="dark"] {

View File

@@ -1,35 +1,21 @@
<template>
<div>
<div @click="handleClose">
<div
v-if="showModal"
class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
class="fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
>
<div class="relative w-auto my-6 mx-auto max-w-6xl">
<button
class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
@click="handleClose"
>
<span
class="bg-transparent text-white opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none"
>
×
</span>
</button>
<div
class="border-0 rounded-lg relative flex flex-col w-full outline-none focus:outline-none"
>
<div class="relative flex-auto">
<iframe
width="800"
height="450"
:src="link"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen
/>
</div>
</div>
<div
class="iframe-container relative h-0 w-1/2"
style="padding-bottom: 56.25%"
>
<iframe
:src="link"
frameborder="0"
width="640"
height="360"
allowfullscreen
class="absolute top-0 left-0 w-full h-full"
></iframe>
</div>
</div>
<div v-if="showModal" class="opacity-75 fixed inset-0 z-40 bg-black"></div>
@@ -47,3 +33,10 @@ export default {
},
};
</script>
<style scoped>
@media (max-width: 768px) {
.iframe-container {
width: 100%;
}
}
</style>

View File

@@ -12,10 +12,7 @@
>
{{ cta.slogan }}
</span>
<div
v-html="cta.content"
class="mt-6 mb-8 text-gray-600"
></div>
<div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
<a
@click="toggleModal"
@@ -37,7 +34,8 @@
>{{ cta.button2 }}</g-link
>
<g-link
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full" v-if="cta.button3"
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
v-if="cta.button3"
:to="cta.link3"
>{{ cta.button3 }}</g-link
>
@@ -50,14 +48,11 @@
>
{{ cta.title }}
</h2>
<div
v-html="cta.content"
class="mt-6 mb-8 text-gray-600"
></div>
<div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
<a
@click="toggleModal"
class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
class="inline-block cursor-pointer bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
>{{ cta.video_button }}</a
>
</div>

View File

@@ -66,5 +66,6 @@ export default {
.take_apart {
background-color: #f5f5f5;
max-height: 570px;
}
</style>

View File

@@ -13,7 +13,7 @@
target="_blank"
class="col-span-1 flex justify-center m-1 bg-gray-100"
>
<img class="" :src="img(partner.logo)" />
<img :src="img(partner.logo)" />
</g-link>
</div>
</div>

View File

@@ -13,11 +13,6 @@
/>
</div>
<div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
<!-- <SolutionsHeader
v-if="$page.markdownPage.header"
:header="$page.markdownPage.header"
/> -->
<g-image
class="m-auto w-2/4 lg:mt-20"
v-if="$page.markdownPage.solution_image2"
@@ -29,6 +24,17 @@
:cta="$page.markdownPage.cta2"
/>
<!-- <g-image
class="m-auto w-2/4 lg:mt-20"
v-if="$page.markdownPage.solution_image3"
:src="$page.markdownPage.solution_image3.src"
/> -->
<!-- <SolutionsHeader
v-if="$page.markdownPage.header"
:header="$page.markdownPage.header"
/> -->
<ShowcaseProducts
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
@@ -48,11 +54,6 @@
:cta="$page.markdownPage.cta4"
/> -->
<!-- <g-image
v-if="$page.markdownPage.solution_image3"
:src="$page.markdownPage.solution_image3.src"
/> -->
<!-- <CallToAction
v-if="$page.markdownPage.cta5"
:cta="$page.markdownPage.cta5"
@@ -132,7 +133,7 @@
link
solution_image
solution_image2
solution_image3
# solution_image3
header{
title
subtitle

View File

@@ -5,95 +5,97 @@ var flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').de
module.exports = {
purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
theme: {
borderWidth: {
default: '1px',
'0': '0',
'2': '2px',
'3': '3px',
'4': '4px',
'6': '6px',
'8': '8px'
},
flex: {
'1': '1 1 0%',
auto: '1 1 auto',
initial: '0 1 auto',
none: 'none',
'post': '1 1 300px',
'100': '1 1 100%',
'post-large-content': '0 1 361px',
},
zIndex: {
'-10': '-10',
'0': 0,
'10': 10,
'20': 20,
'30': 30,
'40': 40,
'50': 50,
'25': 25,
'50': 50,
'75': 75,
'100': 100,
'1000': 1000,
'auto': 'auto',
},
corePlugins: {
container: false
},
extend: {},
radialGradients: {
shapes: { // defaults to this value
'default': 'ellipse',
},
sizes: { // defaults to this value
'default': '',
},
positions: { // defaults to these values
'default': 'center',
't': 'top'
},
colors: { // defaults to {}
'gray-to-black': ['rgba(25, 25, 25, 1)', 'rgba(8, 8, 8, 1)', 'rgba(0, 0, 0, 1)']
},
},
},
variants: {},
plugins: [
function({
addComponents
}) {
addComponents({
'.container': {
maxWidth: '100%',
'@screen sm': {
maxWidth: '640px',
},
'@screen md': {
maxWidth: '768px',
},
'@screen lg': {
maxWidth: '1024px',
},
'@screen xl': {
maxWidth: '1040px',
},
}
})
},
function({
addUtilities,
e,
theme,
variants
}) {
const colors = flattenColorPalette(theme('borderColor'))
purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
theme: {
borderWidth: {
default: '1px',
'0': '0',
'2': '2px',
'3': '3px',
'4': '4px',
'6': '6px',
'8': '8px'
},
flex: {
'1': '1 1 0%',
auto: '1 1 auto',
initial: '0 1 auto',
none: 'none',
'post': '1 1 300px',
'100': '1 1 100%',
'post-large-content': '0 1 361px',
},
zIndex: {
'-10': '-10',
'0': 0,
'10': 10,
'20': 20,
'30': 30,
'40': 40,
'50': 50,
'25': 25,
'50': 50,
'75': 75,
'100': 100,
'1000': 1000,
'auto': 'auto',
},
corePlugins: {
container: false
},
extend: {},
radialGradients: {
shapes: { // defaults to this value
'default': 'ellipse',
},
sizes: { // defaults to this value
'default': '',
},
positions: { // defaults to these values
'default': 'center',
't': 'top'
},
colors: { // defaults to {}
'gray-to-black': ['rgba(25, 25, 25, 1)', 'rgba(8, 8, 8, 1)', 'rgba(0, 0, 0, 1)']
},
},
},
variants: {},
plugins: [
require('@tailwindcss/aspect-ratio'),
const utilities = _.flatMap(_.omit(colors, 'default'), (value, modifier) => ({
function ({
addComponents
}) {
addComponents({
'.container': {
maxWidth: '100%',
'@screen sm': {
maxWidth: '640px',
},
'@screen md': {
maxWidth: '768px',
},
'@screen lg': {
maxWidth: '1024px',
},
'@screen xl': {
maxWidth: '1040px',
},
}
})
},
function ({
addUtilities,
e,
theme,
variants
}) {
const colors = flattenColorPalette(theme('borderColor'))
[`.${e(`border-t-${modifier}`)}`]: {
const utilities = _.flatMap(_.omit(colors, 'default'), (value, modifier) => ({
[`.${e(`border-t-${modifier}`)}`]: {
borderTopColor: `${value}`
},
[`.${e(`border-r-${modifier}`)}`]: {