Import TemplateHEADmaster

1 files changed, 159 insertions, 0 deletions

diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss
new file mode 100644
index 0000000..bf69eb8
--- /dev/null
+++ b/assets/sass/base/_page.scss
@@ -0,0 +1,159 @@
+///
+/// Big Picture by Pixelarity
+/// pixelarity.com | hello@pixelarity.com
+/// License: pixelarity.com/license
+///
+
+/* Basic */
+
+	@-ms-viewport {
+		width: device-width;
+	}
+
+	html {
+		height: 100%;
+	}
+
+	// Set box model to border-box.
+	// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+		html {
+			box-sizing: border-box;
+		}
+
+		*, *:before, *:after {
+			box-sizing: inherit;
+		}
+
+	body {
+		background: _palette(bg);
+		height: 100%;
+		min-width: 320px;
+
+		// Stops initial animations until page loads.
+			&.is-preload {
+				*, *:before, *:after {
+					@include vendor('animation', 'none !important');
+					@include vendor('transition', 'none !important');
+				}
+			}
+
+	}
+
+/* Spinner */
+
+	@include keyframes('spinner-rotate') {
+		0% { @include vendor('transform', 'scale(1) rotate(0deg)'); }
+		100% { @include vendor('transform', 'scale(1) rotate(360deg)'); }
+	}
+
+/* Loader */
+
+	@include keyframes('spinner-show') {
+		0% { opacity: 0; }
+		100% { opacity: 1; }
+	}
+
+	@include keyframes('spinner-hide') {
+		0% {
+			@include vendor('transform', 'scale(1) rotate(0deg)');
+			color: _palette(border);
+			z-index: 100001;
+		}
+
+		99% {
+			@include vendor('transform', 'scale(0.5) rotate(360deg)');
+			color: _palette(border);
+			z-index: 100001;
+		}
+
+		100% {
+			@include vendor('transform', 'scale(0.5) rotate(360deg)');
+			color: _palette(border);
+			z-index: -1;
+		}
+	}
+
+	@include keyframes('overlay-hide') {
+		0% {
+			opacity: 1;
+			z-index: 100000;
+		}
+
+		15% {
+			opacity: 1;
+			z-index: 100000;
+		}
+
+		99% {
+			opacity: 0;
+			z-index: 100000;
+		}
+
+		100% {
+			opacity: 0;
+			z-index: -1;
+		}
+	}
+
+	body {
+		text-decoration: none;
+
+		&:before {
+			@include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-hide 0.25s ease-in-out forwards !important'));
+			@include vendor('transform-origin', '50% 50%');
+			-moz-osx-font-smoothing: grayscale;
+			-webkit-font-smoothing: antialiased;
+			font-family: FontAwesome;
+			font-style: normal;
+			font-weight: normal;
+			text-transform: none !important;
+			color: _palette(border);
+			content: '\f1ce';
+			cursor: default;
+			display: block;
+			font-size: 2em;
+			height: 2em;
+			left: 50%;
+			line-height: 2em;
+			margin: -1em 0 0 -1em;
+			opacity: 0;
+			position: fixed;
+			text-align: center;
+			top: 50%;
+			width: 2em;
+			z-index: -1;
+		}
+
+		&:after {
+			@include vendor('animation', 'overlay-hide 1.5s ease-in forwards !important');
+			background: #ffffff;
+			content: '';
+			display: block;
+			height: 100%;
+			left: 0;
+			opacity: 0;
+			position: fixed;
+			top: 0;
+			width: 100%;
+			z-index: -1;
+		}
+
+		&.is-preload {
+			&:before {
+				@include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-rotate 0.75s infinite linear !important'));
+				z-index: 100001;
+			}
+
+			&:after {
+				@include vendor('animation', 'none !important');
+				opacity: 1;
+				z-index: 100000;
+			}
+		}
+	}
+
+	@media (-webkit-min-device-pixel-ratio: 2) {
+		body:before {
+			line-height: 2.025em;
+		}
+	}
\ No newline at end of file