1 files changed, 140 insertions, 0 deletions
diff --git a/src/sass/docs.scss b/src/sass/docs.scss
new file mode 100644
index 00000000..666474ae
--- /dev/null
+++ b/src/sass/docs.scss
@@ -0,0 +1,140 @@
+// ==========================================================================
+// HTML5 Video Player Demo Page
+// ==========================================================================
+
+// Reset
+@import "docs/normalize";
+// Mixins
+@import "docs/mixins";
+
+// Variables
+// ---------------------------------------
+// Colors
+$blue:          			#3498DB;
+$gray-dark: 				#343f4a;
+$gray: 						#565d64;
+$gray-light: 				#cbd0d3;
+
+// Elements
+$link-color: 				$blue;
+$padding-base: 				20px;
+
+// Breakpoints
+$screen-md: 				768px;
+
+// BORDER-BOX ALL THE THINGS!
+// http://paulirish.com/2012/box-sizing-border-box-ftw/
+*, *::after, *::before {
+	box-sizing: border-box;
+}
+
+// Base
+html {
+	//font-size: 62.5%;
+}
+body {
+	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
+	background: #fff;
+	line-height: 1.5;
+	text-align: center;
+	color: #6D797F;
+}
+
+// Type
+h1,
+h2 {
+	letter-spacing: -.025em;
+	color: #2E3C44;
+	margin: 0 0 ($padding-base / 2);
+	line-height: 1.2;
+	@include font-smoothing();
+}
+h1 {
+	@include font-size(64);
+	color: #3498DB;
+}
+p,
+small {
+	margin: 0 0 $padding-base;
+}
+small {
+	display: block;
+	padding: 0 ($padding-base / 2);
+	@include font-size(14);
+}
+
+// Header
+header {
+	padding: $padding-base;
+	margin-bottom: $padding-base;
+
+	p {
+		@include font-size(18);
+	}
+	@media (min-width: 560px) {
+		padding-top: ($padding-base * 3);
+		padding-bottom: ($padding-base * 3);
+	}
+}
+
+// Sections
+section {
+	padding-bottom: $padding-base;
+
+	@media (min-width: 560px) {
+		padding-bottom: ($padding-base * 2);
+	}
+}
+
+// Links & Buttons
+a {
+	text-decoration: none;
+	color: $link-color;
+	border-bottom: 1px solid currentColor;
+	transition: all .3s ease;
+
+	&:hover,
+	&:focus {
+		color: #000;
+	}
+	&:focus {
+		@include tab-focus();
+	}
+}
+.btn {
+	display: inline-block;
+	padding: ($padding-base / 2) ($padding-base * 1.5);
+	background: $link-color;
+	border: 0;
+	color: #fff;
+	@include font-smoothing(on);
+	font-weight: 600;
+	border-radius: 3px;
+
+	&:hover,
+	&:focus {
+		color: #fff;
+		background: darken($link-color, 5%);
+	}
+}
+
+// Players
+.example-audio .player {
+	max-width: 480px;
+}
+.example-video .player {
+	max-width: 1200px;
+}
+.example-audio .player,
+.example-video .player {
+	margin: 0 auto $padding-base;
+
+	&-fullscreen,
+	&.fullscreen-active {
+		max-width: none;
+	}
+}
+
+// Fonts
+// Last to not block rendering
+@import "docs/fontface.less";