Fix videos on mobile screens
This commit is contained in:
samaradel
@@ -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"] {
|
||||
@@ -378,4 +386,4 @@ text-5xl {
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -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>
|
||||
@@ -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 }}
|
||||
</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>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
: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"
|
||||
>{{ product.button }}</a
|
||||
>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -66,5 +66,6 @@ export default {
|
||||
|
||||
.take_apart {
|
||||
background-color: #f5f5f5;
|
||||
max-height: 570px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user