Загрузить файлы 'assets/sass/layout'

assets/sass/layout/_footer.scss

@@ -0,0 +1,38 @@
+///
+/// Hyperspace by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Footer */
+
+	#footer {
+		#sidebar + #wrapper + & {
+			margin-left: _size(sidebar-width);
+
+			@include breakpoint(large) {
+				margin-left: 0;
+			}
+		}
+
+		> .inner {
+			a {
+				border-bottom-color: _palette(border);
+
+				&:hover {
+					border-bottom-color: transparent;
+				}
+			}
+
+			.menu {
+				font-size: 0.8em;
+				color: _palette(border);
+			}
+		}
+
+		#header + #wrapper + & {
+			> .inner {
+				margin: 0 auto;
+			}
+		}
+	}

assets/sass/layout/_header.scss

@@ -0,0 +1,92 @@
+///
+/// Hyperspace 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('display', 'flex');
+		background-color: _palette(accent1);
+		cursor: default;
+		padding: 1.75em 2em;
+
+		> .title {
+			border: 0;
+			color: _palette(fg-bold);
+			display: block;
+			font-size: 1.25em;
+			font-weight: _font(weight-bold);
+		}
+
+		> nav {
+			@include vendor('flex', '1');
+			text-align: right;
+
+			> ul {
+				margin: 0;
+				padding: 0;
+
+				> li {
+					display: inline-block;
+					margin-left: 1.75em;
+					padding: 0;
+					vertical-align: middle;
+
+					&:first-child {
+						margin-left: 0;
+					}
+
+					a {
+						border: 0;
+						color: _palette(fg-light);
+						display: inline-block;
+						font-size: 0.6em;
+						font-weight: _font(weight-bold);
+						letter-spacing: _font(kerning-alt);
+						text-transform: uppercase;
+
+						&:hover {
+							color: _palette(fg);
+						}
+
+						&.active {
+							color: _palette(fg-bold);
+						}
+					}
+				}
+			}
+		}
+
+		@include breakpoint(small) {
+			padding: 1em 2em;
+		}
+
+		@include breakpoint(xsmall) {
+			display: block;
+			padding: 0 2em;
+			text-align: left;
+
+			.title {
+				font-size: 1.25em;
+				padding: 1em 0;
+			}
+
+			> nav {
+				border-top: solid 1px _palette(border);
+				text-align: inherit;
+
+				> ul {
+					> li {
+						margin-left: 1.5em;
+
+						a {
+							height: 6em;
+							line-height: 6em;
+						}
+					}
+				}
+			}
+		}
+	}

assets/sass/layout/_intro.scss

@@ -0,0 +1,33 @@
+///
+/// Hyperspace by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Intro */
+
+	#intro {
+		background-attachment: fixed;
+		background-image: url('images/intro.svg');
+		background-position: top right;
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+
+		p {
+			font-size: 1.25em;
+
+			@include breakpoint(medium) {
+				br {
+					display: none;
+				}
+			}
+
+			@include breakpoint(small) {
+				font-size: 1em;
+			}
+		}
+
+		@include breakpoint(large) {
+			background-attachment: scroll;
+		}
+	}

assets/sass/layout/_sidebar.scss

