Tweaks to docs

assets/less/docs.less

@@ -3,27 +3,22 @@
 // ==========================================================================
 
 // Reset
-@import "lib/normalize.less";
+@import "docs/normalize.less";
 // Mixins
-@import "lib/mixins.less";
+@import "docs/mixins.less";
+// Fonts
+@import "docs/fontface.less";
 
-@font-face {
+// Variables
-	font-family: "Avenir";
+// ---------------------------------------
-	src: 	url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"), 
+// Colors
-			url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"), 
+@blue:          			#3498DB;
-			url("../../assets/fonts/AvenirLTStd-Medium.ttf")  format("truetype");
+@gray-dark: 				#343f4a;
-	font-style:   normal;
+@gray: 						#565d64;
-	font-weight:  400;
+@gray-light: 				#cbd0d3;
-}
 
-@font-face {
+// Elements
-	font-family: "Avenir";
+@link-color: 				@blue;
-	src: 	url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), 
-			url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"), 
-			url("../../assets/fonts/AvenirLTStd-Heavy.ttf")  format("truetype");
-	font-style:   normal;
-	font-weight:  600;
-}
 
 // BORDER-BOX ALL THE THINGS! 
 // http://paulirish.com/2012/box-sizing-border-box-ftw/
@@ -47,8 +42,7 @@ h2 {
 	color: #2E3C44;
 	margin: 0 0 10px;
 	line-height: 1.2;
-	-webkit-font-smoothing: antialiased;
+	.font-smoothing();
-	-moz-osx-font-smoothing: grayscale;
 }
 h1 {
 	.font-size(64);
@@ -72,14 +66,33 @@ header {
 }
 a {
 	text-decoration: none;
-	color: #3498DB;
+	color: @link-color;
 	border-bottom: 1px solid currentColor;
-	transition: color .3s ease, border .3s ease;
+	transition: all .3s ease;
 
 	&:hover,
 	&:focus {
 		color: #000;
 	}
+	&:focus {
+		.tab-focus();
+	}
+}
+.btn {
+	display: inline-block;
+	padding: 10px 25px;
+	background: @link-color;
+	border: 0;
+	color: #fff;
+	.font-smoothing(on);
+	font-weight: 600;
+	border-radius: 3px;
+	
+	&:hover,
+	&:focus {
+		color: #fff;
+		background: darken(@link-color, 5%);
+	}
 }
 
 section {

assets/less/docs/fontface.less

@@ -0,0 +1,16 @@
+@font-face {
+	font-family: "Avenir";
+	src: 	url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"), 
+			url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"), 
+			url("../../assets/fonts/AvenirLTStd-Medium.ttf")  format("truetype");
+	font-style:   normal;
+	font-weight:  400;
+}
+@font-face {
+	font-family: "Avenir";
+	src: 	url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), 
+			url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"), 
+			url("../../assets/fonts/AvenirLTStd-Heavy.ttf")  format("truetype");
+	font-style:   normal;
+	font-weight:  600;
+}

assets/less/docs/mixins.less

@@ -3,6 +3,7 @@
 // ==========================================================================
 
 // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
+// ---------------------------------------
 .clearfix() {
 	zoom: 1;
 	&:before, 
@@ -11,6 +12,7 @@
 }
 
 // Webkit-style focus
+// ---------------------------------------
 .tab-focus() {
 	// Default
 	outline: thin dotted @gray-dark;
@@ -20,8 +22,20 @@
 }
 
 // Use rems for font sizing
+// ---------------------------------------
 .font-size(@font-size: 16){
 	@rem: (@font-size / 10);
 	font-size: @font-size * 1px;
 	font-size: ~"@{rem}rem";
 }
+
+// Font smoothing
+// ---------------------------------------
+.font-smoothing(@mode: on) when (@mode = on) {
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+.font-smoothing(@mode: on) when (@mode = off) {
+	-moz-osx-font-smoothing: auto;
+	-webkit-font-smoothing: subpixel-antialiased;
+}

dist/css/docs.css

@@ -1 +1 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:focus{outline:dotted thin}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;font-size:16px;font-size:1.6rem;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:64px;font-size:6.4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;font-size:14px;font-size:1.4rem}header{padding:60px 0;margin-bottom:20px}header p{font-size:18px;font-size:1.8rem}a{text-decoration:none;color:#3498DB;border-bottom:1px solid currentColor;transition:color .3s ease,border .3s ease}a:focus,a:hover{color:#000}section{padding-bottom:80px}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player:-webkit-full-screen,.example-video .player-fullscreen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-moz-full-screen,.example-video .player-fullscreen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-ms-fullscreen,.example-video .player-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:fullscreen,.example-video .player-fullscreen,.example-video .player:fullscreen{max-width:none}
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;font-size:16px;font-size:1.6rem;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:6.4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;font-size:14px;font-size:1.4rem}header{padding:60px 0;margin-bottom:20px}header p{font-size:18px;font-size:1.8rem}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 25px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}section{padding-bottom:80px}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player:-webkit-full-screen,.example-video .player-fullscreen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-moz-full-screen,.example-video .player-fullscreen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-ms-fullscreen,.example-video .player-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:fullscreen,.example-video .player-fullscreen,.example-video .player:fullscreen{max-width:none}

index.html

@@ -15,6 +15,7 @@
 		<header>
 			<h1>Plyr</h1>
 			<p>A simple HTML5 media player</p>
+			<a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on Github</a>
 		</header>
 
 		<section class="example-video">
@@ -35,6 +36,7 @@
 					</div>
 				</video>
 			</div>
+			<small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
 		</section>
 
 		<section class="example-audio">