Linting and minor changes

demo/index.html

@@ -117,7 +117,7 @@
        c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"
             />
         </svg>
-        <p>If you like Plyr, get the word out and
+        <p>If you think others would like Plyr,
             <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
                 target="_blank" data-shr-network="twitter">tweet it</a>
         </p>

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);
             }
         });
     });

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;
     }
 }

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;
     }
 }

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;
 }

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;

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);
 }