seepur/resources/sass/main.scss

129 lines
2.4 KiB
SCSS
Raw Normal View History

@charset "utf-8";
@import './colors.scss';
@import './variables.scss';
@import './mixins.scss';
@import "../../node_modules/bulma/bulma.sass";
.hero-bg-landing01 {
background-image: url('/images/landing-hero01.jpg');
background-size: cover;
background-position: center;
}
.hero-bg-landing02 {
background-image: url('/images/landing-hero02.jpg');
background-size: cover;
background-position: center;
}
.hero-bg-landing03 {
background-image: url('/images/landing-hero03.jpg');
background-size: cover;
background-position: center;
}
.hero-bg-landing04 {
background-image: url('/images/landing-hero04.jpg');
background-size: cover;
background-position: center;
}
.hero-bg-landing05 {
background-image: url('/images/landing-hero05.jpg');
background-size: cover;
background-position: center;
}
.hero {
.navbar.darken {
@include linearGradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}
}
// SlideShow
.slideshow {
// max-width: 100%;
// max-height: 100%;
// overflow: hidden;
// position: inherit;
}
.hero {
.slideshow-item {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
color: transparent;
height: 77.5vh;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
}
.hero {
.slideshow-item:nth-child(1) {
background-image: url('/images/landing-hero01.jpg');
}
}
.hero {
.slideshow-item:nth-child(2) {
animation-delay: 6s;
background-image: url('/images/landing-hero02.jpg');
}
}
.hero {
.slideshow-item:nth-child(3) {
animation-delay: 12s;
background-image: url('/images/landing-hero03.jpg');
}
}
.hero {
.slideshow-item:nth-child(4) {
animation-delay: 18s;
background-image: url('/images/landing-hero04.jpg');
}
}
.hero {
.slideshow-item:nth-child(5) {
animation-delay: 24s;
background-image: url('/images/landing-hero05.jpg');
}
}
@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}