@@ -0,0 +1,185 @@
+///
+/// Hyperspace by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Sidebar */
+
+	#sidebar {
+		@include padding(2.5em, 2.5em);
+		background: _palette(bg);
+		cursor: default;
+		height: 100vh;
+		left: 0;
+		overflow-x: hidden;
+		overflow-y: auto;
+		position: fixed;
+		text-align: right;
+		top: 0;
+		width: _size(sidebar-width);
+		z-index: _misc(z-index-base);
+
+		> .inner {
+			@include vendor('display', 'flex');
+			@include vendor('flex-direction', 'column');
+			@include vendor('justify-content', 'center');
+			@include vendor('transform', 'translateY(0)');
+			@include vendor('transition', (
+				'opacity #{_duration(activation)} ease',
+			));
+			min-height: 100%;
+			opacity: 1;
+			width: 100%;
+
+			body.is-ie & {
+				height: 100%;
+			}
+		}
+
+		nav {
+			> ul {
+				list-style: none;
+				padding: 0;
+
+				> li {
+					@include vendor('transform', 'translateY(0)');
+					@include vendor('transition', (
+						'opacity #{_duration(activation) * 0.15} ease',
+						'transform #{_duration(activation) * 0.75} ease'
+					));
+					margin: 1.5em 0 0 0;
+					opacity: 1;
+					padding: 0;
+					position: relative;
+
+					&:first-child {
+						margin: 0;
+					}
+
+					@for $i from 1 through _misc(max-sidebar-links) {
+						&:nth-child(#{$i}) {
+							@include vendor('transition-delay', '#{(_duration(activation) * 0.2 * $i) + (_duration(activation) * 0.25)}');
+						}
+					}
+				}
+			}
+
+			a {
+				@include vendor('transition', 'color #{_duration(transition)} ease');
+				border: 0;
+				color: _palette(fg-light);
+				display: block;
+				font-size: 0.6em;
+				font-weight: _font(weight-bold);
+				letter-spacing: _font(kerning-alt);
+				line-height: 1.75;
+				outline: 0;
+				padding: 1.35em 0;
+				position: relative;
+				text-decoration: none;
+				text-transform: uppercase;
+
+				&:before,
+				&:after {
+					border-radius: 0.2em;
+					bottom: 0;
+					content: '';
+					height: 0.2em;
+					position: absolute;
+					right: 0;
+					width: 100%;
+				}
+
+				&:before {
+					background: lighten(_palette(bg), 5);
+				}
+
+				&:after {
+					@include vendor('background-image', 'linear-gradient(to right, #{_palette(accent1)}, #{_palette(accent3)})');
+					@include vendor('transition', 'max-width #{_duration(transition)} ease');
+					max-width: 0;
+				}
+
+				&:hover {
+					color: _palette(fg);
+				}
+
+				&.active {
+					color: _palette(fg-bold);
+
+					&:after {
+						max-width: 100%;
+					}
+				}
+			}
+		}
+
+		body.is-loading & {
+			> .inner {
+				opacity: 0;
+			}
+
+			nav {
+				ul {
+					li {
+						@include vendor('transform', 'translateY(2em)');
+						opacity: 0;
+					}
+				}
+			}
+		}
+
+		@include breakpoint(large) {
+			height: _size(sidebar-height);
+			left: 0;
+			line-height: _size(sidebar-height);
+			overflow: hidden;
+			padding: 0;
+			text-align: center;
+			top: 0;
+			width: 100%;
+
+			> .inner {
+				@include vendor('flex-direction', 'row');
+				@include vendor('align-items', 'stretch');
+				height: inherit;
+				line-height: inherit;
+			}
+
+			nav {
+				height: inherit;
+				line-height: inherit;
+
+				ul {
+					@include vendor('display', 'flex');
+					height: inherit;
+					line-height: inherit;
+					margin: 0;
+
+					li {
+						display: block;
+						height: inherit;
+						line-height: inherit;
+						margin: 0 0 0 2em;
+						padding: 0;
+					}
+				}
+
+				a {
+					height: inherit;
+					line-height: inherit;
+					padding: 0;
+
+					&:after {
+						background-image: none;
+						background-color: _palette(accent3);
+					}
+				}
+			}
+		}
+
+		@include breakpoint(small) {
+			display: none;
+		}
+	}

assets/sass/layout/_wrapper.scss

@@ -0,0 +1,30 @@
+///
+/// Hyperspace by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Wrapper (main) */
+
+	#wrapper {
+		#sidebar + & {
+			margin-left: _size(sidebar-width);
+
+			@include breakpoint(large) {
+				margin-left: 0;
+				padding-top: _size(sidebar-height);
+			}
+
+			@include breakpoint(small) {
+				padding-top: 0;
+			}
+		}
+
+		#header + & {
+			> .wrapper {
+				> .inner {
+					margin: 0 auto;
+				}
+			}
+		}
+	}