Seperated docs, included SASS

2015-03-01 20:27:35 +11:00
parent eb630ab551
commit 05a97500aa
29 changed files with 268 additions and 805 deletions
--- a/docs/src/less/docs.less
+++ b/docs/src/less/docs.less
@ -0,0 +1,151 @@
+// ==========================================================================
+// HTML5 Video Player Demo Page
+// ==========================================================================
+
+// Reset
+@import "lib/normalize.less";
+// Mixins
+@import "lib/mixins.less";
+// Fonts - docs only!
+@import "lib/fontface.less";
+
+// 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;
+	.font-smoothing();
+}
+h1 {
+	.font-size(64);
+	color: #3498DB;
+}
+p,
+small {
+	margin: 0 0 @padding-base;
+}
+small {
+	display: block;
+	padding: 0 (@padding-base / 2);
+	.font-size(14);
+}
+
+// Header
+header {
+	padding: @padding-base;
+	margin-bottom: @padding-base;
+
+	p {
+		.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 {
+		.tab-focus();
+	}
+	&.logo {
+		border: 0;
+	}
+}
+.btn {
+	display: inline-block;
+	padding: (@padding-base / 2) (@padding-base * 1.5);
+	background: @link-color;
+	border: 0;
+	color: #fff;
+	.font-smoothing(on);
+	font-weight: 600;
+	border-radius: 3px;
+	user-select: none;
+	
+	&: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;
+	}
+}
+
+// Footer
+footer {
+	margin-bottom: @padding-base;
+
+	p {
+		margin-bottom: (@padding-base / 2);
+	}
+}