mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 19:10:40 +00:00
- homepage desktop, ipad landscape
This commit is contained in:
Peter Papp
@@ -18,10 +18,11 @@
|
||||
|
||||
.clouds {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -129,7 +129,8 @@
|
||||
margin-right: 15px;
|
||||
|
||||
polyline {
|
||||
color: $pink;
|
||||
stroke: $pink;
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,6 +144,92 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1750px) {
|
||||
.oasis-about-us {
|
||||
|
||||
.content-wrapper {
|
||||
margin-bottom: -610px;
|
||||
padding-top: 50px;
|
||||
padding-left: 15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1490px) {
|
||||
.oasis-about-us {
|
||||
|
||||
.content-wrapper {
|
||||
margin-bottom: -440px;
|
||||
padding-top: 50px;
|
||||
padding-left: 15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1370px) {
|
||||
.clouds .cloud {
|
||||
|
||||
&:nth-child(1) {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
left: 20%;
|
||||
top: 83%;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
right: 1%;
|
||||
top: 9%;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
right: 20%;
|
||||
top: 18%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.oasis-about-us {
|
||||
padding-top: 120px;
|
||||
|
||||
.content-wrapper {
|
||||
margin-bottom: -310px;
|
||||
padding-top: 50px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list .info-list-item .description {
|
||||
@include font-size(21);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.clouds .cloud {
|
||||
|
||||
&:nth-child(1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
left: 23%;
|
||||
top: 81%;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
right: -6%;
|
||||
top: 42%;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
right: 17%;
|
||||
top: 56%;
|
||||
@include transform(scale(-0.5, 0.5));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.info-list {
|
||||
margin: 65px 0;
|
||||
|
||||
@@ -201,6 +201,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.oasis-contact {
|
||||
padding-bottom: 80px;
|
||||
|
||||
.info-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form .block-wrapper {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.info-wrapper {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.oasis-contact {
|
||||
|
||||
@@ -216,7 +235,6 @@
|
||||
}
|
||||
|
||||
.info-wrapper {
|
||||
padding-bottom: 30px;
|
||||
|
||||
.info-description {
|
||||
@include font-size(18);
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</p>
|
||||
<div class="box-more-info">
|
||||
<span>Více Informací</span>
|
||||
<chevron-right-icon size="18" class="icon"/>
|
||||
<chevron-right-icon size="18" class="icon" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -44,7 +44,7 @@
|
||||
CloudIcon,
|
||||
LockIcon,
|
||||
} from 'vue-feather-icons'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
@@ -112,7 +112,6 @@
|
||||
max-width: 690px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.sub-title-sm {
|
||||
@@ -128,7 +127,7 @@
|
||||
top: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.wave-background {
|
||||
transform: translateY(100%);
|
||||
position: absolute;
|
||||
@@ -179,7 +178,8 @@
|
||||
margin-left: 5px;
|
||||
|
||||
polyline {
|
||||
color: $theme;
|
||||
stroke: $theme;
|
||||
stroke-width: 1.2;
|
||||
@include transition(150ms);
|
||||
}
|
||||
}
|
||||
@@ -193,7 +193,8 @@
|
||||
|
||||
&:hover {
|
||||
span, polyline {
|
||||
color: lighten($theme, 10%);
|
||||
stroke: lighten($theme, 10%);
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -202,7 +203,8 @@
|
||||
|
||||
.box-icon {
|
||||
rect, path {
|
||||
color: $theme;
|
||||
stroke: $theme;
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -211,7 +213,8 @@
|
||||
|
||||
.box-icon {
|
||||
line, polyline, path {
|
||||
color: $cyan;
|
||||
stroke: $cyan;
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -220,17 +223,47 @@
|
||||
|
||||
.box-icon {
|
||||
path {
|
||||
color: $pink;
|
||||
stroke: $pink;
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1370px) {
|
||||
.features-box {
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.oasis-features {
|
||||
padding-top: 60px;
|
||||
|
||||
.title-wrapper {
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
|
||||
.main-title-sm {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.cta {
|
||||
top: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.features-box {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.features-box {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
|
||||
.box {
|
||||
|
||||
|
||||
@@ -118,4 +118,96 @@
|
||||
margin-top: -100px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1690px) {
|
||||
.header {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1370px) {
|
||||
.oasis-header {
|
||||
padding-top: 210px;
|
||||
}
|
||||
|
||||
.clouds .cloud {
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 9%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
@include transform(scale(-0.8, 0.8));
|
||||
top: 17%;
|
||||
left: -11%;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
@include transform(scale(0.8));
|
||||
top: 34%;
|
||||
left: 3%;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
top: 11%;
|
||||
right: 7%;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
@include transform(scale(-1.15, 1.15));
|
||||
top: 32%;
|
||||
right: -6%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.clouds .cloud {
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 10%;
|
||||
left: 6%;
|
||||
@include transform(scale(-0.8, 0.8));
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
@include transform(scale(-0.6, 0.6));
|
||||
top: 21%;
|
||||
left: -18%;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
@include transform(scale(0.6));
|
||||
top: 41%;
|
||||
left: 0%;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
@include transform(scale(0.6));
|
||||
top: 13%;
|
||||
right: -6%;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
@include transform(scale(-0.9, 0.9));
|
||||
top: 32%;
|
||||
right: -16%;
|
||||
}
|
||||
}
|
||||
|
||||
.oasis-header {
|
||||
padding-top: 160px;
|
||||
|
||||
.main-title {
|
||||
max-width: 690px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
var el = document.getElementById('vuefilemanager')
|
||||
|
||||
const section = document.getElementById(anchor),
|
||||
position = section.offsetTop - 100;
|
||||
position = section.offsetTop;
|
||||
|
||||
el.scrollTo({top: position, behavior: 'smooth'});
|
||||
}
|
||||
@@ -132,6 +132,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1370px) {
|
||||
.navigation {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.oasis-navigation.navigation {
|
||||
margin-top: 10px;
|
||||
|
||||
@@ -226,7 +226,8 @@
|
||||
margin-bottom: 45px;
|
||||
|
||||
path {
|
||||
color: $theme;
|
||||
stroke: $theme;
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -259,6 +260,99 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1370px) {
|
||||
|
||||
.oasis-pricing .title-wrapper {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.clouds .cloud {
|
||||
|
||||
&:nth-child(1) {
|
||||
opacity: 0.2;
|
||||
left: 5%;
|
||||
top: 10%;
|
||||
@include transform(scale(1))
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
left: 23%;
|
||||
top: 36%;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
opacity: 0.30;
|
||||
right: 2%;
|
||||
top: 4%;
|
||||
@include transform(scale(-1.35, 1.35))
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
opacity: 0.2;
|
||||
right: 8%;
|
||||
top: 31%;
|
||||
@include transform(scale(0.9))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.clouds .cloud {
|
||||
|
||||
&:nth-child(1) {
|
||||
left: -8%;
|
||||
top: 6%;
|
||||
@include transform(scale(0.8))
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
left: 21%;
|
||||
top: 32%;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
right: 6%;
|
||||
top: 3%;
|
||||
@include transform(scale(-1.1, 1.1))
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
right: 0%;
|
||||
top: 37%;
|
||||
@include transform(scale(0.7))
|
||||
}
|
||||
}
|
||||
|
||||
.oasis-pricing {
|
||||
.title-wrapper {
|
||||
padding-top: 150px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.trees {
|
||||
margin-bottom: -110px;
|
||||
margin-left: 150px;
|
||||
transform: scale(0.75);
|
||||
}
|
||||
|
||||
.pricing-box .box {
|
||||
padding: 25px 35px;
|
||||
|
||||
&:nth-child(2) {
|
||||
padding: 40px 25px 20px;
|
||||
margin-top: -25px;
|
||||
margin-bottom: -25px;
|
||||
|
||||
.pricing-description {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.pricing-box {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
Reference in New Issue
Block a user