surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HomePage FreePlanet: Italian description

Browse Source
This commit is contained in:
Paolo Arena
2019-03-09 02:56:02 +01:00
parent cb7868c6db
commit 58967a1650
6 changed files with 212 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/css/themes/common.variables.styl
View File

@@ -23,4 +23,3 @@ $positive = #21BA45
$negative = #DB2828
$info = #31CCEC
$warning = #F2C037

143
src/root/home/home.scss
View File

@@ -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;
}
}

17
src/root/home/home.ts
View File

@@ -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)
}

71
src/root/home/home.vue
View File

@@ -9,11 +9,11 @@
<logo></logo>
</div>
<div class="flex justify-end">
<div class="q-gutter-sm">
<div class="q-gutter-sm testo-banda">
<div class="text-h1 shadow-max">FreePlanet</div>
<div class="text-subtitle1 shadow text-italic q-pl-sm">{{$t('msg.sottoTitoloApp')}}
</div>
<div class="text-subtitle1 shadow big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
</div>
<div class="text-subtitle2 shadow text-italic q-pl-sm">
{{$t('msg.sottoTitoloApp3')}}
@@ -24,7 +24,6 @@
</div>
<!--
<q-btn>
@@ -99,7 +98,7 @@
</div>
</section>
<section class="padding bg-white text-grey-10 text-center">
<section class="padding bg-white text-grey-10 text-center" v-scroll-reveal.reset>
<div class="landing__features row items-start q-col-gutter-xl">
<div class="col-12 text-center">
<div class="feature-item q-mx-md"><img src="statics/images/group-together.jpg"
@@ -111,7 +110,7 @@
</div>
</div>
</section>
<section class="padding bg-primary landing__swirl-bg">
<section class="padding bg-primary landing__swirl-bg" v-scroll-reveal.reset>
<div class="landing__features row justify-between items-start q-col-gutter-xl">
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
@@ -121,21 +120,38 @@
</div>
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-users"> </i><h4>
class="q-icon fas fa-user-clock"> </i><h4>
{{$t('homepage.freetalent.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.freetalent.descr')"></p></div>
</div>
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-users"> </i><h4>
class="q-icon fas fa-carrot"> </i><i aria-hidden="true"
class="q-icon fas fa-apple-alt"> </i><h4>
{{$t('homepage.freegas.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.freegas.descr')"></p></div>
</div>
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-users"> </i><h4>
{{$t('homepage.free.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.free.descr')"></p></div>
class="q-icon fas fa-home"> </i><h4>
{{$t('homepage.freeliving.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.freeliving.descr')"></p></div>
</div>
</div>
</section>
<section class="padding bg-indigo-8" v-scroll-reveal.reset>
<div class="landing__features row justify-between items-start q-col-gutter-xl">
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-people-carry"> </i><h4>
{{$t('homepage.freecollabora.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.freecollabora.descr')"></p></div>
</div>
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-hands-helping"> </i><h4>
{{$t('homepage.freesostieni.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.freesostieni.descr')"></p></div>
</div>
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
@@ -150,32 +166,43 @@
<h4>{{$t('homepage.multiplatform.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.multiplatform.descr')"></p></div>
</div>
<div class="col-12 col-sm-5">
<div class="feature-item"><i aria-hidden="true"
class="q-icon fas fa-universal-access"> </i><h4>
{{$t('homepage.free.title')}}</h4>
<p class="feat-descr" v-html="$t('homepage.free.descr')"></p></div>
</div>
</div>
</section>
<section class="landing__footer">
<div class="text-center">
<div class="landing__footer-icons row flex-center">
<a :href="TelegramSupport" target="_blank"><i aria-hidden="true"
class="q-icon fab fa-telegram dark"></i></a>
<a href="https://www.facebook.com/freeplanetapp" target="_blank">
<i aria-hidden="true" class="q-icon fab fa-facebook-f"> </i></a>
<a :href="TelegramSupport" target="_blank">
<i aria-hidden="true" class="q-icon fab fa-telegram dark"></i></a>
<!--<a href="" target="_blank"><i aria-hidden="true" class="q-icon fab fa-github"> </i></a>-->
<!--<a href="https://twitter.com/" target="_blank"><i aria-hidden="true" class="q-icon fab fa-twitter"> </i></a>-->
<!--<a href="https://discord.gg/5TDhbDg" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fab fa-discord"> </i></a><a-->
<!--href="https://forum.quasar-framework.org/" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fas fa-comments"> </i></a><a-->
<!--href="https://www.patreon.com/quasarframework" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fab fa-patreon"> </i></a>-->
<!--<a href="https://discord.gg/5TDhbDg" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fab fa-discord"> </i></a><a-->
<!--href="https://forum.quasar-framework.org/" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fas fa-comments"> </i></a><a-->
<!--href="https://www.patreon.com/quasarframework" target="_blank"><i aria-hidden="true"-->
<!--class="q-icon fab fa-patreon"> </i></a>-->
</div>
<div class="q-mt-md">Released under the
<!--<a href="https://github.com/quasarframework/quasar/blob/dev/LICENSE" target="_blank"-->
<!--rel="noopener noreferrer" class="doc-link">-->
<!--rel="noopener noreferrer" class="doc-link">-->
MIT LICENSE
<!--<i aria-hidden="true"-->
<!--class="q-icon material-icons">launch</i></a>-->
<!--class="q-icon material-icons">launch</i></a>-->
<!--| <a href="https://www.iubenda.com/privacy-policy/40685560" target="_blank"-->
<!--rel="noopener noreferrer" class="doc-link">Privacy Policy<i aria-hidden="true"-->
<!--class="q-icon material-icons">launch</i></a>-->
<!--rel="noopener noreferrer" class="doc-link">Privacy Policy<i aria-hidden="true"-->
<!--class="q-icon material-icons">launch</i></a>-->
</div>
</div>