seepur/resources/sass/main.scss

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