Fix videos on mobile screens

package.json

@@ -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",
+    "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"
+  }
 }

src/assets/scss/main.scss

@@ -1,4 +1,12 @@
 @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;
@@ -12,15 +20,15 @@ blockquote {
 }
 
 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 {
@@ -28,7 +36,7 @@ body {
 }
 
 body p {
-    font-family: 'Lato', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 .act-link {
@@ -56,7 +64,7 @@ ul {
   @apply ml-5;
 }
 
-:not(pre)>code {
+:not(pre) > code {
   @apply text-red-600;
   @apply text-base;
 }
@@ -96,7 +104,7 @@ ul {
 }
 
 .text-3xl {
-    font-size: 2.50rem
+  font-size: 2.5rem;
 }
 
 .no-border {
@@ -145,26 +153,26 @@ button:focus {
 .text-8xl {
   font-size: 5rem;
   line-height: 1;
-    font-family: 'Lato', sans-serif !important;
+  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
+    font-size: 2.25rem;
   }
 }
 
 @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;
     flex: 1 1 50%;
     @apply flex-col;
@@ -191,8 +199,8 @@ text-5xl {
       @apply text-xl;
     }
   }
-    .news>.flex-post:nth-child(5n),
+  .news > .flex-post:nth-child(5n),
-    .news>.flex-post:nth-child(5n-1) {
+  .news > .flex-post:nth-child(5n-1) {
     // @apply flex-100;
     flex: 1 1 50%;
     @apply flex-col;
@@ -220,7 +228,7 @@ text-5xl {
     }
   }
   .text-3xl {
-        font-size: 2.50rem
+    font-size: 2.5rem;
   }
   // .news>.flex-post:nth-child(9n+1),
   // .news>.flex-post:nth-child(9n+2) {

src/components/custom/Modal.vue

@@ -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"
+        class="iframe-container relative h-0 w-1/2"
+        style="padding-bottom: 56.25%"
       >
-          <div class="relative flex-auto">
         <iframe
-              width="800"
-              height="450"
           :src="link"
           frameborder="0"
-              allow="accelerometer; autoplay; encrypted-media; gyroscope;
+          width="640"
-            picture-in-picture"
+          height="360"
           allowfullscreen
-            />
+          class="absolute top-0 left-0 w-full h-full"
-          </div>
+        ></iframe>
-        </div>
       </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>

src/components/custom/sections/CallToAction.vue

@@ -12,10 +12,7 @@
       >
         {{ cta.slogan }}
       </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">
         <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
+      <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">
         <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>

src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue

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

tailwind.config.js

@@ -62,7 +62,9 @@ module.exports = {
   },
   variants: {},
   plugins: [
-                function({
+    require('@tailwindcss/aspect-ratio'),
+
+    function ({
       addComponents
     }) {
       addComponents({
@@ -83,7 +85,7 @@ module.exports = {
         }
       })
     },
-                function({
+    function ({
       addUtilities,
       e,
       theme,