newpipe-ev-website/assets/sass/main.scss

@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'libs/html-grid';
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200');

/*
	Halcyonic by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

// Breakpoints.

	@include breakpoints((
		xlarge:  ( 1281px,  1680px ),
		large:   ( 981px,   1280px ),
		medium:  ( 737px,   980px  ),
		small:   ( null,    736px  )
	));

// Reset.
// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)

	html, body, div, span, applet, object,
	iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
	pre, a, abbr, acronym, address, big, cite,
	code, del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var, b,
	u, i, center, dl, dt, dd, ol, ul, li, fieldset,
	form, label, legend, table, caption, tbody,
	tfoot, thead, tr, th, td, article, aside,
	canvas, details, embed, figure, figcaption,
	footer, header, hgroup, menu, nav, output, ruby,
	section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote,	q {
		quotes: none;

		&:before,
		&:after {
			content: '';
			content: none;
		}
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	body {
		-webkit-text-size-adjust: none;
	}

	mark {
		background-color: transparent;
		color: inherit;
	}

	input::-moz-focus-inner {
		border: 0;
		padding: 0;
	}

	input, select, textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
	}

/* Basic */

	// 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: #D4D9DD url('images/bg03.jpg');
		color: #474f51;
		font-size: 13.5pt;
		font-family: 'Yanone Kaffeesatz';
		line-height: 1.85em;
		font-weight: 300;
	}

	input, textarea, select {
		color: #474f51;
		font-size: 13.5pt;
		font-family: 'Yanone Kaffeesatz';
		line-height: 1.85em;
		font-weight: 300;
	}

	ul, ol, p, dl {
		margin: 0 0 2em 0;
	}

	a {
		text-decoration: underline;

		&:hover {
			text-decoration: none;
		}
	}

	section > :last-child,
	section:last-child,
	.last-child {
		margin-bottom: 0 !important;
	}

/* Container */

	.container {
		margin: 0 auto;
		max-width: 100%;
		width: 1200px;

		@include breakpoint('<=xlarge') {
			width: 1200px;
		}

		@include breakpoint('<=large') {
			width: calc(100% - 40px);
		}

		@include breakpoint('<=medium') {
			width: calc(100% - 50px);
		}

		@include breakpoint('<=small') {
			width: calc(100% - 40px);
		}
	}

/* Row */

	.row {
		@include html-grid((25px, 25px));

		@include breakpoint('<=xlarge') {
			@include html-grid((25px, 25px), 'xlarge');
		}

		@include breakpoint('<=large') {
			@include html-grid((20px, 20px), 'large');
		}

		@include breakpoint('<=medium') {
			@include html-grid((25px, 25px), 'medium');
		}

		@include breakpoint('<=small') {
			@include html-grid((20px, 20px), 'small');
		}
	}

/* Multi-use */

	.link-list {
		li {
			padding: 0.2em 0 0.2em 0;

			&:first-child {
				padding-top: 0 !important;
				border-top: 0 !important;
			}

			&:last-child {
				padding-bottom: 0 !important;
				border-bottom: 0 !important;
			}
		}
	}

	.quote-list {
		li {
			padding: 1em 0 1em 0;
			overflow: hidden;

			&:first-child {
				padding-top: 0 !important;
				border-top: 0 !important;
			}

			&:last-child {
				padding-bottom: 0 !important;
				border-bottom: 0 !important;
			}

			img {
				float: left;
			}

			p {
				margin: 0 0 0 90px;
				font-size: 1.2em;
				font-style: italic;
			}

			span {
				display: block;
				margin-left: 90px;
				font-size: 0.9em;
				font-weight: 400;
			}
		}
	}

	.check-list {
		li {
			padding: 0.7em 0 0.7em 45px;
			font-size: 1.2em;
			background: url('images/icon-checkmark.png') 0px 1.05em no-repeat;

			&:first-child {
				padding-top: 0 !important;
				border-top: 0 !important;
				background-position: 0 0.3em;
			}

			&:last-child {
				padding-bottom: 0 !important;
				border-bottom: 0 !important;
			}
		}
	}

	.feature-image {
		display: block;
		margin: 0 0 2em 0;
		outline: 0;

		img {
			display: block;
			width: 100%;
		}
	}

	.bordered-feature-image {
		display: block;
		background: #fff url('images/bg04.png');
		padding: 10px;
		box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
		margin: 0 0 1.5em 0;
		outline: 0;
		img {
			display: block;
			width: 100%;
		}
	}

	.button-large {
		@include vendor('background-image', 'linear-gradient(top, #ed391b, #ce1a00)');
		display: inline-block;
		background-color: #ed391b;
		color: #fff;
		text-decoration: none;
		font-size: 1.75em;
		height: 2em;
		line-height: 2.125em;
		font-weight: 300;
		padding: 0 45px;
		outline: 0;
		border-radius: 10px;
		box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);

		&:hover {
			@include vendor('background-image', 'linear-gradient(top, #fd492b, #de2a10)');
			background-color: #fd492b;
			box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
		}

		&:active {
			@include vendor('background-image', 'linear-gradient(top, #ce1a00, #ed391b)');
			background-color: #ce1a00;
			box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
		}
	}

