Fix videos on mobile screens
This commit is contained in:
samaradel
@@ -14,4 +14,4 @@ Get to know the ThreeFold vision better.
|
|||||||
<!-- button2: Spread our Message
|
<!-- button2: Spread our Message
|
||||||
link: ''
|
link: ''
|
||||||
button3: Join our Community
|
button3: Join our Community
|
||||||
link: '' -->
|
link: '' -->
|
||||||
|
|||||||
16
package.json
16
package.json
@@ -7,6 +7,10 @@
|
|||||||
"explore": "gridsome explore"
|
"explore": "gridsome explore"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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/source-filesystem": "^0.6.2",
|
||||||
"@gridsome/transformer-remark": "^0.6.2",
|
"@gridsome/transformer-remark": "^0.6.2",
|
||||||
"@noxify/gridsome-remark-classes": "^1.0.0",
|
"@noxify/gridsome-remark-classes": "^1.0.0",
|
||||||
@@ -21,18 +25,16 @@
|
|||||||
"gridsome-source-graphql": "^1.0.2",
|
"gridsome-source-graphql": "^1.0.2",
|
||||||
"gridsome-source-static-meta": "github:noxify/gridsome-source-static-meta#master",
|
"gridsome-source-static-meta": "github:noxify/gridsome-source-static-meta#master",
|
||||||
"lodash": "^4.17.20",
|
"lodash": "^4.17.20",
|
||||||
|
"node-sass": "^5.0.0",
|
||||||
"pluralize": "^8.0.0",
|
"pluralize": "^8.0.0",
|
||||||
"sass-loader": "^10.0.2",
|
"sass-loader": "^10.0.2",
|
||||||
"tailwindcss": "^1.8.4",
|
"tailwindcss": "^1.8.4",
|
||||||
"tailwindcss-gradients": "^3.0.0",
|
"tailwindcss-gradients": "^3.0.0",
|
||||||
"tailwindcss-tables": "^0.4.0",
|
"tailwindcss-tables": "^0.4.0",
|
||||||
"v-tooltip": "^2.0.3",
|
"v-tooltip": "^2.0.3",
|
||||||
"vue-markdown": "^2.2.4",
|
"vue-markdown": "^2.1.2"
|
||||||
"@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"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {}
|
"devDependencies": {
|
||||||
|
"@tailwindcss/aspect-ratio": "^0.2.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,314 +1,322 @@
|
|||||||
@tailwind base;
|
@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 {
|
blockquote {
|
||||||
@apply border-l;
|
@apply border-l;
|
||||||
@apply border-l-4;
|
@apply border-l-4;
|
||||||
@apply border-l-blue-500;
|
@apply border-l-blue-500;
|
||||||
@apply pl-4;
|
@apply pl-4;
|
||||||
@apply italic;
|
@apply italic;
|
||||||
@apply my-8;
|
@apply my-8;
|
||||||
p {
|
p {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
body h2 {
|
body h2 {
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
padding-top: 60px;
|
padding-top: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body p {
|
body p {
|
||||||
font-family: 'Lato', sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.act-link {
|
.act-link {
|
||||||
@apply bg-gray-300;
|
@apply bg-gray-300;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
@apply border-l;
|
@apply border-l;
|
||||||
@apply border-l-2;
|
@apply border-l-2;
|
||||||
@apply border-l-gray-500;
|
@apply border-l-gray-500;
|
||||||
@apply pl-4;
|
@apply pl-4;
|
||||||
@apply mt-4;
|
@apply mt-4;
|
||||||
@apply text-base;
|
@apply text-base;
|
||||||
@apply break-words;
|
@apply break-words;
|
||||||
@apply overflow-x-auto;
|
@apply overflow-x-auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
@apply list-decimal;
|
@apply list-decimal;
|
||||||
@apply ml-5;
|
@apply ml-5;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
@apply list-disc;
|
@apply list-disc;
|
||||||
@apply ml-5;
|
@apply ml-5;
|
||||||
}
|
}
|
||||||
|
|
||||||
:not(pre)>code {
|
:not(pre) > code {
|
||||||
@apply text-red-600;
|
@apply text-red-600;
|
||||||
@apply text-base;
|
@apply text-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
@responsive {
|
@responsive {
|
||||||
.pxi-0 {
|
.pxi-0 {
|
||||||
@apply px-0 #{!important};
|
@apply px-0 #{!important};
|
||||||
}
|
}
|
||||||
.pyi-0 {
|
.pyi-0 {
|
||||||
@apply py-0 #{!important};
|
@apply py-0 #{!important};
|
||||||
}
|
}
|
||||||
.pi-0 {
|
.pi-0 {
|
||||||
@apply p-0 #{!important};
|
@apply p-0 #{!important};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.animated-link:after {
|
.animated-link:after {
|
||||||
content: "";
|
content: "";
|
||||||
width: 0px;
|
width: 0px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
display: block;
|
display: block;
|
||||||
transition: 300ms;
|
transition: 300ms;
|
||||||
@apply bg-gray-500;
|
@apply bg-gray-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footerlink {
|
.footerlink {
|
||||||
margin-left: 0rem !important;
|
margin-left: 0rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .animated-link:hover:after {
|
// .animated-link:hover:after {
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
// }
|
// }
|
||||||
.height-30px {
|
.height-30px {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-3xl {
|
.text-3xl {
|
||||||
font-size: 2.50rem
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-border {
|
.no-border {
|
||||||
border-width: 0px !important;
|
border-width: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-post {
|
.flex-post {
|
||||||
@apply border-b;
|
@apply border-b;
|
||||||
@apply border-b-gray-300;
|
@apply border-b-gray-300;
|
||||||
@apply flex-col;
|
@apply flex-col;
|
||||||
|
@apply w-full;
|
||||||
|
.post-card-image {
|
||||||
|
// @apply h-56;
|
||||||
|
@apply h-full;
|
||||||
@apply w-full;
|
@apply w-full;
|
||||||
.post-card-image {
|
@apply object-cover;
|
||||||
// @apply h-56;
|
@apply rounded;
|
||||||
@apply h-full;
|
@apply relative;
|
||||||
@apply w-full;
|
}
|
||||||
@apply object-cover;
|
.post-card-title {
|
||||||
@apply rounded;
|
@apply leading-none;
|
||||||
@apply relative;
|
@apply text-2xl;
|
||||||
}
|
@apply font-medium;
|
||||||
.post-card-title {
|
}
|
||||||
@apply leading-none;
|
.post-card-excerpt {
|
||||||
@apply text-2xl;
|
@apply font-serif;
|
||||||
@apply font-medium;
|
}
|
||||||
}
|
|
||||||
.post-card-excerpt {
|
|
||||||
@apply font-serif;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-list-item:nth-child(n + 2) {
|
.author-list-item:nth-child(n + 2) {
|
||||||
@apply -ml-3;
|
@apply -ml-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:focus {
|
button:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.telegram_icon {
|
.telegram_icon {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-content a {
|
.post-content a {
|
||||||
color: #4ec48f;
|
color: #4ec48f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-8xl {
|
.text-8xl {
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-family: 'Lato', sans-serif !important;
|
font-family: "Roboto", sans-serif !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
text-6xl {
|
text-6xl {
|
||||||
font-family: 'Lato', sans-serif !important;
|
font-family: "Roboto", sans-serif !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
text-5xl {
|
text-5xl {
|
||||||
font-family: 'Lato', sans-serif !important;
|
font-family: "Roboto", sans-serif !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 375px) {
|
@media (min-width: 375px) {
|
||||||
.text-3xl {
|
.text-3xl {
|
||||||
font-size: 2.25rem
|
font-size: 2.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.with-large>.flex-post:nth-child(5n),
|
.with-large > .flex-post:nth-child(5n),
|
||||||
.with-large>.flex-post:nth-child(5n-1) {
|
.with-large > .flex-post:nth-child(5n-1) {
|
||||||
// @apply flex-100;
|
// @apply flex-100;
|
||||||
flex: 1 1 50%;
|
flex: 1 1 50%;
|
||||||
@apply flex-col;
|
@apply flex-col;
|
||||||
.post-card-image-link {
|
.post-card-image-link {
|
||||||
@apply relative;
|
@apply relative;
|
||||||
min-height: 400px;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.news>.flex-post:nth-child(5n),
|
.post-card-image {
|
||||||
.news>.flex-post:nth-child(5n-1) {
|
@apply absolute;
|
||||||
// @apply flex-100;
|
@apply h-full;
|
||||||
flex: 1 1 50%;
|
@apply w-full;
|
||||||
@apply flex-col;
|
@apply object-cover;
|
||||||
.post-card-image-link {
|
@apply rounded-lg;
|
||||||
@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 {
|
.post-card-content {
|
||||||
font-size: 2.50rem
|
// @apply flex-post-large-content;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
@apply self-center;
|
||||||
}
|
}
|
||||||
// .news>.flex-post:nth-child(9n+1),
|
.post-card-title {
|
||||||
// .news>.flex-post:nth-child(9n+2) {
|
@apply text-4xl;
|
||||||
// // @apply flex-100;
|
}
|
||||||
// flex: 1 1 50%;
|
.post-card-excerpt {
|
||||||
// @apply flex-col;
|
@apply text-xl;
|
||||||
// .post-card-image-link {
|
}
|
||||||
// @apply relative;
|
}
|
||||||
// min-height: 300px;
|
.news > .flex-post:nth-child(5n),
|
||||||
// }
|
.news > .flex-post:nth-child(5n-1) {
|
||||||
// .post-card-image {
|
// @apply flex-100;
|
||||||
// @apply absolute;
|
flex: 1 1 50%;
|
||||||
// @apply h-full;
|
@apply flex-col;
|
||||||
// @apply w-full;
|
.post-card-image-link {
|
||||||
// @apply object-cover;
|
@apply relative;
|
||||||
// @apply rounded-lg;
|
min-height: 300px;
|
||||||
// }
|
}
|
||||||
// .post-card-content {
|
.post-card-image {
|
||||||
// // @apply flex-post-large-content;
|
@apply absolute;
|
||||||
// flex: 0 1 auto;
|
@apply h-full;
|
||||||
// @apply self-center;
|
@apply w-full;
|
||||||
// }
|
@apply object-cover;
|
||||||
// .post-card-title {
|
@apply rounded-lg;
|
||||||
// @apply text-4xl;
|
}
|
||||||
// }
|
.post-card-content {
|
||||||
// .post-card-excerpt {
|
// @apply flex-post-large-content;
|
||||||
// @apply text-xl;
|
flex: 0 1 auto;
|
||||||
// }
|
@apply self-center;
|
||||||
// }
|
}
|
||||||
// .news>.flex-post:nth-child(9n+3),
|
.post-card-title {
|
||||||
// .news>.flex-post:nth-child(9n+4),
|
@apply text-4xl;
|
||||||
// .news>.flex-post:nth-child(9n+5) {
|
}
|
||||||
// // @apply flex-100;
|
.post-card-excerpt {
|
||||||
// flex: 1 1 300px;
|
@apply text-xl;
|
||||||
// @apply flex-col;
|
}
|
||||||
// .post-card-image-link {
|
}
|
||||||
// @apply relative;
|
.text-3xl {
|
||||||
// min-height: 180px;
|
font-size: 2.5rem;
|
||||||
// }
|
}
|
||||||
// .post-card-image {
|
// .news>.flex-post:nth-child(9n+1),
|
||||||
// @apply absolute;
|
// .news>.flex-post:nth-child(9n+2) {
|
||||||
// @apply h-full;
|
// // @apply flex-100;
|
||||||
// @apply w-full;
|
// flex: 1 1 50%;
|
||||||
// @apply object-cover;
|
// @apply flex-col;
|
||||||
// @apply rounded-lg;
|
// .post-card-image-link {
|
||||||
// }
|
// @apply relative;
|
||||||
// .post-card-content {
|
// min-height: 300px;
|
||||||
// // @apply flex-post-large-content;
|
// }
|
||||||
// flex: 0 1 auto;
|
// .post-card-image {
|
||||||
// @apply self-center;
|
// @apply absolute;
|
||||||
// }
|
// @apply h-full;
|
||||||
// .post-card-title {
|
// @apply w-full;
|
||||||
// @apply text-4xl;
|
// @apply object-cover;
|
||||||
// }
|
// @apply rounded-lg;
|
||||||
// .post-card-excerpt {
|
// }
|
||||||
// @apply text-xl;
|
// .post-card-content {
|
||||||
// }
|
// // @apply flex-post-large-content;
|
||||||
// }
|
// flex: 0 1 auto;
|
||||||
// .news>.flex-post:nth-child(9n+6),
|
// @apply self-center;
|
||||||
// .news>.flex-post:nth-child(9n+7),
|
// }
|
||||||
// .news>.flex-post:nth-child(9n+8),
|
// .post-card-title {
|
||||||
// .news>.flex-post:nth-child(9n+9) {
|
// @apply text-4xl;
|
||||||
// // @apply flex-100;
|
// }
|
||||||
// flex: 1 1 250px;
|
// .post-card-excerpt {
|
||||||
// @apply flex-col;
|
// @apply text-xl;
|
||||||
// .post-card-image-link {
|
// }
|
||||||
// @apply relative;
|
// }
|
||||||
// min-height: 300px;
|
// .news>.flex-post:nth-child(9n+3),
|
||||||
// }
|
// .news>.flex-post:nth-child(9n+4),
|
||||||
// .post-card-image {
|
// .news>.flex-post:nth-child(9n+5) {
|
||||||
// @apply absolute;
|
// // @apply flex-100;
|
||||||
// @apply h-full;
|
// flex: 1 1 300px;
|
||||||
// @apply w-full;
|
// @apply flex-col;
|
||||||
// @apply object-cover;
|
// .post-card-image-link {
|
||||||
// @apply rounded-lg;
|
// @apply relative;
|
||||||
// }
|
// min-height: 180px;
|
||||||
// .post-card-content {
|
// }
|
||||||
// // @apply flex-post-large-content;
|
// .post-card-image {
|
||||||
// flex: 0 1 auto;
|
// @apply absolute;
|
||||||
// @apply self-center;
|
// @apply h-full;
|
||||||
// }
|
// @apply w-full;
|
||||||
// .post-card-title {
|
// @apply object-cover;
|
||||||
// @apply text-4xl;
|
// @apply rounded-lg;
|
||||||
// }
|
// }
|
||||||
// .post-card-excerpt {
|
// .post-card-content {
|
||||||
// @apply text-xl;
|
// // @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"] {
|
// body[data-theme="dark"] {
|
||||||
@@ -378,4 +386,4 @@ text-5xl {
|
|||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|||||||
@@ -1,35 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div @click="handleClose">
|
||||||
<div
|
<div
|
||||||
v-if="showModal"
|
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">
|
<div
|
||||||
<button
|
class="iframe-container relative h-0 w-1/2"
|
||||||
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"
|
style="padding-bottom: 56.25%"
|
||||||
@click="handleClose"
|
>
|
||||||
>
|
<iframe
|
||||||
<span
|
:src="link"
|
||||||
class="bg-transparent text-white opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none"
|
frameborder="0"
|
||||||
>
|
width="640"
|
||||||
×
|
height="360"
|
||||||
</span>
|
allowfullscreen
|
||||||
</button>
|
class="absolute top-0 left-0 w-full h-full"
|
||||||
<div
|
></iframe>
|
||||||
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="showModal" class="opacity-75 fixed inset-0 z-40 bg-black"></div>
|
<div v-if="showModal" class="opacity-75 fixed inset-0 z-40 bg-black"></div>
|
||||||
@@ -46,4 +32,11 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.iframe-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -12,10 +12,7 @@
|
|||||||
>
|
>
|
||||||
{{ cta.slogan }}
|
{{ cta.slogan }}
|
||||||
</span>
|
</span>
|
||||||
<div
|
<div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></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">
|
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||||
<a
|
<a
|
||||||
@click="toggleModal"
|
@click="toggleModal"
|
||||||
@@ -37,7 +34,8 @@
|
|||||||
>{{ cta.button2 }}</g-link
|
>{{ cta.button2 }}</g-link
|
||||||
>
|
>
|
||||||
<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"
|
:to="cta.link3"
|
||||||
>{{ cta.button3 }}</g-link
|
>{{ cta.button3 }}</g-link
|
||||||
>
|
>
|
||||||
@@ -50,14 +48,11 @@
|
|||||||
>
|
>
|
||||||
{{ cta.title }}
|
{{ cta.title }}
|
||||||
</h2>
|
</h2>
|
||||||
<div
|
<div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></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">
|
<div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
|
||||||
<a
|
<a
|
||||||
@click="toggleModal"
|
@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
|
>{{ cta.video_button }}</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
:href="product.url"
|
:href="product.url"
|
||||||
class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
|
class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
|
||||||
>{{ product.button }}</a
|
>{{ product.button }}</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
@@ -66,5 +66,6 @@ export default {
|
|||||||
|
|
||||||
.take_apart {
|
.take_apart {
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
|
max-height: 570px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -5,95 +5,97 @@ var flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').de
|
|||||||
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
|
purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
|
||||||
theme: {
|
theme: {
|
||||||
borderWidth: {
|
borderWidth: {
|
||||||
default: '1px',
|
default: '1px',
|
||||||
'0': '0',
|
'0': '0',
|
||||||
'2': '2px',
|
'2': '2px',
|
||||||
'3': '3px',
|
'3': '3px',
|
||||||
'4': '4px',
|
'4': '4px',
|
||||||
'6': '6px',
|
'6': '6px',
|
||||||
'8': '8px'
|
'8': '8px'
|
||||||
},
|
},
|
||||||
flex: {
|
flex: {
|
||||||
'1': '1 1 0%',
|
'1': '1 1 0%',
|
||||||
auto: '1 1 auto',
|
auto: '1 1 auto',
|
||||||
initial: '0 1 auto',
|
initial: '0 1 auto',
|
||||||
none: 'none',
|
none: 'none',
|
||||||
'post': '1 1 300px',
|
'post': '1 1 300px',
|
||||||
'100': '1 1 100%',
|
'100': '1 1 100%',
|
||||||
'post-large-content': '0 1 361px',
|
'post-large-content': '0 1 361px',
|
||||||
},
|
},
|
||||||
zIndex: {
|
zIndex: {
|
||||||
'-10': '-10',
|
'-10': '-10',
|
||||||
'0': 0,
|
'0': 0,
|
||||||
'10': 10,
|
'10': 10,
|
||||||
'20': 20,
|
'20': 20,
|
||||||
'30': 30,
|
'30': 30,
|
||||||
'40': 40,
|
'40': 40,
|
||||||
'50': 50,
|
'50': 50,
|
||||||
'25': 25,
|
'25': 25,
|
||||||
'50': 50,
|
'50': 50,
|
||||||
'75': 75,
|
'75': 75,
|
||||||
'100': 100,
|
'100': 100,
|
||||||
'1000': 1000,
|
'1000': 1000,
|
||||||
'auto': 'auto',
|
'auto': 'auto',
|
||||||
},
|
},
|
||||||
corePlugins: {
|
corePlugins: {
|
||||||
container: false
|
container: false
|
||||||
},
|
},
|
||||||
extend: {},
|
extend: {},
|
||||||
radialGradients: {
|
radialGradients: {
|
||||||
shapes: { // defaults to this value
|
shapes: { // defaults to this value
|
||||||
'default': 'ellipse',
|
'default': 'ellipse',
|
||||||
},
|
},
|
||||||
sizes: { // defaults to this value
|
sizes: { // defaults to this value
|
||||||
'default': '',
|
'default': '',
|
||||||
},
|
},
|
||||||
positions: { // defaults to these values
|
positions: { // defaults to these values
|
||||||
'default': 'center',
|
'default': 'center',
|
||||||
't': 'top'
|
't': 'top'
|
||||||
},
|
},
|
||||||
colors: { // defaults to {}
|
colors: { // defaults to {}
|
||||||
'gray-to-black': ['rgba(25, 25, 25, 1)', 'rgba(8, 8, 8, 1)', 'rgba(0, 0, 0, 1)']
|
'gray-to-black': ['rgba(25, 25, 25, 1)', 'rgba(8, 8, 8, 1)', 'rgba(0, 0, 0, 1)']
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
variants: {},
|
variants: {},
|
||||||
plugins: [
|
plugins: [
|
||||||
function({
|
require('@tailwindcss/aspect-ratio'),
|
||||||
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'))
|
|
||||||
|
|
||||||
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}`
|
borderTopColor: `${value}`
|
||||||
},
|
},
|
||||||
[`.${e(`border-r-${modifier}`)}`]: {
|
[`.${e(`border-r-${modifier}`)}`]: {
|
||||||
|
|||||||
Reference in New Issue
Block a user