ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix videos on mobile screens

Browse Source
This commit is contained in:
samaradel
2021-04-15 15:42:16 +02:00
parent 74341c2afc
commit 2430ceb0a4
7 changed files with 360 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
package.json
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"
}
}

28
src/assets/scss/main.scss
View File

@@ -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 {
@@ -96,7 +104,7 @@ ul {
}
.text-3xl {
font-size: 2.50rem
font-size: 2.5rem;
}
.no-border {
@@ -145,20 +153,20 @@ 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;
}
}
@@ -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) {

37
src/components/custom/Modal.vue
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"
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;
picture-in-picture"
width="640"
height="360"
allowfullscreen
/>
</div>
</div>
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>

15
src/components/custom/sections/CallToAction.vue
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>

1
src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
View File

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

2
tailwind.config.js
View File

@@ -62,6 +62,8 @@ module.exports = {
},
variants: {},
plugins: [
require('@tailwindcss/aspect-ratio'),
function ({
addComponents
}) {