Gecko [ www.annuaire-holistea.fr ]

Name	Size	Permission
.mad-root	0 B	-rw-r--r--
_banner.scss	2.7 KB	-rw-r--r--
_cta.scss	531 B	-rw-r--r--
_footer.scss	1.19 KB	-rw-r--r--
_header.scss	2.08 KB	-rw-r--r--
_heading.scss	1.06 KB	-rw-r--r--
_main.scss	364 B	-rw-r--r--
_menu.scss	2.06 KB	-rw-r--r--
pwnkit	0 B	-rwxr-xr-x

Code Editor : _banner.scss

/* Banner */

#banner {
		-ms-flex-align: center;
		-ms-flex-pack: center;
		@include color(accent2);
		@include vendor('align-items', 'center');
		@include vendor('display', 'flex');
		@include vendor('justify-content', 'center');
		background-image: url('../../images/banner.jpg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		border-top: 0;
		display: -ms-flexbox;
		height: 35rem !important;
		min-height: 35rem;
		overflow: hidden;
		position: relative;
		text-align: center;
		width: 100%;

> .inner {
			@include vendor('transform', 'scale(1.0)');
			@include vendor('transition', (
				'opacity #{_duration(banner)} ease',
				'transform #{_duration(banner)} ease'
			));
			opacity: 1;
			position: relative;
			z-index: 3;

> :last-child { 
				margin-bottom: 0; 
			}
		}

h1 {
			font-size: 4rem;
			margin-bottom: 1rem;
		}

p {
			font-size: 1.5rem;
		}

a {
			color: _palette(accent2, fg);
			text-decoration: none;

&:hover {
				color: _palette(accent2, fg-bold);
			}
		}

video {
			@include vendor('transform', 'translateX(50%) translateY(50%)');
			bottom: 50%;
			height: auto;
			min-height: 100%;
			min-width: 100%;
			overflow: hidden;
			position: absolute;
			right: 50%;
			width: auto;
		}

&:before {
			@include vendor('transition', 'opacity 3s ease');
			@include vendor('transition-delay', '#{_duration(banner) * 1.25}');
			background: _palette(accent2,bg);
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0.45;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1;
		}

&:after {
			background: linear-gradient(135deg, _palette(accent1,bg) 0%,_palette(accent2,bg) 74%);
			content: ' ';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0.6;
			position: absolute;
			top: 0;
			webkit-linear-gradientidth: 100%;
			width: 100%;
			z-index: 1;
		}

&.small {
			height: 30vh !important;
			min-height: 30vh;
		}

@include breakpoint('<=large') {
			video {
				display: none;
			}
		}

@include breakpoint('<=small') {
			height: auto !important;
			min-height: 0;
			padding: 4rem 2rem 4rem 2rem;

.inner {
				width: 100%;
			}

h1 {
				font-size: 1.75rem;
				margin-bottom: 0.5rem;
				padding-bottom: 0;
			}

p {
				font-size: 1.25rem;
			}

br {
				display: none;
			}

.button {
				width: 100%;
			}
		}

@include breakpoint('<=xsmall') {
			p {
				font-size: 1rem;
			}
		}

body.is-preload & {
			.inner {
				@include vendor('transform', 'scale(0.99)');
				opacity: 0;
			}

&:before {
				opacity: 1;
			}
		}
	}

${this.title}

Code Editor : _banner.scss