diff --git a/components/home/HomeCTA.vue b/components/home/HomeCTA.vue index 7a0ff67fcede659442632ba133a461e98d29e6a1..25aa54d88a81dad68b73cb2548db2f168b1b15e9 100644 --- a/components/home/HomeCTA.vue +++ b/components/home/HomeCTA.vue @@ -12,10 +12,10 @@ </div> </t-button> - <t-modal name="videoIntro" variant="large"> + <t-modal name="videoIntro" variant="video"> <div style="padding: 56.25% 0 0 0; position: relative"> <iframe - src="https://player.vimeo.com/video/514975135?h=7f6183d68c&portrait=0" + src="https://player.vimeo.com/video/514975135?h=7f6183d68c&portrait=0&autoplay=1" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" diff --git a/plugins/vue-tailwind.js b/plugins/vue-tailwind.js index 266f14161658ba4b83554d651f6d9f4aaddd4d47..553bd62baafb9343f2b36a65c3790cb07f2429bb 100644 --- a/plugins/vue-tailwind.js +++ b/plugins/vue-tailwind.js @@ -134,14 +134,14 @@ const settings = { props: { fixedClasses: { overlay: - 'z-40 overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50', - wrapper: 'relative mx-auto z-50 max-w-lg px-3 py-12', - modal: 'overflow-visible relative rounded', + 'flex items-center z-40 overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50', + wrapper: 'w-full relative mx-auto z-50 max-w-lg px-3 py-12', + modal: 'overflow-visible relative rounded', body: 'p-3', header: 'border-b p-3 rounded-t', footer: ' p-3 rounded-b', close: - 'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50', + 'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 z-10', }, classes: { overlay: 'bg-black', @@ -173,6 +173,11 @@ const settings = { 'border-b p-3 rounded-t text-xl font-bold dark:border-gray-500', footer: 'bg-gray-100 p-3 rounded-b dark:bg-gray-700', }, + video: { + modal: 'bg-black shadow rounded', + wrapper: 'relative mx-auto z-50 max-w-4xl px-3 py-12', + close: 'bg-gray-700 text-gray-100 hover:bg-gray-600', + }, }, }, },