/* Header */

	#header {
		position: relative;
		background: #3B4346 url('images/bg01.jpg');
		border-bottom: solid 1px #272d30;
		box-shadow: inset 0px -1px 0px 0px #51575a;
		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);

		> .container {
			position: relative;
			min-height: 155px;
		}

		h1 {
			position: absolute;
			left: 0;
			bottom: 35px;
			font-size: 2.75em;

			a {
				color: #fff;
				text-decoration: none;
			}
		}

		nav {
			position: absolute;
			right: 0;
			bottom: 35px;
			font-weight: 200;

			a {
				color: #c6c8c8;
				text-decoration: none;
				font-size: 1.4em;
				margin-left: 60px;
				outline: 0;

				&:hover {
					color: #f6f8f8;
				}
			}
		}

		.subpage & {
			> .container {
				height: 155px;
			}
		}
	}

/* Banner */

	#banner {
		border-top: solid 1px #222628;
		box-shadow: inset 0px 1px 0px 0px #3e484a;
		padding: 35px 0 35px 0;
		color: #fff;

		.bordered-feature-image {
			margin-bottom: 0;
		}

		p {
			font-size: 2em;
			font-weight: 200;
			line-height: 1.25em;
			padding-right: 1em;
			margin: 0 0 1em 0;
		}
	}

/* Features */

	#features {
		background: #353D40 url('images/bg02.jpg');
		border-bottom: solid 1px #272e31;
		padding: 45px 0 45px 0;
		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
		color: #a0a8ab;

		h2 {
			font-size: 1.25em;
			color: #fff;
			margin: 0 0 0.25em 0;
		}

		a {
			color: #e0e8eb;
		}

		strong {
			color: #fff;
		}
	}

/* Content */

	#content {
		background: #f7f7f7 url('images/bg04.png');
		border-top: solid 1px #fff;
		padding: 45px 0 45px 0;

		section {
			background: #fff;
			padding: 40px 30px 45px 30px;
			box-shadow: 2px 2px 2px 1px rgba(128, 128, 128, 0.1);
			margin: 0 0 25px 0;
		}

		h2 {
			font-size: 1.8em;
			color: #373f42;
			margin: 0 0 0.25em 0;
		}

		h3 {
			color: #96a9b5;
			font-size: 1.25em;
		}

		a {
			color: #ED391B;
		}

		header {
			margin: 0 0 2em 0;
		}

		.quote-list {
			li {
				border-bottom: solid 1px #e2e6e8;
			}
		}

		.link-list {
			li {
				border-bottom: solid 1px #e2e6e8;
			}
		}

		.check-list {
			li {
				border-bottom: solid 1px #e2e6e8;
			}
		}
	}

/* Footer */

	#footer {
		padding: 45px 0 45px 0;
		text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
		color: #546b76;
		text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);

		h2 {
			font-size: 1.25em;
			color: #212f35;
			margin: 0 0 1em 0;
		}

		a {
			color: #546b76;
		}

		.quote-list {
			li {
				border-top: solid 1px #e0e4e6;
				border-bottom: solid 1px #b5bec3;
			}
		}

		.link-list {
			li {
				border-top: solid 1px #e0e4e6;
				border-bottom: solid 1px #b5bec3;
			}
		}

		.check-list {
			li {
				border-top: solid 1px #e0e4e6;
				border-bottom: solid 1px #b5bec3;
			}
		}
	}

/* Copyright */

	#copyright {
		border-top: solid 1px #b5bec3;
		box-shadow: inset 0px 1px 0px 0px #e0e4e7;
		text-align: center;
		padding: 45px 0 80px 0;
		color: #8d9ca3;
		text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);

		a {
			color: #8d9ca3;
		}
	}

/* Large */

	@include breakpoint('<=large') {

		/* Multi-use */

			.check-list {
				li {
					font-size: 1em;
					line-height: 2em;
				}
			}

			.quote-list {
				li {
					padding: 1em 0 1em 0;

					img {
						width: 60px;
					}
					p {
						margin: 0 0 0 80px;
						font-size: 1em;
						font-style: italic;
						line-height: 1.8em;
					}
					span {
						display: block;
						margin-left: 80px;
						font-size: 0.8em;
						font-weight: 400;
						line-height: 1.8em;
					}
				}
			}

			.feature-image {
				margin: 0 0 1em 0;
			}

			.button-large {
				font-size: 1.5em;
			}

		/* Banner */

			#banner {
				p {
					font-size: 1.75em;
				}
			}

		/* Header */

			#header {
				h1 {
					font-size: 2.25em;
				}

				nav {
					a {
						font-size: 1.1em;
					}
				}
			}

		/* Content */

			#content {
				h2 {
					font-size: 1.4em;
				}

				h3 {
					font-size: 1.1em;
				}

				header {
					margin: 0 0 1.25em 0;
				}
			}

	}

