Docs tweaks

5 files changed, 27 insertions, 20 deletions

diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less
index 13f0f2f9..c584b57e 100644
--- a/docs/src/less/components/base.less
+++ b/docs/src/less/components/base.less
@@ -16,7 +16,7 @@
 // Base
 html {
     height: 100%;
-    background: linear-gradient(#fff, @body-background) fixed;
+    background: @body-background fixed;
 }
 body {
     margin: 0;
diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
index ee1447b8..c99a0836 100644
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@@ -99,7 +99,7 @@ nav {
 // Buttons
 .btn {
 	padding: (@padding-base / 2) ((@padding-base / 2) + 2);
-	background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 3%));
+	background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%));
 	border: 1px solid @gray-light;
 	box-shadow: 0 1px 1px rgba(0,0,0, .05);
 	text-shadow: 0 1px 1px #fff;
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
index 776726cd..54e151e9 100644
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@@ -7,20 +7,25 @@ section {
     max-width: @example-width-video;
 }
 
-video,
-.plyr__video-embed {
-    max-width: 100%;
-    vertical-align: middle;
-}
-
 // Example players
 .plyr {
     margin: 0 auto;
-    border-radius: @border-radius-base;
+    border-radius: @border-radius-large;
 }
 .plyr--audio {
     max-width: @example-width-audio;
 }
+.plyr--video::after {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border: 1px solid fade(#000, 15%);
+    border-radius: inherit;
+}
 
 // Style full supported player
 .plyr__cite {
diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less
index f80e1f03..951be36d 100644
--- a/docs/src/less/components/type.less
+++ b/docs/src/less/components/type.less
@@ -19,14 +19,13 @@ body {
 h1,
 h2 {
     letter-spacing: -.025em;
-    color: #2E3C44;
+    color: @brand-primary;
     margin: 0 0 (@padding-base / 2);
     line-height: 1.2;
     font-weight: @font-weight-bold;
 }
 h1 {
     .font-size(@font-size-h1);
-    color: #3498DB;
 }
 
 // Paragraph and small
diff --git a/docs/src/less/variables.less b/docs/src/less/variables.less
index 4629d98d..4768cdd6 100644
--- a/docs/src/less/variables.less
+++ b/docs/src/less/variables.less
@@ -3,43 +3,46 @@
 // ==========================================================================
 
 // Colors
-@blue:                      #3498db;
 @gray-dark:                 #343f4a;
 @gray:                      #55646b;
 @gray-light:                #cbd0d3;
 @gray-lighter:              #dbe3e8;
 @off-white:                 #f2f5f7;
 
+@brand-primary:             #3498db;
+@brand-secondary:           #02BD9B;
+
 // Brands
 @color-twitter:             #4BAAF4;
 @color-youtube:             #cc181e;
 @color-vimeo:               #19b7ed;
 
 // Base
-@body-background: 			@off-white;
+@body-background:           @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary);
 
 // Type
 @font-size-base:            16;
 @font-size-small:           14;
 @font-size-h1:              64;
-@font-weight-base: 			500;
-@font-weight-bold: 			700;
+@font-weight-base:          500;
+@font-weight-bold:          700;
 
 // Elements
-@link-color:                @blue;
+@link-color:                @brand-primary;
 @padding-base:              20px;
 @arrow-size:                8px;
 
 // Icons
-@icon-size: 				18px;
+@icon-size:                 18px;
 
 // Breakpoints
 @screen-sm:                 480px;
 @screen-md:                 768px;
 
 // Radii
-@border-radius-base: 		4px;
+@border-radius-base:        4px;
+@border-radius-large:       6px;
 
 // Examples
-@example-width-audio: 		520px;
-@example-width-video: 		1200px;
+@example-width-audio:       520px;
+@example-width-video:       1200px;