6 files changed, 16 insertions, 40 deletions
diff --git a/demo/src/js/main.js b/demo/src/js/main.js
index 981f691a..bc2ea0aa 100644
--- a/demo/src/js/main.js
+++ b/demo/src/js/main.js
@@ -30,19 +30,7 @@
         captions: {
             defaultActive: true,
         },
-        controls: [
-            'play-large',
-            'play',
-            'progress',
-            'current-time',
-            'mute',
-            'volume',
-            'captions',
-            'settings',
-            'fullscreen',
-            'pip',
-            'airplay',
-        ],
+        controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'],
     });
 
     // Expose for testing
@@ -67,13 +55,7 @@
             newSource(type);
 
             if (historySupport) {
-                history.pushState(
-                    {
-                        type: type,
-                    },
-                    '',
-                    '#' + type
-                );
+                history.pushState({ type: type }, '', '#' + type);
             }
         });
     });
diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less
index ed605086..32b2570d 100644
--- a/demo/src/less/components/buttons.less
+++ b/demo/src/less/components/buttons.less
@@ -51,16 +51,14 @@
     &::before {
         content: '';
         position: absolute;
-        display: block;
-        width: @arrow-size;
-        height: @arrow-size;
-        left: 1px;
+        width: 0;
+        height: 0;
+        right: 100%;
         top: 50%;
-        margin-top: -(@arrow-size / 2);
+        transform: translateY(-50%);
 
-        background: inherit;
-        border: inherit;
-        border-width: 1px 0 0 1px;
-        transform: rotate(-45deg) translate(-50%, -50%);
+        border: @arrow-size solid transparent;
+        border-right-color: #fff;
+        border-left-width: 0;
     }
 }
diff --git a/demo/src/less/components/header.less b/demo/src/less/components/header.less
index 2b9104fc..0cdbfc57 100644
--- a/demo/src/less/components/header.less
+++ b/demo/src/less/components/header.less
@@ -3,22 +3,18 @@
 // ==========================================================================
 
 header {
-    padding: @spacing-base;
+    padding-bottom: @spacing-base;
     text-align: center;
 
     p {
         .font-size(@font-size-large);
-        margin-bottom: @spacing-base * 1.5;
-    }
-
-    @media @mq-sm {
-        padding-top: (@spacing-base * 3);
-        padding-bottom: (@spacing-base * 3);
+        margin-bottom: (@spacing-base * 1.5);
     }
 
     @media @mq-md {
         max-width: 400px;
         margin-right: (@spacing-base * 2);
+        padding-bottom: (@spacing-base * 2);
         text-align: left;
     }
 }
diff --git a/demo/src/less/layout/core.less b/demo/src/less/layout/core.less
index 3d3b15d2..dc177088 100644
--- a/demo/src/less/layout/core.less
+++ b/demo/src/less/layout/core.less
@@ -7,13 +7,13 @@ html {
     background-attachment: fixed;
 }
 
-html,
-body {
+html {
     height: 100%;
 }
 
 body {
     display: flex;
+    min-height: 100%;
     align-items: center;
     flex-direction: column;
 }
diff --git a/demo/src/less/settings/cosmetic.less b/demo/src/less/settings/cosmetic.less
index bae2572b..34f191fb 100644
--- a/demo/src/less/settings/cosmetic.less
+++ b/demo/src/less/settings/cosmetic.less
@@ -3,7 +3,7 @@
 // ==========================================================================
 
 // Button count arrow size
-@arrow-size: 8px;
+@arrow-size: 5px;
 
 // Radii
 @border-radius-base: 4px;
diff --git a/demo/src/less/type/headings.less b/demo/src/less/type/headings.less
index 7dfcfb0a..ee289ae0 100644
--- a/demo/src/less/type/headings.less
+++ b/demo/src/less/type/headings.less
@@ -4,7 +4,7 @@
 
 h1 {
     margin: 0 0 (@spacing-base / 2);
-    .font-size(@font-size-h1);
     font-weight: @font-weight-heavy;
     letter-spacing: @letter-spacing-headings;
+    .font-size(@font-size-h1);
 }