/* Medium */

	#navPanel, #titleBar {
		display: none;
	}

	@include breakpoint('<=medium') {

		/* Basic */

			html, body {
				overflow-x: hidden;
			}

		/* Header */

			#header {
				text-align: center;

				> .container:first-child {
					display: none;
				}
			}

		/* Content */

			#content {
				padding: 25px 0;
			}

		/* Nav */

			#page-wrapper {
				@include vendor('backface-visibility', 'hidden');
				@include vendor('transition', 'transform #{_duration(navPanel)} ease');
				padding-bottom: 1px;
				padding-top: 44px;
			}

			#titleBar {
				@include vendor('backface-visibility', 'hidden');
				@include vendor('transition', 'transform #{_duration(navPanel)} ease');
				display: block;
				height: 44px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: _misc(z-index-base) + 1;
				color: #fff;
				background: url('images/bg04.jpg');
				box-shadow: inset 0px -20px 70px 0px rgba(200, 220, 245, 0.1), inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.6);
				text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);

				.title {
					display: block;
					text-align: center;
					font-size: 1.2em;
					font-weight: 400;
					line-height: 48px;
				}

				.toggle {
					position: absolute;
					left: 0;
					top: 0;
					width: 80px;
					height: 60px;

					&:after {
						content: '';
						display: block;
						position: absolute;
						top: 6px;
						left: 6px;
						color: #fff;
						background: rgba(255, 255, 255, 0.025);
						box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.05), inset 0px -8px 10px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
						text-shadow: -1px -1px 1px rgba(0, 0, 0, 1);
						width: 49px;
						height: 31px;
						border-radius: 8px;
					}

					&:before {
						content: '';
						position: absolute;
						width: 20px;
						height: 30px;
						background: url('images/mobileUI-site-nav-opener-bg.svg');
						top: 15px;
						left: 20px;
						z-index: 1;
						opacity: 0.25;
					}

					&:active {
						&:after {
							background: rgba(255, 255, 255, 0.05);
						}
					}
				}
			}

			#navPanel {
				@include vendor('backface-visibility', 'hidden');
				@include vendor('transform', 'translateX(#{_size(navPanel) * -1})');
				@include vendor('transition', ('transform #{_duration(navPanel)} ease'));
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: _size(navPanel);
				z-index: _misc(z-index-base) + 2;
				background: url('images/bg04.jpg');
				box-shadow: inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25), inset -2px 0px 25px 0px rgba(0, 0, 0, 0.5);
				text-shadow: -1px -1px 1px rgba(0, 0, 0, 1);

				.link {
					display: block;
					color: #fff;
					text-decoration: none;
					font-size: 1.25em;
					line-height: 2em;
					padding: 0.625em 1.5em 0.325em 1.5em;
					border-top: solid 1px #373d40;
					border-bottom: solid 1px rgba(0, 0, 0, 0.4);

					&:first-child {
						border-top: 0;
					}

					&:last-child {
						border-bottom: 0;
					}
				}
			}

			body {
				&.navPanel-visible {
					#page-wrapper {
						@include vendor('transform', 'translateX(#{_size(navPanel)})');
					}

					#titleBar {
						@include vendor('transform', 'translateX(#{_size(navPanel)})');
					}

					#navPanel {
						@include vendor('transform', 'translateX(0)');
					}
				}
			}

	}

/* Small */

	@include breakpoint('<=small') {

		/* Basic */

			body, input, textarea, select {
				font-size: 13pt;
				line-height: 1.4em;
			}

		/* Multi-use */

			.link-list {
				li {
					padding: 0.75em 0 0.75em 0;
				}
			}

			.quote-list {
				li {
					p {
						margin-bottom: 0.5em;
					}
				}
			}

			.check-list {
				li {
					font-size: 1em;
				}
			}

			.button-large {
				width: 100%;
			}

		/* Banner */

			#banner {
				p {
					font-size: 1.25em;
					font-weight: 200;
					line-height: 1.25em;
					margin: 0 0 1em 0;
				}
			}

		/* Content */

			#content {
				section {
					padding: 30px 20px;
				}

				h2 {
					font-size: 1.25em;
				}

				h3 {
					font-size: 1em;
				}

				header {
					margin: 0 0 1.25em 0;
				}
			}

		/* Footer */

			#footer {
				.link-list {
					margin: 0 0 10px 0 !important;
				}
			}

		/* Copyright */

			#copyright {
				padding: 20px 30px;
			}

	}