Tidy up, fixing destroy

6 files changed, 150 insertions, 164 deletions

diff --git a/demo/src/js/main.js b/demo/src/js/main.js
index ee45d118..3d44b94f 100644
--- a/demo/src/js/main.js
+++ b/demo/src/js/main.js
@@ -185,6 +185,12 @@
 
         // Set active on parent
         toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true);
+
+        // Show cite
+        [].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) {
+            cite.setAttribute('hidden', '');
+        });
+        document.querySelector('.plyr__cite--' + type).removeAttribute('hidden');
     }
 })();
 
diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less
index 502196cf..7f71dbb4 100644
--- a/demo/src/less/components/base.less
+++ b/demo/src/less/components/base.less
@@ -2,10 +2,10 @@
 // Base layout
 // ==========================================================================
 
-// BORDER-BOX ALL THE THINGS! 
+// BORDER-BOX ALL THE THINGS!
 // http://paulirish.com/2012/box-sizing-border-box-ftw/
-*, *::after, *::before {  
-    box-sizing: border-box; 
+*, *::after, *::before {
+    box-sizing: border-box;
 }
 
 // Hidden
@@ -15,11 +15,11 @@
 
 // Base
 html {
-    height: 100%;
-    background: @body-background fixed;
+    background: @body-background;
 }
 body {
-    margin: 0;
+    max-width: @container-width;
+    margin: auto;
     padding: (@padding-base / 2);
 }
 
@@ -31,6 +31,7 @@ header {
     p {
         .font-size(18);
     }
+
     @media (min-width: @screen-sm) {
         padding-top: (@padding-base * 3);
         padding-bottom: (@padding-base * 3);
@@ -39,8 +40,7 @@ header {
 
 // Sections
 section {
-    max-width: @example-width-video;
-    margin: 0 auto @padding-base;
+    margin-bottom: @padding-base;
 
     @media (min-width: @screen-sm) {
         margin-bottom: (@padding-base * 2);
diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less
index c99a0836..23cc3e7f 100644
--- a/demo/src/less/components/buttons.less
+++ b/demo/src/less/components/buttons.less
@@ -3,170 +3,162 @@
 // ==========================================================================
 
 nav {
-	ul {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		font-size: 0;
-	}
-	li {
-		display: inline-block;
-		margin-top: (@padding-base / 2);
-		.font-size();
-		white-space: nowrap;
-	}
-	li + li {
-		margin-left: @padding-base;
-	}
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        font-size: 0;
+    }
+    li {
+        display: inline-block;
+        margin-top: (@padding-base / 2);
+        .font-size();
+        white-space: nowrap;
+    }
+    li + li {
+        margin-left: @padding-base;
+    }
 }
 
 // Tabs
 .btn__bar {
-	position: relative;
-	margin: 0 auto @padding-base;
-	max-width: @example-width-video;
-	white-space: nowrap;
-
-	&::before {
-		content: "";
-		position: absolute;
-		top: 50%;
-		left: 0;
-		right: 0;
-		height: 1px;
-		background: @gray-lighter;
-	}
-
-	ul {
-		position: relative;
-		z-index: 1;
-		display: inline-block;
-		user-select: none;
-	}
-	li {
-		margin: 0;
-
-		&:first-child .btn {
-			border-radius: 4px 0 0 4px;
-		}
-		&:last-child .btn {
-			border-radius: 0 4px 4px 0;
-		}
-		& + li .btn {
-			margin-left: -1px;
-		}
-
-		&.active .btn {
-			&:extend(.btn--primary);
-			box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
-			position: relative;
-			z-index: 1;
-
-			.icon {
-				color: inherit;
-			}
-		}
-		&.active + li .btn:hover {
-			z-index: 0;
-		}
-	}
-	.btn {
-		position: relative;
-		display: block;
-		border-radius: 0;
-
-		&:hover,
-		&:focus {
-			z-index: 1;
-		}
-	}
-
-	@media (min-width: 560px) {
-		margin-bottom: (@padding-base * 2);
-	}
+    position: relative;
+    margin: 0 auto @padding-base;
+    white-space: nowrap;
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: @off-white;
+    }
+
+    ul {
+        position: relative;
+        z-index: 1;
+        display: inline-block;
+    }
+    li {
+        margin: 0;
+
+        &:first-child .btn {
+            border-radius: 4px 0 0 4px;
+        }
+        &:last-child .btn {
+            border-radius: 0 4px 4px 0;
+        }
+        & + li .btn {
+            margin-left: -1px;
+        }
+
+        &.active .btn {
+            &:extend(.btn--primary);
+            position: relative;
+            z-index: 1;
+
+            .icon {
+                color: inherit;
+            }
+        }
+        &.active + li .btn:hover {
+            z-index: 0;
+        }
+    }
+    .btn {
+        position: relative;
+        display: block;
+        border-radius: 0;
+
+        &:hover,
+        &:focus {
+            z-index: 1;
+        }
+    }
+
+    @media (min-width: 560px) {
+        margin-bottom: (@padding-base * 2);
+    }
 }
 
 // Shared
 .btn,
 .btn__count {
-	display: inline-block;
-	vertical-align: middle;
-	border-radius: @border-radius-base;
-	user-select: none;
-	font-weight: @font-weight-bold;
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: @border-radius-base;
+    user-select: none;
+    font-weight: @font-weight-bold;
 }
 
 // Buttons
 .btn {
-	padding: (@padding-base / 2) ((@padding-base / 2) + 2);
-	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;
-	color: @gray;
-	transition: background .1s ease, color .1s ease;
-	.font-size(@font-size-small);
-
-	&:hover,
-	&:focus {
-		border-color: darken(@gray-light, 8%);
-		color: @gray;
-		outline: 0;
-	}
+    padding: (@padding-base / 2) ((@padding-base / 2) + 2);
+    background: #fff;
+    border: 1px solid @gray-lighter;
+    color: @gray;
+    transition: all .2s ease;
+    .font-size(@font-size-small);
+
+    &:hover,
+    &:focus {
+        border-color: @gray-light;
+    }
 }
 
 // Sizes
 .btn--large {
-	padding: (@padding-base / 2) @padding-base;
-	.font-size();
+    padding: (@padding-base / 2) @padding-base;
+    .font-size();
 }
 
 // Styles
 .btn--primary {
-	background-image: linear-gradient(@link-color, darken(@link-color, 5%));
-	background-color: @link-color;
-	border-color: darken(@link-color, 10%);
-	box-shadow: 0 1px 1px rgba(0,0,0, .15);
-	text-shadow: 0 1px 1px rgba(0,0,0, .1);
-	color: #fff;
-
-	&:hover,
-	&:focus {
-		color: #fff;
-		border-color: darken(@link-color, 20%);
-	}
+    @border-color: darken(@link-color, 5%);
+    background-image: linear-gradient(@link-color, @border-color);
+    background-color: @link-color;
+    border-color: @border-color;
+    color: #fff;
+
+    &:hover,
+    &:focus {
+        color: #fff;
+        border-color: darken(@border-color, 5%);
+    }
 }
 .btn--youtube .icon {
-	color: @color-youtube;
+    color: @color-youtube;
 }
 .btn--vimeo .icon {
-	color: @color-vimeo;
+    color: @color-vimeo;
 }
 .btn--twitter .icon {
-	color: @color-twitter;
+    color: @color-twitter;
 }
 
 // Count bubble
 .btn__count {
-	position: relative;
-	margin-left: (@padding-base / 2);
-	padding: (@padding-base / 2) (@padding-base * .75);
-	background: #fff;
-	border: 1px solid @gray-light;
-
-	&::before {
-		content: "";
-		position: absolute;
-		display: block;
-		width: @arrow-size;
-		height: @arrow-size;
-		left: 1px;
-		top: 50%;
-		margin-top: -(@arrow-size / 2);
-
-		background: inherit;
-		border: inherit;
-		border-width: 1px 0 0 1px;
-		transform: rotate(-45deg) translate(-50%, -50%);
-	}
+    position: relative;
+    margin-left: (@padding-base / 2);
+    padding: (@padding-base / 2) (@padding-base * .75);
+    background: #fff;
+    border: 1px solid @gray-lighter;
+
+    &::before {
+        content: "";
+        position: absolute;
+        display: block;
+        width: @arrow-size;
+        height: @arrow-size;
+        left: 1px;
+        top: 50%;
+        margin-top: -(@arrow-size / 2);
+
+        background: inherit;
+        border: inherit;
+        border-width: 1px 0 0 1px;
+        transform: rotate(-45deg) translate(-50%, -50%);
+    }
 }
diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/examples.less
index a9e72d21..ff22e37b 100644
--- a/demo/src/less/components/examples.less
+++ b/demo/src/less/components/examples.less
@@ -30,17 +30,5 @@ video {
 
 // Style full supported player
 .plyr__cite {
-    display: none;
     margin-top: @padding-base;
-
-    .icon {
-        margin-right: (@padding-base / 4);
-    }
-}
-
-.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
-.plyr--audio ~ ul .plyr__cite--audio,
-.plyr--youtube ~ ul .plyr__cite--youtube,
-.plyr--vimeo ~ ul .plyr__cite--vimeo {
-    display: block;
 }
diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less
index 951be36d..1f16161a 100644
--- a/demo/src/less/components/type.less
+++ b/demo/src/less/components/type.less
@@ -51,22 +51,22 @@ li {
 a {
     text-decoration: none;
     color: @link-color;
-    border-bottom: 1px dotted currentColor;
-    transition: background .3s ease, color .3s ease, border .3s ease;
+    transition: color .3s ease;
 
     &:hover,
     &:focus {
         color: @gray-dark;
-        border-bottom-color: rgba(0,0,0,0);
-    }
-    &:focus {
-        .tab-focus();
     }
     &.logo {
         border: 0;
     }
 }
 
+a:focus,
+button:focus {
+    .tab-focus();
+}
+
 .color--vimeo {
     color: @color-vimeo;
 }
diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less
index 4768cdd6..7f684ba1 100644
--- a/demo/src/less/variables.less
+++ b/demo/src/less/variables.less
@@ -9,7 +9,7 @@
 @gray-lighter:              #dbe3e8;
 @off-white:                 #f2f5f7;
 
-@brand-primary:             #3498db;
+@brand-primary:             #22b5ff;
 @brand-secondary:           #02BD9B;
 
 // Brands
@@ -18,7 +18,7 @@
 @color-vimeo:               #19b7ed;
 
 // Base
-@body-background:           @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary);
+@body-background:           #fff;
 
 // Type
 @font-size-base:            16;
@@ -45,4 +45,4 @@
 
 // Examples
 @example-width-audio:       520px;
-@example-width-video:       1200px;
+@container-width:       	800px;