Import TemplateHEADmaster

3 files changed, 368 insertions, 0 deletions

diff --git a/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss
new file mode 100644
index 0000000..476ce8f
--- /dev/null
+++ b/assets/sass/layout/_footer.scss
@@ -0,0 +1,74 @@
+///
+/// Big Picture by Pixelarity
+/// pixelarity.com | hello@pixelarity.com
+/// License: pixelarity.com/license
+///
+
+/* Footer */
+
+	#footer {
+		@include vendor('display', 'flex');
+		@include vendor('align-items', 'center');
+		@include vendor('justify-content', 'space-between');
+		position: relative;
+		margin: 0;
+		line-height: 1em;
+		padding: 1.5em;
+		background: _palette(accent3, bg);
+		color: _palette(accent3, fg);
+		overflow: hidden;
+
+		> * {
+			margin-bottom: 0;
+		}
+
+		a {
+			color: inherit;
+
+			&:hover {
+				color: _palette(accent3, fg-bold);
+			}
+		}
+
+		ul {
+			&.menu {
+				margin: 0;
+
+				li {
+					border-left-color: _palette(accent3, border);
+					font-size: 0.9em;
+				}
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			@include vendor('flex-direction', 'column');
+			@include vendor('justify-content', 'center');
+			line-height: 1.5em;
+			text-align: center;
+			padding: 2em 1em 2em 1em;
+
+			> * {
+				margin: 0 0 1em 0;
+			}
+		}
+
+		@include breakpoint('<=small') {
+			ul {
+				&.menu {
+					li {
+						border-left: none;
+						display: block;
+						line-height: inherit;
+						margin: 0.25em 0 0 0;
+						padding: 0.25em 0 0 0;
+
+						&:first-child {
+							margin-top: 0;
+							padding-top: 0;
+						}
+					}
+				}
+			}
+		}
+	}
\ No newline at end of file
diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss
new file mode 100644
index 0000000..e50ac4a
--- /dev/null
+++ b/assets/sass/layout/_header.scss
@@ -0,0 +1,90 @@
+///
+/// Big Picture by Pixelarity
+/// pixelarity.com | hello@pixelarity.com
+/// License: pixelarity.com/license
+///
+
+/* Header */
+
+	#header {
+		position: fixed;
+		z-index: 10000;
+		left: 0;
+		top: 0;
+		width: 100%;
+		background: transparentize(_palette(bg), 0.05);
+		height: 3em;
+		line-height: 3em;
+		box-shadow: 0 0 0.15em 0 rgba(0,0,0,0.1);
+
+		h1 {
+			position: absolute;
+			left: 1em;
+			top: 0;
+			height: 3em;
+			line-height: 3em;
+			cursor: default;
+
+			a {
+				font-size: 1.25em;
+			}
+		}
+
+		nav {
+			position: absolute;
+			right: 0.5em;
+			top: 0;
+			height: 3em;
+			line-height: 3em;
+
+			ul {
+				margin: 0;
+
+				li {
+					display: inline-block;
+					margin-left: 0.5em;
+					font-size: 0.9em;
+
+					a {
+						display: block;
+						color: inherit;
+						text-decoration: none;
+						height: 3em;
+						line-height: 3em;
+						padding: 0 0.5em 0 0.5em;
+						outline: 0;
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			height: 2.5em;
+			line-height: 2.5em;
+
+			h1 {
+				text-align: center;
+				position: relative;
+				left: 0;
+				top: 0;
+				height: 2.5em;
+				line-height: 2.5em;
+
+				a {
+					font-size: 1em;
+				}
+			}
+
+			nav {
+				display: none;
+			}
+		}
+	}
+
+	body {
+		padding-top: 3em;
+
+		@include breakpoint('<=small') {
+			padding-top: 2.5em;
+		}
+	}
\ No newline at end of file
diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss
new file mode 100644
index 0000000..6792872
--- /dev/null
+++ b/assets/sass/layout/_main.scss
@@ -0,0 +1,204 @@
+///
+/// Big Picture by Pixelarity
+/// pixelarity.com | hello@pixelarity.com
+/// License: pixelarity.com/license
+///
+
+/* Main */
+
+	.main {
+		@include vendor('display', 'flex');
+		position: relative;
+		margin: 0;
+		overflow-x: hidden;
+
+		> .content {
+			width: 45em;
+			max-width: calc(100% - 4em);
+			margin: 0 auto;
+
+			> :last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		&.fullscreen {
+			min-height: 100%;
+		}
+
+		&.style1 {
+			@include vendor('align-items', 'center');
+			@include vendor('justify-content', 'center');
+			text-align: center;
+			padding: 3em 0 3em 0;
+
+			h2 {
+				font-size: 4.25em;
+				line-height: 1em;
+			}
+
+			> .content {
+				@include vendor('transition', 'opacity #{_duration(fade-in)} ease');
+				@include vendor('transform', 'translateZ(0)');
+				opacity: 1.0;
+				margin: 0;
+			}
+
+			&.inactive > .content {
+				opacity: 0;
+			}
+		}
+
+		&.style2 {
+			@include vendor('align-items', 'center');
+			@include vendor('justify-content', 'center');
+			padding: 3em 0 3em 0;
+			overflow: hidden;
+
+			> .content {
+				@include vendor('transition', 'transform #{_duration(fade-in)} ease');
+				@include vendor('transform', 'translateZ(0)');
+				position: relative;
+				width: 35%;
+				margin: 0;
+			}
+
+			&.left {
+				@include vendor('justify-content', 'flex-start');
+			}
+
+			&.right {
+				@include vendor('justify-content', 'flex-end');
+			}
+
+			&.inactive {
+				&.left > .content {
+					@include vendor('transform', 'translateX(-100%)');
+				}
+
+				&.right > .content {
+					@include vendor('transform', 'translateX(100%)');
+				}
+			}
+		}
+
+		&.style3 {
+			text-align: center;
+			padding: 6em 0 6em 0;
+
+			.content > header {
+				margin-bottom: 2em;
+			}
+
+			&.primary {
+				background: _palette(bg);
+			}
+
+			&.secondary {
+				background: _palette(bg-alt);
+			}
+		}
+
+		&.dark {
+			color: _palette(dark, fg);
+
+			a {
+				color: inherit;
+			}
+
+			.button.style2 {
+				border-color: _palette(dark, fg);
+
+				&:hover {
+					background-color: transparentize(_palette(dark, border), 0.875);
+				}
+
+				&:active {
+					background-color: transparentize(_palette(dark, border), 0.75);
+				}
+
+				&.down {
+					background-image: url('images/dark-arrow.svg');
+				}
+			}
+		}
+
+		body.is-touch & {
+			background-attachment: scroll !important;
+		}
+
+		@include breakpoint('<=xxlarge') {
+			&.style2 {
+				.content {
+					width: 40%;
+				}
+			}
+		}
+
+		@include breakpoint('<=large') {
+			&.style2 {
+				.content {
+					width: 50%;
+				}
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			&.style2 {
+				.content {
+					width: 60%;
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			> .content {
+				br {
+					display: none;
+				}
+			}
+
+			&.fullscreen {
+				height: auto !important;
+			}
+
+			&.style1 {
+				padding: 4em 15px 4em 15px;
+
+				h2 {
+					font-size: 3em;
+				}
+			}
+
+			&.style2 {
+				padding: 6em 15px 6em 15px;
+
+				&:before,
+				&:after {
+					display: none !important;
+				}
+
+				.button.anchored {
+					display: none;
+				}
+
+				.content {
+					width: 100%;
+					max-width: 100%;
+					text-align: center;
+					@include vendor('transform', 'none');
+				}
+			}
+
+			&.style3 {
+				text-align: center;
+				padding: 3em 10px 3em 10px;
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			> .content {
+				max-width: calc(100% - 1.5em);
+			}
+		}
+	}
\ No newline at end of file