improved styling of 404 page.

[theme-danix.xyz.git] / assets / sass / layout / _banner.scss

///\r
/// Forty by HTML5 UP\r
/// html5up.net | @ajlkn\r
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
///\r
\r
/* Banner */\r
\r
	#banner {\r
		@include vendor('align-items', 'center');\r
		@include vendor('background-image', 'url("../img/bg2.jpg")');\r
		@include vendor('display', 'flex');\r
		@include padding(4em, 0, (2em, 0, 0, 0));\r
		background-attachment: fixed;\r
		background-position: center;\r
		background-repeat: no-repeat;\r
		background-size: cover;\r
		border-bottom: 0 !important;\r
		cursor: default;\r
		height: 60vh;\r
		margin-bottom: -5.25em;\r
		max-height: 32em;\r
		min-height: 22em;\r
		position: relative;\r
		top: -3.25em;\r
\r
		&:after {\r
			@include vendor('transition', 'opacity #{_duration(banner)} ease');\r
			@include vendor('transition-delay', '0.75s');\r
			@include vendor('pointer-events', 'none');\r
			background-color: _palette_light(bg);\r
			content: '';\r
			display: block;\r
			height: 100%;\r
			left: 0;\r
			opacity: 0.7;\r
			position: absolute;\r
			top: 0;\r
			width: 100%;\r
			z-index: 1;\r
			@media screen and (prefers-color-scheme: dark) {\r
				background-color: _palette_dark(bg);\r
			}\r
		}\r
\r
		h1 {\r
			font-size: 3.25em;\r
		}\r
\r
		> .inner {\r
			@include vendor('transition', (\r
				'opacity 1.5s ease',\r
				'transform 0.5s ease-out',\r
				'filter 0.5s ease',\r
				'-webkit-filter 0.5s ease'\r
			));\r
			padding: 0 !important;\r
			position: relative;\r
			z-index: 2;\r
\r
			.image {\r
				display: none;\r
			}\r
\r
			header {\r
				width: auto;\r
\r
				> :first-child {\r
					width: auto;\r
\r
					&:after {\r
						max-width: 100%;\r
					}\r
				}\r
			}\r
\r
			.content {\r
				@include vendor('display', 'flex');\r
				@include vendor('align-items', 'center');\r
				margin: 0 0 _size(element-margin) 0;\r
\r
				> * {\r
					margin-right: 1.5em;\r
					margin-bottom: 0;\r
				}\r
\r
				> :last-child {\r
					margin-right: 0;\r
				}\r
\r
				p {\r
					font-size: 0.7em;\r
					font-weight: _font(weight-bold);\r
					letter-spacing: _font(letter-spacing-alt);\r
					text-transform: uppercase;\r
				}\r
			}\r
		}\r
\r
		&.major {\r
			height: 75vh;\r
			min-height: 30em;\r
			max-height: 50em;\r
\r
			&.alt {\r
				opacity: 0.75;\r
			}\r
		}\r
\r
		&.style1 { &:after { background-color: _palette_light(accent1); } }\r
		&.style2 { &:after { background-color: _palette_light(accent2); } }\r
		&.style3 { &:after { background-color: _palette_light(accent3); } }\r
		&.style4 { &:after { background-color: _palette_light(accent4); } }\r
		&.style5 { &:after { background-color: _palette_light(accent5); } }\r
		&.style6 { &:after { background-color: _palette_light(accent6); } }\r
\r
		@media screen and (prefers-color-scheme: dark) {\r
			&.style1 { &:after { background-color: _palette_dark(accent1); } }\r
			&.style2 { &:after { background-color: _palette_dark(accent2); } }\r
			&.style3 { &:after { background-color: _palette_dark(accent3); } }\r
			&.style4 { &:after { background-color: _palette_dark(accent4); } }\r
			&.style5 { &:after { background-color: _palette_dark(accent5); } }\r
			&.style6 { &:after { background-color: _palette_dark(accent6); } }\r
		}\r
\r
		body.is-preload & {\r
			&:after {\r
				opacity: 1.0;\r
			}\r
\r
			> .inner {\r
				@include vendor('filter', 'blur(0.125em)');\r
				@include vendor('transform', 'translateX(-0.5em)');\r
				opacity: 0;\r
			}\r
		}\r
\r
		@include breakpoint('<=large') {\r
			background-attachment: scroll;\r
		}\r
\r
		@include breakpoint('<=small') {\r
			@include padding(3em, 0, (2em, 0, 0, 0));\r
			height: auto;\r
			margin-bottom: -2.75em;\r
			max-height: none;\r
			min-height: 0;\r
			top: -2.75em;\r
\r
			h1 {\r
				font-size: 2em;\r
			}\r
\r
			> .inner {\r
				.content {\r
					display: block;\r
\r
					> * {\r
						margin-right: 0;\r
						margin-bottom: _size(element-margin);\r
					}\r
				}\r
			}\r
\r
			&.major {\r
				height: auto;\r
				min-height: 0;\r
				max-height: none;\r
			}\r
		}\r
\r
		@include breakpoint('<=xsmall') {\r
			@include padding(4em, 0, (2em, 0, 0, 0));\r
\r
			> .inner {\r
				.content {\r
					p {\r
						br {\r
							display: none;\r
						}\r
					}\r
				}\r
			}\r
\r
			&.major {\r
				@include padding(6em, 0, (2em, 0, 0, 0));\r
			}\r
		}\r
	}