jekyll-theme-mrwooo-solid-state 0.1.92 → 0.2.0

data/assets/sass/layout/_footer.scss

@@ -0,0 +1,143 @@
+///
+/// Solid State by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Footer */
+
+	#footer {
+		.inner {
+			@include padding(5em, 0);
+			@include vendor('display', 'flex');
+			@include vendor('flex-direction', 'row');
+			@include vendor('flex-wrap', 'wrap');
+			margin: 0 auto;
+			width: _size(inner);
+
+			> * {
+				width: 100%;
+			}
+
+			form {
+				margin: 0 _size(section-spacing, large) 0 0;
+				width: calc(50% - #{_size(section-spacing, large) * 0.5});
+			}
+
+			.contact {
+				width: calc(50% - #{_size(section-spacing, large) * 0.5});
+			}
+
+			.copyright {
+				border-top: solid 2px _palette(border);
+				list-style: none;
+				margin: (_size(element-margin) * 2) 0 _size(element-margin) 0;
+				padding: _size(element-margin) 0 0 0;
+				width: 100%;
+
+				li {
+					border-left: solid 2px _palette(border);
+					color: _palette(fg-light);
+					display: inline-block;
+					font-size: 0.9em;
+					line-height: 1;
+					margin-left: 1em;
+					padding: 0;
+					padding-left: 1em;
+
+					&:first-child {
+						border-left: 0;
+						margin-left: 0;
+						padding-left: 0;
+					}
+
+					a {
+						color: inherit;
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=large') {
+
+			background-color:		_palette(bg);
+
+			background-image:		linear-gradient(to top, transparentize(_palette(bg), 0.2), transparentize(_palette(bg), 0.2)),
+									url('../../images/bg.jpg');
+
+			background-size:		auto,
+									cover;
+
+			background-position:	center,
+									center;
+
+		 	margin-top: (_size(wrapper-edges, large) * -1);
+		 	padding-top: _size(wrapper-edges, large);
+
+		}
+
+		@include breakpoint('<=medium') {
+		 	margin-top: (_size(wrapper-edges, medium) * -1);
+		 	padding-top: _size(wrapper-edges, medium);
+
+			.inner {
+				@include padding(3em, 3em);
+				display: block;
+				width: 100%;
+
+				form {
+					width: 100%;
+					margin: 0 0 (_size(element-margin) * 2) 0;
+				}
+
+				.contact {
+					width: 100%;
+					margin: 0 0 (_size(element-margin) * 2) 0;
+				}
+
+				.copyright {
+					margin: (_size(element-margin) * 2) 0 _size(element-margin) 0;
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+		 	margin-top: (_size(wrapper-edges, small) * -1);
+		 	padding-top: _size(wrapper-edges, small);
+
+			.inner {
+				@include padding(2em, 2em);
+
+				form {
+					margin: 0 0 (_size(element-margin) * 1.5) 0;
+				}
+
+				.contact {
+					margin: 0 0 (_size(element-margin) * 1.5) 0;
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			.inner {
+				.copyright {
+					li {
+						border-left: 0;
+						display: block;
+						margin: 1em 0 0 0;
+						padding-left: 0;
+
+						&:first-child {
+							margin-top: 0;
+						}
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=xxsmall') {
+			.inner {
+				@include padding(2em, 1.5em);
+			}
+		}
+	}

data/assets/sass/layout/_header.scss

@@ -0,0 +1,140 @@
+///
+/// Solid State by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Header */
+
+	#header {
+		@include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
+		background-color: transparentize(desaturate(lighten(_palette(bg), 3), 1.5), 0.05);
+		height: 3.5em;
+		left: 0;
+		line-height: 3.5em;
+		padding: 0 1.25em;
+		position: fixed;
+		top: 0;
+		width: 100%;
+		z-index: _misc(z-index-base);
+
+		h1 {
+			@include vendor('transition', (
+				'opacity #{_duration(transition)} ease-in-out',
+				'visibility #{_duration(transition)}'
+			));
+			border-bottom: 0;
+			font-size: 0.8em;
+			margin-bottom: 0;
+			opacity: 1;
+			visibility: visible;
+
+			a {
+				border: 0;
+			}
+		}
+
+		nav {
+			font-family: _font(family-heading);
+			font-size: 0.8em;
+			font-weight: _font(weight-heading-bold);
+			height: 3em;
+			letter-spacing: _font(kern-heading);
+			line-height: 3em;
+			position: absolute;
+			right: 0.7em;
+			text-transform: uppercase;
+			top: 0.7em;
+
+			a {
+				border: 0;
+				display: inline-block;
+				padding: 0 1em;
+
+				&:before {
+					float: right;
+					margin-left: 0.75em;
+				}
+
+				&[href="#menu"] {
+					@include icon;
+					@include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
+					border-radius: _size(border-radius);
+					box-shadow: inset 0 0 0 2px _palette(border);
+					padding: 0 1.35em;
+
+					&:before {
+						content: '\f0c9';
+					}
+
+					&:hover {
+						background-color: _palette(border-bg);
+					}
+
+					&:active {
+						background-color: _palette(border2-bg);
+					}
+				}
+			}
+		}
+
+		&.alt {
+			background-color: transparent;
+
+			h1 {
+				opacity: 0;
+				visibility: hidden;
+			}
+		}
+
+		@include breakpoint('<=small') {
+			height: 2.75em;
+			line-height: 2.75em;
+
+			nav {
+				top: 0;
+				right: 0;
+				height: inherit;
+				line-height: inherit;
+
+				a {
+					height: inherit;
+					line-height: inherit;
+
+					&[href="#menu"] {
+						box-shadow: none;
+						padding: 0 1em;
+						border-radius: 0;
+
+						&:hover, &:active {
+							background-color: inherit;
+						}
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			nav {
+				a {
+					&[href="#menu"] {
+						width: 4em;
+						white-space: nowrap;
+						text-indent: 4em;
+						position: relative;
+
+						&:before {
+							width: inherit;
+							position: absolute;
+							top: 0;
+							left: 0;
+							text-indent: 0;
+							text-align: right;
+							margin-left: 0;
+							padding-right: 1.25em;
+						}
+					}
+				}
+			}
+		}
+	}

data/assets/sass/layout/_menu.scss

@@ -0,0 +1,127 @@
+///
+/// Solid State by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Menu */
+
+	#page-wrapper {
+		@include vendor('transition', 'filter 0.25s ease');
+	}
+
+	#menu {
+		@include vendor('align-items', 'center');
+		@include vendor('display', 'flex');
+		@include vendor('justify-content', 'center');
+		@include vendor('pointer-events', 'none');
+		@include vendor('transition', ('opacity #{_duration(menu)} ease', 'visibility #{_duration(menu)}'));
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		-webkit-tap-highlight-color: rgba(0,0,0,0);
+		background: transparentize(_palette(bg), 0.2);
+		cursor: default;
+		height: 100%;
+		left: 0;
+		opacity: 0;
+		position: fixed;
+		text-align: center;
+		top: 0;
+		visibility: hidden;
+		width: 100%;
+
+		.inner {
+			@include padding(2.5em, 1.5em);
+			@include vendor('transform', 'translateY(0.5em)');
+			@include vendor('transition', ('opacity #{_duration(menu)} ease','transform #{_duration(menu)} ease'));
+			-webkit-overflow-scrolling: touch;
+			background: _palette(accent);
+			border-radius: _size(border-radius);
+			display: block;
+			max-width: 100%;
+			opacity: 0;
+			position: relative;
+			width: 18em;
+		}
+
+		h2 {
+			border-bottom: solid 2px _palette(border);
+			padding-bottom: 1em;
+		}
+
+		.close {
+			background-image: url('images/close.svg');
+			background-position: 75% 25%;
+			background-repeat: no-repeat;
+			background-size: 2em 2em;
+			border: 0;
+			content: '';
+			display: block;
+			height: 4em;
+			overflow: hidden;
+			position: absolute;
+			right: 0;
+			text-align: center;
+			text-indent: 4em;
+			top: 0;
+			width: 4em;
+		}
+
+		.links {
+			list-style: none;
+			margin-bottom: (_size(element-margin) - 0.5em);
+			padding: 0;
+
+			li {
+				padding: 0;
+
+				a {
+					border-radius: _size(border-radius);
+					border: 0;
+					display: block;
+					font-family: _font(family-heading);
+					font-size: 0.8em;
+					font-weight: _font(weight-heading);
+					letter-spacing: _font(kern-heading);
+					line-height: 1.85em;
+					padding: 0.75em 0;
+					text-transform: uppercase;
+
+					&:hover {
+						background: saturate(darken(_palette(accent), 3), 1.5);
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			.inner {
+				max-height: 100%;
+				overflow-y: auto;
+				overflow-x: hidden;
+
+				.close {
+					background-size: 1.5em 1.5em;
+				}
+			}
+		}
+	}
+
+	body.is-menu-visible {
+		#page-wrapper {
+			@include vendor('filter', 'blur(1.5px)');
+		}
+
+		#menu {
+			@include vendor('pointer-events', 'auto');
+			opacity: 1;
+			visibility: visible;
+
+			.inner {
+				@include vendor('transform', 'translateY(0)');
+				opacity: 1;
+			}
+		}
+	}

data/assets/sass/layout/_wrapper.scss

@@ -0,0 +1,303 @@
+///
+/// Solid State by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Wrapper */
+
+	/// Sets the colors of the wrapper's top/bottom edges.
+	/// @param {string} $color Color.
+	@mixin wrapper-edges-color($color: black) {
+		&:before, &:after {
+			background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,100 100,0 100,100" style="fill:#{$color};" /></svg>');
+		}
+
+		&:before {
+			box-shadow: inset 0 -1px 0 0 $color, 0 1px 0 0 $color;
+		}
+
+		&:after {
+			box-shadow: inset 0 -1px 0 0 $color, 0 1px 0 0 $color;
+		}
+	}
+
+	#wrapper {
+		> header {
+			@include padding(7.5em, 0, (3.5em, 0, _size(wrapper-edges, large) * -0.5, 0));
+
+			.inner {
+				margin: 0 auto;
+				width: _size(inner);
+			}
+
+			h2 {
+				border-bottom: solid 2px _palette(border);
+				font-size: 2em;
+				margin-bottom: _size(element-margin) * 0.4;
+				padding-bottom: _size(element-margin) * 0.2;
+			}
+
+			p {
+				font-family: _font(family-heading);
+				font-size: 1em;
+				font-weight: _font(weight-heading);
+				letter-spacing: _font(kern-heading);
+				line-height: 2;
+				text-transform: uppercase;
+			}
+		}
+
+		@include breakpoint('<=large') {
+			> header {
+				@include padding(5em, 0, (4em, 0, _size(wrapper-edges, large) * 0.5, 0));
+
+				background-color:		_palette(bg);
+
+				background-image:		linear-gradient(to top, transparentize(_palette(bg), 0.2), transparentize(_palette(bg), 0.2)),
+										url('../../images/bg.jpg');
+
+				background-size:		auto,
+										cover;
+
+				background-position:	center,
+										0% 30%;
+
+		 		margin-bottom: (_size(wrapper-edges, large) * -1);
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			> header {
+				@include padding(7em, 3em, (4em, 0, _size(wrapper-edges, medium) * 0.5, 0));
+
+				background-size:		auto,
+										cover;
+
+				background-position:	center,
+										0% 0%;
+
+		 		margin-bottom: (_size(wrapper-edges, medium) * -1);
+
+				.inner {
+					width: 100%;
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			> header {
+				@include padding(3.75em, 2em, (2.75em, 0, _size(wrapper-edges, small) * 0.5, 0));
+
+				background-size:		auto,
+										125%;
+
+		 		margin-bottom: (_size(wrapper-edges, small) * -1);
+
+				h2 {
+					font-size: 1.25em;
+				}
+
+				p {
+					font-size: 0.8em;
+				}
+			}
+		}
+	}
+
+	.wrapper {
+		background-color: _palette(bg);
+		margin: _size(wrapper-edges, large) 0;
+		position: relative;
+		@include wrapper-edges-color(_palette(bg));
+
+		&:before, &:after {
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+			content: '';
+			display: block;
+			height: _size(wrapper-edges, large);
+			position: absolute;
+			width: 100%;
+		}
+
+		&:before {
+			left: 0;
+			top: (_size(wrapper-edges, large) * -1);
+		}
+
+		&:after {
+			@include vendor('transform', 'scaleY(-1)');
+			bottom: (_size(wrapper-edges, large) * -1);
+			left: 0;
+		}
+
+		&.alt {
+			&:before {
+				@include vendor('transform', 'scaleX(-1)');
+			}
+
+			&:after {
+				@include vendor('transform', 'scaleY(-1) scaleX(-1)');
+			}
+		}
+
+		.inner {
+			@include padding(3em, 0);
+			margin: 0 auto;
+			width: _size(inner);
+		}
+
+		@for $i from 2 through _misc(max-wrapper-styles) {
+			$j: 3 * ($i - 1);
+			$color: desaturate(lighten(_palette(bg), $j), $j * 0.5);
+
+			&.style#{$i} {
+				background-color: $color;
+				@include wrapper-edges-color($color);
+			}
+		}
+
+		&.spotlight {
+			@include wrapper-edges-color(_palette(accent));
+			background-color: _palette(accent);
+
+			.inner {
+				@include vendor('display', 'flex');
+				@include vendor('align-items', 'center');
+				@include vendor('flex-direction', 'row');
+			}
+
+			.image {
+				border-radius: 100%;
+				margin: 0 _size(section-spacing, large) _size(element-margin) 0;
+				width: 22em;
+				overflow: hidden;
+				-ms-flex: 1;
+
+				img {
+					border-radius: 100%;
+					width: 100%;
+				}
+			}
+
+			.content {
+				width: 100%;
+				-ms-flex: 2;
+			}
+
+			&:nth-child(2n - 1) {
+				.inner {
+					@include vendor('flex-direction', 'row-reverse');
+					text-align: right;
+				}
+
+				.image {
+					margin: 0 0 _size(element-margin) _size(section-spacing, large);
+				}
+			}
+
+			@for $i from 2 through _misc(max-wrapper-styles) {
+				$j: 3 * ($i - 1);
+				$color: saturate(darken(_palette(accent), $j), $j * 0.5);
+
+				&.style#{$i} {
+					background-color: $color;
+					@include wrapper-edges-color($color);
+				}
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			margin: _size(wrapper-edges, medium) 0;
+
+			&:before, &:after {
+				height: _size(wrapper-edges, medium);
+			}
+
+			&:before {
+				top: (_size(wrapper-edges, medium) * -1);
+			}
+
+			&:after {
+				bottom: (_size(wrapper-edges, medium) * -1);
+				left: 0;
+			}
+
+			.inner {
+				@include padding(3em, 3em);
+				width: 100%;
+			}
+
+			&.spotlight {
+				.image {
+					margin: 0 _size(section-spacing, medium) _size(element-margin) 0;
+					width: 32em;
+				}
+
+				&:nth-child(2n - 1) {
+					.image {
+						margin: 0 0 _size(element-margin) _size(section-spacing, medium);
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			margin: _size(wrapper-edges, small) 0;
+
+			&:before, &:after {
+				height: _size(wrapper-edges, small);
+			}
+
+			&:before {
+				top: (_size(wrapper-edges, small) * -1);
+			}
+
+			&:after {
+				bottom: (_size(wrapper-edges, small) * -1);
+				left: 0;
+			}
+
+			.inner {
+				@include padding(2em, 2em);
+			}
+
+			&.spotlight {
+				.inner {
+					@include vendor('align-items', 'flex-start');
+				}
+
+				.image {
+					width: 19em;
+					margin: 0 _size(section-spacing, small) _size(element-margin) 0;
+				}
+
+				&:nth-child(2n - 1) {
+					.image {
+						margin: 0 0 _size(element-margin) _size(section-spacing, small);
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			&.spotlight {
+				.inner {
+					display: block;
+				}
+
+				.image {
+					margin: 0 0 (_size(element-margin) * 0.5) 0 !important;
+					max-width: 85%;
+					width: 12em;
+				}
+			}
+		}
+
+		@include breakpoint('<=xxsmall') {
+			.inner {
+				@include padding(2em, 1.5em);
+			}
+		}
+	}