seepur/resources/sass/main.scss

175 lines
3.5 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
}
}
$sizeUnit: rem;
$marginKey: 'm';
$paddingKey: 'p';
$separator: '-';
$sizes: (
('none', 0),
('xxs', 0.75),
('xs', 0.25),
('sm', 0.5),
('md', 1),
('lg', 2),
('xl', 4),
('xxl', 8),
);
$positions: (
('t', 'top'),
('r', 'right'),
('b', 'bottom'),
('l', 'left')
);
@function sizeValue($key, $value) {
@return if($key == 'none', 0, $value + $sizeUnit);
}
@each $size in $sizes {
$sizeKey: nth($size, 1);
$sizeValue: nth($size, 2);
.#{$marginKey}#{$separator}#{$sizeKey} {
margin: sizeValue($sizeKey, $sizeValue);
}
.#{$paddingKey}#{$separator}#{$sizeKey} {
padding: sizeValue($sizeKey, $sizeValue);
}
@each $position in $positions {
$posKey: nth($position, 1);
$posValue: nth($position, 2);
.#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
}
.#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
}
}
}