X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;f=assets%2Fmain%2Fsass%2Flayout%2F_wrapper.scss;fp=assets%2Fmain%2Fsass%2Flayout%2F_wrapper.scss;h=f4862de5cea2b53084ac8fca4838cefaa13a23a3;hb=8af2079e4b096e77ba2f922d6a18224ce01cb7bd;hp=0000000000000000000000000000000000000000;hpb=d047bc8b5126c4af647c4e508022ca94452fc856;p=editorial.git

diff --git a/assets/main/sass/layout/_wrapper.scss b/assets/main/sass/layout/_wrapper.scss
new file mode 100644
index 0000000..f4862de
--- /dev/null
+++ b/assets/main/sass/layout/_wrapper.scss
@@ -0,0 +1,64 @@
+///
+/// Massively by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Wrapper */
+
+	#wrapper {
+		@include vendor('transition', 'opacity #{_duration(menu)} ease');
+		position: relative;
+		z-index: 1;
+		overflow: hidden;
+
+		> .bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background-color:		_palette(wrapper-bg);
+			background-image:		url('../../images/overlay.png'),	linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)),	url('../../images/bg.jpg');
+			background-size:		auto,								auto,														100% auto;
+			background-position:	center,								center,														top center;
+			background-repeat:		repeat,								no-repeat,													no-repeat;
+			background-attachment:	scroll,								scroll,														scroll;
+			z-index: -1;
+
+			&.fixed {
+				position: fixed;
+				width: 100vw;
+				height: 100vh;
+			}
+		}
+
+		&.fade-in {
+			&:before {
+				@include vendor('pointer-events', 'none');
+				@include vendor('transition', 'opacity 1s ease-in-out');
+				@include vendor('transition-delay', '0.75s');
+				background: _palette(invert, bg);
+				content: '';
+				display: block;
+				height: 100%;
+				left: 0;
+				opacity: 0;
+				position: fixed;
+				top: 0;
+				width: 100%;
+			}
+
+			body.is-preload & {
+				&:before {
+					opacity: 1;
+				}
+			}
+		}
+
+		@include orientation(portrait) {
+			> .bg {
+				background-size:	auto,								auto,														auto 175%;
+			}
+		}
+	}