5 files changed, 31 insertions, 19 deletions
diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
index fef9af68..26c9fcd2 100644
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@@ -98,13 +98,14 @@ nav {
 
 // Buttons
 .btn {
-	padding: (@padding-base / 2) @padding-base;
+	padding: (@padding-base / 2) ((@padding-base / 2) + 2);
 	background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 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 {
@@ -112,16 +113,15 @@ nav {
 		color: @gray;
 		outline: 0;
 	}
-	&--youtube .icon {
-		color: @color-youtube;
-	}
-	&--vimeo .icon {
-		color: @color-vimeo;
-	}
-	&--twitter .icon {
-		color: @color-twitter;
-	}
 }
+
+// Sizes
+.btn--large {
+	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;
@@ -136,9 +136,14 @@ nav {
 		border-color: darken(@link-color, 20%);
 	}
 }
-.btn--small {
-	padding-top: ceil(@padding-base / 3);
-	padding-bottom: ceil(@padding-base / 3);
+.btn--youtube .icon {
+	color: @color-youtube;
+}
+.btn--vimeo .icon {
+	color: @color-vimeo;
+}
+.btn--twitter .icon {
+	color: @color-twitter;
 }
 
 // Count bubble
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
index 6dde9690..97d272d0 100644
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@@ -5,6 +5,8 @@
 video,
 .plyr__video-embed {
     border-radius: @border-radius-base;
+    max-width: 100%;
+    vertical-align: middle;
 }
 .plyr__video-embed {
     -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
diff --git a/docs/src/less/components/icons.less b/docs/src/less/components/icons.less
index 7bcc792e..9530b601 100644
--- a/docs/src/less/components/icons.less
+++ b/docs/src/less/components/icons.less
@@ -20,3 +20,7 @@ a .icon,
 .btn .icon {
 	margin-right: (@padding-base / 2);
 }
+.btn:not(.btn-large) .icon {
+	width: (@icon-size - 2);
+	height: (@icon-size - 2);
+}
diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less
index 854da12d..a040a022 100644
--- a/docs/src/less/components/type.less
+++ b/docs/src/less/components/type.less
@@ -12,7 +12,7 @@ h2 {
     .font-smoothing();
 }
 h1 {
-    .font-size(64);
+    .font-size(@font-size-h1);
     color: #3498DB;
 }
 
@@ -24,11 +24,7 @@ small {
 small {
     display: block;
     padding: 0 (@padding-base / 2);
-    .font-size(14);
-}
-sup {
-    vertical-align: 2px;
-    .font-size(9);
+    .font-size(@font-size-small);
 }
 
 // Lists
diff --git a/docs/src/less/variables.less b/docs/src/less/variables.less
index 097aa1f2..78c812d3 100644
--- a/docs/src/less/variables.less
+++ b/docs/src/less/variables.less
@@ -18,6 +18,11 @@
 // Base
 @body-background: 			@off-white;
 
+// Type
+@font-size-base:            16;
+@font-size-small:           14;
+@font-size-h1:              64;
+
 // Elements
 @link-color:                @blue;
 @padding-base:              20px;