diff --git a/package-lock.json b/package-lock.json index 3532751..607f81a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11101,6 +11101,19 @@ "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=", "dev": true }, + "is-dom-node": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-dom-node/-/is-dom-node-1.0.4.tgz", + "integrity": "sha512-NEnTHKCeyGJTL0cKdzATF8SWzyTMYf5CbNKWBvsXvyMxZG32g+a09qkeCbrfQNLTD85CbPeHb4YjIJCjyzF0yA==" + }, + "is-dom-node-list": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/is-dom-node-list/-/is-dom-node-list-1.2.1.tgz", + "integrity": "sha512-P1H071iT5TGG8pAHslhrLDo/tQLYc8tGuWABVqhGU4l2mm7aDNb9cx2myQ2AujEQO6B2cAujcW4a0/+6UfXInw==", + "requires": { + "is-dom-node": "1.0.4" + } + }, "is-dotfile": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz", @@ -13941,6 +13954,11 @@ "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, + "miniraf": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/miniraf/-/miniraf-1.0.0.tgz", + "integrity": "sha512-XpvhtJYzVrpXe+JoAthrT9E40NIrSDDMcdHEYL2M+lR/OCas0nadetcBBq/MWYqlgV5aDWVQ3mfAqd+fG6Y/EQ==" + }, "mississippi": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-2.0.0.tgz", @@ -17708,9 +17726,9 @@ "wordwrap": "0.0.3" } }, - "optimize-css-statics-webpack-plugin": { + "optimize-css-assets-webpack-plugin": { "version": "5.0.1", - "resolved": "https://registry.npmjs.org/optimize-css-statics-webpack-plugin/-/optimize-css-statics-webpack-plugin-5.0.1.tgz", + "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.1.tgz", "integrity": "sha512-Rqm6sSjWtx9FchdP0uzTQDc7GXDKnwVEGoSxjezPkzMewx7gEWE9IMUYKmigTRC4U3RaNSwYVnUDLuIdtTpm0A==", "dev": true, "requires": { @@ -19341,7 +19359,7 @@ "net": "1.0.2", "node-loader": "0.6.0", "opn": "5.3.0", - "optimize-css-statics-webpack-plugin": "5.0.1", + "optimize-css-assets-webpack-plugin": "5.0.1", "ouch": "2.0.0", "postcss-loader": "3.0.0", "postcss-rtl": "1.3.2", @@ -20403,6 +20421,11 @@ "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", "dev": true }, + "rematrix": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/rematrix/-/rematrix-0.3.0.tgz", + "integrity": "sha512-xB/9ZvJIKaDgXX0qkvV9/pLD8zK23A6TVV6F8Vhsl+SrxbBeVYutz5uszxgC6Rt3RP9LZiH8OXaYjr+x6WXWmQ==" + }, "remove-trailing-separator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz", @@ -20966,6 +20989,16 @@ "ajv-keywords": "3.2.0" } }, + "scrollreveal": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/scrollreveal/-/scrollreveal-4.0.5.tgz", + "integrity": "sha512-dyQ0BPOLuoRzKAEwGgVaZsN4mxErHnuzh3Wq0ygE/PteGHeTCOubBoTzxSoix5UGLOUYMDapNAwajfQCB483aw==", + "requires": { + "miniraf": "1.0.0", + "rematrix": "0.3.0", + "tealight": "0.3.6" + } + }, "scss-tokenizer": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", @@ -22016,6 +22049,15 @@ "inherits": "2.0.3" } }, + "tealight": { + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/tealight/-/tealight-0.3.6.tgz", + "integrity": "sha512-Dys3N8jFBThD9pNVpPCyUiu6DfWcTBdqWQJIvnAuVaFkGEdrPBJ43070vVbn6sTlLvn2IQK2zFW4FrVIrTo8eQ==", + "requires": { + "is-dom-node": "1.0.4", + "is-dom-node-list": "1.2.1" + } + }, "term-size": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz", @@ -23343,6 +23385,14 @@ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz", "integrity": "sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==" }, + "vue-scroll-reveal": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/vue-scroll-reveal/-/vue-scroll-reveal-1.0.11.tgz", + "integrity": "sha512-ZVxAxDO3GzPHLW4DvUxA8DD6lwJaVlH4JcqdVxE3D+6l+BAHv1kUnda2jCayBAN1x4u9x/qcONSnnCTrfUjoYg==", + "requires": { + "scrollreveal": "4.0.5" + } + }, "vue-server-renderer": { "version": "2.5.17", "resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.5.17.tgz", diff --git a/package.json b/package.json index 5e7c28c..cd95e7d 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "vue-idb": "^0.2.0", "vue-property-decorator": "^7.2.0", "vue-router": "^3.0.1", + "vue-scroll-reveal": "^1.0.11", "vue-svgicon": "^3.1.0", "vue2-dragula": "^2.5.4", "vuelidate": "^0.7.4", diff --git a/src/css/themes/common.variables.styl b/src/css/themes/common.variables.styl index 6b8b26a..4d659aa 100644 --- a/src/css/themes/common.variables.styl +++ b/src/css/themes/common.variables.styl @@ -23,4 +23,3 @@ $positive = #21BA45 $negative = #DB2828 $info = #31CCEC $warning = #F2C037 - diff --git a/src/root/home/home.scss b/src/root/home/home.scss index d2f8f37..93ab617 100644 --- a/src/root/home/home.scss +++ b/src/root/home/home.scss @@ -4,11 +4,20 @@ body { -moz-osx-font-smoothing: grayscale; color: #a7a7a7; line-height: 1.5; - font-size: 16px; + //font-size: 1rem; +} + +$grayshadow: #555; + +.testo-banda { + //background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent)); + //background: linear-gradient(180deg, #3144f0, transparent); + //background: rgba(0, 0, 0, .6) } p { margin: 0 0 16px; + text-shadow: 2px 2px 4px $grayshadow; } .mycard { @@ -84,6 +93,7 @@ p { h4{ line-height: 1.5; + text-shadow: 4px 4px 8px $grayshadow; } .landing__features h4, .landing__features h6 { @@ -92,7 +102,7 @@ h4{ .landing__features p { opacity: .7; - font-size: 16px; + font-size: 1rem; line-height: 1.5; } @@ -115,54 +125,24 @@ h4{ background-repeat: no-repeat !important; background-position: top; background-size: contain !important; - background-image: url(https://cdn.quasar-framework.org/img/landing_first_section.png) !important + background-image: url(../../statics/images/landing_first_section.png) !important } .feat-descr { - font-size: 1.25rem; + font-size: 1.15rem; } +.feat-descr:hover { + transition: opacity 0.5s ease-in-out; + opacity: 0.9; +} + + .q-col-gutter-xl { padding: 50px 50px; //margin-left: -48px } -@media (max-width: 718px) { - .landing__hero { - text-align: center - } - .landing__header { - height: 9vh - } - .landing__hero .text-h1 { - font-size: 3rem; - line-height: 3.05rem; - margin-bottom: 24px - } - .landing > section.padding { - padding: 40px 16px - //padding-bottom: 90px - } - - - .landing .feature-item { - text-align: center; - margin-top: 20px; - } - .landing__hero-content { - padding-bottom: 180px - } - .landing__hero-btns { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center - } - - .q-col-gutter-xl { - padding: 15px 15px; - } - -} body.mobile .landing { //background: unset @@ -214,12 +194,12 @@ body.mobile .landing:before { .shadow { //color: white; - text-shadow: 2px 2px 4px #000000; + text-shadow: 2px 2px 4px $grayshadow; } .shadow-max { //color: white; - text-shadow: 4px 4px 8px #000000; + text-shadow: 4px 4px 8px $grayshadow; } .text-h1 { @@ -241,9 +221,10 @@ body.mobile .landing:before { } .text-subtitle1 { - font-size: 1.25rem; + font-size: 1.35rem; font-weight: 400; line-height: 1.75rem; + text-shadow: 4px 4px 8px $grayshadow; letter-spacing: .00937em; &.big { font-size: 1.5rem; @@ -251,17 +232,19 @@ body.mobile .landing:before { } .text-subtitle2 { + font-size: 1.15rem; + font-weight: 400; + line-height: 1.75rem; + letter-spacing: .00937em; + text-shadow: 4px 4px 8px $grayshadow; +} + +.text-subtitle3 { font-size: 1rem; font-weight: 400; line-height: 1.75rem; letter-spacing: .00937em; -} - -.text-subtitle3 { - font-size: 0.75rem; - font-weight: 400; - line-height: 1.75rem; - letter-spacing: .00937em; + text-shadow: 2px 2px 4px $grayshadow; } .homep-cover-img-1 { @@ -298,3 +281,63 @@ body.mobile .landing:before { max-width: 100%; } +.mylist { + background: #3fdaff; + padding-left: 20px; +} + + +@media (max-width: 718px) { + .landing__hero { + text-align: center + } + .landing__header { + height: 9vh + } + .landing__hero .text-h1 { + font-size: 3rem; + line-height: 3.05rem; + margin-bottom: 24px + } + .landing > section.padding { + padding: 40px 16px + //padding-bottom: 90px + } + + .landing__features h4, .landing__features h6 { + margin: 20px 0 + } + + h4{ + line-height: 1.4; + text-shadow: 4px 4px 8px $grayshadow; + } + + + .landing .feature-item { + text-align: center; + margin-top: 20px; + } + .landing__hero-content { + padding-bottom: 180px + } + .landing__hero-btns { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center + } + + .q-col-gutter-xl { + padding: 10px 5px; + } + + .text-subtitle1 { + font-size: 1.25rem; + } + .text-subtitle2 { + font-size: 1rem; + } + .text-subtitle3 { + font-size: 0.75rem; + } +} diff --git a/src/root/home/home.ts b/src/root/home/home.ts index 53568dc..717fa75 100644 --- a/src/root/home/home.ts +++ b/src/root/home/home.ts @@ -4,6 +4,21 @@ import { GlobalStore, UserStore } from '@store' import { Logo } from '../../components/logo' +import VueScrollReveal from 'vue-scroll-reveal'; + +Vue.use(VueScrollReveal, { + class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides. + duration: 1200, + scale: 0.95, + distance: '10px', + rotate: { + x: 0, + y: 0, + z: 0 + } + // mobile: true +}); + @Component({ components: { Logo } }) @@ -32,7 +47,7 @@ export default class Home extends Vue { this.firstClassSection = 'landing fade homep-cover-img ' + (primo ? 'homep-cover-img-2' : 'homep-cover-img-1') primo = !primo - console.log('this.firstClassSection', this.firstClassSection) + // console.log('this.firstClassSection', this.firstClassSection) }, mytime) } diff --git a/src/root/home/home.vue b/src/root/home/home.vue index e5541f8..3d513e6 100644 --- a/src/root/home/home.vue +++ b/src/root/home/home.vue @@ -9,11 +9,11 @@
-
+
FreePlanet
{{$t('msg.sottoTitoloApp')}}
-
{{$t('msg.sottoTitoloApp2')}} +
{{$t('msg.sottoTitoloApp2')}}
{{$t('msg.sottoTitoloApp3')}} @@ -24,7 +24,6 @@
- - - - - - - + + + + + +
Released under the - + MIT LICENSE - + - - + +